65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import { ChevronRight, Play } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero21Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero21 = ({ className }: Hero21Props) => {
|
|
return (
|
|
<section className={cn("mb-32 border-b pt-32", className)}>
|
|
<div className="container">
|
|
<div className="relative pb-16">
|
|
<div className="absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center opacity-100" />
|
|
<a
|
|
href="#"
|
|
className="mx-auto flex w-fit items-center gap-2 rounded-lg bg-muted p-3 sm:rounded-full sm:py-1 sm:pr-3 sm:pl-1"
|
|
>
|
|
<Badge className="hidden sm:block">نسخه جدید</Badge>
|
|
<p className="flex items-center gap-1 text-sm">
|
|
نسخه جدید با امکانات بیشتر منتشر شده است.
|
|
<ChevronRight className="mt-0.5 size-4 shrink-0" />
|
|
</p>
|
|
</a>
|
|
<h1 className="mx-auto my-5 max-w-5xl text-center text-3xl text-balance md:text-2xll">
|
|
مدیریت هوشمند خانه، ساده و امن
|
|
</h1>
|
|
<p className="mx-auto max-w-3xl text-center text-sm text-muted-foreground md:text-base">
|
|
روشنایی، امنیت، تجهیزات و سناریوهای هوشمند را از هر مکان و تنها با یک داشبورد مدیریت کنید.
|
|
</p>
|
|
<div className="mt-8 flex items-center justify-center gap-3">
|
|
<Button>
|
|
شروع رایگان <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Play className="me-2 size-4" />
|
|
مشاهده دمو
|
|
</Button>
|
|
</div>
|
|
<div className="mt-5 flex justify-center">
|
|
<a
|
|
href="#"
|
|
className="flex items-center gap-1 border-b border-dashed text-sm hover:border-solid hover:border-primary"
|
|
>
|
|
رزرو جلسه مشاوره
|
|
<ChevronRight className="size-3.5 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-t-lg border-x border-t px-1 pt-1">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="max-h-80 w-full rounded-t-lg object-cover md:max-h-[430px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero21 };
|