add button to see more

app/components/cultura.tsx

@@ -33,57 +33,134 @@ const destaques = [
     },
 ];
 
-export function TvoneDestaquesCultura() {
+// export function TvoneDestaquesCultura() {
-    return (
+//     return (
-      <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
+//       <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>
+//         <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">
+//         <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
-          {destaques.map((item, index) => (
+//           {destaques.map((item, index) => (
-            <article
+//             <article
-              key={index}
+//               key={index}
-              className="group cursor-pointer bg-white transition"
+//               className="group cursor-pointer bg-white transition"
-            >
+//             >
-              <Link href="#" className="block">
+//               <Link href="#" className="block">
-                {/* VIDEO CONTAINER */}
+//                 {/* 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">
+//                 <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
+//                   <Image
-                    src={item.img}
+//                     src={item.img}
-                    alt=""
+//                     alt=""
-                    fill
+//                     fill
-                    className="object-cover transition duration-500 group-hover:scale-110 group-hover:opacity-70"
+//                     className="object-cover transition duration-500 group-hover:scale-110 group-hover:opacity-70"
-                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+//                     sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-                  />
+//                   />
                   
-                  {/* OVERLAY: REPLAY STYLE (iOS/EURO) */}
+//                   {/* 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="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">
+//                     <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">
+//                       <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" />
+//                         <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>
+//                       </svg>
-                    </div>
+//                     </div>
-                    <span className="mt-2 text-[10px] font-bold uppercase tracking-widest text-white">Replay</span>
+//                     <span className="mt-2 text-[10px] font-bold uppercase tracking-widest text-white">Replay</span>
-                  </div>
+//                   </div>
 
-                  {/* BOTTOM REPLICA TAG (Optional, Euro Style) */}
+//                   {/* 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">
+//                   <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
+//                     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>
+//           {/* iOS STYLE "SEE MORE" BUTTON */}
+//           <div className="mt-10 flex justify-center">
+//           <Link 
+//               href="/cultura" 
+//               className="inline-flex items-center justify-center rounded-full bg-neutral-100 px-8 py-3 text-sm font-semibold text-neutral-900 transition-all hover:bg-neutral-200 active:scale-95"
+//           >
+//               Ver mais notícias de Cultura
+//               <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+//                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+//               </svg>
+//           </Link>
+//         </div>
+//       </section>
+//     );
+// }
+
+
+
+export function TvoneDestaquesCultura() {
+  return (
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
+      <div className="mb-8 flex items-end justify-between">
+          <h2 className="text-3xl font-bold tracking-tight text-neutral-900">Cultura</h2>
+          {/* Optional secondary link style for iOS */}
+          <Link href="/cultura" className="hidden text-sm font-medium text-blue-600 hover:underline md:block">
+              Explorar tudo
+          </Link>
+      </div>
+
+      <div className="grid gap-6 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">
+              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-100 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-105"
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                />
+                
+                <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10 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/30 backdrop-blur-md border border-white/40">
+                    <svg className="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.841z" />
+                    </svg>
                   </div>
                 </div>
+              </div>
 
-                {/* TEXT CONTENT */}
+              <div className="py-4">
-                <div className="py-4">
+                <h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
-                  {/* <p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wider ${item.catColor}`}>
+                  {item.title}
-                    {item.cat}
+                </h3>
-                  </p> */}
+                <p className="mt-1.5 text-xs font-medium text-neutral-500">{item.date}</p>
-                  <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
+              </div>
-                    {item.title}
+            </Link>
-                  </h3>
+          </article>
-                  <p className="mt-2 text-[11px] font-medium text-neutral-400">{item.date}</p>
+        ))}
-                </div>
+      </div>
-              </Link>
+
-            </article>
+      {/* iOS STYLE "SEE MORE" BUTTON */}
-          ))}
+      <div className="mt-10 flex justify-center">
-        </div>
+          <Link 
-      </section>
+              href="/cultura" 
-    );
+              className="inline-flex items-center justify-center rounded-full bg-neutral-100 px-8 py-3 text-sm font-semibold text-neutral-900 transition-all hover:bg-neutral-200 active:scale-95"
+          >
+              Ver mais notícias de Cultura
+              <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+              </svg>
+          </Link>
+      </div>
+    </section>
+  );
 }