75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import { ABOUT } from "@/data/home";
|
|
import BilingualTitle from "@/components/ui/BilingualTitle";
|
|
|
|
type AboutSectionProps = {
|
|
titleFa?: string;
|
|
titleEn?: string;
|
|
lead?: string;
|
|
body?: string;
|
|
image?: string;
|
|
imageSecondary?: string;
|
|
};
|
|
|
|
export default function AboutSection({
|
|
titleFa = ABOUT.titleFa,
|
|
titleEn = ABOUT.titleEn,
|
|
lead = ABOUT.lead,
|
|
body = ABOUT.body,
|
|
image = ABOUT.image,
|
|
imageSecondary = ABOUT.imageSecondary,
|
|
}: AboutSectionProps) {
|
|
return (
|
|
<section id="about" dir="rtl" className="scroll-mt-24 bg-background py-16 lg:py-24">
|
|
<div className="mx-auto grid max-w-[1200px] items-center gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
|
|
<div className="relative mx-auto w-full max-w-[520px] lg:mx-0">
|
|
<div
|
|
aria-hidden
|
|
className="absolute -inset-x-4 top-8 bottom-0 -z-0 rounded-[5px] border border-ink/15 bg-[#f3f3f3] sm:-inset-x-6 lg:inset-x-0 lg:-start-8 lg:end-12 lg:top-12"
|
|
style={{
|
|
backgroundImage:
|
|
"radial-gradient(circle, rgba(10,10,10,0.14) 1px, transparent 1.2px)",
|
|
backgroundSize: "14px 14px",
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 aspect-[4/5] w-[78%] overflow-hidden rounded-[5px] bg-[#ebe6df]">
|
|
<Image
|
|
src={image}
|
|
alt={titleFa}
|
|
fill
|
|
sizes="(max-width: 1024px) 70vw, 380px"
|
|
className="object-cover object-[center_18%]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 end-0 z-20 aspect-[3/4] w-[48%] overflow-hidden rounded-[5px] border border-white shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
|
|
<Image
|
|
src={imageSecondary}
|
|
alt=""
|
|
fill
|
|
sizes="(max-width: 1024px) 40vw, 240px"
|
|
className="object-cover object-top"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative text-right">
|
|
<BilingualTitle
|
|
titleFa={titleFa}
|
|
titleEn={titleEn}
|
|
size="xl"
|
|
align="end"
|
|
/>
|
|
<p className="mt-4 text-base font-medium text-ink sm:text-lg">
|
|
{lead}
|
|
</p>
|
|
<p className="mt-4 text-justify text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">
|
|
{body}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|