Center Icon Effect

"use client";

export default function ImgfxCenterIcon() {
  return (
    <section className="relative w-full bg-white px-6 py-20 dark:bg-neutral-950 sm:py-24">
      <style>{`
        .imgfx-ci-card {
          transition: box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .imgfx-ci-overlay {
          opacity: 0;
          transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .imgfx-ci-icon {
          opacity: 0;
          transform: scale(0.72);
          transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .imgfx-ci-img {
          transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .imgfx-ci-card:hover .imgfx-ci-overlay,
        .imgfx-ci-card:focus-within .imgfx-ci-overlay {
          opacity: 1;
        }
        .imgfx-ci-card:hover .imgfx-ci-icon,
        .imgfx-ci-card:focus-within .imgfx-ci-icon {
          opacity: 1;
          transform: scale(1);
        }
        .imgfx-ci-card:hover .imgfx-ci-img,
        .imgfx-ci-card:focus-within .imgfx-ci-img {
          transform: scale(1.05);
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfx-ci-card,
          .imgfx-ci-overlay,
          .imgfx-ci-icon,
          .imgfx-ci-img {
            transition: none !important;
          }
          .imgfx-ci-icon {
            transform: scale(1);
          }
        }
      `}</style>

      <div className="mx-auto max-w-2xl 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-2xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-3xl">
          Center Reveal Icon
        </h2>
        <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
          A dim overlay and a centred view icon fade in on hover. Hover or focus the image below.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-md">
        <a
          href="#"
          onClick={(e) => e.preventDefault()}
          aria-label="View full image: sunlit workspace with laptop and notebook"
          className="imgfx-ci-card group relative block aspect-[4/5] overflow-hidden rounded-2xl shadow-sm outline-none ring-1 ring-neutral-200 hover:shadow-xl focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-neutral-800"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt="Sunlit workspace with a laptop and notebook on a wooden desk"
            loading="lazy"
            draggable={false}
            className="imgfx-ci-img h-full w-full object-cover"
          />

          <div className="imgfx-ci-overlay absolute inset-0 bg-neutral-950/45" />

          <div className="imgfx-ci-icon absolute inset-0 flex items-center justify-center">
            <span className="flex h-14 w-14 items-center justify-center rounded-full bg-white/95 text-neutral-900 shadow-lg backdrop-blur-sm dark:bg-neutral-900/90 dark:text-neutral-50">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.75}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
                aria-hidden="true"
              >
                <path d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
              </svg>
            </span>
          </div>
        </a>
      </div>
    </section>
  );
}