Components
Loading preview...
Call to Action Card A full-width, visually engaging card that combines a background image with a title, description, and an email signup form. It's designed to capture user attention and drive conversions.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/call-to-action-cta// demo.tsx
import { CtaCard } from "@/components/ui/call-to-action-cta";
const CtaCardDemo = () => {
const handleSignUp = (email: string) => {
alert(`Thank you for signing up with ${email}!`);
};
return (
<div className="w-full p-4 md:p-8">
<CtaCard
title="Let's build from here"
description="Harnessed for productivity. Designed for collaboration. Celebrated for built-in security. Welcome to the platform developers love."
buttonText="Sign up for GitHub"
inputPlaceholder="Email address"
imageSrc="https://images.unsplash.com/photo-1478760329108-5c3ed9d495a0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900?q=80&w=2574&auto=format&fit=crop"
onButtonClick={handleSignUp}
/>
</div>
);
};
export default CtaCardDemo;