82 lines
3.5 KiB
TypeScript
82 lines
3.5 KiB
TypeScript
import { MoveRight } from "lucide-react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero158Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero158 = ({ className }: Hero158Props) => {
|
|
return (
|
|
<section className={cn("bg-primary/5 py-12 font-sans md:py-20", className)}>
|
|
<div className="container max-w-[87.5rem]">
|
|
<div className="grid grid-cols-1 gap-[5.625rem] lg:grid-cols-2">
|
|
<div>
|
|
<div className="flex flex-col gap-12">
|
|
<div>
|
|
<h1 className="mb-3 text-xl font-bold md:text-2xll lg:text-2xll">
|
|
چشمانداز ما برای آیندهای نوآورانه و بهتر را کشف کنید
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
با راهکارهای نوآورانه، مسیر رشد و تحول دیجیتال را در کنار ما تجربه کنید.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
asChild
|
|
className="group flex h-fit w-fit items-center gap-2 rounded-full px-8 py-3"
|
|
>
|
|
<a href="#">
|
|
<div className="font-medium text-white">شروع رایگان</div>
|
|
<div className="relative h-6 w-7 overflow-hidden">
|
|
<div className="absolute top-0 left-0 flex -translate-x-1/2 items-center transition-all duration-500 group-hover:translate-x-0">
|
|
<MoveRight className="h-6! w-6! fill-white px-1 rtl:rotate-180" />
|
|
<MoveRight className="h-6! w-6! fill-white px-1 rtl:rotate-180" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<AspectRatio ratio={1.390658174 / 1}>
|
|
<div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-5 lg:max-w-[38.9375rem] lg:gap-8">
|
|
<div className="col-[1/2] row-[1/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[2/3] row-[1/2]">
|
|
<div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-[2/3] row-[2/3]">
|
|
<div className="h-full w-full overflow-hidden rounded-xl sm:rounded-2xl xl:rounded-3xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AspectRatio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero158 };
|