121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from "framer-motion"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { Calendar, ArrowRight } from 'lucide-react'
|
|
|
|
|
|
export default function NewsClient({ lang, dict }: { lang: string, dict: any }) {
|
|
const newsItems = [
|
|
{
|
|
id: 'hidden-gems-oren',
|
|
title: dict.news_page.list.n1.title,
|
|
excerpt: dict.news_page.list.n1.excerpt,
|
|
image: 'https://images.unsplash.com/photo-1544124499-58912cbddaad?q=80&w=2127&auto=format&fit=crop',
|
|
date: 'April 15, 2026',
|
|
author: dict.news_page.list.n1.author
|
|
},
|
|
{
|
|
id: 'summer-cocktails-retreat',
|
|
title: dict.news_page.list.n2.title,
|
|
excerpt: dict.news_page.list.n2.excerpt,
|
|
image: 'https://images.unsplash.com/photo-1519046904884-53103b34b206?q=80&w=2073&auto=format&fit=crop',
|
|
date: 'April 10, 2026',
|
|
author: dict.news_page.list.n2.author
|
|
},
|
|
{
|
|
id: 'luxury-interior-trends',
|
|
title: dict.news_page.list.n3.title,
|
|
excerpt: dict.news_page.list.n3.excerpt,
|
|
image: 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=1964&auto=format&fit=crop',
|
|
date: 'April 05, 2026',
|
|
author: dict.news_page.list.n3.author
|
|
}
|
|
]
|
|
|
|
return (
|
|
<main className="bg-[#FAF7F0] min-h-screen">
|
|
|
|
|
|
{/* HEADER SECTION */}
|
|
<section className="pt-44 pb-24 px-6">
|
|
<div className="max-w-5xl mx-auto text-center space-y-10">
|
|
<motion.h1
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1 }}
|
|
className="text-7xl md:text-[120px] font-serif text-[#1A1A1A] leading-[0.9] tracking-tight uppercase"
|
|
>
|
|
{dict.news_page.title}
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="text-[#1A1A1A]/70 text-lg md:text-xl max-w-3xl mx-auto font-medium leading-relaxed italic"
|
|
>
|
|
{dict.news_page.subtitle}
|
|
</motion.p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ARTICLES GRID SECTION */}
|
|
<section className="pb-44 px-6 md:px-12 max-w-[1400px] mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
{newsItems.map((article, idx) => (
|
|
<motion.div
|
|
key={article.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: idx * 0.15 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Link href={`/${lang}/news/${article.id}`}>
|
|
<div className="space-y-8">
|
|
{/* Image Card */}
|
|
<div className="aspect-[4/5] relative overflow-hidden rounded-[2px] shadow-sm">
|
|
<Image
|
|
src={article.image}
|
|
alt={article.title}
|
|
fill
|
|
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500" />
|
|
</div>
|
|
|
|
{/* Metadata and Title */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-6 text-[11px] font-bold tracking-[0.3em] uppercase text-[#1A1A1A]/40 mb-2">
|
|
<span className="flex items-center space-x-2">
|
|
<Calendar size={14} className="opacity-50" />
|
|
<span>{article.date}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl md:text-4xl font-serif text-[#1A1A1A] leading-tight group-hover:text-[#C88C4B] transition-colors duration-300">
|
|
{article.title}
|
|
</h2>
|
|
|
|
<p className="text-[#1A1A1A]/60 text-lg leading-relaxed italic line-clamp-2">
|
|
{article.excerpt}
|
|
</p>
|
|
|
|
<div className="inline-flex items-center space-x-2 text-[12px] font-bold tracking-widest uppercase text-[#1A1A1A] pt-2 border-b-2 border-transparent group-hover:border-[#C88C4B] transition-all pb-1">
|
|
<span>{dict.news_page.read}</span>
|
|
<ArrowRight size={16} className="transform group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
)
|
|
}
|