71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero163Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero163 = ({ className }: Hero163Props) => {
|
|
return (
|
|
<section
|
|
className={cn("dark bg-background py-12 font-sans md:py-20", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="mx-auto mb-24 flex max-w-[900px] flex-col items-center gap-3">
|
|
<p className="text-center text-foreground">تیم پشتیبانی شما</p>
|
|
<h1 className="text-center text-xl leading-tight font-medium text-foreground sm:text-2xll md:text-2xll">
|
|
متخصصان باتجربه متعهد به سلامت روان شما
|
|
</h1>
|
|
</div>
|
|
<div className="grid w-full max-w-[83.125rem] auto-cols-auto grid-cols-2 grid-rows-[auto_auto] justify-center gap-5 md:grid-cols-[repeat(4,1fr)]">
|
|
<div className="col-[1/2] row-[1/2] w-full">
|
|
<div className="h-full max-h-[19.375rem] w-full overflow-hidden rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]">
|
|
<div className="h-full max-h-[19.375rem] w-full overflow-hidden rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[1/3] row-[3/4] w-full md:col-[1/3] md:row-[2/3]">
|
|
<div className="flex h-full min-h-[9.375rem] flex-col gap-3 overflow-hidden rounded-3xl bg-muted p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8">
|
|
<div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-[7.5rem] md:w-[7.5rem]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/avatar-1.webp"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="flex h-full w-full flex-col justify-between gap-2">
|
|
<p className="text-lg font-medium text-foreground">
|
|
«از زمان شروع جلسات، کیفیت زندگی و آرامش ذهنی من به شکل محسوسی بهتر شده است.»
|
|
</p>
|
|
<p className="text-foreground">مراجع</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-[1/3] row-[2/3] h-[25rem] w-full md:col-[3/5] md:row-[1/3] md:h-auto">
|
|
<div className="h-full max-h-[32.625rem] w-full overflow-hidden rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero163 };
|