81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero162Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero162 = ({ className }: Hero162Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative bg-background font-sans lg:h-[62.5rem]",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container flex h-full w-full items-center py-20 lg:py-0">
|
|
<div className="mx-auto grid h-full w-full max-w-[87.5rem] grid-cols-1 items-center gap-20 lg:grid-cols-2">
|
|
<div>
|
|
<h1 className="mb-4 text-2xll leading-tight font-medium text-foreground">
|
|
تعیین استانداردهای تازه صنعت از طریق تعالی
|
|
</h1>
|
|
<p className="text-xl text-foreground">
|
|
خدمات تخصصی سلامت روان با رویکردی علمی و برنامه‌های درمانی متناسب با نیاز هر فرد.
|
|
</p>
|
|
<div className="mt-10">
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="block h-fit w-fit rounded-lg border-2 border-white bg-transparent px-8 py-5 text-lg leading-tight font-medium text-white transition duration-500 hover:scale-105 hover:bg-background hover:text-black"
|
|
>
|
|
<a href="#">خدمات ما</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="top-0 right-0 bottom-0 left-auto m-5 ms-0 w-full px-8 pb-5 lg:absolute lg:max-w-[50%] lg:px-0">
|
|
<div className="grid h-full w-full grid-cols-1 grid-rows-[18.75rem_13.125rem_10rem] gap-5 md:grid-cols-[3fr_2fr] md:grid-rows-[80%_minmax(20%,9.375rem)]">
|
|
<div className="row-[1/2] overflow-hidden md:col-[1/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-3xl bg-muted">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[1/2] row-[2/3]">
|
|
<div className="flex h-full 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="row-[3/4] md:col-[2/3] md:row-[2/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-3xl bg-muted">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero162 };
|