Godmode vs Grok Bot page, 60 use cases and computer use section

apps/website/src/components/Footer.astro

@@ -22,10 +22,11 @@ const year = 2026;
       <p class="font-mono text-[11px] tracking-[0.12em] text-dim uppercase">Product</p>
       <ul class="mt-4 space-y-2.5 text-[14px] text-muted">
         <li><a class="hover:text-text" href="/#features">Features</a></li>
-        <li><a class="hover:text-text" href="/#use-cases">Use cases</a></li>
         <li><a class="hover:text-text" href="/#security">Security</a></li>
         <li><a class="hover:text-text" href="/#pricing">Pricing</a></li>
+        <li><a class="hover:text-text" href="/use-cases">Use case library</a></li>
         <li><a class="hover:text-text" href="/playbook">Playbook</a></li>
+        <li><a class="hover:text-text" href="/vs/grok-bot">Godmode vs Grok Bot</a></li>
         <li><a class="hover:text-text" href="/download">Download (customers)</a></li>
       </ul>
     </nav>

apps/website/src/components/sections/Compare.astro

@@ -23,7 +23,7 @@ const rows: { label: string; cells: Cell[] }[] = [
   },
   {
     label: 'Encrypted vault + 2FA, hidden from the model',
-    cells: [['yes', 'AES-256-GCM · TOTP'], ['?', ''], ['partial', 'Passwords; 2FA not stated'], ['no', 'Not encrypted at rest'], ['no', 'Display-only redaction'], ['?', '']],
+    cells: [['yes', 'AES-256-GCM · TOTP'], ['no', 'You type them in yourself'], ['partial', 'Passwords; 2FA not stated'], ['no', 'Not encrypted at rest'], ['no', 'Display-only redaction'], ['?', '']],
   },
   {
     label: 'Persistent agents with memory',
@@ -61,16 +61,29 @@ const mark = {
 <section id="compare" class="relative py-20 sm:py-28" data-track-view="compare">
   <div class="container-x">
     <div class="mx-auto max-w-[820px] text-center">
-      <p class="eyebrow justify-center" data-reveal><span class="n">08</span> Compare</p>
+      <p class="eyebrow justify-center" data-reveal><span class="n">09</span> Compare</p>
       <Words text="The best of every agent. *On a machine you own.*" class="h-section mx-auto mt-6" />
       <p class="lead mx-auto mt-6 max-w-[620px]" data-reveal style="--d:200">
         Grok Bot’s teammates, Dots’ own computer, OpenClaw’s local control, Hermes’ memory — plus a vault for passwords
         <em>and</em> 2FA codes that the model never sees. All in one app, running on your device.
       </p>
     </div>
 
-    <p class="mt-12 flex items-center justify-end gap-1.5 text-[12px] text-dim md:hidden">Swipe to compare <Icon name="arrow-right" size={12} /></p>
-    <div class="card mt-3 overflow-hidden md:mt-14" data-reveal style="--d:100">
+    <a href="/vs/grok-bot" class="card group mt-12 grid gap-6 p-7 sm:p-8 md:mt-14 md:grid-cols-[1fr_auto] md:items-center" data-reveal data-track="compare_grok">
+      <div>
+        <p class="font-mono text-[11px] tracking-[0.12em] text-dim uppercase">Coming from Grok Bot?</p>
+        <p class="h-card mt-3 text-[22px]">Same AI teammates. Your computer, your logins, no weekly meter.</p>
+        <ul class="mt-4 flex flex-wrap gap-2">
+          {['Already signed in via Chrome import', '2FA filled from the vault', 'Real desktop apps, in the background', 'Claude Opus 5.5'].map((t) => (
+            <li class="chip"><Icon name="check" size={11} stroke={2.4} class="text-brand" /> {t}</li>
+          ))}
+        </ul>
+      </div>
+      <span class="btn btn-ghost self-start md:self-center">Godmode vs Grok Bot <Icon name="arrow-right" size={16} class="transition-transform group-hover:translate-x-0.5" /></span>
+    </a>
+
+    <p class="mt-8 flex items-center justify-end gap-1.5 text-[12px] text-dim md:hidden">Swipe to compare <Icon name="arrow-right" size={12} /></p>
+    <div class="card mt-3 overflow-hidden" data-reveal style="--d:100">
       <div class="overflow-x-auto">
         <table class="compare w-full min-w-[980px] border-collapse text-left">
           <caption class="sr-only">Godmode compared with other AI agents</caption>

apps/website/src/components/sections/ComputerUse.astro

@@ -0,0 +1,112 @@
+---
+import Words from '../ui/Words.astro';
+import Icon from '../ui/Icon.astro';
+import Logo from '../ui/Logo.astro';
+import { SITE } from '@/config/site';
+
+interface Props {
+  eyebrow: string;
+}
+const { eyebrow } = Astro.props;
+
+const modes = [
+  {
+    icon: 'globe',
+    title: 'Your browser, signed in',
+    text: 'A real Chromium with your imported Chrome profile. No bot-flagged sandbox, no starting from zero.',
+    how: 'cookies · sessions · tabs',
+  },
+  {
+    icon: 'app-window',
+    title: 'Any app, in the background',
+    text: 'Share one window and Claude reads its controls and types into it while it’s covered. Your cursor never moves.',
+    how: 'ui elements · no cursor',
+  },
+  {
+    icon: 'monitor',
+    title: 'Your whole desktop',
+    text: 'When a job spans apps, share a display and it works like a person on screen-share. You see every move.',
+    how: 'every display · take over',
+  },
+  {
+    icon: 'monitor-smartphone',
+    title: 'Its own Mac',
+    text: 'An isolated macOS VM on your Mac for installs, builds and risky experiments. Your machine stays untouched.',
+    how: 'one click · shared folder',
+  },
+];
+
+const versus: [string, string, string][] = [
+  ['Logins', 'You build a way to sign in, then paste passwords into a prompt', 'Vault fills passwords and 2FA codes; the model sees [secret hidden]'],
+  ['Where it clicks', 'A demo container with an empty browser', 'Your sessions, your apps, or its own Mac'],
+  ['Your mouse', 'Taken over while it works', 'Stays yours: background input to the shared window'],
+  ['When it’s stuck', 'The script fails', 'Asks you in chat, or you hit “Take control” and it carries on'],
+  ['Running it again', 'Your own cron, your own glue code', 'Schedules, email and Slack triggers, plain-language conditions'],
+];
+---
+
+<section id="computer-use" class="relative py-20 sm:py-28" data-track-view="computer_use">
+  <div class="container-x">
+    <div class="grid items-end gap-8 lg:grid-cols-[1.15fr_0.85fr]">
+      <div class="max-w-[760px]">
+        <p class="eyebrow" data-reveal><span class="n">{eyebrow}</span> Computer use</p>
+        <Words text="The best computer use for Claude, *built in.*" class="h-section mt-6" />
+      </div>
+      <p class="lead max-w-[440px]" data-reveal style="--d:150">
+        {SITE.model} is one of the strongest computer-use models there is. Godmode gives it the best computer to use:
+        yours, already signed in, with four ways to work and zero setup.
+      </p>
+    </div>
+
+    <div class="mt-14 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      {
+        modes.map((m, i) => (
+          <article class="card flex flex-col p-7" data-reveal style={`--d:${i * 70}`}>
+            <span class="grid size-10 place-items-center rounded-xl bg-brand-soft text-brand ring-1 ring-[var(--brand-line)]">
+              <Icon name={m.icon} size={18} />
+            </span>
+            <h3 class="h-card mt-5">{m.title}</h3>
+            <p class="mt-2.5 flex-1 text-[15px] leading-relaxed text-muted">{m.text}</p>
+            <p class="mt-5 border-t border-line pt-4 font-mono text-[11px] tracking-[0.02em] text-dim">{m.how}</p>
+          </article>
+        ))
+      }
+    </div>
+
+    <div class="card mt-3 overflow-hidden" data-reveal style="--d:100">
+      <div class="overflow-x-auto">
+        <table class="compare w-full min-w-[720px] border-collapse text-left">
+          <caption class="sr-only">Claude computer use on its own compared with Claude computer use in Godmode</caption>
+          <thead>
+            <tr>
+              <th scope="col" class="w-[18%]"><span class="sr-only">Topic</span></th>
+              <th scope="col" class="col-head w-[41%]">Claude computer use, do-it-yourself</th>
+              <th scope="col" class="col-head is-us w-[41%]"><span class="flex items-center gap-2"><Logo size={20} /> Claude computer use in Godmode</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              versus.map(([topic, diy, us]) => (
+                <tr>
+                  <th scope="row">{topic}</th>
+                  <td>
+                    <span class="flex items-start gap-2.5">
+                      <Icon name="minus" size={16} stroke={2.2} class="mt-0.5 flex-none text-warn" />
+                      <span class="text-[13.5px] leading-snug text-muted">{diy}</span>
+                    </span>
+                  </td>
+                  <td class="is-us">
+                    <span class="flex items-start gap-2.5">
+                      <Icon name="check" size={16} stroke={2.2} class="mt-0.5 flex-none text-brand" />
+                      <span class="text-[13.5px] leading-snug text-text-2">{us}</span>
+                    </span>
+                  </td>
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>

apps/website/src/components/sections/Crew.astro

@@ -186,7 +186,7 @@ const studioName = 'Nova';
   <div class="crew-glow pointer-events-none absolute inset-0 -z-10" aria-hidden="true"></div>
   <div class="container-x">
     <div class="mx-auto max-w-[820px] text-center">
-      <p class="eyebrow justify-center" data-reveal><span class="n">03</span> Meet your crew</p>
+      <p class="eyebrow justify-center" data-reveal><span class="n">04</span> Meet your crew</p>
       <Words text="Not a bot. *A crew with faces.*" class="h-section mt-6" />
       <p class="lead mx-auto mt-6 max-w-[640px]" data-reveal style="--d:200">
         Godmode runs a team of agents, each with a job, a name, a look and a personality. The main agent hires the rest

apps/website/src/components/sections/Faq.astro

@@ -81,7 +81,7 @@ const faqs: { key: string; q: string; a: string }[] = [
 <section id="faq" class="relative py-20 sm:py-28" data-track-view="faq">
   <div class="container-x grid gap-12 lg:grid-cols-[0.8fr_1.2fr]">
     <div class="lg:sticky lg:top-28 lg:self-start">
-      <p class="eyebrow" data-reveal><span class="n">11</span> FAQ</p>
+      <p class="eyebrow" data-reveal><span class="n">12</span> FAQ</p>
       <Words text="Questions, *answered straight.*" class="h-section mt-6" />
       <p class="mt-6 max-w-[360px] text-[15px] leading-relaxed text-muted" data-reveal style="--d:200">
         Something else? Email <a href={`mailto:${SITE.email}`} class="text-text underline decoration-line-3 underline-offset-2">{SITE.email}</a> —

apps/website/src/components/sections/Hero.astro

@@ -16,7 +16,7 @@ import chat from '@/assets/shots/chat.png';
 
   <div class="container-x relative text-center">
     <div data-reveal style="--d:0">
-      <a href="#features" class="pill group mx-auto" data-track="hero_pill">
+      <a href="#computer-use" class="pill group mx-auto" data-track="hero_pill">
         <span class="flex items-center gap-2 rounded-full bg-[rgb(217_119_87/0.14)] py-1 pr-2.5 pl-2 text-[12.5px] whitespace-nowrap text-[#f0a488]">
           <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"
             ><path
@@ -25,7 +25,7 @@ import chat from '@/assets/shots/chat.png';
           >
           Claude Opus 5.5
         </span>
-        <span class="whitespace-nowrap text-text-2"><span class="hidden sm:inline">The AI that uses your computer like you do</span><span class="sm:hidden">Your AI coworker</span></span>
+        <span class="whitespace-nowrap text-text-2"><span class="hidden sm:inline">The best computer use for Claude, on your computer</span><span class="sm:hidden">Best computer use for Claude</span></span>
         <Icon name="arrow-right" size={14} class="text-dim transition-transform duration-500 group-hover:translate-x-0.5" />
       </a>
     </div>

apps/website/src/components/sections/HowItWorks.astro

@@ -30,7 +30,7 @@ const steps = [
 <section class="relative py-20 sm:py-28">
   <div class="container-x">
     <div class="mx-auto max-w-[760px] text-center">
-      <p class="eyebrow justify-center" data-reveal><span class="n">05</span> How it works</p>
+      <p class="eyebrow justify-center" data-reveal><span class="n">06</span> How it works</p>
       <Words text="From download to *done* before your coffee cools." class="h-section mt-6" />
     </div>
     <ol class="steps relative mt-16 grid gap-3 md:grid-cols-3">

apps/website/src/components/sections/Pricing.astro

@@ -96,7 +96,7 @@ const guarantees = [
   <div class="pricing-glow pointer-events-none absolute inset-x-0 top-40 -z-10 h-[700px]" aria-hidden="true"></div>
   <div class="container-x">
     <div class="mx-auto max-w-[780px] text-center">
-      <p class="eyebrow justify-center" data-reveal><span class="n">10</span> Founding 100</p>
+      <p class="eyebrow justify-center" data-reveal><span class="n">11</span> Founding 100</p>
       <Words text="Your first AI employee. *Working by Friday.*" class="h-section mx-auto mt-6" />
       <p class="lead mx-auto mt-6 max-w-[600px]" data-reveal style="--d:200">
         The founder sets it up with you, the price is locked for life, and if it doesn’t give you {FOUNDING.outcomeHours}

apps/website/src/components/sections/Roi.astro

@@ -11,7 +11,7 @@ const { yearly } = PRICING.plans;
   <div class="container-x">
     <div class="grid gap-14 lg:grid-cols-[1fr_1.1fr] lg:items-center">
       <div>
-        <p class="eyebrow" data-reveal><span class="n">09</span> The math</p>
+        <p class="eyebrow" data-reveal><span class="n">10</span> The math</p>
         <Words text="The math is *almost embarrassing.*" class="h-section mt-6" />
         <p class="lead mt-6 max-w-[520px]" data-reveal style="--d:200">
           A full-time assistant in the US costs a median <span class="text-text">$76,590 a year</span>. Godmode Pro costs

apps/website/src/components/sections/Security.astro

@@ -41,7 +41,7 @@ const points = [
   <div class="container-x">
     <div class="grid items-end gap-10 lg:grid-cols-[1.1fr_1fr]">
       <div>
-        <p class="eyebrow" data-reveal><span class="n">07</span> Security</p>
+        <p class="eyebrow" data-reveal><span class="n">08</span> Security</p>
         <Words text="Built like a vault. *Not like a demo.*" class="h-section mt-6" />
       </div>
       <p class="lead max-w-[460px]" data-reveal style="--d:200">

apps/website/src/components/sections/Showcase.astro

@@ -28,7 +28,7 @@ const shots = [
   <div class="container-x">
     <div class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
       <div class="max-w-[640px]">
-        <p class="eyebrow" data-reveal><span class="n">04</span> See it work</p>
+        <p class="eyebrow" data-reveal><span class="n">05</span> See it work</p>
         <Words text="Watch it. Or *don’t* — that’s the point." class="h-section mt-6" />
       </div>
       <p class="lead max-w-[380px] md:text-right" data-reveal style="--d:150">

apps/website/src/components/sections/UseCases.astro

@@ -94,7 +94,7 @@ const cases = [
 <section id="use-cases" class="relative py-20 sm:py-28" data-track-view="use_cases">
   <div class="container-x">
     <div class="max-w-[780px]">
-      <p class="eyebrow" data-reveal><span class="n">06</span> Use cases</p>
+      <p class="eyebrow" data-reveal><span class="n">07</span> Use cases</p>
       <Words text="Say it once. *It happens* every time." class="h-section mt-6" />
       <p class="lead mt-6 max-w-[600px]" data-reveal style="--d:200">
         Describe the work in a sentence. Godmode figures out the clicks — and the schedule.
@@ -157,7 +157,10 @@ const cases = [
           ))
         }
       </div>
-      <p class="mt-4 text-[12.5px] text-dim">Illustrative runs. Your agents work with the tools and accounts you give them.</p>
+      <div class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p class="text-[12.5px] text-dim">Illustrative runs. Your agents work with the tools and accounts you give them.</p>
+        <a href="/use-cases" class="btn btn-ghost btn-sm self-start" data-track="usecases_all">See all 60 use cases <Icon name="arrow-right" size={14} /></a>
+      </div>
     </div>
   </div>
 </section>

apps/website/src/pages/index.astro

@@ -8,6 +8,7 @@ import Hero from '@/components/sections/Hero.astro';
 import Tasks from '@/components/sections/Tasks.astro';
 import Founder from '@/components/sections/Founder.astro';
 import Capabilities from '@/components/sections/Capabilities.astro';
+import ComputerUse from '@/components/sections/ComputerUse.astro';
 import Crew from '@/components/sections/Crew.astro';
 import Showcase from '@/components/sections/Showcase.astro';
 import HowItWorks from '@/components/sections/HowItWorks.astro';
@@ -28,6 +29,7 @@ import Lead from '@/components/sections/Lead.astro';
     <Tasks />
     <Founder />
     <Capabilities />
+    <ComputerUse eyebrow="03" />
     <Crew />
     <Showcase />
     <HowItWorks />