53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { SlotLink } from "@/components/SlotLink";
|
|
import { glossyBar } from "@/lib/glossy";
|
|
import { parseAspectRatio } from "@/lib/static-images";
|
|
import type { SlotMediaItem } from "@/lib/static-images";
|
|
|
|
const fallbackCopy = {
|
|
kicker: "Contact us",
|
|
title: "اگر به دنبال قطعه ی خاصی هستید، با ما تماس بگیرید.",
|
|
href: "/contact",
|
|
};
|
|
|
|
export function WideBanner({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
|
|
const src = image?.image ?? "/images/banners/wide.jpg";
|
|
const href = image?.href || fallbackCopy.href;
|
|
const ratio = parseAspectRatio(aspectRatio);
|
|
|
|
return (
|
|
<section
|
|
className={`relative overflow-hidden ${ratio ? "min-h-[280px]" : "h-[280px] sm:h-[360px]"}`}
|
|
style={ratio ? { aspectRatio: ratio } : undefined}
|
|
>
|
|
<SlotLink href={href} className="absolute inset-0">
|
|
<Placeholder
|
|
src={src}
|
|
fallbackSrc={image?.fallbackSrc ?? "/images/banners/wide.jpg"}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<span className="absolute inset-0 bg-ink/20" />
|
|
</SlotLink>
|
|
<Container className="relative flex h-full items-center">
|
|
<div className="max-w-xl rounded-2xl px-8 py-7" style={glossyBar}>
|
|
<p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">
|
|
{image?.kicker || fallbackCopy.kicker}
|
|
</p>
|
|
<p className="mt-3 text-[22px] font-bold leading-9 text-white sm:text-[26px]">
|
|
{image?.title || fallbackCopy.title}
|
|
</p>
|
|
{image?.text ? <p className="mt-2 text-[14px] leading-7 text-white/75">{image.text}</p> : null}
|
|
<SlotLink
|
|
href={href}
|
|
className="mt-5 inline-flex rounded-xl bg-brand px-6 py-3 text-[14px] font-medium text-white hover:bg-brand-dark"
|
|
>
|
|
تماس با ما
|
|
</SlotLink>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|