Components
Loading preview...
Here is Call to Action component
npx shadcn@latest add https://21st.dev/r/brijr/call-to-action-1// app/components/CTA.tsx
"use client";
import React from "react";
import Link from "next/link";
import Balancer from "react-wrap-balancer";
import { Button } from "@/components/ui/button";
// --- minimal craft-ds inline -----------------------------
import clsx, { type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
type SectionProps = { children: React.ReactNode; className?: string; id?: string };
type ContainerProps = { children: React.ReactNode; className?: string; id?: string };
const Section = ({ children, className, id }: SectionProps) => (
<section className={cn("py-8 md:py-12", className)} id={id}>
{children}
</section>
);
const Container = ({ children, className, id }: ContainerProps) => (
<div className={cn("mx-auto max-w-5xl p-6 sm:p-8", className)} id={id}>
{children}
</div>
);
// ---------------------------------------------------------
export default function CTA() {
return (
<Section className="px-4">
<Container className="flex flex-col items-center gap-6 rounded-lg border bg-accent/50 p-6 text-center md:rounded-xl md:p-12">
<h2 className="!my-0">Lorem ipsum dolor sit amet</h2>
<h3 className="!mb-0 text-muted-foreground">
<Balancer>
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</Balancer>
</h3>
<div className="not-prose mx-auto flex items-center gap-2">
<Button className="w-fit" asChild>
<Link href="#">Get Started</Link>
</Button>
<Button className="w-fit" variant="link" asChild>
<Link href="#">Learn More {"->"}</Link>
</Button>
</div>
</Container>
</Section>
);
}