47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
const collections = [
|
|
{
|
|
title: 'Bestsellers',
|
|
image: '/images/collections/bestsellers.jpg', // replace with actual image path
|
|
},
|
|
{
|
|
title: 'New Arrivals',
|
|
image: '/images/collections/new-arrivals.jpg', // replace with actual image path
|
|
},
|
|
{
|
|
title: 'Gift Collection',
|
|
image: '/images/collections/gifting.jpg', // replace with actual image path
|
|
},
|
|
];
|
|
|
|
export function Collections() {
|
|
return (
|
|
<div className='flex flex-row max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
|
|
{collections.map((collection, index) => (
|
|
<div
|
|
key={index}
|
|
className='block rounded-lg overflow-hidden shadow-lg bg-white transition transform hover:scale-105 duration-300'
|
|
>
|
|
<Image
|
|
src={collection.image}
|
|
alt={collection.title}
|
|
width={500}
|
|
height={300}
|
|
className='w-full object-cover'
|
|
style={{
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
}}
|
|
/>
|
|
<div className='p-4'>
|
|
<h3 className='text-center text-base font-light'>
|
|
{collection.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|