Components
Loading preview...
Animated Feature Card This component displays a feature or benefit in a visually engaging card format. It's designed to be highly reusable, accepting props for its content, image, and color theme. The hover animation, powered by framer-motion, adds a delightful interactive element.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feature-card-1import { AnimatedFeatureCard } from "@/components/ui/feature-card-1";
// Data for the feature cards
const features = [
{
index: "001",
tag: "HEALTHIFY",
title: "Eat better to boost your gut health by 30s.",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-79XLKwCuOZGHdVcOlEApISx6x2nVd2.png&w=1000&q=75", // Replace with your image URL
color: "orange" as const,
},
{
index: "002",
tag: "DETANE",
title: "Avoid Chemicals to have a longer lifespan.",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-DtOMYxIaV2eptIhXTkorEzdNzhlgXK.png&w=1000&q=75", // Replace with your image URL
color: "purple" as const,
},
{
index: "003",
tag: "MEDITATE",
title: "Quick Calm Sessions that unlock your potential.",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-eDCSln4vQRsBBiP3mWirJOXYDyFO6q.png&w=1000&q=75", // Replace with your image URL
color: "blue" as const,
},
];
export default function FeatureCardDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background">
<div className="container mx-auto grid max-w-5xl grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
{features.map((feature) => (
<AnimatedFeatureCard
key={feature.index}
index={feature.index}
tag={feature.tag}
title={feature.title}
imageSrc={feature.imageSrc}
color={feature.color}
/>
))}
</div>
</div>
);
}