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.
import { ProductCard, ProductCardProps } from "@/components/ui/product-card-2";
import { motion } from "framer-motion";
// Sample data for the product grid
const products: ProductCardProps[] = [
{
imageUrl: "https://cdn.21st.dev/assets/mirror/07/078b33c2581d2fa63b01b5dfd4967b7b35599a94d09bccbcbf5094385f3ab160.webp", // Placeholder image
name: "realme Buds Wireless 5 ANC",
tagline: "Best ANC, Beast Battery Life",
price: 1399,
originalPrice: 2799,
offerText: "1400 Off",
},
{
imageUrl: "https://cdn.21st.dev/assets/mirror/b6/b61a3ed15584401d291fcd744a36b9ea0240db830bc12cc428e70cc40edc1bf3.webp", // 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://cdn.21st.dev/assets/mirror/12/122ba5cceae5588f93a06c603bc209c663a01a53b7175bdeff4241e8668d9cb3.webp", // Placeholder image
name: "realme Buds Air7 Pro",
tagline: "The Sound Of Ai",
price: 4499,
originalPrice: 8999,
offerText: "Up to 500 Bank Offer",
},
{
imageUrl: "https://cdn.21st.dev/assets/mirror/e4/e447ef052a5d52fdf85a0bed145bad15dd0067145e1c91814a60d05fb78b062b.webp", // 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>
);
}