فراخوان اقدام · بلوک‌های UI

معرفی

"use client" import { Button } from "@/components/ui/button" export default function CtaSimple() { return ( <section dir="rtl" lang="fa" className="flex min-h-svh flex-col items-center justify-center bg-background px-6 py-16 text-center" > <h2 className="max-w-xl text-3xl font-bold tracking-tight md:text-4xl"> امروز شروع کنید </h2> <p className="mt-3 max-w-md text-muted-foreground"> بلوک‌های فارسی را کپی کنید و محصولتان را سریع‌تر بسازید </p> <Button size="lg" className="mt-8"> شروع رایگان </Button> </section> ) }

"use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export default function CtaDual() { return ( <section dir="rtl" lang="fa" className="relative flex min-h-svh flex-col items-center justify-center overflow-hidden bg-background px-6 py-16 text-center" > <div aria-hidden className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,var(--muted)_0%,transparent_55%)]" /> <div className="relative z-10 flex max-w-2xl flex-col items-center"> <Badge variant="secondary">آماده‌اید؟</Badge> <h2 className="mt-4 text-3xl font-bold tracking-tight md:text-4xl"> رابط فارسی را همین الان امتحان کنید </h2> <p className="mt-3 text-muted-foreground md:text-lg"> بدون کارت بانکی شروع کنید؛ هر وقت خواستید ارتقا دهید </p> <div className="mt-8 flex flex-wrap items-center justify-center gap-3"> <Button size="lg">شروع کنید</Button> <Button size="lg" variant="outline"> مشاهدهٔ دمو </Button> </div> </div> </section> ) }

"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function CtaEmail() { const [done, setDone] = React.useState(false) return ( <section dir="rtl" lang="fa" className="flex min-h-svh items-center justify-center bg-background px-6 py-16" > <div className="w-full max-w-2xl rounded-2xl border bg-card px-6 py-10 text-center shadow-sm md:px-10"> {done ? ( <> <h2 className="text-2xl font-bold tracking-tight">ثبت شد</h2> <p className="mt-2 text-muted-foreground"> لینک شروع را به ایمیلتان می‌فرستیم </p> <Button variant="outline" className="mt-6" onClick={() => setDone(false)} > ایمیل دیگر </Button> </> ) : ( <> <h2 className="text-2xl font-bold tracking-tight md:text-3xl"> دسترسی زودهنگام بگیرید </h2> <p className="mt-3 text-muted-foreground"> ایمیلتان را بگذارید تا دعوت‌نامه و مستندات برایتان ارسال شود </p> <form className="mx-auto mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row" onSubmit={(e) => { e.preventDefault() setDone(true) }} > <Input type="email" required placeholder="name@example.com" dir="ltr" className="text-start" /> <Button type="submit" className="shrink-0"> عضویت </Button> </form> <p className="mt-3 text-xs text-muted-foreground"> اسپم نمی‌فرستیم · هر زمان لغو کنید </p> </> )} </div> </section> ) }

"use client" import { Button } from "@/components/ui/button" export default function CtaSplit() { return ( <section dir="rtl" lang="fa" className="grid min-h-svh bg-background lg:grid-cols-2" > <div className="flex flex-col justify-center px-6 py-16 md:px-12 lg:px-16"> <p className="text-sm font-medium text-muted-foreground">FarsiUI</p> <h2 className="mt-3 max-w-md text-3xl font-bold tracking-tight md:text-4xl"> محصول فارسی‌تان را یک پله جلو ببرید </h2> <p className="mt-4 max-w-md text-muted-foreground md:text-lg"> از معرفی تا داشبورد؛ بلوک‌های راست‌چین آمادهٔ کپی در پروژهٔ Next.js </p> <div className="mt-8 flex flex-wrap gap-3"> <Button size="lg">شروع رایگان</Button> <Button size="lg" variant="outline"> گالری بلوک‌ها </Button> </div> </div> <div className="relative min-h-72 lg:min-h-full"> <img src="/farsiui/dashboard.png" alt="پیش‌نمایش داشبورد" className="absolute inset-0 size-full object-cover object-top" /> </div> </section> ) }

"use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" const AVATARS = [ { src: "/avatars/01.png", fallback: "مر" }, { src: "/avatars/02.png", fallback: "عل" }, { src: "/avatars/03.png", fallback: "سا" }, { src: "/avatars/04.png", fallback: "نپ" }, ] as const export default function CtaFullBleed() { return ( <section dir="rtl" lang="fa" className="relative flex min-h-svh items-center overflow-hidden" > <img src="/farsiui/parsian.jpg" alt="" className="absolute inset-0 size-full object-cover" /> <div aria-hidden className="absolute inset-0 bg-black/60" /> <div className="relative z-10 mx-auto w-full max-w-3xl px-6 py-16 text-center md:px-10"> <Badge variant="secondary" className="border-white/20 bg-white/10 text-white" > فراخوان اقدام </Badge> <h2 className="mt-5 text-3xl font-bold tracking-tight text-white md:text-5xl"> همین امروز به تیم‌های فارسی بپیوندید </h2> <p className="mx-auto mt-4 max-w-xl text-white/80 md:text-lg"> بیش از هزار تیم با FarsiUI رابط راست‌چین می‌سازند — نوبت شماست </p> <div className="mt-8 flex flex-wrap items-center justify-center gap-3"> <Button size="lg">شروع رایگان</Button> <Button size="lg" variant="outline" className="border-white/40 bg-white/10 text-white hover:bg-white/20 hover:text-white" > صحبت با فروش </Button> </div> <div className="mt-10 flex flex-col items-center gap-3"> <div className="flex -space-x-2 space-x-reverse"> {AVATARS.map((avatar) => ( <Avatar key={avatar.src} className="size-9 border-2 border-black/40" > <AvatarImage src={avatar.src} alt="" /> <AvatarFallback>{avatar.fallback}</AvatarFallback> </Avatar> ))} </div> <p className="text-sm text-white/75"> <span className="font-medium text-white">۱٬۲۰۰+ تیم</span> در حال استفاده </p> </div> </div> </section> ) }