Merge pull request #88 from priyanshujain/website

Website updates

Author: priyanshujain

website/src/components/CTA.astro

@@ -35,4 +35,19 @@ import Terminal from './Terminal.astro';
       view the source on GitHub</a
     >.
   </p>
+
+  <div class="mt-16 border-t border-border pt-12">
+    <h2 class="text-[1.4rem] font-semibold leading-[1.7] tracking-[0.02em] text-heading">
+      Support the project
+    </h2>
+    <p class="mt-4 text-[1.25rem] leading-[1.7] text-paragraph">
+      If you find OpenBotKit useful, the easiest way to support it is to
+      <a
+        href="https://github.com/priyanshujain/openbotkit"
+        target="_blank"
+        rel="noopener"
+        class="text-link underline"
+      >star it on GitHub</a>. It helps others discover the project.
+    </p>
+  </div>
 </section>

website/src/components/Footer.astro

@@ -5,7 +5,12 @@
   <div class="flex items-center justify-between text-[1rem] text-muted">
     <span>A <a href="https://73ai.org" target="_blank" rel="noopener" class="transition-colors hover:text-heading">73ai</a> project</span>
     <div class="flex items-center gap-6">
-      <span>MIT License</span>
+      <a
+        href="https://github.com/priyanshujain/openbotkit/blob/master/LICENSE"
+        target="_blank"
+        rel="noopener"
+        class="transition-colors hover:text-heading"
+      >MIT License</a>
       <a
         href="https://github.com/priyanshujain/openbotkit"
         target="_blank"

website/src/components/Mission.astro

@@ -8,7 +8,7 @@
 
   <div class="mt-8 space-y-6 text-[1.25rem] leading-[1.7] text-paragraph">
     <p>
-      OpenBotKit is a kit - not a service, not a platform. A kit gives you the parts and the tools
+      OpenBotKit is a kit, not a service, not a platform. A kit gives you the parts and the tools
       to build something yourself. You own it. You control it. You don't depend on anyone else to
       keep it running.
     </p>
@@ -41,7 +41,7 @@
     </p>
 
     <p>
-      We take inspiration from how Anthropic approaches safety - with deep respect for it at every
+      We take inspiration from how Anthropic approaches safety, with deep respect for it at every
       layer, from their models to Claude Code. We want to bring that same care to open-source
       personal assistants. Not because we have to, but because it's the right way to build.
     </p>
@@ -64,7 +64,7 @@
         People should control their own software.
       </dt>
       <dd class="mt-1.5 text-[1.25rem] leading-[1.7] text-paragraph">
-        AI makes it possible for people to own software that actually works for them - not software
+        AI makes it possible for people to own software that actually works for them, not software
         they work for. OpenBotKit is a kit you run on your machine, configure yourself, and extend
         how you want. No vendor lock-in. No subscriptions that disappear.
       </dd>
@@ -75,7 +75,7 @@
         Safety is non-negotiable.
       </dt>
       <dd class="mt-1.5 text-[1.25rem] leading-[1.7] text-paragraph">
-        Every sensitive action - sending an email, posting to Slack, modifying your calendar -
+        Every sensitive action (sending an email, posting to Slack, modifying your calendar)
         requires your explicit approval. This is enforced in code, not in prompts. The AI cannot
         skip it. We built 8 independent defense layers because one isn't enough.
       </dd>
@@ -105,8 +105,8 @@
       </dt>
       <dd class="mt-1.5 text-[1.25rem] leading-[1.7] text-paragraph">
         AI tools shouldn't cost a fortune. We ship cost profiles so you know what you're spending
-        before you spend it. You choose the LLM provider and model - Claude, Gemini, OpenAI,
-        OpenRouter, or Groq - and stay in control of the bill.
+        before you spend it. You choose the LLM provider and model (Claude, Gemini, OpenAI,
+        OpenRouter, or Groq) and stay in control of the bill.
       </dd>
     </div>
 

website/src/components/Nav.astro

@@ -1,4 +1,5 @@
 ---
+const currentPath = Astro.url.pathname;
 ---
 
 <nav class="fixed top-0 left-0 right-0 z-50 border-b border-border bg-bg/80 backdrop-blur-xl">
