Image Gallery

import React from "react";

export default function Example() {
  const images = [
    "https://cdn.21st.dev/assets/mirror/47/4788a92fc3f1161cf82ceaf6f344e06b6e49a63ad191707df8a7b27c4fe836e8.jpg",
    "https://cdn.21st.dev/assets/mirror/c6/c62aea8caa9d64430c8d9ecf49f12024e9420ef464c853128ca687f9ac3044f5.jpg",
    "https://cdn.21st.dev/assets/mirror/26/263d67c005ba59007e40b9b3524e3bd73c1ff41874ba524b3ee0e1eecb5bd1bb.jpg",
    "https://cdn.21st.dev/assets/mirror/f3/f3c8a4e49212652e96d26bcc08a895f98899fd741a7acee448819c709007372c.jpg",
    "https://cdn.21st.dev/assets/mirror/76/762b80782968230bd6f7bfddafa695276e08b746595809e2edd7db8222346e82.jpg",
    "https://cdn.21st.dev/assets/mirror/7c/7c9a1899c778ae0c41ba034f8e9d2ea596f00436492ac8fb651f3f37625aa6ac.jpg",
  ];

  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
        * { font-family: 'Poppins', sans-serif; }
      `}</style>

      <section className="w-full flex flex-col items-center py-12">
        {/* Title block always on top */}
        <div className="max-w-3xl text-center px-4">
          <h1 className="text-3xl font-semibold">Our Latest Creations</h1>
          <p className="text-sm text-slate-500 mt-2">
            A visual collection of our most recent works – each piece crafted
            with intention, emotion, and style.
          </p>
        </div>

        {/* Gallery */}
        <div className="flex flex-wrap items-center justify-center mt-12 gap-4 max-w-5xl mx-auto">
          {images.map((src, idx) => (
            <div
              key={idx}
              className="relative group rounded-lg overflow-hidden"
            >
              <img
                src={src}
                alt={`image-${idx}`}
                className="size-56 object-cover object-top"
              />
              <div className="absolute inset-0 flex flex-col justify-end p-4 text-white bg-black/50 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <h1 className="text-xl font-medium">Image Title</h1>
                <a
                  href="#"
                  className="flex items-center gap-1 text-sm text-white/70"
                >
                  Show More
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 13 13"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M8.125 1.625H11.375V4.875"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M5.41602 7.58333L11.3743 1.625"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9.75 7.04167V10.2917C9.75 10.579 9.63586 10.8545 9.4327 11.0577C9.22953 11.2609 8.95398 11.375 8.66667 11.375H2.70833C2.42102 11.375 2.14547 11.2609 1.9423 11.0577C1.73914 10.8545 1.625 10.579 1.625 10.2917V4.33333C1.625 4.04602 1.73914 3.77047 1.9423 3.5673C2.14547 3.36414 2.42102 3.25 2.70833 3.25H5.95833"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}