69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero178Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero178 = ({ className }: Hero178Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative border-b border-muted bg-background pt-10",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2">
|
|
<div className="flex w-full max-w-[31.25rem] flex-col gap-9 lg:max-w-[37.5rem] lg:py-[20%] xl:py-[26%]">
|
|
<p className="font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground">
|
|
پشتیبانی مشتری
|
|
</p>
|
|
<h1 className="text-[clamp(2.25rem,calc(3.5vw+1.25rem),5.5rem)] leading-[0.95] tracking-[-0.03em] text-foreground">
|
|
تجربه
|
|
<br />
|
|
پشتیبانی مشتری را متحول کنید
|
|
</h1>
|
|
<p className="text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground">
|
|
درخواستها، گفتگوها و پاسخگویی به مشتریان را از یک محیط یکپارچه مدیریت کنید.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div className="relative ms-8 aspect-square w-full max-w-[56.25rem] overflow-hidden lg:absolute lg:end-0 lg:bottom-0 lg:w-1/2">
|
|
<div className="absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg">
|
|
<AspectRatio ratio={0.918918919 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute bottom-0 left-[0%] w-[70%] overflow-hidden rounded-tl-lg">
|
|
<AspectRatio ratio={1.9 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-full w-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute right-[5%] bottom-0 w-[40%] overflow-hidden rounded-tl-lg rounded-tr-lg shadow-md">
|
|
<AspectRatio ratio={0.776119403 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
|
|
alt=""
|
|
className="block h-full w-full object-cover object-top"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero178 };
|