Components
Product Showcase Card Interactive product display with stacked images, SKU, and description. Highlights key features while driving engagement with a strong CTA button. Ideal for e-commerce, fashion, or retail platforms.
Loading preview...
import React from 'react';
import { ProductShowcaseCard } from '@/components/ui/cards';
const Demo = () => {
const images = [
'https://images.unsplash.com/photo-1526510747491-58f928ec870f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',
'https://images.unsplash.com/photo-1553782376-b2e8256ab838?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDQwfHxwZW9wbGV8ZW58MHx8MHx8fDA%3D',
'https://plus.unsplash.com/premium_photo-1682094690223-2c512a1ee0d7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTk3fHxwZW9wbGV8ZW58MHx8MHx8fDA%3D',
];
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<ProductShowcaseCard
images={images}
tag="HT-DHJ-GW-001"
title="Engineered for unpredictable spring days, this lightweight down jacket delivers just the right amount of warmth without overheating."
buttonText="View Collection"
/>
</div>
);
};
export default Demo;