@@ -14,7 +15,7 @@
     <div class="flex items-center gap-6">
       <a
         href="/capabilities"
-        class="text-[1.1rem] font-semibold text-muted transition-colors hover:text-heading"
+        class:list={["text-[1.1rem] font-semibold transition-colors hover:text-heading", currentPath.startsWith("/capabilities") ? "text-heading" : "text-muted"]}
       >
         Capabilities
       </a>

website/src/pages/capabilities.astro

@@ -23,11 +23,16 @@ import Footer from '../components/Footer.astro';
         you interact through Telegram or the terminal. Every write action goes through approval
         gates before it executes.
       </p>
-      <img
-        src="/architecture.png"
-        alt="OpenBotKit architecture diagram showing the flow from user through channels, agent loop, safety layer, tool executor, and data sources - all stored in local SQLite"
-        class="mt-8 w-full rounded-lg border border-border"
-      />
+      <figure class="mt-8">
+        <img
+          src="/architecture.png"
+          alt="OpenBotKit architecture diagram showing the flow from user through channels, agent loop, safety layer, tool executor, and data sources, all stored in local SQLite"
+          class="w-full rounded-lg border border-border"
+        />
+        <figcaption class="mt-3 text-[1rem] text-muted">
+          How a message flows through OpenBotKit, from user input to tool execution and back.
+        </figcaption>
+      </figure>
     </section>
 
     <!-- Demo -->
@@ -37,13 +42,18 @@ import Footer from '../components/Footer.astro';
       </h2>
       <p class="mt-4 text-[1.25rem] leading-[1.7] text-paragraph">
         Chat with your assistant on Telegram. It checks your calendar, sends WhatsApp messages,
-        converts currencies, sets reminders - and asks before every action.
+        converts currencies, sets reminders, and asks before every action.
       </p>
-      <img
-        src="/demo.png"
-        alt="Telegram conversation showing OpenBotKit checking calendar availability, sending a WhatsApp message, converting currency, and setting a reminder - each with user approval"
-        class="mx-auto mt-8 w-full max-w-sm rounded-lg border border-border"
-      />
+      <figure class="mt-8">
+        <img
+          src="/demo.png"
+          alt="Telegram conversation showing OpenBotKit checking calendar availability, sending a WhatsApp message, converting currency, and setting a reminder, each with user approval"
+          class="mx-auto w-full max-w-sm rounded-lg border border-border"
+        />
+        <figcaption class="mt-3 text-center text-[1rem] text-muted">
+          <a href="https://x.com/pjay_in" target="_blank" rel="noopener" class="text-link hover:text-heading transition-colors">pjay</a> talking to his own bot he named 'Anton'
+        </figcaption>
+      </figure>
     </section>
 
     <!-- Integrations -->
@@ -54,48 +64,48 @@ import Footer from '../components/Footer.astro';
 
       <h3 class="mt-8 text-[1.2rem] font-semibold leading-[1.7] text-heading">Sources</h3>
       <p class="mt-2 text-[1.25rem] leading-[1.7] text-paragraph">
-        Your assistant reads, searches, and acts across your personal data - all synced locally.
+        Your assistant reads, searches, and acts across your personal data, all synced locally.
       </p>
       <dl class="mt-4 space-y-3 text-[1.25rem] leading-[1.7]">
         <div>
           <dt class="inline font-bold text-heading">Gmail</dt>
-          <dd class="inline text-paragraph"> - read, search, and send email with OAuth2.</dd>
+          <dd class="inline text-paragraph">: read, search, and send email with OAuth2.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">WhatsApp</dt>
           <dd class="inline text-paragraph">
-            - sync messages locally via QR code pairing. Send with approval.</dd
+            : sync messages locally via QR code pairing. Send with approval.</dd
           >
         </div>
         <div>
           <dt class="inline font-bold text-heading">Apple Notes</dt>
