Cta Card

Buttons 116

About

CtaCard This is a reusable Call-to-Action (CTA) card that features an overlapping image and content block. It's built to be highly customizable through props and includes subtle animations using framer-motion to enhance user engagement.

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

Code

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

Usage.tsx

import { CtaCard } from "@/components/ui/cta-card"; // Adjust the import path

export default function CtaCardDemo() {
  return (
    <div className="w-full max-w-4xl p-4">
      <CtaCard
        title="Join Us"
        subtitle="Ocean Consulting"
        description="Enrich your expertise and grow your career. The development of both technical and human skills is at the heart of our Group's success."
        buttonText="View Job Openings"
        imageSrc="https://cdn.21st.dev/assets/mirror/0a/0a7fa192f386cdd9b7800d04b0479705350cea3293ba3b83fc26d847fef93a90.jpg"
        imageAlt="A young professional woman in a yellow shirt, holding books and smiling."
        onButtonClick={() => console.log("Navigating to job openings...")}
      />
    </div>
  );
}