Components
Loading preview...
Product Card A visually polished ProductCard component designed to showcase products in a grid layout. It features a clean design, accepts various product details via props for maximum reusability, and includes a subtle hover animation. The accompanying demo showcases a responsive grid with a staggered entrance animation for a modern user experience.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/product-card-2import { ProductCard, ProductCardProps } from "@/components/ui/product-card-2";
import { motion } from "framer-motion";
// Sample data for the product grid
const products: ProductCardProps[] = [
{
imageUrl: "https://image01.realme.net/general/20250109/1736415319795d54ca63564df4a429066610426dbb975.png.webp?width=1440&height=1440&size=376999", // Placeholder image
name: "realme Buds Wireless 5 ANC",
tagline: "Best ANC, Beast Battery Life",
price: 1399,
originalPrice: 2799,
offerText: "1400 Off",
},
{
imageUrl: "https://image01.realme.net/general/20250317/17422067439182f5867123e114ce09d2ef0306d1a8f9b.png.webp?width=1440&height=1440&size=1025011", // Placeholder image
name: "realme Buds Air7",
tagline: "52dB Segment's Strongest ANC*",
price: 2699,
originalPrice: 4899,
isCouponPrice: true,
offerText: "Up to 100 Coupon",
},
{
imageUrl: "https://image01.realme.net/general/20250519/1747633988406ef120377e0d14fc68f95246e96625de1.png.webp?width=1440&height=1440&size=813046", // Placeholder image
name: "realme Buds Air7 Pro",
tagline: "The Sound Of Ai",
price: 4499,
originalPrice: 8999,
offerText: "Up to 500 Bank Offer",
},
{
imageUrl: "https://image01.realme.net/general/20241014/17288795936668c68fced6fb04cdb9365c8915f7fbd77.png.webp?width=1440&height=1440&size=282698", // Placeholder image
name: "realme Techlife Studio H1",
tagline: "Style Your Sound",
price: 3999,
originalPrice: 7999,
offerText: "Up to 500 Bank Offer",
},
];
// Animation variants for the container and items
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1, // Delay between each child animation
},
},
};
const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
type: "spring",
stiffness: 100,
damping: 10,
},
},
};
export default function ProductGridDemo() {
return (
<div className="w-full bg-background px-4 py-16">
<div className="mx-auto max-w-7xl">
{/* Section Header */}
<div className="mb-12 text-center">
<h2 className="text-4xl font-bold tracking-tight" style={{ color: '#F5A623' }}>
Let's Groove
</h2>
</div>
{/* Responsive Product Grid with Staggered Animation */}
<motion.div
className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
variants={containerVariants}
initial="hidden"
animate="visible"
>
{products.map((product, index) => (
<motion.div key={index} variants={itemVariants}>
<ProductCard {...product} />
</motion.div>
))}
</motion.div>
</div>
</div>
);
}