mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
@@ -184,102 +184,77 @@ export function TvoneDestaques() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function TvoneMainColumns() {
|
||||
return (
|
||||
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-10 lg:grid-cols-[1fr_340px]">
|
||||
<section>
|
||||
<h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Recentes</h2>
|
||||
<ul className="flex flex-col gap-6">
|
||||
{recentes.map((item) => (
|
||||
<li key={item.title} className="rounded-xl">
|
||||
<Link href="#" className="group flex items-start gap-4 p-1 transition rounded-xl">
|
||||
<div className="relative w-40 md:w-60 aspect-[16/9] rounded-xl">
|
||||
<Image
|
||||
src={item.img}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover rounded-xl"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className={`inline-block rounded px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${item.catBg}`}>
|
||||
<section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
|
||||
{/* SECTION HEADER */}
|
||||
<div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-5">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-neutral-900">Notícias Recentes</h2>
|
||||
<Link href="#" className="text-sm font-bold text-blue-600 hover:opacity-70 transition">
|
||||
Ver Histórico
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* TWO COLUMN GRID OF HORIZONTAL CARDS */}
|
||||
<div className="grid gap-x-10 gap-y-12 md:grid-cols-2">
|
||||
{recentes.map((item) => (
|
||||
<article key={item.title} className="group cursor-pointer">
|
||||
<Link href="#" className="flex flex-row items-start gap-5">
|
||||
|
||||
{/* 1. IMAGE SIDE (Fixed width on desktop) */}
|
||||
<div className="relative aspect-[16/9] w-32 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-lg sm:w-44 md:w-48 lg:w-56">
|
||||
<Image
|
||||
src={item.img}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover transition duration-700 group-hover:scale-110"
|
||||
sizes="(max-width: 768px) 128px, 224px"
|
||||
/>
|
||||
|
||||
{/* THE INTERNAL LABEL (Bottom Left) */}
|
||||
<div className="absolute bottom-2 left-2 z-10">
|
||||
<span className="rounded-lg bg-black/60 px-2 py-1 text-[9px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
|
||||
{item.cat}
|
||||
</span>
|
||||
<h3 className="mt-2 text-base text-sm font-bold leading-snug text-neutral-900 md:text-lg group-hover:text-[#0066cc] ">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-1 line-clamp-2 text-sm font-normal leading-relaxed text-neutral-600">{item.excerpt}</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">
|
||||
{item.byline} · {item.date}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="#"
|
||||
className="mt-8 flex w-full items-center justify-center rounded-xl bg-[#f5f5f7] py-3 text-sm font-medium text-neutral-800 transition hover:bg-neutral-200/80"
|
||||
>
|
||||
Ver todas as notícias
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
<aside className="flex flex-col gap-8">
|
||||
<div className="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2 border-b border-neutral-100 px-4 py-3">
|
||||
<svg className="h-5 w-5 text-neutral-800" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
<span className="text-sm font-semibold text-neutral-800">Apple Line</span>
|
||||
</div>
|
||||
<div className="relative aspect-[16/10] w-full">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80"
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="340px"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wide text-[#0066cc]">Bancos</span>
|
||||
<h3 className="mt-2 text-lg font-bold leading-snug text-neutral-900">
|
||||
BAI regista lucros acima das expectativas no último trimestre.
|
||||
</h3>
|
||||
<p className="mt-2 text-xs text-neutral-500">24 Mar 2025</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="mt-4 flex w-full items-center justify-center rounded-lg bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800"
|
||||
>
|
||||
Ver Página Apple Line
|
||||
{/* Subtle gradient for label contrast */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/40 to-transparent opacity-60" />
|
||||
</div>
|
||||
|
||||
{/* 2. TEXT SIDE (Fills remaining space) */}
|
||||
<div className="flex flex-1 flex-col">
|
||||
<h3 className="line-clamp-2 text-base font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] sm:text-lg lg:text-xl">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="mt-2 hidden line-clamp-2 text-sm leading-relaxed text-neutral-500 lg:block">
|
||||
{item.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="mt-auto pt-3 flex items-center gap-2 text-[11px] font-semibold text-neutral-400">
|
||||
<span className="text-neutral-900">{item.byline}</span>
|
||||
<span className="h-0.5 w-0.5 rounded-full bg-neutral-300" />
|
||||
<span>{item.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-4 text-xl font-bold tracking-tight text-neutral-900">A seguir</h3>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{aSeguir.map((item) => (
|
||||
<li key={item.title}>
|
||||
<Link href="#" className="group flex gap-3">
|
||||
<div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
||||
<Image src={item.img} alt="" fill className="object-cover" sizes="64px" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[15px] font-semibold leading-snug text-neutral-900 group-hover:text-[#0066cc] md:text-base">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">{item.date}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{/* LOAD MORE - CLEAN iOS BUTTON */}
|
||||
<div className="mt-16 flex justify-center">
|
||||
<button className="flex items-center gap-3 rounded-2xl bg-neutral-100 px-12 py-4 text-sm font-bold text-neutral-900 transition hover:bg-neutral-200 active:scale-95">
|
||||
Mais notícias recentes
|
||||
<svg className="h-4 w-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -364,15 +339,9 @@ export function TvoneFooter() {
|
||||
<Link href="#" aria-label="Instagram" className={`${footerSocialIconClass} rounded p-2`}>
|
||||
<IconInstagram className="h-[22px] w-[22px]" />
|
||||
</Link>
|
||||
<Link href="#" aria-label="LinkedIn" className={`${footerSocialIconClass} rounded p-2`}>
|
||||
<IconLinkedIn className="h-[22px] w-[22px]" />
|
||||
</Link>
|
||||
<Link href="#" aria-label="YouTube" className={`${footerSocialIconClass} rounded p-2`}>
|
||||
<IconYouTube className="h-[22px] w-[22px]" />
|
||||
</Link>
|
||||
<Link href="#" aria-label="X (Twitter)" className={`${footerSocialIconClass} rounded p-2`}>
|
||||
<IconX className="h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user