docs(web): document v0.7.0 features on the website (#172)

* docs(web): document v0.7.0 features on the website

Adds website coverage for features shipped since v0.6.2 (audit found 4 of
5 uncovered; Homebrew was already fully covered, left untouched):

- New feature pages: Custom Vocabulary (#169) and Usage Statistics
  (#148/#168/#170), each with a landing-page grid card.
- Landing JSON-LD featureList: add custom vocabulary, local usage stats,
  and selectable audio input device (#156).
- Hotkey presets + custom recording (#139): fix stale "key combination"
  copy in fully-configurable.md, document the Record/custom-key capture
  and add the Right Control preset in push-to-talk.md, and update the FAQ.
- Audio input device (#156): expand fully-configurable.md (System Default,
  non-invasive pinning, auto-fallback on disconnect, Refresh Devices).
- Screenshots gallery: add a Stats tab entry.

Two screenshots still needed from a real capture (marked with SCREENSHOT
PLACEHOLDER comments): settings-stats.png and settings-vocabulary.png.
Verified with `hugo` (build succeeds; new pages render; JSON-LD valid).

* polish(web): refine features grid, fix mobile hero overflow, SEO pass

Features grid:
- Switch from a fixed 4-col grid (which left 2 orphan cards hanging and,
  via grid-auto-rows:1fr, forced every row to the tallest card's height)
  to a centered flex-wrap layout: uniform card heights, the short last
  row centers, and 4/2/1 columns at desktop/tablet/mobile.
- Apple-style polish: icon squircle tiles, tighter 1–2 line copy on every
  card, softer corners, refined heading type, gentler hover.

Mobile hero:
- The 380px mockup forced the hero column wider than small viewports,
  clipping the subtext/pills/buttons. Reset min-width and clip the
  decorative mockup so nothing overflows below ~420px.

SEO:
- og:type now "article" for content pages (was always "website").
- Enriched the home and features-list meta descriptions.
- Verified across all 18 pages: unique titles, one <h1> each, descriptions
  present, all <img> have alt, sitemap includes the new pages.

Screenshots: add settings-stats.png and settings-vocabulary.png (referenced
by the new feature pages) and refresh settings-general.png.

Author: jatinkrmalik

web/content/_index.md

@@ -1,5 +1,5 @@
 ---
 title: "VocaMac - 100% Local Voice-to-Text for macOS"
-description: "100% offline, open-source voice-to-text for macOS. Powered by WhisperKit + CoreML."
+description: "Free, 100% offline voice-to-text for macOS. Hold a hotkey, speak, and text appears at your cursor — private, fast, and powered by WhisperKit on Apple Silicon."
 keywords: "voice to text macOS, offline dictation, speech to text mac, whisperkit, coreml speech recognition, push to talk mac, open source dictation, privacy voice typing, apple silicon voice recognition"
 ---

web/content/features/_index.md

@@ -1,4 +1,5 @@
 ---
 title: "Features"
-description: "Everything VocaMac can do for you."
+description: "Explore every VocaMac feature — push-to-talk dictation, 99+ languages, custom vocabulary, usage stats, and more. 100% local voice-to-text for macOS."
+keywords: "vocamac features, voice to text features macOS, dictation app features, custom vocabulary, usage statistics, hotkey dictation"
 ---

web/content/features/custom-vocabulary.md

@@ -0,0 +1,32 @@
+---
+title: "Custom Vocabulary"
+subtitle: "Teach VocaMac the names, brands, and jargon you use so they're transcribed right, every time."
+description: "Add names, technical terms, and jargon to VocaMac's custom vocabulary so Whisper spells them correctly. Processed 100% locally, like everything else in VocaMac."
+keywords: "custom vocabulary dictation, whisper glossary, proper noun transcription, technical jargon speech to text, fix misspelled names dictation macOS"
+icon: "📝"
+---
+
+## Teach VocaMac Your Words
+
+Speech models handle everyday language well but stumble on the words that matter most to you: coworkers' names, product names, acronyms, and technical jargon. "kubectl" becomes "cube control." "Grafana" becomes "graph on a." Every transcription ends with a manual fix.
+
+Custom Vocabulary targets exactly the words you use. Give VocaMac a short list of the terms it keeps getting wrong, and it hints them to the model so they come out spelled correctly from the start.
+
+<!-- SCREENSHOT PLACEHOLDER: add web/static/screenshots/settings-vocabulary.png (General tab → Custom Vocabulary section, ~1344×1260) -->
+![VocaMac Settings showing the Custom Vocabulary editor](/screenshots/settings-vocabulary.png)
+
+## How It Works
+
+Open **Settings → General → Custom Vocabulary** and type the terms you care about, one per line or comma-separated:
+
+```
+kubectl, PostgreSQL, nginx, Grafana
+```
+
+VocaMac passes these to Whisper as a transcription hint, biasing it toward your spelling. Keep the list focused: the model uses roughly the first 50–100 words, so put your most-mistranscribed terms at the top. There's no training step and no delay. Add a term, and your very next dictation already knows it.
+
+For best results, enter terms in the language you dictate and set a matching transcription language above. In Auto-detect, your vocabulary can even nudge VocaMac toward the right language.
+
+## Private by Design
+
+Your word list never leaves your Mac. Like every other part of VocaMac, custom vocabulary is applied entirely on-device — nothing is uploaded to build or store a dictionary. Your names, projects, and jargon stay yours.

web/content/features/fully-configurable.md

@@ -16,9 +16,9 @@ Every major aspect of VocaMac can be customized. Hotkeys, audio behavior, transc
 
 ## Hotkey Configuration
 
-Your hotkey is how you activate VocaMac. The app respects your preference for how you work and lets you choose exactly which key combination suits your workflow best.
+Your hotkey is how you activate VocaMac. The app respects how you work and lets you pick the single activation key that suits you best.
 
-Maybe you prefer Control-Space. Perhaps Command-Shift-L feels more natural. You might want something completely different. The settings window presents a simple, elegant hotkey selector. Click, press the keys you want to use, and you're done.
+Start from a preset — Right Option, Left Option, Right Command, Right Shift, Right Control, Fn, or a function key (F5–F12). Prefer something else? Click **Record**, press any key, and VocaMac captures it (press Escape to cancel). Your choice shows up as a "Custom" key, and while VocaMac is running that key is reserved for activation.
 
 The hotkey works from anywhere on your Mac. Launch VocaMac from Mail, from Slack, from a web browser, or from any application. As long as VocaMac is running, your hotkey is active and ready.
 
@@ -40,7 +40,7 @@ Set the silence detection threshold to match your environment. In a quiet office
 
 Configure the maximum recording duration. If you prefer shorter bursts of dictation, set a reasonable limit. The app will automatically stop recording when you reach it, preventing accidental marathon recording sessions.
 
-Choose your audio input device. If you use an external microphone, a USB headset, or an AirPods Pro, select it directly from the settings. VocaMac remembers your choice and uses it every time.
+Choose your audio input device. Leave it on **System Default** to follow macOS, or pin VocaMac to a specific microphone — an external mic, a USB headset, or AirPods Pro. Pinning is non-invasive: VocaMac uses your chosen device without changing the system-wide default for other apps. If that device disconnects, VocaMac falls back to System Default automatically and resumes using it when the device reconnects. Plugged something in? Hit **Refresh Devices** to update the list.
 
 ## Language and Transcription Settings
 

web/content/features/push-to-talk.md

@@ -38,9 +38,12 @@ VocaMac supports a wide range of hotkeys for Push-to-Talk activation:
 - **Left Option (⌥)** - if you prefer the left side
 - **Right Command (⌘)** - for Command-key enthusiasts
 - **Right Shift (⇧)** - another good ergonomic choice
+- **Right Control (⌃)** - a comfortable reach for many keyboards
 - **Function keys (F5-F12)** - if you prefer dedicated keys
 - **Fn key** - the function key itself
 
+Want a key that isn't in the list? Click **Record** next to the preset picker and press any key — VocaMac captures it and shows it as your "Custom" key (press Escape to cancel). While VocaMac is running, that key is reserved for activation.
+
 You can change your hotkey anytime in **Settings → General → Activation Key**.
 
 ## Visual Feedback

web/content/features/usage-stats.md

@@ -0,0 +1,26 @@
+---
+title: "Usage Statistics"
+subtitle: "See how much you dictate, how fast you speak, and how consistent you've been. All stored locally."
+description: "VocaMac's Stats tab tracks words transcribed, speaking speed, daily streaks, and lifetime totals — stored locally on your Mac and never uploaded."
+keywords: "dictation statistics, words per minute tracker, voice typing stats, speaking speed macOS, local usage stats, dictation streak"
+icon: "📈"
+---
+
+## See How Much You Dictate
+
+Every transcription adds up. The **Stats** tab in Settings turns that into a picture of how you actually use your voice: total words transcribed, number of transcriptions, and total time spoken across the lifetime of the app.
+
+<!-- SCREENSHOT PLACEHOLDER: add web/static/screenshots/settings-stats.png (Stats tab, ~1344×1260, ideally with real usage so it isn't all zeros) -->
+![VocaMac Settings showing the Stats tab](/screenshots/settings-stats.png)
+
+## Speed, Streaks, and Recent Activity
+
+- **Speaking speed** — your average words per minute, so you can see how fast you dictate.
+- **Daily streak** — consecutive days you've used VocaMac, alongside your best streak so far.
+- **Recent activity** — a day-by-day breakdown of words dictated over the last week.
+
+It's a light, motivating way to keep a habit going, without turning dictation into a spreadsheet.
+
+## Private by Design
+
+Your stats are yours alone. They're saved locally on your Mac and never uploaded, synced, or shared — nothing about how much you dictate ever leaves your machine. Want a clean slate? A single button in the Stats tab resets everything.

web/layouts/_default/screenshots.html

@@ -51,6 +51,11 @@ <h2>⚙️ Settings</h2>
                         <img src="/screenshots/settings-models.png" alt="VocaMac Settings - Models tab" loading="lazy">
                         <figcaption>Models - System info, resource usage, and model management</figcaption>
                     </figure>
+                    <!-- SCREENSHOT PLACEHOLDER: add web/static/screenshots/settings-stats.png (Stats tab, ~1344×1260) -->
+                    <figure class="screenshot-item">
+                        <img src="/screenshots/settings-stats.png" alt="VocaMac Settings - Stats tab" loading="lazy">
+                        <figcaption>Stats - Lifetime totals, speaking speed, and daily streaks</figcaption>
+                    </figure>
                     <figure class="screenshot-item">
                         <img src="/screenshots/settings-audio.png" alt="VocaMac Settings - Audio tab" loading="lazy">
                         <figcaption>Audio - Recording duration, silence detection, and input device</figcaption>

web/layouts/index.html

@@ -32,6 +32,9 @@
             "Launch at Login",
             "Clipboard preservation",
             "Cursor indicator overlay",
+            "Custom vocabulary for names and jargon",
+            "Local usage statistics (streaks, WPM, lifetime totals)",
+            "Selectable audio input device",
             "Guided setup wizard",
             "Open source (AGPL-3.0 license)"
         ],
@@ -180,62 +183,72 @@ <h2>Everything You Need,<br>Nothing You Don't</h2>
                 <a href="/features/system-wide-text-injection/" class="feature-card">
                     <div class="feature-card__icon">⌨️</div>
                     <h3>System-Wide Text Injection</h3>
-                    <p>Transcribed text appears wherever your cursor is. Browsers, Slack, VS Code, spreadsheets, terminals. Everywhere.</p>
+                    <p>Transcribed text appears at your cursor, in any app.</p>
                 </a>
                 <a href="/features/push-to-talk/" class="feature-card">
                     <div class="feature-card__icon">🎯</div>
                     <h3>Push-to-Talk</h3>
-                    <p>Hold a hotkey to record. Release to transcribe. Simple, predictable, no surprises.</p>
+                    <p>Hold a hotkey to record, release to transcribe.</p>
                 </a>
                 <a href="/features/double-tap-toggle/" class="feature-card">
                     <div class="feature-card__icon">👆</div>
                     <h3>Double-Tap Toggle</h3>
-                    <p>Prefer toggle mode? Double-tap to start, double-tap to stop. Your choice.</p>
+                    <p>Double-tap to start, double-tap to stop.</p>
                 </a>
                 <a href="/features/smart-model-selection/" class="feature-card">
                     <div class="feature-card__icon">🧠</div>
                     <h3>Smart Model Selection</h3>
-                    <p>Auto-detects your Apple Silicon chip and RAM, then recommends the optimal Whisper model.</p>
+                    <p>Auto-picks the best Whisper model for your Mac.</p>
                 </a>
                 <a href="/features/apple-silicon-native/" class="feature-card">
                     <div class="feature-card__icon">⚡</div>
                     <h3>Apple Silicon Native</h3>
-                    <p>CoreML + Metal + Neural Engine acceleration via WhisperKit. Blazing fast on M1/M2/M3/M4.</p>
+                    <p>CoreML + Neural Engine speed via WhisperKit.</p>
                 </a>
                 <a href="/features/fully-configurable/" class="feature-card">
                     <div class="feature-card__icon">⚙️</div>
                     <h3>Fully Configurable</h3>
-                    <p>Choose hotkeys, models, languages, silence detection. Settings window with model management.</p>
+                    <p>Tune hotkeys, models, languages, and silence detection.</p>
                 </a>
                 <a href="/features/languages/" class="feature-card">
                     <div class="feature-card__icon">🌍</div>
                     <h3>99+ Languages</h3>
-                    <p>Auto-detect or specify. English, Spanish, French, German, Chinese, Japanese, and many more.</p>
+                    <p>Auto-detect or pick your language — 99+ supported.</p>
                 </a>
                 <a href="/features/visual-feedback/" class="feature-card">
                     <div class="feature-card__icon">📊</div>
                     <h3>Visual Feedback</h3>
-                    <p>Menu bar icon changes color. Audio level indicator shows input. Cursor indicator near your caret while recording.</p>
+                    <p>Color cues and a live audio meter while recording.</p>
                 </a>
                 <a href="/features/translation/" class="feature-card">
                     <div class="feature-card__icon">🌐</div>
                     <h3>Translation</h3>
-                    <p>Speak in one language, get text in another. Built-in speech translation powered by Whisper.</p>
+                    <p>Speak one language, get text in another.</p>
+                </a>
+                <a href="/features/custom-vocabulary/" class="feature-card">
+                    <div class="feature-card__icon">📝</div>
+                    <h3>Custom Vocabulary</h3>
+                    <p>Teach it your names, jargon, and acronyms.</p>
                 </a>
                 <a href="/features/silence-detection/" class="feature-card">
                     <div class="feature-card__icon">🤫</div>
                     <h3>Silence Detection</h3>
-                    <p>Auto-stops recording after you stop speaking. Adjustable sensitivity and duration thresholds.</p>
+                    <p>Auto-stops when you stop speaking. Fully adjustable.</p>
                 </a>
                 <a href="/features/launch-at-login/" class="feature-card">
                     <div class="feature-card__icon">🚀</div>
                     <h3>Launch at Login</h3>
-                    <p>Start VocaMac automatically when you log in. Always ready when you need it.</p>
+                    <p>Starts automatically at login. Always ready.</p>
                 </a>
                 <a href="/features/clipboard-preservation/" class="feature-card">
                     <div class="feature-card__icon">📋</div>
                     <h3>Clipboard Preservation</h3>
-                    <p>Your clipboard is saved and restored after text injection. Nothing gets overwritten.</p>
+                    <p>Saved and restored after every injection.</p>
+                </a>
+                <a href="/features/usage-stats/" class="feature-card">
+                    <div class="feature-card__icon">📈</div>
+                    <h3>Usage Statistics</h3>
+                    <p>Track words, speaking speed, and daily streaks.</p>
                 </a>
             </div>
         </div>
@@ -606,7 +619,7 @@ <h2>Questions & Answers</h2>
                 </details>
                 <details class="faq__item">
                     <summary>Can I change the hotkey?</summary>
-                    <p>Yes! Open Settings from the menu bar and choose from Right Option, Right Command, Fn, or any function key. You can also switch between push-to-talk and double-tap toggle modes.</p>
+                    <p>Yes! Open Settings from the menu bar and pick a preset (Right Option, Right Command, Right Control, Fn, or a function key), or click <strong>Record</strong> and press any key to set a custom one. You can also switch between push-to-talk and double-tap toggle modes.</p>
                 </details>
                 <details class="faq__item">
                     <summary>How does this compare to Apple's built-in dictation?</summary>

web/layouts/partials/head.html

@@ -38,7 +38,7 @@
     <meta name="theme-color" content="#FFFFFF">
 
     <!-- Open Graph -->
-    <meta property="og:type" content="website">
+    <meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
     <meta property="og:url" content="{{ .Permalink }}">
     <meta property="og:title" content="{{ if .IsHome }}VocaMac - 100% Local Voice-to-Text for macOS{{ else }}{{ .Title }} | VocaMac{{ end }}">
     <meta property="og:description" content="{{ with .Params.description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">