61 lines
2.9 KiB
TypeScript
61 lines
2.9 KiB
TypeScript
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero165Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero165 = ({ className }: Hero165Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-12 md:py-20", className)}>
|
|
<div className="container max-w-[98.125rem]">
|
|
<div className="grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2">
|
|
<div className="w-full max-w-[41.625rem]">
|
|
<AspectRatio ratio={0.815177479 / 1}>
|
|
<div className="mx-auto grid h-full w-full grid-cols-[14.7%_47.29%_14.7%_14.7%] grid-rows-[34.7%_26.28%_34.7%] gap-x-[2.85%] gap-y-[2.32%]">
|
|
<div className="col-[1/3] row-[1/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-[2vw] bg-blue-100 lg:rounded-[1.2vw] xl:rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[3/5] row-[2/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-[2vw] bg-green-100 lg:rounded-[1.2vw] xl:rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[2/4] row-[3/4]">
|
|
<div className="h-full w-full overflow-hidden rounded-[2vw] bg-pink-100 lg:rounded-[1.2vw] xl:rounded-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="flex w-full max-w-[31.25rem] flex-col gap-14 lg:max-w-full">
|
|
<h1 className="font-serif text-2xll text-foreground lg:text-2xll xl:text-[5rem]">
|
|
عملیات کسبوکار خود را متحول کنید
|
|
</h1>
|
|
<p className="font-montserrat text-xl leading-snug text-foreground lg:text-3xl xl:text-xl">
|
|
همه ابزارهای موردنیاز برای مدیریت پروژهها، مشتریان و عملیات آژانس را در یک پلتفرم یکپارچه در اختیار داشته باشید.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero165 };
|