65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import { Minus } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero50Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero50 = ({ className }: Hero50Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container flex flex-col gap-7 text-center">
|
|
<a
|
|
href="#"
|
|
className="group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm"
|
|
>
|
|
<span className="me-1 font-medium">
|
|
در نظرسنجی کاربران شرکت کنید
|
|
</span>
|
|
نظر شما به بهبود محصول کمک می‌کند.
|
|
<Minus className="mx-1 inline-block w-4" />
|
|
<span className="font-semibold group-hover:underline">
|
|
مشاهده معرفی محصول
|
|
</span>
|
|
</a>
|
|
<h1 className="mx-auto max-w-4xl text-xl font-semibold text-balance lg:text-2xll">
|
|
همه داده‌های کسب‌وکار در یک داشبورد
|
|
</h1>
|
|
<p className="mx-auto max-w-4xl text-muted-foreground lg:text-xl">
|
|
اطلاعات مشتریان، بازاریابی، فروش و پشتیبانی را در یک محیط یکپارچه مدیریت و تحلیل کنید.
|
|
</p>
|
|
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
|
<Button size="lg">شروع رایگان</Button>
|
|
<Button size="lg" variant="outline">
|
|
درخواست نسخه نمایشی
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative px-8">
|
|
<div className="absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%"></div>
|
|
<div className="relative mx-auto max-w-5xl">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="mt-20 max-h-[580px] w-full rounded-lg object-cover shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-1/2 -left-3 hidden max-h-56 -translate-y-1/2 rounded-lg object-cover shadow-md md:block xl:-left-10"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="absolute top-1/3 -right-3 hidden h-24 w-24 -translate-y-1/2 rounded-lg bg-muted shadow-md md:block xl:-right-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero50 };
|