mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
Compare commits
5 Commits
abb3d61584
...
a8205d7e86
| Author | SHA1 | Date | |
|---|---|---|---|
 peter
|
a8205d7e86 | ||
|
peter
|
4cb3ea8980 | ||
|
peter
|
65b43cfa70 | ||
|
peter
|
325ce303c1 | ||
|
peter
|
5cf82dadf8 |
@@ -239,97 +239,71 @@ export function TvoneAdBanner() {
|
||||
);
|
||||
}
|
||||
|
||||
const services = [
|
||||
{ icon: "truck", label: "Entrega gratuita" },
|
||||
{ icon: "return", label: "Devoluções fáceis" },
|
||||
{ icon: "shield", label: "Pagamento seguro" },
|
||||
{ icon: "headset", label: "Apoio 24/7" },
|
||||
];
|
||||
|
||||
function ServiceIcon({ name }: { name: string }) {
|
||||
const common = "h-6 w-6 text-neutral-600";
|
||||
switch (name) {
|
||||
case "truck":
|
||||
return (
|
||||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
<path d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
|
||||
</svg>
|
||||
);
|
||||
case "return":
|
||||
return (
|
||||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
);
|
||||
case "shield":
|
||||
return (
|
||||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
);
|
||||
case "headset":
|
||||
return (
|
||||
<svg className={common} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M19 14v3a2 2 0 01-2 2h-2v-6h2a2 2 0 012 2zm-8 5H7a2 2 0 01-2-2v-3a2 2 0 012-2h2v7z" />
|
||||
<path d="M5 14v-1a7 7 0 0114 0v1" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function TvoneServiceStrip() {
|
||||
return (
|
||||
<div className="border-y border-neutral-200 bg-[#f5f5f7] py-6">
|
||||
<div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-center gap-8 px-4 md:justify-between md:gap-4">
|
||||
{services.map((s) => (
|
||||
<div key={s.label} className="flex items-center gap-3 text-sm text-neutral-700">
|
||||
<ServiceIcon name={s.icon} />
|
||||
<span className="font-medium">{s.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TvoneFooter() {
|
||||
return (
|
||||
<footer className="border-t border-neutral-200 bg-white py-10">
|
||||
<div className="mx-auto flex max-w-[1200px] flex-col gap-8 px-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-lg font-bold tracking-tight text-neutral-900">PLATINALINE</p>
|
||||
<p className="mt-1 text-sm text-neutral-500">© 2025 PlatinaLine. Todos os direitos reservados.</p>
|
||||
<footer className="border-t border-neutral-200 bg-[#fafafa] py-12">
|
||||
<div className="mx-auto max-w-[1200px] px-4">
|
||||
<div className="grid gap-10 md:grid-cols-[1fr_260px] md:gap-12 lg:grid-cols-[1fr_280px]">
|
||||
<div className="space-y-4 text-sm leading-relaxed text-neutral-600">
|
||||
<p className="text-pretty">
|
||||
A TV ONE é um portal angolano dedicado à informação e ao entretenimento, com a missão de informar,
|
||||
educar e envolver o público angolano e todos os interessados nos mais variados temas da atualidade.
|
||||
</p>
|
||||
<p className="text-pretty">
|
||||
Com uma abordagem dinâmica e atual, a TV ONE oferece conteúdos diversificados que abrangem áreas
|
||||
como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e
|
||||
desporto, proporcionando uma experiência completa e envolvente para os seus leitores e espectadores.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-sm md:border-l md:border-neutral-200 md:pl-8">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Email</p>
|
||||
<a
|
||||
href="mailto:tvone.geral@gmail.com"
|
||||
className="mt-1 block font-medium text-[color:var(--tvone-nav-sub,#2f8bc4)] hover:underline"
|
||||
>
|
||||
tvone.geral@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Call Center</p>
|
||||
<a href="tel:+244934292121" className="mt-1 block font-medium text-neutral-900 hover:underline">
|
||||
934 292 121
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-600">
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Privacidade
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Termos de Uso
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Publicidade
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Contactos
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="flex items-center gap-4 text-neutral-500">
|
||||
<Link href="#" aria-label="Facebook" className="hover:text-neutral-800">
|
||||
f
|
||||
</Link>
|
||||
<Link href="#" aria-label="Instagram" className="hover:text-neutral-800">
|
||||
in
|
||||
</Link>
|
||||
<Link href="#" aria-label="YouTube" className="hover:text-neutral-800">
|
||||
▶
|
||||
</Link>
|
||||
<Link href="#" aria-label="X" className="hover:text-neutral-800">
|
||||
𝕏
|
||||
</Link>
|
||||
|
||||
<div className="mt-10 flex flex-col gap-6 border-t border-neutral-200 pt-8 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-sm text-neutral-500">© {new Date().getFullYear()} TV ONE. Todos os direitos reservados.</p>
|
||||
<nav className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-600">
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Privacidade
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Termos de Uso
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Publicidade
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-neutral-900">
|
||||
Contactos
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="flex items-center gap-4 text-neutral-500 sm:ml-auto lg:ml-0">
|
||||
<Link href="#" aria-label="Facebook" className="hover:text-neutral-800">
|
||||
f
|
||||
</Link>
|
||||
<Link href="#" aria-label="Instagram" className="hover:text-neutral-800">
|
||||
in
|
||||
</Link>
|
||||
<Link href="#" aria-label="YouTube" className="hover:text-neutral-800">
|
||||
▶
|
||||
</Link>
|
||||
<Link href="#" aria-label="X" className="hover:text-neutral-800">
|
||||
𝕏
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,143 +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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div className="border-b border-[#0066cc]/20 bg-[#0066cc] py-2">
|
||||
<div className="mx-auto flex max-w-[1200px] items-center gap-3 px-4">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-sm font-bold tracking-tight text-[#0066cc]">
|
||||
tv
|
||||
</div>
|
||||
<span className="text-lg font-semibold tracking-tight text-white">tvone</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
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";
|
||||
|
||||
function IconFacebook({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconLinkedIn({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconInstagram({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Insurance / partner strip — scrolls with the page. */
|
||||
export function TvonePromoStrip() {
|
||||
return (
|
||||
<div className="relative flex min-h-[140px] w-full overflow-hidden border-y border-white/10 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] sm:min-h-[168px] md:min-h-[190px] lg:min-h-[210px]">
|
||||
{/* Ambient glow */}
|
||||
<div
|
||||
className="pointer-events-none absolute -left-16 top-1/2 z-[2] h-[min(320px,80vw)] w-[min(320px,80vw)] -translate-y-1/2 rounded-full bg-fuchsia-500/35 blur-[64px]"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute -right-20 top-1/2 z-[2] h-[min(280px,70vw)] w-[min(280px,70vw)] -translate-y-1/2 rounded-full bg-rose-400/30 blur-[56px]"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute left-1/2 top-0 z-[2] h-24 w-[80%] max-w-[480px] -translate-x-1/2 bg-gradient-to-b from-white/20 to-transparent opacity-50 blur-2xl"
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
<div className="group relative w-[20%] min-w-[72px] max-w-[280px] shrink-0 sm:w-[22%] md:w-[24%]">
|
||||
<Image
|
||||
src={PROMO_IMG_LEFT}
|
||||
alt="Mulher em atividade ao ar livre"
|
||||
fill
|
||||
className="object-cover object-[center_28%] transition duration-[1.2s] ease-out group-hover:scale-[1.04]"
|
||||
sizes="(max-width: 640px) 28vw, 280px"
|
||||
priority
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-r from-black/35 from-[5%] via-[#b8326a]/75 via-[55%] to-transparent"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-[#c2187a]/90 to-transparent sm:w-16" aria-hidden />
|
||||
</div>
|
||||
|
||||
<div className="relative z-[3] flex min-w-0 flex-1 flex-col justify-center gap-3 bg-gradient-to-br from-[#a31459] via-[#d9468f] to-[#9d1f55] px-4 py-5 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-6 sm:py-6 md:gap-8 md:px-10 md:py-7 lg:px-12">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_100%_at_50%_-20%,rgba(255,255,255,0.18),transparent_55%)]" aria-hidden />
|
||||
<div className="flex min-w-0 flex-col gap-3 sm:max-w-[min(100%,42rem)]">
|
||||
<span className="inline-flex w-fit items-center gap-2 rounded-full border border-white/25 bg-white/10 px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.22em] text-white shadow-sm backdrop-blur-md sm:text-[11px]">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400/80" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_10px_rgba(52,211,153,0.9)]" />
|
||||
</span>
|
||||
Nossa Seguros
|
||||
</span>
|
||||
<p className="relative text-pretty text-[15px] font-medium leading-snug text-white/95 sm:text-base md:text-lg md:leading-relaxed">
|
||||
<span className="bg-gradient-to-r from-white via-white to-white/85 bg-clip-text font-semibold text-transparent">
|
||||
Seguro Saúde Mulher
|
||||
</span>
|
||||
<span className="text-white/90"> — cuidado que acompanha o seu ritmo.</span>
|
||||
</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="group/cta relative mt-1 inline-flex w-fit items-center gap-2 rounded-full border border-white/30 bg-white/15 px-4 py-2 text-xs font-semibold text-white backdrop-blur-sm transition hover:border-white/50 hover:bg-white/25 sm:text-sm"
|
||||
>
|
||||
Saber mais
|
||||
<span
|
||||
aria-hidden
|
||||
className="text-sm transition-transform group-hover/cta:translate-x-0.5"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="relative flex shrink-0 items-center gap-2 sm:flex-col sm:items-end sm:gap-3 sm:pl-2 md:flex-row md:items-center md:gap-4">
|
||||
<span className="sr-only">Redes sociais</span>
|
||||
<div className="flex items-center gap-2 rounded-full border border-white/15 bg-black/10 px-2 py-1.5 backdrop-blur-sm sm:px-3">
|
||||
<Link
|
||||
href="#"
|
||||
className="rounded-lg p-1.5 text-white/90 transition hover:bg-white/15 hover:text-white"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<IconFacebook className="h-4 w-4 sm:h-[18px] sm:w-[18px]" />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="rounded-lg p-1.5 text-white/90 transition hover:bg-white/15 hover:text-white"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<IconLinkedIn className="h-4 w-4 sm:h-[18px] sm:w-[18px]" />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="rounded-lg p-1.5 text-white/90 transition hover:bg-white/15 hover:text-white"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<IconInstagram className="h-4 w-4 sm:h-[18px] sm:w-[18px]" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative w-[20%] min-w-[72px] max-w-[280px] shrink-0 sm:w-[22%] md:w-[24%]">
|
||||
<Image
|
||||
src={PROMO_IMG_RIGHT}
|
||||
alt="Bem-estar e cuidados de saúde"
|
||||
fill
|
||||
className="object-cover object-[center_38%] transition duration-[1.2s] ease-out group-hover:scale-[1.04]"
|
||||
sizes="(max-width: 640px) 28vw, 280px"
|
||||
priority
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-l from-black/35 from-[5%] via-[#b8326a]/75 via-[55%] to-transparent"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-[#c2187a]/90 to-transparent sm:w-16" aria-hidden />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+6
-4
@@ -1,22 +1,24 @@
|
||||
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,
|
||||
TvoneFooter,
|
||||
TvoneMainColumns,
|
||||
TvoneServiceStrip,
|
||||
} from "./components/tvone-content";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-full flex-col bg-white">
|
||||
<TvoneHeader />
|
||||
{/* <TvonePublicationBanner /> */}
|
||||
<TvonePromoStrip />
|
||||
<TvoneSiteNav />
|
||||
<TvoneHero />
|
||||
<TvoneDestaques />
|
||||
<TvoneMainColumns />
|
||||
<TvoneAdBanner />
|
||||
<TvoneServiceStrip />
|
||||
<TvoneFooter />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user