Call To Action Card

Buttons

About

CallToActionCard A visually engaging card component designed to capture user attention and drive action. It features an image header, a title, a description, and a primary call-to-action button.

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

Code

How Call To Action Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CallToActionCard } from "@/components/ui/call-to-action-card";

export default function CallToActionCardDemo() {
  return (
    <div className="flex min-h-[550px] w-full items-center justify-center bg-background p-4">
      <CallToActionCard
        videoSrc="https://www.pexels.com/download/video/7649283/"
        title="Look first / Then leap."
        description={
          <>
            Make every move count. Create a free account for{" "}
            <a
              href="#"
              className="font-semibold text-primary underline-offset-4 transition-colors hover:underline"
            >
              powerful tools
            </a>
            , deeper insights, and everything needed to launch your trading journey.
          </>
        }
        buttonText="Join for free"
        onButtonClick={() => alert("Redirecting to signup...")}
      />
    </div>
  );
}