Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/cards-1import { ProductCard } from "@/components/ui/cards-1";
// Sample data for demonstration
const products = [
{
title: "AER Duffle Pack 3",
category: "Backpacks",
imageUrl: "https://images.unsplash.com/photo-1621624959365-071359461b94?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fEJhY2twYWNrc3xlbnwwfHwwfHx8MA%3D%3D?w=500&q=80",
href: "#",
},
{
title: "Minimalist Mechanical Watch",
category: "Watches",
imageUrl: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&q=80",
href: "#",
},
{
title: "Wireless Charging Stand",
category: "Tech Accessories",
imageUrl: "https://images.unsplash.com/photo-1617975316514-69cd7e16c2a4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8V2lyZWxlc3MlMjBDaGFyZ2luZyUyMFN0YW5kfGVufDB8fDB8fHww?w=500&q=80",
href: "#",
},
{
title: "Artisan Ceramic Mug",
category: "Home Goods",
imageUrl: "https://images.unsplash.com/photo-1541167760496-1628856ab772?w=500&q=80",
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>
);
}