mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
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>
|
|
);
|
|
}
|