peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 15:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add label to destaque

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-06 14:43:30 +01:00
parent 822eddd2ee
commit f6bea75cc4
2 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/tvone-content.tsx
+19 -8
View File
@@ -136,7 +136,9 @@ const aSeguir = [
export function TvoneDestaques() {
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 md:text-2xl">Destaques</h2>
<h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900">
Destaques
</h2>
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{destaques.map((item) => (
<article
@@ -144,7 +146,7 @@ export function TvoneDestaques() {
className="group cursor-pointer bg-white transition"
>
<Link href="#" className="block">
{/* VIDEO THUMBNAIL CONTAINER */}
{/* IMAGE 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}
@@ -153,17 +155,26 @@ export function TvoneDestaques() {
className="object-cover transition duration-500 group-hover:scale-110"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
/>
{/* GRADIENT OVERLAY (For readability) */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-80" />
{/* NEW INTERNAL LABEL */}
<div className="absolute bottom-3 left-3 z-10">
<span className="rounded-lg bg-black/50 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
{item.cat}
</span>
</div>
</div>
{/* TEXT CONTENT */}
{/* TEXT CONTENT (Simplified) */}
<div className="py-4">
<p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wide ${item.catColor}`}>
{item.cat}
</p>
<h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 group-hover:text-[#0066cc] md:text-lg">
<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-xs text-neutral-500">{item.date}</p>
<div className="mt-2 flex items-center gap-2">
<p className="text-[11px] font-medium text-neutral-400">{item.date}</p>
</div>
</div>
</Link>
</article>
app/components/tvone-hero.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function TvoneHero() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent" />
<div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10">
<span className="mb-2 inline-flex w-fit bg-[#7c3aed] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">
<span className="mb-2 inline-flex w-fit px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide bg-blue-600 text-white">
{slide.tag}
</span>
<h1 className="max-w-3xl text-balance text-2xl font-bold leading-tight text-white md:text-3xl lg:text-4xl">