52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import Link from "next/link";
|
|
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { SlotLink } from "@/components/SlotLink";
|
|
import { about } from "@/lib/data";
|
|
import { parseAspectRatio } from "@/lib/static-images";
|
|
import type { SlotMediaItem } from "@/lib/static-images";
|
|
|
|
export function AboutPreview({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
|
|
const src = image?.image ?? about.image;
|
|
const ratio = parseAspectRatio(aspectRatio);
|
|
|
|
return (
|
|
<section className="py-20 sm:py-28">
|
|
<Container className="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
|
|
<div className="lg:col-span-5">
|
|
<p className="section-kicker">About us</p>
|
|
<h2 className="mt-4 text-3xl font-extrabold leading-snug sm:text-[34px]">{about.title}</h2>
|
|
<p className="mt-6 text-[17px] leading-9 text-muted">{about.paragraphs[0]}</p>
|
|
<p className="mt-4 text-[17px] leading-9 text-muted">{about.paragraphs[1]}</p>
|
|
<Link
|
|
href="/about"
|
|
className="mt-8 inline-flex items-center gap-3 text-[14px] font-bold text-brand"
|
|
>
|
|
ادامه داستان مجموعه
|
|
<span className="h-px w-10 bg-brand" />
|
|
</Link>
|
|
</div>
|
|
<div className="relative lg:col-span-7">
|
|
<SlotLink
|
|
href={image?.href}
|
|
className="relative z-[1] block overflow-hidden rounded-2xl"
|
|
>
|
|
<span className="relative block w-full" style={ratio ? { aspectRatio: ratio } : undefined}>
|
|
<Placeholder
|
|
src={src}
|
|
fallbackSrc={image?.fallbackSrc ?? about.image}
|
|
alt={about.title}
|
|
className={`w-full object-cover ${ratio ? "absolute inset-0 h-full" : "relative h-auto"}`}
|
|
/>
|
|
</span>
|
|
</SlotLink>
|
|
<div className="absolute -bottom-6 left-0 z-[2] rounded-2xl bg-brand px-8 py-6 text-white sm:-bottom-8 sm:left-8">
|
|
<p className="text-5xl font-extrabold leading-none sm:text-6xl">۳۰+</p>
|
|
<p className="mt-1 text-[13px] text-white/85">سال خدمت در قم</p>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|