Hover Expand Gallery

import { HoverExpandGallery } from "@/components/ui/hover-expand-gallery";

export default function DemoOne() {
  const images = [
    {
      src: "https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "A minimalist, modern living room with clean lines and neutral tones.",
      title: "Serene Living Space",
    },
    {
      src: "https://images.unsplash.com/photo-1596178065887-1198b6148b2b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "Sleek architectural detail of a building with a curved white facade.",
      title: "Architectural Curve",
    },
    {
      src: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "A person wearing stylish headphones, focusing on sound.",
      title: "Audio Immersion",
    },
    {
      src: "https://images.unsplash.com/photo-1614104490726-6b57ccf6e666?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "A modern, minimalist interior with a gray sofa and abstract art.",
      title: "Modern Interior",
    },
    {
      src: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "Exterior of a beautiful modern house with large windows and a garden.",
      title: "Contemporary Home",
    },
    {
      src: "https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
      alt: "A well-lit, stylish workspace with a wooden desk and chair.",
      title: "Elegant Workspace",
    },
  ];

  return (
    // Main container to center the component on the page
    <div className="flex min-h-screen w-full items-center justify-center bg-gray-100 dark:bg-black p-4 font-sans">
      <HoverExpandGallery images={images} />
    </div>
  );
}