Components
Loading preview...
Product Feature Card A visually polished card component with hover and load-in animations to showcase a product or feature.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/product-feature-card// demo.tsx
import { ProductFeatureCard } from "@/components/ui/product-feature-card";
export default function ProductFeatureCardDemo() {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<ProductFeatureCard
title="Personalized weight care,"
description="lasting results by certified doctors."
linkText="Take the quiz"
linkHref="#"
// Replace with your actual image source
imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-0QlbZHclWAdizaFGxn2Nv3ECg3zLG7.png&w=320&q=75"
imageAlt="Measured product box and vial"
/>
</div>
);
}