dynamic-realty-next/src/components/layouts/HeaderFeaturedHomes.tsx

35 lines
1.0 KiB
TypeScript

"use client";
import Image from "next/image";
export default function HeaderFeaturedHomes() {
const images = [
"/images/featured-properties-17-480x287.jpg",
"/images/featured-properties-17-480x287.jpg",
"/images/featured-properties-17-480x287.jpg",
"/images/featured-properties-17-480x287.jpg",
"/images/featured-properties-17-480x287.jpg",
"/images/featured-properties-17-480x287.jpg",
];
return (
<div className="p-2">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1">
{images.map((src, index) => (
<div
key={index}
className="overflow-hidden rounded-lg shadow hover:shadow-lg transition-shadow duration-300 relative h-16"
>
<Image
src={src}
alt={`Gallery image ${index + 1}`}
className="object-cover transform transition-transform duration-300 hover:scale-105 cursor-pointer"
fill
/>
</div>
))}
</div>
</div>
);
}