Hover Expand Gallery

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

export default function DemoOne() {
  const images = [
    {
      src: "https://cdn.21st.dev/assets/mirror/c0/c0c489f68797534896d731b0157848bfa59e1c2319a4c985ef95056c5608fb24.jpg",
      alt: "A minimalist, modern living room with clean lines and neutral tones.",
      title: "Serene Living Space",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/46/46f8333bd733385c4905c6c076e6abcc5cac1d2d4a4eb89bf8daa18a3474b89b.jpg",
      alt: "Sleek architectural detail of a building with a curved white facade.",
      title: "Architectural Curve",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/0b/0ba7bae35fab6542fd61c3e970daab8b7f4f1d65ce482413b9baa60d0d5e36f9.jpg",
      alt: "A person wearing stylish headphones, focusing on sound.",
      title: "Audio Immersion",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/95/95370ec5ca873782bdb293b3b4e762e653528245bd70d26487acc7e1c4293379.jpg",
      alt: "A modern, minimalist interior with a gray sofa and abstract art.",
      title: "Modern Interior",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/c9/c9b95eb56e6029bfb18aa5f6103d38d9ffefa0a0409af73a8c20db92676ffff0.jpg",
      alt: "Exterior of a beautiful modern house with large windows and a garden.",
      title: "Contemporary Home",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/61/61b0c517f77986124fd0f9a51c16385f90502a4f7b881e31a01c26fb338ed428.jpg",
      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>
  );
}