From 3add0fd23ed094d0382140361c29c18d040c810f Mon Sep 17 00:00:00 2001
From: Jatin K Malik <jatinkrmalik@gmail.com>
Date: Thu, 5 Feb 2026 17:57:39 -0800
Subject: [PATCH] feat(website): make interactive install the default and
 remove voice commands section (#146)

* feat(website): make interactive install the default

- Updated hero section Quick Install to use interactive mode
- Changed label to 'Quick Install (Interactive)' with guided installation description
- Removed duplicate Interactive Install section from detailed install area
- Renamed 'Quick Install (Auto-detect)' to 'Auto-detect Install' as alternative option

* feat(website): remove voice commands section

- Removed 'Built-in Voice Commands' section from website
- Removed navigation and footer links to voice commands
- Voice commands functionality remains in app but not featured on website

Voice commands implementation is being reconsidered for future releases as
Whisper models now handle punctuation well natively.
---
 web/src/app/page.tsx | 121 +++----------------------------------------
 1 file changed, 6 insertions(+), 115 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 180a1a7..d27af09 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -183,7 +183,6 @@ export default function HomePage() {
     { href: "#demo", label: "Demo" },
     { href: "#features", label: "Features" },
     { href: "#install", label: "Install" },
-    { href: "#voice-commands", label: "Commands" },
     { href: "#faq", label: "FAQ" },
   ];
 
@@ -357,8 +356,8 @@ export default function HomePage() {
                     <Terminal className="h-5 w-5 text-green-400" />
                   </div>
                   <div className="text-left">
-                    <h2 className="text-lg font-semibold text-white text-left">Quick Install</h2>
-                    <p className="text-xs text-zinc-400 text-left">Copy & paste in your terminal</p>
+                    <h2 className="text-lg font-semibold text-white text-left">Quick Install (Interactive)</h2>
+                    <p className="text-xs text-zinc-400 text-left">Guided installation with hardware detection</p>
                   </div>
                 </div>
 
@@ -370,11 +369,11 @@ export default function HomePage() {
                       <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
                       <div className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
                     </div>
-                    <CopyButton text={oneClickInstallCommand} />
+                    <CopyButton text={interactiveInstallCommand} />
                   </div>
                   <div className="p-4 sm:p-5">
                     <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre">
-                      <span className="text-zinc-500 select-none">$ </span>{oneClickInstallCommand}
+                      <span className="text-zinc-500 select-none">$ </span>{interactiveInstallCommand}
                     </pre>
                   </div>
                 </div>
@@ -602,43 +601,14 @@ export default function HomePage() {
           <FadeInSection delay={0.1}>
             <div className="bg-white dark:bg-zinc-800 rounded-2xl shadow-xl overflow-hidden border border-zinc-200 dark:border-zinc-700 min-w-0">
               <div className="p-6 sm:p-8">
-                {/* Interactive Install - NEW PRIMARY OPTION */}
-                <div className="mb-8 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl p-6 -mx-6 -mt-8 sm:-mx-8 sm:-mt-8 border border-purple-500/20">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="bg-purple-500/10 p-2 rounded-lg">
-                      <Sparkles className="h-5 w-5 text-purple-500" />
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-xl font-semibold">Interactive Install (Recommended)</h3>
-                      <p className="text-sm text-muted-foreground">
-                        Guided installation with smart hardware detection
-                      </p>
-                    </div>
-                    <CopyButton text={interactiveInstallCommand} />
-                  </div>
-                  <div className="overflow-x-auto">
-                    <CodeBlock
-                      language="bash"
-                      className="rounded-lg text-sm sm:text-base"
-                      customStyle={{ margin: 0, maxWidth: "100%", overflowX: "auto" }}
-                      wrapLongLines={false}
-                    >
-                      {interactiveInstallCommand}
-                    </CodeBlock>
-                  </div>
-                  <p className="text-xs text-muted-foreground mt-3">
-                    Detects your GPU and recommends the best option. Prompts for your preferences.
-                  </p>
-                </div>
-
-                {/* Primary install option */}
+                {/* Alternative: Auto-detect install */}
                 <div className="mb-8">
                   <div className="flex items-center gap-3 mb-4">
                     <div className="bg-blue-500/10 p-2 rounded-lg">
                       <Zap className="h-5 w-5 text-blue-500" />
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-xl font-semibold">Quick Install (Auto-detect)</h3>
+                      <h3 className="text-xl font-semibold">Auto-detect Install</h3>
                       <p className="text-sm text-muted-foreground">
                         Fastest for power users - no prompts (~3-10 min)
                       </p>
@@ -791,80 +761,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Voice Commands Section */}
-      <section id="voice-commands" className="py-16 sm:py-24 px-4 sm:px-6">
-        <div className="max-w-5xl mx-auto">
-          <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
-                Built-in Voice Commands
-              </h2>
-              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-                Go beyond basic dictation with natural voice commands for punctuation, formatting, and editing.
-              </p>
-            </div>
-          </FadeInSection>
-
-          <div className="grid md:grid-cols-2 gap-8">
-            <FadeInSection delay={0.1}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full">
-                <h3 className="text-xl font-semibold mb-6 flex items-center gap-2">
-                  <Edit className="h-5 w-5 text-primary" />
-                  Punctuation &amp; Formatting
-                </h3>
-                <div className="space-y-3">
-                  {[
-                    { command: '"new line"', result: "Inserts a line break" },
-                    { command: '"period" / "full stop"', result: "Types a period (.)" },
-                    { command: '"comma"', result: "Types a comma (,)" },
-                    { command: '"question mark"', result: "Types a question mark (?)" },
-                    { command: '"exclamation mark"', result: "Types an exclamation mark (!)" },
-                    { command: '"colon"', result: "Types a colon (:)" },
-                    { command: '"semicolon"', result: "Types a semicolon (;)" },
-                    { command: '"new paragraph"', result: "Inserts two line breaks" },
-                  ].map((item, i) => (
-                    <div key={i} className="flex justify-between items-center py-2 border-b border-zinc-100 dark:border-zinc-700 last:border-0">
-                      <code className="text-sm bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded">
-                        {item.command}
-                      </code>
-                      <span className="text-sm text-muted-foreground">{item.result}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </FadeInSection>
-
-            <FadeInSection delay={0.2}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full">
-                <h3 className="text-xl font-semibold mb-6 flex items-center gap-2">
-                  <Terminal className="h-5 w-5 text-primary" />
-                  Editing Commands
-                </h3>
-                <div className="space-y-3">
-                  {[
-                    { command: '"delete that"', result: "Deletes the last phrase" },
-                    { command: '"backspace"', result: "Deletes previous character" },
-                    { command: '"undo"', result: "Undoes last action" },
-                    { command: '"redo"', result: "Redoes last action" },
-                    { command: '"select all"', result: "Selects all text" },
-                    { command: '"copy"', result: "Copies selected text" },
-                    { command: '"paste"', result: "Pastes from clipboard" },
-                    { command: '"capitalize"', result: "Capitalizes next word" },
-                  ].map((item, i) => (
-                    <div key={i} className="flex justify-between items-center py-2 border-b border-zinc-100 dark:border-zinc-700 last:border-0">
-                      <code className="text-sm bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded">
-                        {item.command}
-                      </code>
-                      <span className="text-sm text-muted-foreground">{item.result}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </FadeInSection>
-          </div>
-        </div>
-      </section>
-
       {/* Speech Engines Section */}
       <section className="py-16 sm:py-24 px-4 sm:px-6 bg-zinc-50 dark:bg-zinc-900/50">
         <div className="max-w-5xl mx-auto">
@@ -1084,11 +980,6 @@ export default function HomePage() {
                     Installation
                   </a>
                 </li>
-                <li>
-                  <a href="#voice-commands" className="text-zinc-400 hover:text-white transition-colors">
-                    Voice Commands
-                  </a>
-                </li>
                 <li>
                   <a href="#faq" className="text-zinc-400 hover:text-white transition-colors">
                     FAQ