add galary

2026-04-18 15:27:52 +00:00 · 2026-04-05 15:48:33 +01:00
parent 6bce9ada4f
commit 9996f1051c
2 changed files with 91 additions and 0 deletions
@@ -0,0 +1,89 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const destaques = [
+    {
+      cat: "FAMOSOS",
+      catColor: "text-pink-600",
+      title: "Cerimónia reúne estrelas nacionais e internacionais em Lisboa.",
+      date: "24 Mar 2025",
+      // High-quality video-style thumbnail
+      img: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80",
+    },
+    {
+      cat: "NEGÓCIOS",
+      catColor: "text-[#0066cc]",
+      title: "Mercados reagem às novas projeções de crescimento para a região.",
+      date: "24 Mar 2025",
+      img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
+    },
+    {
+      cat: "DESPORTO",
+      catColor: "text-emerald-600",
+      title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
+      date: "23 Mar 2025",
+      img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=800&q=80",
+    },
+    {
+        cat: "NEGÓCIOS",
+        catColor: "text-[#0066cc]",
+        title: "Mercados reagem às novas projeções de crescimento para a região.",
+        date: "24 Mar 2025",
+        img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
+    },
+];
+
+export function TvoneDestaquesCultura() {
+    return (
+      <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
+        <h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900">Cultura</h2>
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {destaques.map((item, index) => (
+            <article
+              key={index}
+              className="group cursor-pointer bg-white transition"
+            >
+              <Link href="#" className="block">
+                {/* VIDEO CONTAINER */}
+                <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-900 shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:shadow-neutral-200">
+                  <Image
+                    src={item.img}
+                    alt=""
+                    fill
+                    className="object-cover transition duration-500 group-hover:scale-110 group-hover:opacity-70"
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                  />
+                  
+                  {/* OVERLAY: REPLAY STYLE (iOS/EURO) */}
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30">
+                      <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                    </div>
+                    <span className="mt-2 text-[10px] font-bold uppercase tracking-widest text-white">Replay</span>
+                  </div>
+
+                  {/* BOTTOM REPLICA TAG (Optional, Euro Style) */}
+                  <div className="absolute bottom-2 left-2 rounded bg-black/60 px-1.5 py-0.5 text-[9px] font-bold text-white uppercase tracking-tighter">
+                    Replica
+                  </div>
+                </div>
+
+                {/* TEXT CONTENT */}
+                <div className="py-4">
+                  <p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wider ${item.catColor}`}>
+                    {item.cat}
+                  </p>
+                  <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
+                    {item.title}
+                  </h3>
+                  <p className="mt-2 text-[11px] font-medium text-neutral-400">{item.date}</p>
+                </div>
+              </Link>
+            </article>
+          ))}
+        </div>
+      </section>
+    );
+}