109 lines
7.1 KiB
TypeScript
109 lines
7.1 KiB
TypeScript
import { cookies } from 'next/headers'
|
|
import { redirect } from 'next/navigation'
|
|
import { LogoutButton } from '@/components/logout-button'
|
|
import { ArrowLeft, BookOpen, Clock, Tag, ExternalLink, Search } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import articles from './articles.json'
|
|
|
|
export default async function ArtikelStuntingPage() {
|
|
const cookieStore = await cookies()
|
|
const sessionCookie = cookieStore.get('user_session')
|
|
if (!sessionCookie) redirect('/')
|
|
|
|
const session = JSON.parse(sessionCookie.value)
|
|
if (session.role !== 'user') redirect('/dashboard')
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-black flex flex-col">
|
|
{/* Header */}
|
|
<header className="flex justify-between items-center px-8 py-6 border-b border-gray-100">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/user-dashboard" className="group flex items-center gap-2 text-sm font-bold hover:text-gray-600 transition-colors">
|
|
<div className="p-2 rounded-full border border-black flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all">
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</div>
|
|
<span className="hidden md:block">Kembali</span>
|
|
</Link>
|
|
<div className="h-8 w-px bg-gray-200 mx-2 hidden md:block"></div>
|
|
<div className="flex flex-col justify-center">
|
|
<h1 className="text-xl font-bold leading-none text-purple-600">Edukasi Stunting</h1>
|
|
<p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">INFORMASI TERPERCAYA</p>
|
|
</div>
|
|
</div>
|
|
<LogoutButton />
|
|
</header>
|
|
|
|
<main className="p-8 max-w-6xl mx-auto flex-1 w-full flex flex-col gap-10">
|
|
{/* Hero Section */}
|
|
<div className="relative bg-black rounded-[40px] p-10 md:p-16 overflow-hidden text-white shadow-[20px_20px_0px_0px_rgba(147,51,234,0.1)]">
|
|
<div className="relative z-10 max-w-2xl">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 rounded-full text-[10px] font-black uppercase tracking-widest mb-6 border border-purple-400">
|
|
Pencegahan Stunting
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-black mb-6 leading-tight uppercase">
|
|
Cegah Stunting <br /> <span className="text-purple-400">Mulai dari Sekarang</span>
|
|
</h2>
|
|
<p className="text-gray-400 text-lg font-medium leading-relaxed mb-8">
|
|
Kumpulan informasi dan panduan teruji dari para ahli untuk membantu Bapak/Ibu memastikan tumbuh kembang optimal sang buah hati.
|
|
</p>
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-2xl">
|
|
<BookOpen className="w-5 h-5 text-purple-400" />
|
|
<span className="text-sm font-bold">{articles.length} Artikel Terpilih</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-2xl">
|
|
<Clock className="w-5 h-5 text-purple-400" />
|
|
<span className="text-sm font-bold">Update Berkala</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Background Elements */}
|
|
<div className="absolute top-0 right-0 w-1/2 h-full hidden lg:block opacity-20">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-600 rounded-full blur-[120px]"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
|
|
{articles.map((article) => (
|
|
<div key={article.id} className="group bg-white rounded-3xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all overflow-hidden flex flex-col h-full">
|
|
<div className="p-8 flex-1 flex flex-col gap-6">
|
|
<div className="flex justify-between items-start">
|
|
<div className="px-3 py-1 bg-purple-50 text-purple-600 border border-purple-100 rounded-full text-[10px] font-black uppercase tracking-widest flex items-center gap-1.5">
|
|
<Tag className="w-3 h-3" />
|
|
{article.category}
|
|
</div>
|
|
<div className="text-[10px] font-bold text-gray-400 flex items-center gap-1.5 uppercase tracking-tighter">
|
|
<Clock className="w-3 h-3" />
|
|
{article.readTime} Baca
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<h3 className="text-2xl font-black text-gray-900 group-hover:text-purple-600 transition-colors uppercase leading-tight">
|
|
{article.title}
|
|
</h3>
|
|
<p className="text-gray-500 font-semibold text-sm leading-relaxed line-clamp-3">
|
|
{article.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="px-8 py-6 bg-gray-50 border-t-2 border-black flex justify-between items-center group-hover:bg-purple-600 transition-colors">
|
|
<span className="text-[10px] font-black text-gray-400 group-hover:text-white/80 uppercase tracking-widest">SUMBER: {article.source}</span>
|
|
<a
|
|
href={article.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-xl text-xs font-black shadow-[3px_3px_0px_0px_rgba(147,51,234,0.5)] hover:shadow-none transition-all group-hover:bg-white group-hover:text-purple-600 group-hover:shadow-none"
|
|
>
|
|
BACA LENGKAP
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|