Merge pull request #69 from antonbelev/improve-landing-page

feat(docs): improve landing page UX and mobile experience

Author: antonbelev

README.md

@@ -1,149 +1,109 @@
 # Claude Owl 🦉
 
-> A beautiful, open-source desktop UI for managing Claude Code configurations, settings, and features.
+**Stop editing JSON and MD files. Manage your Claude Code setup visually.**
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)](https://nodejs.org/)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)
-[![Beta](https://img.shields.io/badge/status-Beta-blue.svg)](#status)
-
-**Status:** 🚀 Beta - Actively developed, currently supports **macOS and Windows**.
+[![Beta](https://img.shields.io/badge/status-Beta-blue.svg)](#)
 
 ---
 
-## What is Claude Owl?
+## The Problem
 
-Claude Owl is a desktop application for managing [Claude Code](https://code.claude.com) configurations through an intuitive visual interface. Instead of manually editing JSON and YAML configuration files in your text editor or through the Claude Code CLI.
+Claude Code is powerful but configuration is painful:
+- Hand-editing JSON for permissions rules? Error-prone.
+- Managing MCP servers across projects? Copy-paste hell.
+- Finding that one subagent you created? Good luck grep-ing through `.claude/`.
+- You want to know any metrics about your Claude Code usage? You need to download yet another tool.
 
-## Current Features (Beta)
+## The Solution
 
-For a complete list of features, see [SCREENSHOTS.md](SCREENSHOTS.md) and [CHANGELOG.md](CHANGELOG.md).
+Claude Owl gives you a visual interface for everything Claude Code configuration:
 
 ![Claude Owl Dashboard](screenshots/claude-owl-dashboard.png)
 
-### 🎄 2025 Year in Review
+**No more terminal commands. No more JSON typos. Just point, click, done.**
 
-Celebrate your year of AI-powered development! Claude Owl now includes a festive Year in Review feature that showcases your 2025 coding journey with Claude Code:
+## What You Can Do
 
-- **📊 Beautiful Stats**: Token usage, costs, sessions, and activity patterns
-- **🏆 Achievement Badges**: Earn badges for milestones and coding habits
-- **🎯 Model Insights**: See your favorite Claude models and usage breakdown
-- **📈 Activity Analytics**: Peak coding months, longest streaks, and daily patterns
-- **🎁 Social Sharing**: Share your year with customizable stats for Twitter/X
+### Core Features
+- **Settings Editor** - User and project-level settings with search and validation
+- **Permission Rules** - Visual builder with 6 security templates
+- **MCP Servers** - Add, configure, and test Model Context Protocol integrations
+- **Subagents** - Create custom agents with tool restrictions and model selection
+- **Skills & Commands** - Manage skills and import slash commands from GitHub repos
+- **Plugins** - Browse marketplaces, install plugins, enable/disable without editing files
 
-![Year in Review 2025](screenshots/year-in-review-2025-total-tokens.png)
+### Power Features
+- **Usage Metrics** - Interactive charts showing spend, tokens, and model breakdown
+- **Status Line Templates** - 10+ pre-built templates with live preview
+- **Dashboard** - Real-time Claude Code detection and API status monitoring
+- **Debug Logs** - View and search Claude Code logs without terminal or importing the whole `.claude` directory into an IDE.
 
-Available now through January 1, 2026!
+[See all features with screenshots →](https://antonbelev.github.io/claude-owl/screenshots.html)
 
 ## Installation
 
-### Prerequisites
+### Download (Recommended)
+
+**[📥 Download Latest Release](https://github.com/antonbelev/claude-owl/releases/latest)**
 
-- **Node.js** >= 18.0.0
-- **npm** >= 9.0.0
-- **Claude Code CLI** ([installation guide](https://code.claude.com/docs/en/quickstart))
-- **macOS or Windows**
+- macOS (Intel + Apple Silicon)
+- Windows (x64 + ARM64)
 
-### Install from Source
+[Full installation guide →](https://antonbelev.github.io/claude-owl/installation.html)
 
-Claude Owl is currently in Beta and available for development/testing:
+### Build from Source
 
 ```bash
-# Clone the repository
 git clone https://github.com/antonbelev/claude-owl.git
 cd claude-owl
-
-# Install dependencies
 npm install
-
-# Run in development mode
 npm run dev:electron
 ```
 
-### Download Pre-built Binaries
-
-Pre-built installers are available for macOS and Windows:
-
-**[📥 Download Latest Release](https://github.com/antonbelev/claude-owl/releases/latest)**
-
-- **macOS**: `.dmg` files for Intel and Apple Silicon
-- **Windows**: `.exe` installer for x64 and ARM64
-
-For detailed installation instructions, see our [Installation Guide](https://antonbelev.github.io/claude-owl/installation.html).
-
-### Build from Source
-
-```bash
-npm run build
-npm run package
-```
+**Requirements:** Node.js 18+, Claude Code CLI installed
 
-## Documentation
+## FAQ
 
-- [Architecture Overview](docs/architecture.md) - System design and technical details
-- [Contributing Guide](CONTRIBUTING.md) - How to contribute
-- [Code of Conduct](CODE_OF_CONDUCT.md) - Community guidelines
-- [Development Notes](CLAUDE.md) - Development commands and project structure
-- [CHANGELOG.md](CHANGELOG.md) - List of changes and updates
+**Does this replace Claude Code?**
+No. Claude Owl is a UI layer on top of Claude Code CLI. You still need Claude Code installed.
 
-## Tech Stack
+**Is my data safe?**
+100% local. No telemetry, no external servers, no data collection. Everything stays on your machine.
 
-- **Desktop Framework**: Electron
-- **Frontend**: React 18 + TypeScript
-- **Build Tool**: Vite
-- **State Management**: Zustand
-- **Styling**: Tailwind CSS + shadcn/ui
-- **Testing**: Vitest + React Testing Library
+**What platforms work?**
+macOS (Intel + Apple Silicon) and Windows (x64 + ARM64). Linux support coming soon.
 
 ## Contributing
 
-We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
-
-To get started:
+PRs welcome! Check [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
+Quick start:
 ```bash
-# Fork and clone the repository
 git clone https://github.com/antonbelev/claude-owl.git
 cd claude-owl
-
-# Install dependencies
 npm install
-
-# Start development server
 npm run dev:electron
 ```
 
-## FAQ
-
-### Does Claude Owl replace Claude Code?
-
-No, Claude Owl is a UI companion for Claude Code. It manages configurations visually but still uses the Claude Code CLI under the hood.
-
-### Is my data safe?
-
-Yes! Claude Owl is completely local-first. All configurations and data stay on your machine. No data is sent to external servers, and no telemetry is collected.
+## Tech Stack
 
-### What platforms are currently supported?
+Electron + React 18 + TypeScript + Vite + Zustand + Tailwind CSS
 
-- **macOS** (Intel & Apple Silicon) - ✅ Fully supported
-- **Windows** (x64 & ARM64) - ✅ Fully supported
+See [CLAUDE.md](CLAUDE.md) for development notes and [docs/architecture.md](docs/architecture.md) for system design.
 
-### How can I contribute?
+## Star History
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
+[![Star History Chart](https://api.star-history.com/svg?repos=antonbelev/claude-owl&type=Date)](https://star-history.com/#antonbelev/claude-owl&Date)
 
 ## License
 
 Claude Owl is open-source software licensed under the [MIT License](LICENSE).
 
-## Support
-
-- 📖 [Documentation](docs/)
-- 💬 [Discussions](https://github.com/antonbelev/claude-owl/discussions)
-- 🐛 [Issue Tracker](https://github.com/antonbelev/claude-owl/issues)
-
-## Disclaimer
+---
 
-Claude Owl is an independent community project and is **not affiliated with, endorsed by, or sponsored by Anthropic**. Claude is a trademark of Anthropic, Inc. This project uses Claude through the publicly available Claude Code CLI and is not an official Anthropic product.
+**Disclaimer:** Claude Owl is not affiliated with Anthropic. Claude is a trademark of Anthropic PCB.
 
----
+**Support:** [Issues](https://github.com/antonbelev/claude-owl/issues) • [Discussions](https://github.com/antonbelev/claude-owl/discussions) • [Documentation](https://antonbelev.github.io/claude-owl/)

docs/assets/app.js

@@ -278,23 +278,103 @@ function trackDownload(platform, arch, version) {
   console.log(`Download tracked: ${platform} ${arch} ${version}`);
   // Future: Send to analytics service
   // Example: gtag('event', 'download', { platform, arch, version });
+
+  // Show star modal after a short delay
+  setTimeout(() => {
+    showStarModal();
+  }, 2000);
 }
 
 /**
- * Mobile menu toggle
+ * Show GitHub star modal
  */
-function setupMobileMenu() {
-  const menuBtn = document.getElementById('mobile-menu-btn');
-  const nav = document.querySelector('nav');
+function showStarModal() {
+  // Check if user has already dismissed the modal
+  const dismissed = localStorage.getItem('star-modal-dismissed');
+  if (dismissed === 'true') {
+    return;
+  }
+
+  const modal = document.getElementById('star-modal');
+  if (modal) {
+    modal.classList.remove('hidden');
+  }
+}
+
+/**
+ * Close GitHub star modal
+ */
+function closeStarModal() {
+  const modal = document.getElementById('star-modal');
+  if (modal) {
+    modal.classList.add('hidden');
+  }
+}
+
+/**
+ * Dismiss star modal permanently
+ */
+function dismissStarModal() {
+  localStorage.setItem('star-modal-dismissed', 'true');
+  closeStarModal();
+}
+
+/**
+ * Setup star modal event listeners
+ */
+function setupStarModal() {
+  const closeBtn = document.getElementById('close-star-modal');
+  const maybeLaterBtn = document.getElementById('maybe-later-btn');
+  const starBtn = document.getElementById('star-github-btn');
+
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => {
+      dismissStarModal();
+    });
+  }
+
+  if (maybeLaterBtn) {
+    maybeLaterBtn.addEventListener('click', () => {
+      closeStarModal();
+    });
+  }
+
+  if (starBtn) {
+    starBtn.addEventListener('click', () => {
+      dismissStarModal();
+    });
+  }
+
+  // Close modal on ESC key
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      const modal = document.getElementById('star-modal');
+      if (modal && !modal.classList.contains('hidden')) {
+        dismissStarModal();
+      }
+    }
+  });
 
-  if (menuBtn && nav) {
-    menuBtn.addEventListener('click', () => {
-      // Mobile menu implementation
-      alert('Mobile menu coming soon!');
+  // Close modal when clicking outside
+  const modal = document.getElementById('star-modal');
+  if (modal) {
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        dismissStarModal();
+      }
     });
   }
 }
 
+/**
+ * Mobile menu toggle
+ * Note: Mobile menu is now handled in header.js
+ */
+function setupMobileMenu() {
+  // Mobile menu functionality is now handled in header.js
+  // This function is kept for backwards compatibility
+}
+
 /**
  * Setup platform tabs on installation page
  */
@@ -359,6 +439,9 @@ async function init() {
   // Setup platform tabs (installation page only)
   setupPlatformTabs();
 
+  // Setup star modal (home page only)
+  setupStarModal();
+
   // Smooth scrolling for anchor links
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {