Promo Card

Cards 58

About

Animated Promo Card A visually engaging card that applies a 3D tilt effect on hover. It's designed to showcase promotional content with a background image, title, subtitle, and a call-to-action button.

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

Code

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

Usage.tsx

import { AnimatedPromoCard } from "@/components/ui/promo-card"; // Adjust the import path

export default function AnimatedPromoCardDemo() {
  return (
    <div className="w-full h-full flex items-center justify-center bg-background p-4">
      <AnimatedPromoCard
        imageSrc="https://cdn.21st.dev/assets/mirror/1f/1f1bfee8661eead4fa454430beb9b5d79090d25da678b1b43ce132a129122595.jpg" // Placeholder image
        title="Severance"
        subtitle="Season 2 streaming now"
        buttonText="Watch Now"
        href="#"
      />
    </div>
  );
}