add navbar

app/components/tvone-header.tsx

@@ -1,136 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-const PROMO_IMG_LEFT =
-  "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=80&auto=format&fit=crop";
-const PROMO_IMG_RIGHT =
-  "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&q=80&auto=format&fit=crop";
-
-const appleNav = [
-  "Loja",
-  "Mac",
-  "iPad",
-  "iPhone",
-  "Watch",
-  "AirPods",
-  "TV e Casa",
-  "Entretenimento",
-  "Acessórios",
-  "Suporte",
-];
-
-function AppleLogo({ className }: { className?: string }) {
-  return (
-    <svg aria-hidden className={className} viewBox="0 0 24 24" fill="currentColor">
-      <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>
-  );
-}
-
-function SearchIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 15 15" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.2">
-      <circle cx="6.5" cy="6.5" r="5" />
-      <path d="M10 10l3.5 3.5" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function BagIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-export function TvoneHeader() {
-  return (
-    <header className="w-full">
-
-      <div className="relative flex min-h-[148px] w-full overflow-hidden bg-[#9d1f55] text-white sm:min-h-[180px] md:min-h-[204px] lg:min-h-[228px]">
-        <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
-          <Image
-            src={PROMO_IMG_LEFT}
-            alt="Mulher em atividade ao ar livre"
-            fill
-            className="object-cover object-[center_28%]"
-            sizes="(max-width: 640px) 28vw, 300px"
-            priority
-          />
-          <div
-            className="absolute inset-0 bg-gradient-to-r from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
-            aria-hidden
-          />
-        </div>
-
-        <div className="relative z-[1] flex min-w-0 flex-1 flex-col justify-center gap-3 bg-gradient-to-r from-[#b8326a] via-[#d9468f] to-[#b8326a] px-4 py-6 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-7 sm:py-7 md:gap-10 md:px-9 md:py-8 lg:px-10">
-          <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:gap-5 md:gap-9">
-            <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 sm:text-xs">
-              Nossa Seguros
-            </span>
-            <p className="text-pretty text-sm font-medium leading-relaxed text-white sm:text-base md:text-lg lg:max-w-[40rem] lg:leading-relaxed">
-              Seguro Saúde Mulher — cuidado que acompanha o seu ritmo.
-            </p>
-          </div>
-          <div className="flex shrink-0 items-center gap-4 text-white/95 sm:pl-2">
-            <span className="sr-only">Redes sociais</span>
-            <Link href="#" className="text-sm hover:opacity-80" aria-label="Facebook">
-              f
-            </Link>
-            <Link href="#" className="text-sm hover:opacity-80" aria-label="LinkedIn">
-              in
-            </Link>
-            <Link href="#" className="text-sm hover:opacity-80" aria-label="Instagram">
-              ◎
-            </Link>
-          </div>
-        </div>
-
-        <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
-          <Image
-            src={PROMO_IMG_RIGHT}
-            alt="Bem-estar e cuidados de saúde"
-            fill
-            className="object-cover object-[center_38%]"
-            sizes="(max-width: 640px) 28vw, 300px"
-            priority
-          />
-          <div
-            className="absolute inset-0 bg-gradient-to-l from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
-            aria-hidden
-          />
-        </div>
-      </div>
-
-
-      <nav
-        className="flex h-11 items-center justify-center gap-1 bg-[#1d1d1f] px-4 text-[12px] font-normal text-[#f5f5f7] md:gap-2 md:text-[13px]"
-        aria-label="Navegação principal"
-      >
-        <div className="flex w-full max-w-[980px] items-center justify-between gap-2">
-          <Link href="/" className="opacity-90 hover:opacity-100" aria-label="Apple">
-            <AppleLogo className="h-5 w-5 text-white md:h-[22px] md:w-[22px]" />
-          </Link>
-          <ul className="hidden flex-1 items-center justify-center gap-4 lg:flex xl:gap-6">
-            {appleNav.map((item) => (
-              <li key={item}>
-                <Link href="#" className="whitespace-nowrap opacity-90 hover:opacity-100">
-                  {item}
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <div className="flex items-center gap-5">
-            <button type="button" className="opacity-90 hover:opacity-100" aria-label="Pesquisar">
-              <SearchIcon className="text-white" />
-            </button>
-            <button type="button" className="opacity-90 hover:opacity-100" aria-label="Sacola">
-              <BagIcon className="text-white" />
-            </button>
-          </div>
-        </div>
-      </nav>
-    </header>
-  );
-}

app/components/tvone-promo-strip.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const PROMO_IMG_LEFT =
+  "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=80&auto=format&fit=crop";
+const PROMO_IMG_RIGHT =
+  "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&q=80&auto=format&fit=crop";
+
+/** Insurance / partner strip — scrolls away with the page (sits under top ads). */
+export function TvonePromoStrip() {
+  return (
+    <div className="relative flex min-h-[148px] w-full overflow-hidden bg-[#9d1f55] text-white sm:min-h-[180px] md:min-h-[204px] lg:min-h-[228px]">
+      <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
+        <Image
+          src={PROMO_IMG_LEFT}
+          alt="Mulher em atividade ao ar livre"
+          fill
+          className="object-cover object-[center_28%]"
+          sizes="(max-width: 640px) 28vw, 300px"
+          priority
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-r from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
+          aria-hidden
+        />
+      </div>
+
+      <div className="relative z-[1] flex min-w-0 flex-1 flex-col justify-center gap-3 bg-gradient-to-r from-[#b8326a] via-[#d9468f] to-[#b8326a] px-4 py-6 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-7 sm:py-7 md:gap-10 md:px-9 md:py-8 lg:px-10">
+        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:gap-5 md:gap-9">
+          <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 sm:text-xs">
+            Nossa Seguros
+          </span>
+          <p className="text-pretty text-sm font-medium leading-relaxed text-white sm:text-base md:text-lg lg:max-w-[40rem] lg:leading-relaxed">
+            Seguro Saúde Mulher — cuidado que acompanha o seu ritmo.
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-4 text-white/95 sm:pl-2">
+          <span className="sr-only">Redes sociais</span>
+          <Link href="#" className="text-sm hover:opacity-80" aria-label="Facebook">
+            f
+          </Link>
+          <Link href="#" className="text-sm hover:opacity-80" aria-label="LinkedIn">
+            in
+          </Link>
+          <Link href="#" className="text-sm hover:opacity-80" aria-label="Instagram">
+            ◎
+          </Link>
+        </div>
+      </div>
+
+      <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
+        <Image
+          src={PROMO_IMG_RIGHT}
+          alt="Bem-estar e cuidados de saúde"
+          fill
+          className="object-cover object-[center_38%]"
+          sizes="(max-width: 640px) 28vw, 300px"
+          priority
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-l from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
+          aria-hidden
+        />
+      </div>
+    </div>
+  );
+}

app/components/tvone-site-nav.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+
+const primaryNav = [
+  { label: "Notícias", href: "#" },
+  { label: "Europa", href: "#" },
+  { label: "Mundo", href: "#" },
+  { label: "Desporto", href: "#" },
+  { label: "Economia", href: "#" },
+  { label: "Cultura", href: "#" },
+  { label: "Ciência", href: "#" },
+];
+
+const secondaryNav = [
+  { label: "Opinião", href: "#" },
+  { label: "Programas", href: "#" },
+  { label: "Vídeo", href: "#" },
+  { label: "Podcasts", href: "#" },
+  { label: "Especiais", href: "#" },
+  { label: "Verificação de factos", href: "#" },
+];
+
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.5-4.5" />
+    </svg>
+  );
+}
+
+function MenuIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <path d="M4 7h16M4 12h16M4 17h16" />
+    </svg>
+  );
+}
+
+function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  );
+}
+
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
+}
+
+/**
+ * Euronews-style navigation: primary row + secondary topic row (desktop),
+ * sticky with shadow when docked, mobile sheet menu.
+ */
+export function TvoneSiteNav() {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [navIsStuck, setNavIsStuck] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuId = useId();
+
+  const closeMenu = useCallback(() => setMenuOpen(false), []);
+  const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []);
+
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+
+    const sync = () => {
+      const rect = el.getBoundingClientRect();
+      setNavIsStuck(rect.bottom < 0);
+    };
+
+    sync();
+    window.addEventListener("scroll", sync, { passive: true });
+    window.addEventListener("resize", sync);
+    return () => {
+      window.removeEventListener("scroll", sync);
+      window.removeEventListener("resize", sync);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeMenu();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [menuOpen, closeMenu]);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [menuOpen]);
+
+  useEffect(() => {
+    const onResize = () => {
+      if (window.matchMedia("(min-width: 1024px)").matches) setMenuOpen(false);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  return (
+    <>
+      <div ref={sentinelRef} className="pointer-events-none h-px w-full" aria-hidden />
+
+      <div className="sticky top-0 z-50">
+        <nav
+          className={`border-b border-white/15 bg-[#0066D4] text-white transition-shadow duration-200 ${
+            navIsStuck ? "shadow-[0_4px_16px_rgba(0,0,0,0.18)]" : "shadow-none"
+          }`}
+          aria-label="Navegação principal"
+        >
+          {/* Row 1 — Euronews-style main bar */}
+          <div className="mx-auto flex h-[52px] w-full max-w-[1280px] items-center gap-2 px-3 sm:h-[58px] sm:gap-3 sm:px-4 md:h-[64px] md:px-6">
+            <button
+              type="button"
+              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-white/10 lg:hidden"
+              aria-expanded={menuOpen}
+              aria-controls={menuId}
+              aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
+              onClick={toggleMenu}
+            >
+              {menuOpen ? <CloseIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />}
+            </button>
+
+            <Link href="/" className="flex shrink-0 items-center gap-2 py-1.5 text-white" onClick={closeMenu}>
+              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-xs font-bold tracking-tight text-[#0066D4] sm:h-10 sm:w-10 sm:text-sm md:h-11 md:w-11">
+                tv
+              </span>
+              <span className="text-xl font-bold tracking-tight sm:text-2xl">tvone</span>
+            </Link>
+
+            <ul className="hidden min-w-0 flex-1 items-center justify-center gap-0.5 lg:flex xl:gap-1">
+              {primaryNav.map((item) => (
+                <li key={item.label}>
+                  <Link
+                    href={item.href}
+                    className="block whitespace-nowrap rounded-md px-2 py-2.5 text-[13px] font-semibold uppercase tracking-wide text-white/95 transition hover:bg-white/10 xl:px-2.5 xl:text-[14px]"
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+
+            <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2">
+              <button
+                type="button"
+                className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10 sm:h-11 sm:w-11"
+                aria-label="Pesquisar"
+              >
+                <SearchIcon className="h-5 w-5 text-white sm:h-[22px] sm:w-[22px]" />
+              </button>
+
+            </div>
+          </div>
+
+          {/* Row 2 — secondary topics (desktop), Euronews-style strip */}
+          {/* <div className="hidden border-t border-white/10 bg-[#002f5e] lg:block">
+            <div className="mx-auto flex max-w-[1280px] items-center gap-1 px-4 py-2.5 md:px-6">
+              <span className="flex shrink-0 items-center gap-1 pr-2 text-[11px] font-bold uppercase tracking-wider text-white/55">
+                <ChevronDown className="h-3 w-3" aria-hidden />
+                Tópicos
+              </span>
+              <ul className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-1">
+                {secondaryNav.map((item) => (
+                  <li key={item.label}>
+                    <Link
+                      href={item.href}
+                      className="text-[13px] font-medium text-white/90 transition hover:text-white hover:underline"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div> */}
+        </nav>
+
+        {/* Mobile: menu is fixed + height from content only (no full-screen empty panel). */}
+        {menuOpen ? (
+          <>
+            <button
+              type="button"
+              className="fixed top-[52px] right-0 bottom-0 left-0 z-40 bg-black/25 sm:top-[58px] md:top-[64px] lg:hidden"
+              aria-label="Fechar menu"
+              onClick={closeMenu}
+            />
+            <div
+              id={menuId}
+              className="fixed top-[52px] right-0 left-0 z-50 max-h-[min(75dvh,calc(100dvh-52px))] overflow-y-auto rounded-b-xl border-b border-white/15 bg-[#0066D4] shadow-xl sm:top-[58px] sm:max-h-[min(75dvh,calc(100dvh-58px))] md:top-[64px] md:max-h-[min(75dvh,calc(100dvh-64px))] lg:hidden"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Menu"
+            >
+              <div className="border-b border-white/10 px-2 py-2 sm:px-2.5 sm:py-2.5">
+                <p className="px-2.5 text-[10px] font-bold uppercase tracking-wider text-white/50 sm:px-3">Secções</p>
+                <ul className="mt-0.5">
+                  {primaryNav.map((item) => (
+                    <li key={item.label}>
+                      <Link
+                        href={item.href}
+                        className="block rounded-md px-2.5 py-2 text-[14px] font-semibold uppercase tracking-wide text-white sm:px-3 sm:py-2.5 sm:text-[15px]"
+                        onClick={closeMenu}
+                      >
+                        {item.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              
+
+            </div>
+          </>
+        ) : null}
+      </div>
+    </>
+  );
+}

app/page.tsx

@@ -1,5 +1,7 @@
-import { TvoneHeader } from "./components/tvone-header";
 import { TvoneHero } from "./components/tvone-hero";
+import { TvonePublicationBanner } from "./components/tvone-publication-banner";
+import { TvonePromoStrip } from "./components/tvone-promo-strip";
+import { TvoneSiteNav } from "./components/tvone-site-nav";
 import {
   TvoneAdBanner,
   TvoneDestaques,
@@ -11,7 +13,9 @@ import {
 export default function Home() {
   return (
     <div className="flex min-h-full flex-col bg-white">
-      <TvoneHeader />
+      {/* <TvonePublicationBanner /> */}
+      <TvonePromoStrip />
+      <TvoneSiteNav />
       <TvoneHero />
       <TvoneDestaques />
       <TvoneMainColumns />