87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import { ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero6Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero6 = ({ className }: Hero6Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
|
<div className="z-10 flex flex-col items-center gap-8 text-center">
|
|
<div className="max-w-3xl">
|
|
<h1 className="mb-4 text-xl font-semibold text-pretty lg:text-2xll">
|
|
پروژه بعدی خود را سریعتر توسعه دهید
|
|
</h1>
|
|
<p className="text-muted-foreground lg:text-xl">
|
|
کامپوننتهای آماده و استاندارد را انتخاب کنید، سفارشیسازی کنید و بدون اتلاف زمان در پروژه خود بهکار بگیرید.
|
|
</p>
|
|
</div>
|
|
<div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
|
|
<Button>
|
|
همین امروز شروع کنید
|
|
<ChevronRight className="h-4 rtl:rotate-180" />
|
|
</Button>
|
|
<Button variant="ghost">
|
|
آشنایی بیشتر
|
|
<ChevronRight className="h-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert"
|
|
/>
|
|
<div className="relative md:col-span-2">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full max-h-[500px] w-full object-cover dark:invert"
|
|
/>
|
|
<Button variant="outline" className="absolute end-5 bottom-5">
|
|
آشنایی بیشتر
|
|
<ChevronRight className="h-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
|
|
alt="لوگو"
|
|
className="h-5 sm:h-7 dark:invert"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
|
|
alt="لوگو"
|
|
className="h-9 sm:h-11 dark:invert"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
|
|
alt="لوگو"
|
|
className="h-4 sm:h-6 dark:hidden"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
|
|
alt="لوگو"
|
|
className="hidden h-4 sm:h-6 dark:block"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
|
|
alt="لوگو"
|
|
className="h-6 sm:h-7 dark:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero6 };
|