64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import React from "react";
|
|
|
|
import { BackgroundLines } from "@/components/aceternity/background-lines";
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Waitlist1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const JOINED_COUNT = 1000;
|
|
|
|
const Waitlist1 = ({ className }: Waitlist1Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"flex w-full min-h-[32rem] items-center justify-center overflow-hidden py-16 md:min-h-[40rem] md:py-24",
|
|
className,
|
|
)}
|
|
>
|
|
<BackgroundLines className="container flex h-auto min-h-[32rem] w-full flex-col items-center justify-center px-4 md:h-auto md:min-h-[40rem]">
|
|
<h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter md:py-10 lg:text-8xl">
|
|
به لیست انتظار بپیوندید
|
|
</h2>
|
|
<p className="text-md mx-auto max-w-xl text-center text-muted-foreground lg:text-lg">
|
|
زودتر از همه از راهاندازی مطلع شوید. با ثبت ایمیل، دسترسی زودهنگام و
|
|
مزایای ویژه دریافت کنید.
|
|
</p>
|
|
<div className="relative z-20 mx-auto mt-10 flex w-full max-w-md items-center justify-center gap-3 rounded-full p-1">
|
|
<Input
|
|
type="email"
|
|
className="h-10 w-full rounded-xl border-none bg-muted shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
|
|
placeholder="ایمیل خود را وارد کنید"
|
|
/>
|
|
<Button className="h-10 shrink-0 rounded-xl">
|
|
پیوستن به لیست انتظار
|
|
</Button>
|
|
</div>
|
|
<div className="mt-10 flex items-center justify-center gap-2">
|
|
<span className="inline-flex items-center -space-x-2.5">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<Avatar key={index} className="size-8">
|
|
<AvatarImage
|
|
src={`/block-media/shadcnblocks/block/guri3/avatar${index + 1}.png`}
|
|
alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
|
|
/>
|
|
</Avatar>
|
|
))}
|
|
</span>
|
|
<p className="tracking-tight text-muted-foreground/80">
|
|
بیش از {JOINED_COUNT.toLocaleString("fa-IR")} نفر قبلاً پیوستهاند
|
|
</p>
|
|
</div>
|
|
</BackgroundLines>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Waitlist1 };
|