diff --git a/app/components/tvone-header.tsx b/app/components/tvone-header.tsx deleted file mode 100644 index 544f95a..0000000 --- a/app/components/tvone-header.tsx +++ /dev/null @@ -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 ( - - - - ); -} - -function SearchIcon({ className }: { className?: string }) { - return ( - - - - - ); -} - -function BagIcon({ className }: { className?: string }) { - return ( - - - - ); -} - -export function TvoneHeader() { - return ( -
- -
-
- Mulher em atividade ao ar livre -
-
- -
-
- - Nossa Seguros - -

- Seguro Saúde Mulher — cuidado que acompanha o seu ritmo. -

-
-
- Redes sociais - - f - - - in - - - ◎ - -
-
- -
- Bem-estar e cuidados de saúde -
-
-
- - - -
- ); -} diff --git a/app/components/tvone-promo-strip.tsx b/app/components/tvone-promo-strip.tsx new file mode 100644 index 0000000..6c1fcdf --- /dev/null +++ b/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 ( +
+
+ Mulher em atividade ao ar livre +
+
+ +
+
+ + Nossa Seguros + +

+ Seguro Saúde Mulher — cuidado que acompanha o seu ritmo. +

+
+
+ Redes sociais + + f + + + in + + + ◎ + +
+
+ +
+ Bem-estar e cuidados de saúde +
+
+
+ ); +} diff --git a/app/components/tvone-site-nav.tsx b/app/components/tvone-site-nav.tsx new file mode 100644 index 0000000..f7ae5e9 --- /dev/null +++ b/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 ( + + + + + ); +} + +function MenuIcon({ className }: { className?: string }) { + return ( + + + + ); +} + +function CloseIcon({ className }: { className?: string }) { + return ( + + + + ); +} + +function ChevronDown({ className }: { className?: string }) { + return ( + + + + ); +} + +/** + * Euronews-style navigation: primary row + secondary topic row (desktop), + * sticky with shadow when docked, mobile sheet menu. + */ +export function TvoneSiteNav() { + const sentinelRef = useRef(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 ( + <> +
+ +
+ + + {/* Mobile: menu is fixed + height from content only (no full-screen empty panel). */} + {menuOpen ? ( + <> +
+ + ); +} diff --git a/app/page.tsx b/app/page.tsx index e642835..8b03a28 100644 --- a/app/page.tsx +++ b/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 (
- + {/* */} + +