Color Grayscale Effect

"use client";

const PHOTOS = [
  {
    src: "/img/gallery/g07.webp",
    alt: "Portrait of a woman lit by warm afternoon window light",
    label: "Portrait",
  },
  {
    src: "/img/gallery/g14.webp",
    alt: "Quiet city street receding into evening haze",
    label: "Street",
  },
  {
    src: "/img/gallery/g22.webp",
    alt: "Still life of fresh produce arranged on a wooden table",
    label: "Still life",
  },
];

export default function ImgfxColorGrayscale() {
  return (
    <section className="relative w-full bg-white px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        .cgfx-card img {
          filter: grayscale(1);
          transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .cgfx-card:hover img,
        .cgfx-card:focus-within img {
          filter: grayscale(0);
          transform: scale(1.04);
        }
        @media (prefers-reduced-motion: reduce) {
          .cgfx-card img {
            transition: filter 200ms linear;
            transform: none !important;
          }
        }
      `}</style>

      <div className="mx-auto max-w-5xl">
        <div className="mb-12 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-400">
            Image Effect
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
            Colour on Hover
          </h2>
          <p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
            Each frame rests in greyscale and blooms into full colour when you
            hover. <span className="font-medium text-neutral-700 dark:text-neutral-200">Hover or focus a card to reveal it.</span>
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
          {PHOTOS.map((photo) => (
            <figure
              key={photo.src}
              tabIndex={0}
              className="cgfx-card group relative overflow-hidden rounded-2xl ring-1 ring-neutral-200 outline-none transition-shadow duration-300 focus-visible:ring-2 focus-visible:ring-indigo-500 hover:shadow-xl hover:shadow-neutral-900/10 dark:ring-neutral-800 dark:hover:shadow-black/40"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={photo.src}
                alt={photo.alt}
                loading="lazy"
                draggable={false}
                className="aspect-[4/5] w-full object-cover"
              />
              <figcaption className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-between bg-gradient-to-t from-black/60 to-transparent px-4 pb-3 pt-10">
                <span className="text-xs font-medium uppercase tracking-wider text-white/90">
                  {photo.label}
                </span>
                <span className="rounded-full bg-white/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-white opacity-0 backdrop-blur-sm transition-opacity duration-500 group-hover:opacity-100 group-focus-within:opacity-100">
                  Live
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}