61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { ChevronRight, Star } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero141Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero141 = ({ className }: Hero141Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background px-5 font-sans",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-10 flex size-full">
|
|
<div className="m-auto flex max-w-[25rem] flex-col items-center gap-9 sm:max-w-[31.25rem] md:max-w-[50rem]">
|
|
<h1 className="bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-xl leading-tight font-semibold text-transparent sm:text-2xll md:text-[4rem]">
|
|
تماسهای ناخواسته را مدیریت کنید
|
|
</h1>
|
|
<Button
|
|
asChild
|
|
className="flex h-fit w-fit items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium shadow-[0_0_5px_5px_rgba(255,255,255,.3)] transition-all duration-500 hover:bg-neutral-200 hover:shadow-[0_0_10px_5px_rgba(255,255,255,.5)]"
|
|
>
|
|
<a href="#">
|
|
<p>همین حالا تهیه کنید</p>
|
|
<ChevronRight className="size-5 rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
<div>
|
|
<div className="flex items-center justify-center gap-0.5">
|
|
<Star className="fill-muted2-foreground size-3" />
|
|
<Star className="fill-muted2-foreground size-3" />
|
|
<Star className="fill-muted2-foreground size-3" />
|
|
<Star className="fill-muted2-foreground size-3" />
|
|
<Star className="fill-muted2-foreground size-3" />
|
|
</div>
|
|
<p className="mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-foreground/60">
|
|
مورد اعتماد بیش از ۲٬۰۰۰ فرد پرکار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']">
|
|
<video
|
|
src="/block-media/shadcnblocks/block/video-1.mp4"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
controls={false}
|
|
className="size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero141 };
|