63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
import { Globe } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero51Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero51 = ({ className }: Hero51Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="">
|
|
<div className="relative container mx-auto max-w-xl py-10 text-center">
|
|
<div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
|
|
<h1 className="mb-3 text-xl lg:text-2xll">
|
|
مدیریت دارایی‌های دیجیتال در یک پلتفرم
|
|
</h1>
|
|
<p className="mb-5 text-sm text-muted-foreground md:text-base">
|
|
دارایی‌های دیجیتال خود را مدیریت، تحلیل و مبادله کنید و از ابزارهای حرفه‌ای برای تصمیم‌گیری بهتر بهره ببرید.
|
|
</p>
|
|
<Button>ورود به بازار</Button>
|
|
<div className="mt-7 flex items-start justify-center gap-2 font-medium md:text-xl">
|
|
<Globe className="mt-0.5 h-auto w-5" />
|
|
همکاری با شرکت‌های بین‌المللی
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto mt-14 max-w-7xl overflow-hidden py-8">
|
|
<div className="relative w-full">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="relative left-1/2 mx-auto max-h-[480px] w-full rounded-xl object-cover shadow-md lg:static lg:max-w-[60vw] xl:max-w-3xl"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-0 right-20 -z-10 hidden max-h-60 -rotate-12 rounded-xl object-cover shadow-md lg:block"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute right-20 bottom-0 hidden rotate-12 rounded-xl object-cover shadow-md md:max-h-60 lg:block"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-0 left-1/4 -z-10 max-h-44 -rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-4.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute bottom-0 left-1/4 max-h-44 rotate-12 rounded-xl object-cover shadow-md min-[450px]:max-h-52 sm:left-1/3 md:max-h-60 lg:left-20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero51 };
|