UI Fixes: News Ticker, loading text, and Events/Classifieds layouts
This commit is contained in:
parent
2dd32d02aa
commit
ec171bb2a2
@ -33,43 +33,58 @@ export default function ClasificadosPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="animate-fade-in">
|
||||
<section className="hero-section">
|
||||
<div className="hero-bg-gradient"></div>
|
||||
<h1 className="hero-title">
|
||||
Mercado de<br/>Clasificados
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
El primer portal transaccional de medios impulsado por inteligencia artificial.
|
||||
Compra, venta y servicios en tu comunidad al instante.
|
||||
</p>
|
||||
<button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
|
||||
Explorar Contenido
|
||||
</button>
|
||||
<main className="animate-fade-in relative min-h-screen">
|
||||
{/* Sci-Fi Hero Section */}
|
||||
<section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
|
||||
El primer portal transaccional de medios impulsado por inteligencia artificial.
|
||||
Compra, venta y servicios en tu comunidad al instante con total seguridad.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="noticias" className="news-section container">
|
||||
<div className="section-header">
|
||||
<section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div>
|
||||
<span className="section-subtitle">Avisos</span>
|
||||
<h2 className="section-title">Anuncios Recientes</h2>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<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>
|
||||
{/* Aquí se pueden poner filtros de categorias después */}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-400">
|
||||
<Loader2 size={40} className="animate-spin mb-4" />
|
||||
<p>Sincronizando información...</p>
|
||||
<div className="w-full py-40 flex flex-col items-center justify-center text-purple-500">
|
||||
<Loader2 size={50} className="animate-spin mb-6" />
|
||||
<p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
|
||||
</div>
|
||||
) : 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">
|
||||
<span className="text-4xl mb-4">📢</span>
|
||||
<h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3>
|
||||
<p>El portal ha sido instanciado, en espera de recepción por el bot.</p>
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
|
||||
<div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
|
||||
<Sparkles size={48} className="text-purple-500" />
|
||||
</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 className="news-grid">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{posts.map((post) => (
|
||||
<NewsCard
|
||||
key={post.$id}
|
||||
|
||||
@ -33,43 +33,58 @@ export default function EventosPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="animate-fade-in">
|
||||
<section className="hero-section">
|
||||
<div className="hero-bg-gradient"></div>
|
||||
<h1 className="hero-title">
|
||||
Eventos en tu<br/>Región
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
El primer portal transaccional de medios impulsado por inteligencia artificial.
|
||||
Los mejores eventos artísticos, culturales y sociales.
|
||||
</p>
|
||||
<button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
|
||||
Explorar Contenido
|
||||
</button>
|
||||
<main className="animate-fade-in relative min-h-screen">
|
||||
{/* Sci-Fi Hero Section */}
|
||||
<section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
|
||||
El primer portal transaccional de medios impulsado por inteligencia artificial.
|
||||
Los mejores eventos artísticos, culturales y sociales en un solo lugar.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="noticias" className="news-section container">
|
||||
<div className="section-header">
|
||||
<section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div>
|
||||
<span className="section-subtitle">Próximos</span>
|
||||
<h2 className="section-title">Agenda de Eventos</h2>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<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>
|
||||
{/* Aquí se pueden poner filtros de categorias después */}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center text-slate-400">
|
||||
<Loader2 size={40} className="animate-spin mb-4" />
|
||||
<p>Sincronizando información...</p>
|
||||
<div className="w-full py-40 flex flex-col items-center justify-center text-cyan-500">
|
||||
<Loader2 size={50} className="animate-spin mb-6" />
|
||||
<p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
|
||||
</div>
|
||||
) : 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">
|
||||
<span className="text-4xl mb-4">📅</span>
|
||||
<h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3>
|
||||
<p>El portal ha sido instanciado, en espera de recepción por el bot.</p>
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
|
||||
<div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
|
||||
<Calendar size={48} className="text-cyan-500" />
|
||||
</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 className="news-grid">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{posts.map((post) => (
|
||||
<NewsCard
|
||||
key={post.$id}
|
||||
|
||||
@ -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>
|
||||
<Loader2 size={60} className="relative animate-spin mb-6" />
|
||||
</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>
|
||||
) : 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">
|
||||
|
||||
@ -59,15 +59,15 @@ export default async function NewsTicker() {
|
||||
<Link
|
||||
href={`/post/${noticia.slug}`}
|
||||
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 && (
|
||||
// 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="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>
|
||||
{noticia.titulo.length > 50 ? noticia.titulo.substring(0, 50) + '...' : noticia.titulo}
|
||||
{!imgUrl && <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>}
|
||||
{noticia.titulo.length > 55 ? noticia.titulo.substring(0, 55) + '...' : noticia.titulo}
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user