
Modern call-to-action card with rounded edges, subtle shadow, and dual buttons for contacting sales or getting started.
@efferd
registry/blocks/cta/4/cta.tsx
import { Button } from "@/components/ui/button";
export function CallToAction() {
return (
<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-6 rounded-4xl border bg-card px-4 py-8 shadow-sm md:py-10 dark:bg-card/50">
<div className="space-y-2">
<h2 className="font-heading text-center font-semibold text-lg tracking-tight md:text-2xl">
Let your plans shape the future.
</h2>
<p className="text-balance text-center text-muted-foreground text-sm md:text-base">
Start your free trial today. No credit card{" "}
<IconPlaceholder
className="inline-block size-4"
hugeicons="CreditCardIcon"
lucide="CreditCardIcon"
phosphor="CreditCardIcon"
remixicon="RiBankCardLine"
tabler="IconCreditCard"
/>{" "}
required.
</p>
</div>
<div className="flex items-center justify-center gap-2">
<Button className="shadow" variant="secondary">
Contact Sales
</Button>
<Button className="shadow">
Get Started{" "}
<IconPlaceholder
data-icon="inline-end"
hugeicons="ArrowRight02Icon"
lucide="ArrowRightIcon"
phosphor="ArrowRightIcon"
remixicon="RiArrowRightLine"
tabler="IconArrowRight"
/>
</Button>
</div>
</div>
);
}




























