100 lines
4.6 KiB
TypeScript
100 lines
4.6 KiB
TypeScript
import { ArrowRight, Sparkles } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero136Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero136 = ({ className }: Hero136Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-12 md:py-20", className)}>
|
|
<div className="container max-w-[100rem]">
|
|
<div className="flex flex-col items-center justify-center gap-5">
|
|
<div className="mb-3 flex h-20 w-20 rounded-3xl bg-black shadow-[0_-16px_0_-8px_var(--color-gray-300),0_-30px_0_-14px_var(--color-gray-100)]">
|
|
<Sparkles className="m-auto h-12 w-12 fill-white" />
|
|
</div>
|
|
<div className="max-w-[25rem] md:max-w-[31.25rem] lg:max-w-[43.75rem]">
|
|
<h1 className="mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]">
|
|
نمونه‌های برتر طراحی رابط کاربری را بررسی کنید.
|
|
</h1>
|
|
<p className="text-center text-xl text-muted-foreground">
|
|
به آرشیوی بزرگ از طراحی‌های وب، موبایل و اپلیکیشن دسترسی داشته باشید که به‌صورت مستمر به‌روزرسانی می‌شود.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div className="mt-3 flex items-center justify-center gap-3">
|
|
<Button
|
|
asChild
|
|
className="h-fit rounded-full border border-primary px-4 py-3 text-base font-semibold"
|
|
>
|
|
<a href="#">عضویت رایگان</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="flex h-fit items-center justify-center gap-2 rounded-full px-4 py-3 text-base font-semibold"
|
|
>
|
|
<a href="#">
|
|
<div>مشاهده نمونه‌ها</div>
|
|
<span className="flex h-6 w-6 rounded-full bg-zinc-100">
|
|
<ArrowRight className="m-auto h-4 w-4 rtl:rotate-180" />
|
|
</span>
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="py-10 md:py-16">
|
|
<p className="text-center text-sm text-foreground/60">
|
|
مورد اعتماد تیم‌های طراحی در
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-3.5 w-auto opacity-50 md:h-5"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-3.5 w-auto opacity-50 md:h-5"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-3.5 w-auto opacity-50 md:h-5"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-3.5 w-auto opacity-50 md:h-5"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg"
|
|
alt="تصویر نمونه"
|
|
className="hidden h-3.5 w-auto opacity-50 md:block md:h-5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full xl:px-8">
|
|
<div className="relative mx-auto aspect-[1.259253731/1] w-full max-w-[96rem] overflow-hidden bg-zinc-950 xl:aspect-[1.896296296/1] xl:rounded-3xl">
|
|
<div className="absolute -bottom-1 left-[56%] aspect-[1.151758794/-1] w-[100%] -translate-x-1/2 overflow-hidden rounded-tl-2xl bg-background xl:left-1/2 xl:aspect-[1.933988764/1] xl:w-[87.5%] xl:rounded-tr-2xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="w-full object-cover object-top-left"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero136 };
|