Components
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.
Loading preview...
// 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;