120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
import { FaGithub } from "react-icons/fa6";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero170Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero170 = ({ className }: Hero170Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark overflow-hidden bg-background pt-12 font-sans md:pt-20",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container">
|
|
<div className="mx-auto max-w-[48.75rem]">
|
|
<h1 className="mb-6 text-center text-3xl leading-tight font-bold text-foreground md:text-xl lg:text-2xll">
|
|
استارتاپ خود را با ابزارهای حرفه‌ای سریع‌تر رشد دهید
|
|
</h1>
|
|
<p className="mx-auto mb-9 max-w-[37.5rem] text-center text-base font-medium text-foreground md:text-lg">
|
|
داشبوردی یکپارچه برای تحلیل داده‌ها، مدیریت پروژه و همکاری تیمی که تصمیم‌گیری را سریع‌تر و دقیق‌تر می‌کند.
|
|
</p>
|
|
<div className="mb-10 flex flex-wrap items-center justify-center gap-5">
|
|
<Button
|
|
asChild
|
|
className="block h-fit w-fit rounded-md px-7 py-[0.875rem] font-medium"
|
|
>
|
|
<a href="#">دانلود رایگان</a>
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
asChild
|
|
className="flex h-fit w-fit items-center gap-4 rounded-md px-7 py-[0.875rem] font-medium"
|
|
>
|
|
<a href="#">
|
|
<FaGithub className="size-6!" />
|
|
<div>ستاره در مخزن کد</div>
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<p className="mb-4 text-center text-muted-foreground">
|
|
سرویس خود را به ابزارها و اتصال‌های محبوب متصل کنید.
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4">
|
|
<Button asChild size="icon" variant="ghost" className="block w-fit">
|
|
<a href="#">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
alt="لوگو"
|
|
className="size-10 invert"
|
|
/>
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="icon" variant="ghost" className="block w-fit">
|
|
<a href="#">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-2.svg"
|
|
alt="لوگو"
|
|
className="size-10 invert"
|
|
/>
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="icon" variant="ghost" className="block w-fit">
|
|
<a href="#">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-3.svg"
|
|
alt="لوگو"
|
|
className="size-10 invert"
|
|
/>
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="icon" variant="ghost" className="block w-fit">
|
|
<a href="#">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-4.svg"
|
|
alt="لوگو"
|
|
className="size-10 invert"
|
|
/>
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="icon" variant="ghost" className="block w-fit">
|
|
<a href="#">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-5.svg"
|
|
alt="لوگو"
|
|
className="size-10 invert"
|
|
/>
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="relative mx-auto mt-16 w-full max-w-[52.8rem]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="relative z-20 -mb-[2px] block w-full rounded-tl-lg rounded-tr-lg"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/patterns/dots.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-0 end-0 z-10 h-20 w-20 translate-x-[20%] -translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/patterns/dots.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute bottom-0 start-0 z-10 h-20 w-20 -translate-x-[30%] translate-y-[30%] sm:h-32 sm:w-32 md:h-40 md:w-40"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero170 };
|