fb

2026-04-19 17:23:31 +03:00
parent 9cad199125
commit 4f2188363a
122 changed files with 3215 additions and 116 deletions
--- a/app/[lang]/news/NewsClient.tsx
+++ b/app/[lang]/news/NewsClient.tsx
@@ -0,0 +1,120 @@
+'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>
+  )
+}