mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
This commit is contained in:
+100
-23
@@ -33,57 +33,134 @@ const destaques = [
|
||||
},
|
||||
];
|
||||
|
||||
// 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>
|
||||
// {/* 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-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">
|
||||
<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">
|
||||
{/* 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-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-110 group-hover:opacity-70"
|
||||
className="object-cover transition duration-500 group-hover:scale-105"
|
||||
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" />
|
||||
<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>
|
||||
<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]">
|
||||
<h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-[11px] font-medium text-neutral-400">{item.date}</p>
|
||||
<p className="mt-1.5 text-xs font-medium text-neutral-500">{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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user