mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
inicila commit
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user