Interactive Travel Card A visually polished card component that uses framer-motion for a 3D hover effect. It's designed to be fully responsive and reusable, with all content and actions supplied through props. The styling is theme-adaptive, using shadcn CSS variables for the outer frame, while the inner "glass" elements are designed to overlay a background image beautifully in both light and dark modes.
import { ProductCard } from "@/components/ui/cards-1";
// Sample data for demonstration
const products = [
{
title: "AER Duffle Pack 3",
category: "Backpacks",
imageUrl: "https://cdn.21st.dev/assets/mirror/f2/f2c2a8725b51964b7ae8bd7ba2c38b1f5b011cb6a5ce7a80db786233ec2bbf75.jpg",
href: "#",
},
{
title: "Minimalist Mechanical Watch",
category: "Watches",
imageUrl: "https://cdn.21st.dev/assets/mirror/56/56afe16fc413b77d3086d250e07115aaa2f9b135202f555feecf3e01c5514f3f.jpg",
href: "#",
},
{
title: "Wireless Charging Stand",
category: "Tech Accessories",
imageUrl: "https://cdn.21st.dev/assets/mirror/07/077410911e9db97af883f8e39da2f92b70cb2776602ec2cf7bcd34e01f51ff31.jpg",
href: "#",
},
{
title: "Artisan Ceramic Mug",
category: "Home Goods",
imageUrl: "https://cdn.21st.dev/assets/mirror/6c/6cc8a6688e9f188e03c705fb3cee656f87497d177fdcff655b2abfdf8723287e.jpg",
href: "#",
},
];
export default function ProductCardDemo() {
const handleSave = (title: string) => {
// In a real app, you would handle the save logic here
console.log(`Saved: ${title}`);
};
return (
<div className="w-full bg-background p-4 sm:p-6 md:p-8">
<div className="mx-auto max-w-7xl">
{/* Responsive grid layout */}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{products.map((product) => (
<ProductCard
key={product.title}
title={product.title}
category={product.category}
imageUrl={product.imageUrl}
href={product.href}
onSave={() => handleSave(product.title)}
/>
))}
</div>
</div>
</div>
);
}