74 lines
3.2 KiB
TypeScript
74 lines
3.2 KiB
TypeScript
import { Circle, Trophy } from "lucide-react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero160Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero160 = ({ className }: Hero160Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative overflow-hidden bg-background py-12 font-sans md:py-28",
|
|
className,
|
|
)}
|
|
>
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1637946175559-22c4fe13fc54.jpg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-0 left-0 z-10 aspect-2/1 w-full"
|
|
/>
|
|
<div className="absolute inset-0 z-20 bg-linear-to-b from-transparent to-black" />
|
|
<div className="relative z-20 container">
|
|
<div className="flex flex-col items-center gap-5">
|
|
<Badge className="mb-2 flex w-fit items-center gap-2 rounded-full border border-muted-foreground bg-background px-4 py-2 hover:bg-background">
|
|
<Trophy className="h-4 w-4 stroke-muted-foreground" />
|
|
<p className="text-sm leading-normal font-light text-muted-foreground">
|
|
برترین استارتاپ سال ۲۲۳
|
|
</p>
|
|
</Badge>
|
|
<h1 className="bg-[linear-gradient(135deg,theme(colors.muted2.DEFAULT)_25%,theme(colors.muted2.foreground))] w-full max-w-[37.5rem] bg-clip-text py-2 text-center text-xl leading-tight font-normal text-transparent md:max-w-[50rem] md:text-2xll xl:max-w-[62.5rem] xl:text-[3.6rem]">
|
|
پرداخت‌ها را هوشمند مدیریت کنید و فروش خود را افزایش دهید.
|
|
</h1>
|
|
<p className="w-full max-w-[51.875rem] text-center text-xl text-muted-foreground">
|
|
فرآیندهای مالی و فروش را یکپارچه کنید و با تصمیم‌گیری مبتنی بر داده، رشد پایدارتری تجربه کنید.
|
|
</p>
|
|
<div className="mt-4 flex flex-col items-center gap-4 md:flex-row">
|
|
<Button asChild>
|
|
<a href="#">شروع آزمایش رایگان</a>
|
|
</Button>
|
|
<Button variant="secondary">
|
|
<a href="#">درخواست نسخه نمایشی</a>
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-3 md:flex-row">
|
|
<p className="text-sm text-muted-foreground">
|
|
نیاز به کارت اعتباری نیست
|
|
</p>
|
|
<Circle className="h-1 w-1 fill-muted-foreground" />
|
|
<p className="text-sm text-muted-foreground">لغو در هر زمان</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative z-20 mx-auto max-w-[86.5rem] px-8 py-20 md:py-32">
|
|
<AspectRatio
|
|
ratio={1.562130178 / 1}
|
|
className="overflow-hidden rounded-2xl border border-white/15"
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero160 };
|