-          <dd class="inline text-paragraph"> - search and read notes on macOS via AppleScript.</dd>
+          <dd class="inline text-paragraph">: search and read notes on macOS via AppleScript.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">iMessage</dt>
-          <dd class="inline text-paragraph"> - read conversations on macOS.</dd>
+          <dd class="inline text-paragraph">: read conversations on macOS.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">Slack</dt>
-          <dd class="inline text-paragraph"> - read channels and send messages.</dd>
+          <dd class="inline text-paragraph">: read channels and send messages.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">Google Workspace</dt>
           <dd class="inline text-paragraph">
-            - Calendar, Docs, Sheets, Drive, and 40+ more APIs via progressive consent.</dd
+            : Calendar, Docs, Sheets, Drive, and 40+ more APIs via progressive consent.</dd
           >
         </div>
         <div>
           <dt class="inline font-bold text-heading">Contacts</dt>
-          <dd class="inline text-paragraph"> - search your address book by name.</dd>
+          <dd class="inline text-paragraph">: search your address book by name.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">Web Search</dt>
-          <dd class="inline text-paragraph"> - search the web. No API keys needed.</dd>
+          <dd class="inline text-paragraph">: search the web. No API keys needed.</dd>
         </div>
         <div>
           <dt class="inline font-bold text-heading">Scheduler</dt>
-          <dd class="inline text-paragraph"> - create reminders and recurring tasks.</dd>
+          <dd class="inline text-paragraph">: create reminders and recurring tasks.</dd>
         </div>
       </dl>
 
@@ -107,12 +117,12 @@ import Footer from '../components/Footer.astro';
         <div>
           <dt class="inline font-bold text-heading">Telegram</dt>
           <dd class="inline text-paragraph">
-            - chat, ask questions, and approve or deny actions with inline buttons.</dd
+            : chat, ask questions, and approve or deny actions with inline buttons.</dd
           >
         </div>
         <div>
           <dt class="inline font-bold text-heading">Terminal</dt>
-          <dd class="inline text-paragraph"> - full CLI for power users via <code class="rounded bg-heading/10 px-1.5 py-0.5 text-[1rem] text-heading">obk chat</code>.</dd>
+          <dd class="inline text-paragraph">: full CLI for power users via <code class="rounded bg-heading/10 px-1.5 py-0.5 text-[1rem] text-heading">obk chat</code>.</dd>
         </div>
       </dl>
 
@@ -146,7 +156,7 @@ import Footer from '../components/Footer.astro';
         <div>
           <dt class="font-bold text-heading">100+ plain-text skills</dt>
           <dd class="mt-1 text-paragraph">
-            Skills are plain language descriptions - not code. Services, helpers, personas, and
+            Skills are plain language descriptions, not code. Services, helpers, personas, and
             recipes you can read, edit, or replace in seconds.
           </dd>
         </div>
@@ -162,7 +172,7 @@ import Footer from '../components/Footer.astro';
           <dd class="mt-1 text-paragraph">
             All data lives in SQLite databases under <code
               class="rounded bg-heading/10 px-1.5 py-0.5 text-[1rem] text-heading">~/.obk/</code
-            >. Pure Go driver - no CGO, no external dependencies.
+            >. Pure Go driver, no CGO, no external dependencies.
           </dd>
         </div>
       </dl>
@@ -174,15 +184,15 @@ import Footer from '../components/Footer.astro';
         Safety architecture
       </h2>
       <p class="mt-4 text-[1.25rem] leading-[1.7] text-paragraph">
-        8 independent defense layers. Not prompts - code. Inspired by how Anthropic builds Claude
+        8 independent defense layers. Not prompts. Code. Inspired by how Anthropic builds Claude
         Code and informed by research from Lasso Security and Trail of Bits.
       </p>
 
       <ol class="mt-8 space-y-6 text-[1.25rem] leading-[1.7]">
         <li>
           <span class="font-bold text-heading">Approval gates.</span>
           <span class="text-paragraph">
-            Every write action - sending a message, creating an event, modifying a file - requires
+            Every write action (sending a message, creating an event, modifying a file) requires
             your explicit OK. Enforced in code via <code
               class="rounded bg-heading/10 px-1.5 py-0.5 text-[1rem] text-heading"
               >GuardedAction</code