89 lines
3.7 KiB
TypeScript
89 lines
3.7 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 Hero159Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero159 = ({ className }: Hero159Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative overflow-hidden bg-primary/5 pt-28 pb-12 md:pt-40 md:pb-20 lg:pt-48",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-10 container">
|
|
<div className="grid grid-cols-1 gap-x-20 gap-y-10 md:grid-cols-[1fr_1fr] xl:gap-x-48">
|
|
<div>
|
|
<div className="flex h-full flex-col justify-between gap-6 md:gap-24">
|
|
<div>
|
|
<h1 className="mb-4 text-2xll leading-tight font-bold text-gray-900 lg:text-[3.625rem] xl:text-2xll">
|
|
موفقیت مالی شما را ممکن میکنیم
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
ابزارهای حرفهای مدیریت سرمایه، تحلیل مالی و برنامهریزی را در یک پلتفرم امن در اختیار داشته باشید.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-5">
|
|
<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! stroke-white px-1 rtl:rotate-180" />
|
|
<MoveRight className="h-6! w-6! stroke-white px-1 rtl:rotate-180" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Button>
|
|
<p className="text-muted-foreground">
|
|
بدون هزینه عضویت اولیه
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="h-full w-full md:max-w-[37.5rem]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="aspect-[1.026845638/1] h-full w-full rounded-xl object-cover object-center lg:aspect-[1.34529148/1]"
|
|
/>
|
|
</div>
|
|
<div className="absolute bottom-[4%] left-[4%] w-36 lg:w-56">
|
|
<AspectRatio
|
|
ratio={1.140102041 / 1}
|
|
className="overflow-hidden rounded-lg border shadow-sm"
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-white-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -top-36 end-0 hidden w-1/2 rounded-es-[1.875rem] md:block md:h-[34.375rem] xl:h-[41.5625rem]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero159 };
|