فراخوانِ پایانی

بخشِ فراخوان: کارتِ بنفشِ جسور با پترنِ نقطه‌ای و دایره‌های تزئینی، تیتر و توضیحِ وسط‌چین و دو دکمه.

۱. نصب کامپوننت‌ها

این بلاک از ۳ آیتم دیگ استفاده می‌کند: background-patternbuttoncontrol-size

npx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.json https://docs.digdesign.ir/r/button.json https://docs.digdesign.ir/r/control-size.json

pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.json https://docs.digdesign.ir/r/button.json https://docs.digdesign.ir/r/control-size.json

yarn dlx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.json https://docs.digdesign.ir/r/button.json https://docs.digdesign.ir/r/control-size.json

bunx --bun digdesign@latest add https://docs.digdesign.ir/r/background-pattern.json https://docs.digdesign.ir/r/button.json https://docs.digdesign.ir/r/control-size.json

۲. کد صفحه

کد را در app/<route>/page.tsx بگذارید و متن‌ها، داده و هندلرها را با محصول خودتان عوض کنید.

cta-banner.tsx

"use client"

import { DotPattern } from "@/components/ui/background-pattern"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"

/**
 * فراخوانِ پایانی: کارتِ بنفشِ جسور با پترنِ نقطه‌ای و دو دایرهٔ تزئینی، تیتر و توضیح
 * وسط‌چین و دو دکمه؛ دکمهٔ اصلی سفید تا روی رنگِ برند بیشترین تمایز را داشته باشد.
 */
export default function CtaBannerBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="mx-auto w-full max-w-6xl px-4 py-24 sm:px-6">
        <div className="relative isolate flex flex-col items-center gap-6 overflow-hidden rounded-xl bg-[var(--dig-violet-700)] px-6 py-16 text-center text-[var(--dig-white)] [--border:var(--dig-violet-500)] [--muted-foreground:var(--dig-violet-100)] [--primary-foreground:var(--dig-violet-800)] [--primary:var(--dig-white)] sm:py-20">
          <DotPattern size={22} />
          <span aria-hidden className="absolute -start-24 -top-24 -z-10 size-72 rounded-full bg-[var(--dig-violet-600)]" />
          <span aria-hidden className="absolute -end-20 -bottom-28 -z-10 size-80 rounded-full bg-[var(--dig-violet-800)]" />
          <h2 className="relative max-w-2xl text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-snug">امروز شروع کن، ماهِ اول با ما</h2>
          <p className="relative max-w-lg text-lg leading-8 text-muted-foreground">بدونِ کارتِ بانکی؛ هر وقت خواستی پلن را عوض یا لغو کن.</p>
          <div className="relative mt-2 flex flex-wrap justify-center gap-3">
            <Button>ساختِ حسابِ رایگان</Button>
            <Button variant="outline" className="bg-[var(--dig-violet-700)] text-[var(--dig-white)] hover:bg-[var(--dig-violet-800)]">
              گفت‌وگو با فروش
            </Button>
          </div>
        </div>
      </section>
    </ControlSizeProvider>
  )
}