carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Fixes: News Ticker, loading text, and Events/Classifieds layouts

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-03-26 09:23:55 -05:00
parent 2dd32d02aa
commit ec171bb2a2
4 changed files with 87 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/clasificados/page.tsx
View File

@ -33,43 +33,58 @@ export default function ClasificadosPage() {
}, []); }, []);
return ( return (
<main className="animate-fade-in"> <main className="animate-fade-in relative min-h-screen">
<section className="hero-section"> {/* Sci-Fi Hero Section */}
<div className="hero-bg-gradient"></div> <section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
<h1 className="hero-title"> <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px] mix-blend-screen pointer-events-none"></div>
Mercado de<br/>Clasificados
<div className="relative z-10 flex flex-col items-center max-w-4xl mx-auto">
<h1 className="text-5xl md:text-7xl font-outfit font-black tracking-tighter mb-6 leading-tight">
MERCADO DE<br/>
<span className="holographic-text block mt-2">CLASIFICADOS</span>
</h1> </h1>
<p className="hero-subtitle">
<p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
El primer portal transaccional de medios impulsado por inteligencia artificial. El primer portal transaccional de medios impulsado por inteligencia artificial.
Compra, venta y servicios en tu comunidad al instante. Compra, venta y servicios en tu comunidad al instante con total seguridad.
</p> </p>
<button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
Explorar Contenido <button
onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}
className="group relative inline-flex items-center justify-center gap-3 px-8 py-3 rounded-full font-bold text-white overflow-hidden transition-all hover:scale-105"
>
<div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-90 group-hover:opacity-100 transition-opacity"></div>
<span className="relative z-10 tracking-widest uppercase text-sm">Explorar Mercado</span>
</button> </button>
</div>
</section> </section>
<section id="noticias" className="news-section container"> <section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
<div className="section-header"> <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div> <div>
<span className="section-subtitle">Avisos</span> <div className="flex items-center gap-3 mb-2">
<h2 className="section-title">Anuncios Recientes</h2> <div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
<span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
</div>
<h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
</div> </div>
{/* Aquí se pueden poner filtros de categorias después */}
</div> </div>
{isLoading ? ( {isLoading ? (
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-400"> <div className="w-full py-40 flex flex-col items-center justify-center text-purple-500">
<Loader2 size={40} className="animate-spin mb-4" /> <Loader2 size={50} className="animate-spin mb-6" />
<p>Sincronizando información...</p> <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
</div> </div>
) : posts.length === 0 ? ( ) : posts.length === 0 ? (
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-500 border border-slate-800 rounded-2xl bg-slate-900/50"> <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
<span className="text-4xl mb-4">📢</span> <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
<h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3> <Sparkles size={48} className="text-purple-500" />
<p>El portal ha sido instanciado, en espera de recepción por el bot.</p> </div>
<h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
<p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
</div> </div>
) : ( ) : (
<div className="news-grid"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{posts.map((post) => ( {posts.map((post) => (
<NewsCard <NewsCard
key={post.$id} key={post.$id}

59
src/app/eventos/page.tsx
View File

@ -33,43 +33,58 @@ export default function EventosPage() {
}, []); }, []);
return ( return (
<main className="animate-fade-in"> <main className="animate-fade-in relative min-h-screen">
<section className="hero-section"> {/* Sci-Fi Hero Section */}
<div className="hero-bg-gradient"></div> <section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
<h1 className="hero-title"> <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] mix-blend-screen pointer-events-none"></div>
Eventos en tu<br/>Región
<div className="relative z-10 flex flex-col items-center max-w-4xl mx-auto">
<h1 className="text-5xl md:text-7xl font-outfit font-black tracking-tighter mb-6 leading-tight">
EVENTOS EN TU<br/>
<span className="holographic-text block mt-2">REGIÓN</span>
</h1> </h1>
<p className="hero-subtitle">
<p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
El primer portal transaccional de medios impulsado por inteligencia artificial. El primer portal transaccional de medios impulsado por inteligencia artificial.
Los mejores eventos artísticos, culturales y sociales. Los mejores eventos artísticos, culturales y sociales en un solo lugar.
</p> </p>
<button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
Explorar Contenido <button
onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}
className="group relative inline-flex items-center justify-center gap-3 px-8 py-3 rounded-full font-bold text-white overflow-hidden transition-all hover:scale-105"
>
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 opacity-90 group-hover:opacity-100 transition-opacity"></div>
<span className="relative z-10 tracking-widest uppercase text-sm">Explorar Agenda</span>
</button> </button>
</div>
</section> </section>
<section id="noticias" className="news-section container"> <section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
<div className="section-header"> <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div> <div>
<span className="section-subtitle">Próximos</span> <div className="flex items-center gap-3 mb-2">
<h2 className="section-title">Agenda de Eventos</h2> <div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-blue-600 rounded-full"></div>
<span className="text-cyan-400 font-bold tracking-widest uppercase text-sm">Próximos</span>
</div>
<h2 className="text-4xl font-outfit font-black text-white">Agenda de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Eventos</span></h2>
</div> </div>
{/* Aquí se pueden poner filtros de categorias después */}
</div> </div>
{isLoading ? ( {isLoading ? (
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-400"> <div className="w-full py-40 flex flex-col items-center justify-center text-cyan-500">
<Loader2 size={40} className="animate-spin mb-4" /> <Loader2 size={50} className="animate-spin mb-6" />
<p>Sincronizando información...</p> <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
</div> </div>
) : posts.length === 0 ? ( ) : posts.length === 0 ? (
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-500 border border-slate-800 rounded-2xl bg-slate-900/50"> <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
<span className="text-4xl mb-4">📅</span> <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
<h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3> <Calendar size={48} className="text-cyan-500" />
<p>El portal ha sido instanciado, en espera de recepción por el bot.</p> </div>
<h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Eventos Próximos</h3>
<p className="text-slate-400 relative z-10">El portal se encuentra a la espera de nuevas programaciones en la región.</p>
</div> </div>
) : ( ) : (
<div className="news-grid"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{posts.map((post) => ( {posts.map((post) => (
<NewsCard <NewsCard
key={post.$id} key={post.$id}

2
src/app/page.tsx
View File

@ -94,7 +94,7 @@ export default function Home() {
<div className="absolute inset-0 bg-cyan-500 blur-xl opacity-40 animate-pulse rounded-full"></div> <div className="absolute inset-0 bg-cyan-500 blur-xl opacity-40 animate-pulse rounded-full"></div>
<Loader2 size={60} className="relative animate-spin mb-6" /> <Loader2 size={60} className="relative animate-spin mb-6" />
</div> </div>
<p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Data...</p> <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
</div> </div>
) : posts.length === 0 ? ( ) : posts.length === 0 ? (
<div className="w-full py-32 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden"> <div className="w-full py-32 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">

8
src/components/NewsTicker.tsx
View File

@ -59,15 +59,15 @@ export default async function NewsTicker() {
<Link <Link
href={`/post/${noticia.slug}`} href={`/post/${noticia.slug}`}
key={idx} key={idx}
className="flex items-center gap-3 mx-6 group cursor-pointer border-r border-cyan-800/50 pr-6" className="flex items-center gap-4 mx-8 group cursor-pointer border-r border-cyan-800/50 pr-8"
> >
{imgUrl && ( {imgUrl && (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img src={imgUrl} alt={noticia.titulo} className="w-8 h-8 object-cover rounded shadow-md group-hover:scale-110 transition-transform" /> <img src={imgUrl} alt={noticia.titulo} className="w-10 h-10 object-cover rounded-lg shadow-[0_0_10px_rgba(6,182,212,0.3)] group-hover:scale-110 group-hover:shadow-[0_0_15px_rgba(6,182,212,0.5)] transition-all duration-300 border border-white/10" />
)} )}
<span className="text-sm font-bold text-slate-300 group-hover:text-cyan-400 transition-colors uppercase tracking-widest flex items-center gap-2"> <span className="text-sm font-bold text-slate-300 group-hover:text-cyan-400 transition-colors uppercase tracking-widest flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span> {!imgUrl && <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>}
{noticia.titulo.length > 50 ? noticia.titulo.substring(0, 50) + '...' : noticia.titulo} {noticia.titulo.length > 55 ? noticia.titulo.substring(0, 55) + '...' : noticia.titulo}
</span> </span>
</Link> </Link>
) )