Update Turbo schema URLs to v2.9.3

apps/desktop/turbo.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://turbo.build/schema.json",
+  "$schema": "https://v2-9-3.turborepo.dev/schema.json",
   "extends": ["//"],
   "tasks": {
     "build": {

apps/marketing/src/components/Background.astro

@@ -40,7 +40,7 @@ const stars = Array.from({ length: starCount }, (_, i) => {
     <path d="M 600 490 C 460 590, 280 720, 60 940" class="kn-thread kn-thread-b" />
     <path d="M -40 180 C 200 160, 440 260, 560 340" class="kn-thread kn-thread-c" />
     <path d="M -60 780 C 300 740, 600 800, 900 720 S 1300 680, 1520 760" class="kn-thread kn-thread-d" />
-    <path d="M -40 320 C 200 300, 420 380, 640 340 S 960 260, 1480 380" class="kn-thread kn-thread-claw" />
+    <path id="thread-claw" d="M -40 320 C 200 300, 420 380, 640 340 S 960 260, 1480 380" class="kn-thread kn-thread-claw" />
     <path d="M 1100 -20 C 940 140, 780 300, 660 420" class="kn-thread kn-thread-claw-hi" />
     <path d="M 620 500 C 520 580, 380 700, 160 920" class="kn-thread kn-thread-claw-hi" />
     <path d="M 1520 200 C 1200 260, 900 180, 640 280 S 300 360, -40 240" class="kn-thread kn-thread-ocean" />
@@ -53,6 +53,23 @@ const stars = Array.from({ length: starCount }, (_, i) => {
     <circle cx="640" cy="462" r="30" fill="var(--kn-landing-accent-dim)" opacity="0.1" />
     <circle cx="800" cy="300" r="2" fill="var(--kn-landing-accent)" opacity="0.3" />
     <circle cx="800" cy="300" r="10" fill="var(--kn-landing-accent)" opacity="0.04" />
+
+    <!-- Thread energy pulse -->
+    <circle r="3" fill="var(--kn-landing-accent-bright)" opacity="0.6" class="kn-thread-pulse">
+      <animateMotion dur="12s" repeatCount="indefinite">
+        <mpath href="#thread-claw" />
+      </animateMotion>
+    </circle>
+    <circle r="8" fill="var(--kn-landing-accent)" opacity="0.12" class="kn-thread-pulse-glow">
+      <animateMotion dur="12s" repeatCount="indefinite">
+        <mpath href="#thread-claw" />
+      </animateMotion>
+    </circle>
+
+    <!-- Shooting stars -->
+    <line x1="200" y1="80" x2="320" y2="160" class="kn-shooting-star kn-shooting-star--1" />
+    <line x1="900" y1="120" x2="1020" y2="200" class="kn-shooting-star kn-shooting-star--2" />
+    <line x1="1200" y1="50" x2="1320" y2="130" class="kn-shooting-star kn-shooting-star--3" />
   </svg>
 </div>
 
@@ -65,6 +82,7 @@ const stars = Array.from({ length: starCount }, (_, i) => {
         r={star.r}
         fill="var(--kn-landing-star-color)"
         opacity={star.opacity}
+        data-star-index={star.id}
         class:list={{ "kn-star-twinkle": star.twinkle }}
         style={star.twinkle ? `animation-delay:${star.delay}s` : undefined}
       />

apps/marketing/src/components/CoreSurfaces.astro

@@ -14,6 +14,61 @@ interface Props {
 
 const { surfaces } = Astro.props;
 const defaultId = surfaces[0]?.id ?? "";
+
+/** CSS-only mockup visuals per surface */
+const surfaceVisuals: Record<string, string> = {
+  threads: `<div class="sv-mockup sv-threads">
+    <div class="sv-chrome"><span></span><span></span><span></span></div>
+    <div class="sv-thread sv-thread--active"><span class="sv-thread-dot"></span><span class="sv-thread-label"></span></div>
+    <div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label sv-thread-label--short"></span></div>
+    <div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label"></span></div>
+    <div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label sv-thread-label--short"></span></div>
+  </div>`,
+  diffs: `<div class="sv-mockup sv-diffs">
+    <div class="sv-chrome"><span></span><span></span><span></span></div>
+    <div class="sv-diff-line sv-diff-line--add"></div>
+    <div class="sv-diff-line sv-diff-line--add sv-diff-line--short"></div>
+    <div class="sv-diff-line sv-diff-line--ctx"></div>
+    <div class="sv-diff-line sv-diff-line--remove"></div>
+    <div class="sv-diff-line sv-diff-line--ctx sv-diff-line--short"></div>
+    <div class="sv-diff-line sv-diff-line--add"></div>
+  </div>`,
+  preview: `<div class="sv-mockup sv-preview">
+    <div class="sv-chrome"><span></span><span></span><span></span></div>
+    <div class="sv-browser-bar"></div>
+    <div class="sv-browser-body">
+      <div class="sv-block sv-block--hero"></div>
+      <div class="sv-block-row">
+        <div class="sv-block sv-block--card"></div>
+        <div class="sv-block sv-block--card"></div>
+      </div>
+    </div>
+  </div>`,
+  review: `<div class="sv-mockup sv-review">
+    <div class="sv-chrome"><span></span><span></span><span></span></div>
+    <div class="sv-comment">
+      <div class="sv-comment-head"><span class="sv-avatar"></span><span class="sv-comment-name"></span><span class="sv-comment-badge">Approved</span></div>
+      <div class="sv-comment-body"></div>
+      <div class="sv-comment-body sv-comment-body--short"></div>
+    </div>
+    <div class="sv-comment">
+      <div class="sv-comment-head"><span class="sv-avatar"></span><span class="sv-comment-name sv-comment-name--short"></span></div>
+      <div class="sv-comment-body"></div>
+    </div>
+  </div>`,
+  actions: `<div class="sv-mockup sv-actions">
+    <div class="sv-chrome"><span></span><span></span><span></span></div>
+    <div class="sv-action-row">
+      <div class="sv-action-btn"></div>
+      <div class="sv-action-btn"></div>
+    </div>
+    <div class="sv-terminal">
+      <div class="sv-terminal-line"></div>
+      <div class="sv-terminal-line sv-terminal-line--short"></div>
+      <div class="sv-terminal-line sv-terminal-line--accent"></div>
+    </div>
+  </div>`
+};
 ---
 
 <section id="surfaces" class="spotlight" data-tab-group data-tab-default={defaultId} data-reveal>
@@ -53,14 +108,19 @@ const defaultId = surfaces[0]?.id ?? "";
         aria-hidden={item.id === defaultId ? "false" : "true"}
         data-active={item.id === defaultId ? "true" : "false"}
       >
-        <p class="section-kicker">{item.kicker}</p>
-        <h3>{item.title}</h3>
-        <p>{item.body}</p>
-        <ul class="detail-bullets">
-          {item.bullets.map((bullet) => (
-            <li>{bullet}</li>
-          ))}
-        </ul>
+        <div class="spotlight-panel-content">
+          <div class="spotlight-panel-copy">
+            <p class="section-kicker">{item.kicker}</p>
+            <h3>{item.title}</h3>
+            <p>{item.body}</p>
+            <ul class="detail-bullets">
+              {item.bullets.map((bullet) => (
+                <li>{bullet}</li>
+              ))}
+            </ul>
+          </div>
+          <div class="spotlight-panel-visual" aria-hidden="true" set:html={surfaceVisuals[item.id] ?? ""} />
+        </div>
       </article>
     ))}
   </div>

apps/marketing/src/components/FaqSection.astro

@@ -45,6 +45,14 @@ const { faqs } = Astro.props;
       );
     })}
   </div>
+
+  <div class="faq-extra kn-card" data-reveal style="transition-delay: 0.15s">
+    <p><strong>Still have questions?</strong></p>
+    <p>Join the community on Discord and talk to other builders using OK Code.</p>
+    <a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer" class="secondary-button faq-discord-btn">
+      Join Discord
+    </a>
+  </div>
 </section>
 
 <style>

apps/marketing/src/components/FeatureGrid.astro

@@ -9,6 +9,31 @@ const icons = [
   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18"/><path d="M3 12h12"/><path d="M3 17h8"/><path d="M17 11l4 4-4 4"/></svg>`,
   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`
 ] as const;
+
+const visuals = [
+  // Card 1: Thread list pills
+  `<div class="fv-threads">
+    <div class="fv-thread fv-thread--active"></div>
+    <div class="fv-thread"></div>
+    <div class="fv-thread fv-thread--short"></div>
+    <div class="fv-thread"></div>
+  </div>`,
+  // Card 2: Diff lines
+  `<div class="fv-diff">
+    <div class="fv-line fv-line--add"></div>
+    <div class="fv-line fv-line--add fv-line--short"></div>
+    <div class="fv-line fv-line--remove"></div>
+    <div class="fv-line"></div>
+  </div>`,
+  // Card 3: Progress dots
+  `<div class="fv-progress">
+    <span class="fv-dot fv-dot--done"></span>
+    <span class="fv-connector fv-connector--done"></span>
+    <span class="fv-dot fv-dot--done"></span>
+    <span class="fv-connector"></span>
+    <span class="fv-dot"></span>
+  </div>`
+] as const;
 ---
 
 <section id="features" class="feature-grid feature-grid--bento" aria-label="Core product pillars" data-reveal data-reveal-children>
@@ -22,6 +47,7 @@ const icons = [
         </div>
       </div>
       <p>{pillar.body}</p>
+      <div class="feature-card-visual" aria-hidden="true" set:html={visuals[index] ?? visuals[0]} />
     </article>
   ))}
 </section>

apps/marketing/src/components/FinalCta.astro

@@ -10,6 +10,10 @@
     <div class="final-cta-orb final-cta-orb--2"></div>
   </div>
   <div class="final-cta-content">
+    <div class="final-cta-mark" aria-hidden="true">
+      <div class="final-cta-mark-glow"></div>
+      <img src="/icon.png" alt="" width="48" height="48" class="final-cta-mark-img" />
+    </div>
     <p class="section-kicker">Ready</p>
     <h2>Stop building through tab chaos.</h2>
     <p>
@@ -88,6 +92,30 @@
     z-index: 1;
   }
 
+  .final-cta-mark {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .final-cta-mark-glow {
+    position: absolute;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 999px;
+    background: radial-gradient(circle, rgba(202, 58, 41, 0.15), transparent 70%);
+    filter: blur(16px);
+    animation: float 6s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  .final-cta-mark-img {
+    position: relative;
+    border-radius: 1rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
   @keyframes float {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-12px); }

apps/marketing/src/components/Hero.astro

@@ -51,6 +51,44 @@
       </a>
     </div>
 
+    <!-- Product visual mockup -->
+    <div class="hero-visual-stage" aria-hidden="true">
+      <div class="hero-stage-chrome">
+        <div class="hero-stage-dots"><span></span><span></span><span></span></div>
+        <span class="hero-stage-title">OK Code</span>
+        <div class="hero-stage-badge">Thread</div>
+      </div>
+      <div class="hero-stage-body">
+        <div class="hero-stage-sidebar">
+          <div class="hero-stage-sidebar-title"></div>
+          <div class="hero-stage-thread hero-stage-thread--active"></div>
+          <div class="hero-stage-thread"></div>
+          <div class="hero-stage-thread hero-stage-thread--short"></div>
+          <div class="hero-stage-thread"></div>
+        </div>
+        <div class="hero-stage-main">
+          <div class="hero-stage-msg hero-stage-msg--lg"></div>
+          <div class="hero-stage-msg"></div>
+          <div class="hero-stage-msg hero-stage-msg--sm"></div>
+          <div class="hero-stage-msg hero-stage-msg--lg"></div>
+          <div class="hero-stage-msg"></div>
+          <div class="hero-stage-msg hero-stage-msg--xs"></div>
+        </div>
+        <div class="hero-stage-panel">
+          <div class="hero-stage-panel-head">
+            <span class="hero-stage-panel-label">Diff</span>
+            <span class="hero-stage-panel-status">+3 −1</span>
+          </div>
+          <div class="hero-stage-line hero-stage-line--add"></div>
+          <div class="hero-stage-line hero-stage-line--add hero-stage-line--short"></div>
+          <div class="hero-stage-line hero-stage-line--remove"></div>
+          <div class="hero-stage-line"></div>
+          <div class="hero-stage-line hero-stage-line--add"></div>
+          <div class="hero-stage-line hero-stage-line--short"></div>
+        </div>
+      </div>
+    </div>
+
     <div class="hero-meta hero-meta--centered">
       <a href="/download" class="other-platforms">Other platforms</a>
       <div class="hero-pills" aria-label="Product highlights">

apps/marketing/src/components/ThemeShowcase.astro

@@ -15,6 +15,13 @@ interface Props {
 
 const { themes } = Astro.props;
 const defaultId = themes[0]?.id ?? "";
+
+/** Palette swatches per theme (bg, accent, secondary, text, muted) */
+const palettes: Record<string, string[]> = {
+  "iridescent-void": ["#050507", "#67e8f9", "#a855f7", "#e8ecf0", "#4a5060"],
+  "solar-witch": ["#0a0806", "#fb923c", "#fbbf24", "#e8ecf0", "#5a4a3a"],
+  "deep-sea-terminal": ["#040810", "#22d3ee", "#5eead4", "#e8ecf0", "#3a4a5a"],
+};
 ---
 
 <section class="theme-section" data-tab-group data-tab-default={defaultId} data-reveal>
@@ -59,18 +66,32 @@ const defaultId = themes[0]?.id ?? "";
         >
           <div class="theme-preview-bar">
             <span></span><span></span><span></span>
+            <span class="theme-preview-toolbar-label">OK Code</span>
           </div>
           <div class="theme-preview-body">
-            <div class="theme-preview-sidebar"></div>
+            <div class="theme-preview-sidebar">
+              <div class="theme-sidebar-item theme-sidebar-item--active"></div>
+              <div class="theme-sidebar-item"></div>
+              <div class="theme-sidebar-item theme-sidebar-item--short"></div>
+            </div>
             <div class="theme-preview-main">
               <div class="theme-preview-line theme-preview-line--short"></div>
               <div class="theme-preview-line"></div>
               <div class="theme-preview-line theme-preview-line--accent"></div>
               <div class="theme-preview-line theme-preview-line--medium"></div>
+              <div class="theme-preview-line theme-preview-line--short"></div>
+              <div class="theme-preview-line"></div>
+              <div class="theme-preview-line theme-preview-line--accent theme-preview-line--medium"></div>
+              <div class="theme-preview-line theme-preview-line--short"></div>
             </div>
           </div>
+          <div class="theme-palette" aria-label="Color palette">
+            {(palettes[theme.id] ?? []).map((color) => (
+              <span class="theme-swatch" style={`background: ${color}`}></span>
+            ))}
+          </div>
         </div>
-        <div class="theme-note kn-card">
+        <div class="theme-note kn-card" style={`border-left: 3px solid ${theme.accent}`}>
           <h3>{theme.label}</h3>
           <p class="theme-vibe">{theme.vibe}</p>
           <p>{theme.body}</p>

apps/marketing/src/components/TrustStrip.astro

@@ -7,16 +7,19 @@ const items = [
     icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
     label: "Made for builders",
     text: "Designed around real AI coding workflows",
+    metric: "5 integrated surfaces",
   },
   {
     icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>`,
     label: "Calm by default",
     text: "Less context switching, more legible work",
+    metric: "Zero context switching",
   },
   {
     icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
     label: "Close to the metal",
     text: "Open source, desktop-aware, release-friendly",
+    metric: "100% open source — MIT",
   },
 ];
 ---
@@ -27,6 +30,7 @@ const items = [
       <span class="trust-icon" set:html={item.icon} />
       <span class="trust-label">{item.label}</span>
       <strong>{item.text}</strong>
+      <span class="trust-metric">{item.metric}</span>
     </div>
   ))}
 </section>
@@ -73,4 +77,12 @@ const items = [
     width: 100%;
     height: 100%;
   }
+
+  .trust-metric {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.78rem;
+    color: var(--kn-landing-text-dim, #4a5060);
+    letter-spacing: 0.02em;
+  }
 </style>