134 lines
7.3 KiB
TypeScript
134 lines
7.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { databases, APPWRITE_ALMEIRA_CONFIG, Query } from '@/lib/appwrite';
|
|
import { NewsCard } from '@/components/NewsCard';
|
|
import { GlobalSidebar } from '@/components/AdWrappers';
|
|
import { Loader2, RadioTower, Sparkles, ChevronDown } from 'lucide-react';
|
|
|
|
export default function Home() {
|
|
const [posts, setPosts] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchLatestPosts = async () => {
|
|
try {
|
|
const response = await databases.listDocuments(
|
|
APPWRITE_ALMEIRA_CONFIG.databaseId,
|
|
APPWRITE_ALMEIRA_CONFIG.collections.posts,
|
|
[
|
|
Query.equal('tipo', 'noticia'),
|
|
Query.orderDesc('$createdAt'),
|
|
Query.limit(6)
|
|
]
|
|
);
|
|
setPosts(response.documents);
|
|
} catch (error) {
|
|
console.error("Error fetching posts:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchLatestPosts();
|
|
}, []);
|
|
|
|
return (
|
|
<main className="animate-fade-in relative">
|
|
{/* Sci-Fi Hero Section */}
|
|
<section className="relative flex flex-col items-center justify-center min-h-screen text-center px-4 overflow-hidden mesh-bg">
|
|
{/* Dynamic Orbs background */}
|
|
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/20 rounded-full blur-[120px] mix-blend-screen pointer-events-none animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 w-[600px] h-[600px] bg-purple-600/20 rounded-full blur-[150px] mix-blend-screen pointer-events-none animate-float"></div>
|
|
|
|
<div className="relative z-10 flex flex-col items-center max-w-5xl mx-auto">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 border border-cyan-500/30 rounded-full bg-cyan-500/10 text-cyan-300 text-sm font-semibold mb-8 animate-float shadow-[0_0_20px_rgba(6,182,212,0.2)] backdrop-blur-md">
|
|
<RadioTower size={16} className="animate-pulse" />
|
|
<span className="tracking-widest uppercase">Señal En Vivo 24/7</span>
|
|
</div>
|
|
|
|
<h1 className="text-6xl md:text-8xl font-outfit font-black tracking-tighter mb-6 leading-[1.1]">
|
|
NOTICIAS AL <br/>
|
|
<span className="holographic-text block mt-2">SIGUIENTE NIVEL</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mb-12 font-medium leading-relaxed">
|
|
El primer portal transaccional hiperconectado. Sumérgete en la actualidad de la región en tiempo real con una interfaz sin precedentes.
|
|
</p>
|
|
|
|
<button
|
|
onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}
|
|
className="group relative inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-bold text-white text-lg 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>
|
|
<div className="absolute -inset-1 bg-cyan-400 blur-xl opacity-40 group-hover:opacity-70 transition-opacity rounded-full animate-pulse"></div>
|
|
<Sparkles size={20} className="relative z-10" />
|
|
<span className="relative z-10 tracking-wide">EXPLORAR CONTENIDO</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-slate-500 animate-bounce cursor-pointer hover:text-cyan-400 transition-colors" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
|
|
<span className="text-xs font-bold uppercase tracking-widest">Descubrir</span>
|
|
<ChevronDown size={24} className="text-cyan-500" />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feed Section */}
|
|
<section id="noticias" className="container mx-auto px-4 py-24 relative z-10 w-full">
|
|
<div className="flex flex-col lg:flex-row gap-8 w-full items-start">
|
|
<div className="flex-1 w-full relative">
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
|
<div>
|
|
<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">Último Minuto</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-outfit font-black text-white">Feed de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Noticias</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="w-full py-40 flex flex-col items-center justify-center text-cyan-500">
|
|
<div className="relative">
|
|
<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 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">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent"></div>
|
|
<div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 shadow-[0_0_40px_rgba(6,182,212,0.15)] relative z-10">
|
|
<RadioTower size={48} className="text-cyan-500" />
|
|
</div>
|
|
<h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Conexión Reciente</h3>
|
|
<p className="text-slate-400 relative z-10">El portal se encuentra a la espera de señales desde el núcleo central.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{posts.map((post) => (
|
|
<NewsCard
|
|
key={post.$id}
|
|
id={post.$id}
|
|
slug={post.slug || post.$id}
|
|
titulo={post.titulo}
|
|
resumen={post.resumen_redes || post.contenido?.substring(0, 100) + '...'}
|
|
tipo={post.tipo}
|
|
fecha={post.fecha_publicacion || post.$createdAt}
|
|
imagenUrl={post.imagen_destacada_id || post.og_image_url}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<aside className="w-full lg:w-[320px] xl:w-[360px] shrink-0 mt-8 lg:mt-0 sticky top-24">
|
|
<GlobalSidebar />
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|