Call to Action (CTA)

Buttons 349

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Call to Action (CTA) to your project and fits it to your theme.

Code

How Call to Action (CTA) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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://cdn.21st.dev/assets/mirror/d6/d6ebbba9f413343efbc0d13521dc6a9c607dbbd3e4795f2b756ca0467c03bf04.jpg"
        onButtonClick={handleSignUp}
      />
    </div>
  );
};

export default CtaCardDemo;