CTA

1"use client";23import { Button } from "@/components/ui/button";4import { cn } from "@/lib/utils";56type Cta01Props = {7  className?: string;8};910export function Cta01({ className }: Cta01Props) {11  return (12    <section className={cn("@container w-full bg-background", className)}>13      <div className="mx-auto flex w-full max-w-2xl flex-col items-center px-4 py-12 text-center @[32rem]:px-6 @[32rem]:py-16">14        <h2 className="text-balance text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">15          Ready to ship something that feels finished?16        </h2>17        <p className="mt-3 max-w-md text-pretty text-sm tracking-wide text-muted-foreground">18          Drop in blocks, restyle with your tokens, and keep moving.19        </p>20        <div className="mt-6 flex flex-wrap items-center justify-center gap-2">21          <Button type="button" size="sm">22            Get started23          </Button>24          <Button type="button" size="sm" variant="ghost">25            Browse blocks26          </Button>27        </div>28      </div>29    </section>30  );31}

1"use client";23import { Button } from "@/components/ui/button";4import { cn } from "@/lib/utils";56type Cta02Props = {7  className?: string;8};910export function Cta02({ className }: Cta02Props) {11  return (12    <section className={cn("@container w-full bg-background", className)}>13      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">14        <div15          data-slot="block-split"16          className="flex flex-col gap-6 rounded-xl bg-muted p-6 @[40rem]:flex-row @[40rem]:items-center @[40rem]:justify-between @[40rem]:gap-10 @[40rem]:p-8"17        >18          <div className="min-w-0 max-w-md">19            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">20              Start building today21            </h2>22            <p className="mt-2 text-sm tracking-wide text-muted-foreground">23              Install a block, drop it in a page, and ship with your theme.24            </p>25          </div>26          <div className="flex shrink-0 flex-wrap items-center gap-2">27            <Button type="button" size="sm">28              Get started29            </Button>30            <Button type="button" size="sm" variant="outline">31              View pricing32            </Button>33          </div>34        </div>35      </div>36    </section>37  );38}

1"use client";23import { Button } from "@/components/ui/button";4import { Input } from "@/components/ui/input";5import { cn } from "@/lib/utils";67type Cta03Props = {8  className?: string;9};1011export function Cta03({ className }: Cta03Props) {12  return (13    <section className={cn("@container w-full bg-background", className)}>14      <div className="mx-auto w-full max-w-3xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">15        <div className="flex flex-col items-center text-center">16          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">17            Stay in the loop18          </h2>19          <p className="mt-2 max-w-md text-sm tracking-wide text-muted-foreground">20            New blocks and release notes when they ship. No spam.21          </p>22          <form23            className="mt-6 flex w-full max-w-md flex-col gap-2 @[32rem]:flex-row @[32rem]:items-center"24            onSubmit={(event) => event.preventDefault()}25          >26            <Input27              name="email"28              type="email"29              placeholder="you@company.com"30              aria-label="Email"31              className="h-9 min-h-9 max-h-9 flex-1 border-0 bg-muted py-0"32            />33            <Button34              type="submit"35              className="h-9 min-h-9 max-h-9 w-full shrink-0 whitespace-nowrap @[32rem]:w-auto"36            >37              Subscribe38            </Button>39          </form>40        </div>41      </div>42    </section>43  );44}