From 2777dff2d00ba8e9be6bde9729754d3c86c68b28 Mon Sep 17 00:00:00 2001
From: Yaacov <coryacos1@gmail.com>
Date: Wed, 22 Jul 2026 16:56:10 +0300
Subject: [PATCH] Add provider screenshot lightbox

---
 src/pages/index.astro | 220 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 213 insertions(+), 7 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8d3e5d1..51f9882 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,10 @@ import CapabilityCard from "../components/CapabilityCard.astro";
 import MacDownloadMenu from "../components/MacDownloadMenu.astro";
 import PlatformButton from "../components/PlatformButton.astro";
 import Layout from "../layouts/Layout.astro";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+const [closeWidth, closeHeight, , , closePathData] = faXmark.icon;
+const closePath = Array.isArray(closePathData) ? closePathData[0] : closePathData;
 
 const capabilities = [
   {
@@ -111,12 +115,13 @@ const capabilities = [
       </div>
 
       <figure class="provider-figure">
-        <a
+        <button
+          type="button"
           class="provider-visual"
-          href="/screenshots/provider-picker.png"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Open the Scient provider picker screenshot at full size"
+          aria-label="Enlarge the Scient provider picker screenshot"
+          aria-haspopup="dialog"
+          aria-controls="provider-lightbox"
+          data-provider-lightbox-open
         >
           <span class="provider-shot">
             <img
@@ -128,13 +133,89 @@ const capabilities = [
               decoding="async"
             />
           </span>
-        </a>
+        </button>
         <figcaption>Choose and switch providers directly in Scient.</figcaption>
       </figure>
     </div>
+
+    <dialog
+      class="provider-lightbox"
+      id="provider-lightbox"
+      aria-label="Enlarged Scient provider picker screenshot"
+      tabindex="-1"
+      data-provider-lightbox
+    >
+      <div class="provider-lightbox__frame" data-provider-lightbox-frame>
+        <button
+          type="button"
+          class="provider-lightbox__close"
+          aria-label="Close enlarged screenshot"
+          data-provider-lightbox-close
+        >
+          <svg viewBox={`0 0 ${closeWidth} ${closeHeight}`} aria-hidden="true">
+            <path d={closePath}></path>
+          </svg>
+        </button>
+        <img
+          class="provider-lightbox__image"
+          src="/screenshots/provider-picker.png"
+          alt="Scient provider menu showing Codex, Claude, Cursor, Antigravity, Grok, Droid, Kilo, OpenCode, and Pi"
+          width="1838"
+          height="1094"
+          loading="lazy"
+          decoding="async"
+        />
+      </div>
+    </dialog>
   </section>
 </Layout>
 
+<script>
+  const lightboxTrigger = document.querySelector<HTMLButtonElement>("[data-provider-lightbox-open]");
+  const lightbox = document.querySelector<HTMLDialogElement>("[data-provider-lightbox]");
+  const lightboxFrame = lightbox?.querySelector<HTMLElement>("[data-provider-lightbox-frame]");
+  const lightboxClose = lightbox?.querySelector<HTMLButtonElement>("[data-provider-lightbox-close]");
+  let lightboxReturnFocus: HTMLElement | null = null;
+
+  function closeProviderLightbox(): void {
+    if (lightbox?.open) lightbox.close();
+  }
+
+  lightboxTrigger?.addEventListener("click", () => {
+    if (!lightbox || lightbox.open) return;
+    lightboxReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : lightboxTrigger;
+    lightbox.showModal();
+    document.documentElement.setAttribute("data-provider-lightbox-open", "");
+    lightbox.focus({ preventScroll: true });
+  });
+
+  lightboxClose?.addEventListener("click", closeProviderLightbox);
+
+  lightbox?.addEventListener("click", (event) => {
+    if (event.target === lightbox && lightboxFrame && !lightboxFrame.contains(event.target as Node)) {
+      closeProviderLightbox();
+    }
+  });
+
+  lightbox?.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    closeProviderLightbox();
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && lightbox?.open) {
+      event.preventDefault();
+      closeProviderLightbox();
+    }
+  });
+
+  lightbox?.addEventListener("close", () => {
+    document.documentElement.removeAttribute("data-provider-lightbox-open");
+    if (lightboxReturnFocus?.isConnected) lightboxReturnFocus.focus({ preventScroll: true });
+    lightboxReturnFocus = null;
+  });
+</script>
+
 <style>
   .hero {
     position: relative;
@@ -310,12 +391,18 @@ const capabilities = [
   }
 
   .provider-visual {
+    width: 100%;
     display: block;
     overflow: hidden;
+    padding: 0;
     border: 1px solid color-mix(in srgb, var(--slate) 28%, var(--line));
     border-radius: 0.85rem;
     background: #ffffff;
     box-shadow: 0 1.8rem 4.5rem rgba(28, 37, 54, 0.09);
+    color: inherit;
+    cursor: zoom-in;
+    font: inherit;
+    text-align: inherit;
     transition:
       border-color 240ms var(--ease-out),
       box-shadow 240ms var(--ease-out),
@@ -357,6 +444,112 @@ const capabilities = [
     letter-spacing: -0.01em;
   }
 
+  .provider-lightbox {
+    width: fit-content;
+    max-width: none;
+    margin: auto;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    color: var(--ink);
+  }
+
+  .provider-lightbox:focus {
+    outline: none;
+  }
+
+  .provider-lightbox::backdrop {
+    background: rgba(10, 12, 16, 0.76);
+    backdrop-filter: blur(3px);
+    animation: provider-backdrop-in 180ms ease-out both;
+  }
+
+  .provider-lightbox__frame {
+    position: relative;
+    width: min(84vw, calc(78vh * 1.68), 68rem);
+    aspect-ratio: 1838 / 1094;
+    max-height: 78vh;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.9rem;
+    background: #ffffff;
+    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.34);
+    animation: provider-lightbox-in 220ms var(--ease-out) both;
+  }
+
+  .provider-lightbox__image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: contain;
+  }
+
+  .provider-lightbox__close {
+    position: absolute;
+    z-index: 2;
+    top: 0.7rem;
+    right: 0.7rem;
+    width: 2.75rem;
+    height: 2.75rem;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: 0.45rem;
+    background: transparent;
+    box-shadow: none;
+    color: var(--ink);
+    cursor: pointer;
+    opacity: 0.68;
+    transition:
+      background-color 160ms ease,
+      opacity 160ms ease;
+  }
+
+  .provider-lightbox__close:hover {
+    background: rgba(17, 17, 17, 0.055);
+    opacity: 1;
+  }
+
+  .provider-lightbox__close:focus-visible {
+    background: rgba(255, 255, 255, 0.72);
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 1px;
+    opacity: 1;
+  }
+
+  .provider-lightbox__close svg {
+    width: 0.78rem;
+    height: 0.78rem;
+    fill: currentColor;
+  }
+
+  :global(html[data-provider-lightbox-open]),
+  :global(html[data-provider-lightbox-open] body) {
+    overflow: hidden;
+  }
+
+  @keyframes provider-lightbox-in {
+    from {
+      opacity: 0;
+      transform: scale(0.975) translateY(0.4rem);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes provider-backdrop-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   @media (max-width: 1120px) {
     .hero {
       grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
@@ -517,6 +710,17 @@ const capabilities = [
     .provider-figure figcaption {
       margin-top: 0.7rem;
     }
+
+    .provider-lightbox__frame {
+      width: min(92vw, calc(80vh * 1.68));
+      max-height: 80vh;
+      border-radius: 0.7rem;
+    }
+
+    .provider-lightbox__close {
+      top: 0.6rem;
+      right: 0.6rem;
+    }
   }
 
   @media (min-width: 431px) and (max-width: 600px) {
@@ -553,7 +757,9 @@ const capabilities = [
 
   @media (prefers-reduced-motion: reduce) {
     .reveal,
-    .hero-geometry {
+    .hero-geometry,
+    .provider-lightbox::backdrop,
+    .provider-lightbox__frame {
       opacity: 1;
       animation: none;
       transform: none;