Add screenshot carousel, polish typography and theme styling

package.json

@@ -24,7 +24,8 @@
     "build": "pnpm --stream -r --filter \"!@graph-explorer/docs\" run build",
     "dev": "pnpm --stream -r --filter \"!@graph-explorer/docs\" run dev",
     "docs:dev": "pnpm --filter @graph-explorer/docs run dev",
-    "docs:build": "pnpm --filter @graph-explorer/docs run build"
+    "docs:build": "pnpm --filter @graph-explorer/docs run build",
+    "docs:preview": "pnpm --filter @graph-explorer/docs run preview"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "5.100.14",

packages/docs/astro.config.mjs

@@ -11,16 +11,18 @@ export default defineConfig({
         "@fontsource/inter/400.css",
         "@fontsource/inter/500.css",
         "@fontsource/inter/600.css",
+        "@fontsource/inter/700.css",
         "@fontsource/inter/800.css",
+        "./src/styles/tokens.css",
         "./src/styles/custom.css",
       ],
       expressiveCode: {
         frames: false,
       },
       components: {
-        Head: "./src/components/starlight/Head.astro",
-        Header: "./src/components/starlight/Header.astro",
-        Hero: "./src/components/starlight/Hero.astro",
+        Head: "./src/components/Head.astro",
+        Header: "./src/components/Header.astro",
+        Hero: "./src/components/Hero.astro",
       },
       social: [
         {

packages/docs/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/starlight": "0.38.3",
     "@fontsource/inter": "^5.2.8",
+    "@lucide/astro": "^1.17.0",
     "astro": "6.2.2",
     "sharp": "0.34.5"
   },

packages/docs/src/components/FeatureCard.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<article class="card sl-flex not-content">
+  <span class="icon-wrapper">
+    <slot name="icon" />
+  </span>
+  <div class="content-wrapper">
+    <p class="title" set:html={title} />
+    <div class="body"><slot /></div>
+  </div>
+</article>
+
+<style>
+  @layer starlight.components {
+    .card {
+      border: 1px solid var(--sl-color-gray-5);
+      background-color: var(--sl-color-black);
+      padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+      flex-direction: column;
+      gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+    }
+    .title {
+      font-weight: 700;
+      font-size: var(--sl-text-h5);
+      color: var(--sl-color-white);
+      line-height: var(--sl-line-height-headings);
+      gap: 1rem;
+      align-items: center;
+    }
+    .icon-wrapper {
+      font-size: var(--sl-text-h4);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-self: flex-start;
+      color: var(--sl-color-accent);
+    }
+    .icon-wrapper :global(svg) {
+      width: 1.333em;
+      height: 1.333em;
+    }
+    .card .content-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .card .body {
+      margin: 0;
+      font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+    }
+  }
+</style>

packages/docs/src/components/starlight/GraphBackground.astro → packages/docs/src/components/GraphBackground.astro

@@ -164,7 +164,7 @@
 <style>
   .graph-bg {
     position: absolute;
-    inset: -30% -20%;
+    inset: -30% 0;
     overflow: visible;
     pointer-events: none;
     z-index: 0;

packages/docs/src/components/starlight/Hero.astro → packages/docs/src/components/Hero.astro

@@ -4,6 +4,7 @@ import GraphBackground from './GraphBackground.astro';
 
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, actions = [] } = data.hero || {};
+
 ---
 
 <div class="hero" data-graph-hero>
@@ -17,8 +18,8 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
 		{
 			actions.length > 0 && (
 				<div class="actions">
-					{actions.map(({ icon, link: href, text, variant }) => (
-						<LinkButton href={href} variant={variant} icon={icon?.name}>
+					{actions.map(({ icon, link: href, text, variant, attrs }) => (
+						<LinkButton href={href} variant={variant} icon={icon?.name} iconPlacement={attrs?.iconPlacement || 'end'}>
 							{text}
 						</LinkButton>
 					))}
@@ -35,7 +36,8 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
 		justify-content: center;
 		align-items: center;
 		padding-block: clamp(4rem, calc(2rem + 12vmin), 12rem);
-		overflow: visible;
+		overflow-x: clip;
+		overflow-y: visible;
 	}
 
 	.hero-glow {
@@ -92,14 +94,15 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
 		line-height: var(--sl-line-height-headings);
 		font-weight: 800;
 		color: var(--sl-color-white);
+		letter-spacing: -0.03em;
 	}
 
 	.tagline {
 		font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
 		color: var(--sl-color-gray-2);
 	}
 
-	.actions {
+.actions {
 		display: flex;
 		gap: 1rem 2rem;
 		flex-wrap: wrap;

packages/docs/src/components/ScreenshotCarousel.astro

@@ -0,0 +1,188 @@
+---
+interface Props {
+  slides: { src: string; alt: string; title: string; description: string }[];
+}
+
+const { slides } = Astro.props;
+---
+
+<div class="screenshot-carousel not-content" data-carousel>
+  <div class="carousel-viewport">
+    <div class="carousel-track" data-carousel-track>
+      {slides.map((slide) => (
+        <div class="carousel-slide" data-title={slide.title} data-description={slide.description}>
+          <img src={slide.src} alt={slide.alt} loading="lazy" />
+        </div>
+      ))}
+    </div>
+  </div>
+  <div class="carousel-controls">
+    <div class="carousel-nav">
+      <button class="carousel-btn" data-carousel-prev aria-label="Previous screenshot">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>
+      <div class="carousel-dots" data-carousel-dots>
+        {slides.map((slide, i) => (
+          <button
+            class:list={['carousel-dot', { active: i === 0 }]}
+            data-index={i}
+            aria-label={slide.title}
+          />
+        ))}
+      </div>
+      <button class="carousel-btn" data-carousel-next aria-label="Next screenshot">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+      </button>
+    </div>
+    <div class="carousel-caption" data-carousel-caption>
+      <span class="carousel-title" data-carousel-title>{slides[0]?.title}</span>
+      <span class="carousel-description" data-carousel-description>{slides[0]?.description}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .screenshot-carousel {
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 0 2rem 4rem;
+  }
+
+  .carousel-viewport {
+    overflow: hidden;
+    border-radius: 0.75rem;
+    border: 1px solid oklch(from var(--sl-color-gray-5) l c h / 0.3);
+    background: var(--sl-color-gray-7);
+    box-shadow: 0 8px 40px oklch(0% 0 0 / 0.25);
+  }
+
+  :root[data-theme="light"] .carousel-viewport {
+    box-shadow: 0 8px 40px oklch(0% 0 0 / 0.08);
+  }
+
+  .carousel-track {
+    display: flex;
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .carousel-slide {
+    min-width: 100%;
+  }
+
+  .carousel-slide img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .carousel-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1.25rem;
+  }
+
+  .carousel-nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .carousel-dots {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    height: 1.75rem;
+  }
+
+  .carousel-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    border: none;
+    background: var(--sl-color-gray-4);
+    cursor: pointer;
+    padding: 0;
+    transition: width 0.2s ease, background 0.2s ease;
+  }
+
+  .carousel-dot.active {
+    background: var(--sl-color-accent);
+    width: 24px;
+  }
+
+  .carousel-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    border: 1px solid oklch(from var(--sl-color-gray-4) l c h / 0.4);
+    background: oklch(from var(--sl-color-gray-6) l c h / 0.6);
+    backdrop-filter: blur(8px);
+    color: var(--sl-color-gray-2);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .carousel-btn:hover {
+    border-color: var(--sl-color-accent);
+    color: var(--sl-color-accent);
+  }
+
+  .carousel-caption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    text-align: center;
+    max-width: 80ch;
+    text-wrap: balance;
+  }
+
+  .carousel-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--sl-color-white);
+  }
+
+  .carousel-description {
+    font-size: 0.9rem;
+    color: var(--sl-color-gray-3);
+    line-height: 1.5;
+  }
+</style>
+
+<script>
+  (function() {
+    const carousel = document.querySelector('[data-carousel]');
+    if (!carousel) return;
+    const track = carousel.querySelector('[data-carousel-track]') as HTMLElement;
+    const dots = carousel.querySelectorAll('.carousel-dot');
+    const titleEl = carousel.querySelector('[data-carousel-title]') as HTMLElement;
+    const descEl = carousel.querySelector('[data-carousel-description]') as HTMLElement;
+    const slides = carousel.querySelectorAll('.carousel-slide');
+    const prevBtn = carousel.querySelector('[data-carousel-prev]');
+    const nextBtn = carousel.querySelector('[data-carousel-next]');
+    let current = 0;
+    const total = slides.length;
+
+    function goTo(index: number) {
+      current = ((index % total) + total) % total;
+      track.style.transform = `translateX(${-current * 100}%)`;
+      dots.forEach((d, i) => d.classList.toggle('active', i === current));
+      titleEl.textContent = slides[current].getAttribute('data-title') || '';
+      descEl.textContent = slides[current].getAttribute('data-description') || '';
+    }
+
+    prevBtn?.addEventListener('click', () => goTo(current - 1));
+    nextBtn?.addEventListener('click', () => goTo(current + 1));
+    dots.forEach(d => d.addEventListener('click', () => goTo(parseInt(d.getAttribute('data-index') || '0'))));
+
+    let autoplay = setInterval(() => goTo(current + 1), 6000);
+    carousel.addEventListener('mouseenter', () => clearInterval(autoplay));
+    carousel.addEventListener('mouseleave', () => { autoplay = setInterval(() => goTo(current + 1), 6000); });
+  })();
+</script>