Feature Card

Features

About

Animated Feature Card This component is designed to highlight a key feature in a visually engaging way. It includes a title, description, a call-to-action button, and a central animated graphic with a pulsating icon to draw user attention. It's built to be easily reused with different content by simply passing props.

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

Code

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

Usage.tsx

// demo.tsx

import { AnimatedFeatureCard } from '@/components/ui/feature-card-2';
import { Lock } from 'lucide-react'; // Using lucide-react for the icon

const FeatureCardDemo = () => {
  return (
    <div className="flex h-full min-h-screen w-full items-center justify-center bg-background p-4">
      <AnimatedFeatureCard
        title="Secure Investments"
        description="Optimize treasury performance with risk-free yields, real-time liquidity, and unmatched transparency powered by U.S. Treasury-backed stability."
        buttonText="Learn more"
        buttonHref="#"
        Icon={Lock} // Pass the Lock icon component
      />
    </div>
  );
};

export default FeatureCardDemo;