fix

2026-04-18 15:27:52 +00:00 · 2026-04-06 15:40:50 +01:00
parent f6bea75cc4
commit 6a239557d2
1 changed files with 63 additions and 94 deletions
@@ -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>
+                
+                {/* 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>

-      <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
            </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>