ayrisdevandClaude Sonnet 4.6
40b4434a7b
- Rename /news route to /blog across all pages, links, and sitemap - Fix hardcoded English text in Experiences, QuoteSection, and Footer by wiring all content through the TR/EN dictionaries - Clean up Footer: remove non-existent page links, add contact column - Update contact info: new phone numbers, bilgi@ email, No:71 address, Instagram @ayrisapart link - Add suppressHydrationWarning to <body> to silence browser-extension attribute mismatch errors - Add sizes prop to all fill-mode Next.js Image components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from "framer-motion"
|
||
import Image from "next/image"
|
||
import Link from "next/link"
|
||
|
||
export default function NewsClient({ lang, dict, posts }: { lang: string, dict: any, posts: any[] }) {
|
||
return (
|
||
<main className="bg-[#FAF7F0] min-h-screen">
|
||
{/* HEADER */}
|
||
<section className="pt-44 pb-20 px-6">
|
||
<div className="max-w-4xl mx-auto text-center space-y-10">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
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 }}
|
||
className="text-[#1A1A1A]/60 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed italic"
|
||
>
|
||
{dict.news_page.excerpt}
|
||
</motion.p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* POSTS GRID */}
|
||
<section className="pb-44 px-6 md:px-12 max-w-[1400px] mx-auto">
|
||
{posts.length > 0 ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-20">
|
||
{posts.map((post, idx) => (
|
||
<motion.div
|
||
key={post.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
className="group"
|
||
>
|
||
<Link href={`/${lang}/blog/${post.slug}`}>
|
||
<div className="aspect-[16/10] relative overflow-hidden rounded-[2px] shadow-sm bg-white">
|
||
{post.image && (
|
||
<Image
|
||
src={post.image}
|
||
alt={post.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 33vw"
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-8 space-y-4">
|
||
<div className="flex items-center space-x-4 text-[11px] font-bold tracking-[0.2em] uppercase text-[#1A1A1A]/40">
|
||
<span>{post.author}</span>
|
||
<span>•</span>
|
||
<span>{new Date(post.createdAt).toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-US')}</span>
|
||
</div>
|
||
|
||
<h2 className="text-3xl font-serif text-[#1A1A1A] group-hover:text-[#C88C4B] transition-colors leading-tight">
|
||
{post.title}
|
||
</h2>
|
||
|
||
<p className="text-[#1A1A1A]/60 text-base leading-relaxed line-clamp-2 italic">
|
||
{post.excerpt}
|
||
</p>
|
||
|
||
<div className="inline-flex items-center space-x-3 text-[12px] font-bold tracking-[0.3em] uppercase border-b border-[#1A1A1A] pb-1">
|
||
<span>{dict.news_page.read}</span>
|
||
<span className="text-lg">→</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-20">
|
||
<p className="text-[#1A1A1A]/40 italic">{lang === 'tr' ? 'Henüz yazı bulunmuyor.' : 'No stories found yet.'}</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</main>
|
||
)
|
||
}
|