116 lines
5.0 KiB
TypeScript
116 lines
5.0 KiB
TypeScript
import { ExternalLink } from "lucide-react";
|
|
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero12Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero12 = ({ className }: Hero12Props) => {
|
|
return (
|
|
<section className={cn("relative overflow-hidden py-32", className)}>
|
|
<div className="absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100">
|
|
<img
|
|
alt="پس‌زمینه"
|
|
src="/block-media/shadcnblocks/block/patterns/square-alt-grid.svg"
|
|
className="[mask-image:radial-gradient(75%_75%_at_center,white,transparent)] opacity-90"
|
|
/>
|
|
</div>
|
|
<div className="relative z-10 container">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
|
<div className="flex flex-col items-center gap-6 text-center">
|
|
<div className="rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
alt="لوگو"
|
|
className="h-16"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h1 className="mb-6 text-xl font-bold tracking-tight text-pretty lg:text-2xll">
|
|
پروژه بعدی خود را با{" "}
|
|
<span className="text-primary">Blocks</span> بلاک‌های آماده بسازید
|
|
</h1>
|
|
<p className="mx-auto max-w-3xl text-muted-foreground lg:text-xl">
|
|
کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex justify-center gap-3">
|
|
<Button className="shadow-sm transition-shadow hover:shadow">
|
|
شروع رایگان
|
|
</Button>
|
|
<Button variant="outline" className="group">
|
|
آشنایی بیشتر{" "}
|
|
<ExternalLink className="ms-2 h-4 transition-transform group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-20 flex flex-col items-center gap-5">
|
|
<p className="font-medium text-muted-foreground lg:text-start">
|
|
بر پایه فناوری‌های متن‌باز و استانداردهای روز
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
<a
|
|
href="#"
|
|
className={cn(
|
|
buttonVariants({ variant: "outline" }),
|
|
"group flex aspect-square h-12 items-center justify-center p-0",
|
|
)}
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
|
|
alt="ری یو آی logo"
|
|
className="h-6 saturate-0 transition-all group-hover:saturate-100"
|
|
/>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className={cn(
|
|
buttonVariants({ variant: "outline" }),
|
|
"group flex aspect-square h-12 items-center justify-center p-0",
|
|
)}
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/typescript-icon.svg"
|
|
alt="لوگوی زبان نوع‌ایمن"
|
|
className="h-6 saturate-0 transition-all group-hover:saturate-100"
|
|
/>
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
className={cn(
|
|
buttonVariants({ variant: "outline" }),
|
|
"group flex aspect-square h-12 items-center justify-center p-0",
|
|
)}
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/react-icon.svg"
|
|
alt="لوگوی رابط کاربری"
|
|
className="h-6 saturate-0 transition-all group-hover:saturate-100"
|
|
/>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className={cn(
|
|
buttonVariants({ variant: "outline" }),
|
|
"group flex aspect-square h-12 items-center justify-center p-0",
|
|
)}
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/tailwind-icon.svg"
|
|
alt="لوگوی استایل‌دهی مدرن"
|
|
className="h-6 saturate-0 transition-all group-hover:saturate-100"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero12 };
|