Files
brb-store/components/layout/PageHero.tsx
T
Alireza HassaniandCursor 24b5649abd Polish storefront SEO, specials, and homepage UX.
Publish Meshkee sitemap-config, map product-source specials without variants, restore hero autoplay, and tighten page heroes, product images, and section order.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-22 21:48:00 +03:30

27 lines
977 B
TypeScript

import { Placeholder } from "@/components/Placeholder";
import { Container } from "@/components/Container";
import { glossyBar } from "@/lib/glossy";
export function PageHero({
kicker,
title,
image,
}: {
kicker: string;
title: string;
image: string;
}) {
return (
<section className="relative h-[160px] overflow-hidden bg-ink sm:h-[200px]">
<Placeholder src={image} alt={title} className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-ink/75" />
<Container className="relative flex h-full items-center px-4 sm:px-6">
<div className="max-w-xl rounded-2xl px-6 py-4 sm:px-8 sm:py-5" style={glossyBar}>
<p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">{kicker}</p>
<h1 className="mt-1.5 line-clamp-2 text-[22px] font-extrabold leading-snug text-white sm:text-[28px]">{title}</h1>
</div>
</Container>
</section>
);
}