81 lines
3.9 KiB
TypeScript
81 lines
3.9 KiB
TypeScript
import { ArrowRight, DollarSign, Medal, Sparkle, Zap } from "lucide-react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero68Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero68 = ({ className }: Hero68Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="border-x border-t border-dashed px-4 py-20 md:px-16">
|
|
<div className="mx-auto max-w-3xl">
|
|
<a
|
|
href="#"
|
|
className="mx-auto mb-4 flex w-fit items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm"
|
|
>
|
|
<Badge>جدید</Badge>
|
|
نسخه ۲٫۲ منتشر شد!
|
|
<ArrowRight className="inline size-4 rtl:rotate-180" />
|
|
</a>
|
|
<h1 className="my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl">
|
|
طراحی وب‌سایت برای استارتاپ‌ها
|
|
</h1>
|
|
<p className="mx-auto mb-6 max-w-2xl text-center text-muted-foreground lg:text-xl">
|
|
وب‌سایت‌هایی سریع، مقیاس‌پذیر و بهینه برای رشد کسب‌وکارهای نوپا طراحی می‌کنیم.
|
|
</p>
|
|
<div className="flex flex-col justify-center gap-2 sm:flex-row">
|
|
<Button size="lg" className="w-full gap-2 sm:w-auto lg:mt-10">
|
|
<div className="size-2 rounded-full bg-green-400"></div>
|
|
شروع نسخه آزمایشی
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="w-full gap-2 sm:w-auto lg:mt-10"
|
|
>
|
|
<Avatar className="size-8 rounded-full ring-1 ring-input">
|
|
<AvatarImage
|
|
src="/block-media/shadcnblocks/block/avatar-1.webp"
|
|
alt="نمونه"
|
|
/>
|
|
</Avatar>
|
|
درخواست نسخه نمایشی
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative grid border-x border-dashed md:grid-cols-3">
|
|
<Sparkle className="absolute top-0 right-0 h-auto w-5 translate-x-2.5 -translate-y-2.5 fill-primary" />
|
|
<Sparkle className="absolute top-0 left-0 h-auto w-5 -translate-x-2.5 -translate-y-2.5 fill-primary" />
|
|
<div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
|
|
<Zap className="w-5 lg:w-6" />
|
|
</span>
|
|
تحویل پروژه در ۲ تا ۴ هفته
|
|
</div>
|
|
<div className="flex items-center gap-6 border-x border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
|
|
<DollarSign className="w-5 lg:w-6" />
|
|
</span>
|
|
شفافیت کامل در هزینه‌ها
|
|
</div>
|
|
<div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
|
|
<Medal className="w-5 lg:w-6" />
|
|
</span>
|
|
تضمین بازگشت وجه در صورت نارضایتی
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero68 };
|