feat: add click tracking for key page interactions and new hero/features call-to-action buttons with updated styling.

Author: Bharath-code

docs/index.html

@@ -600,6 +600,26 @@
             background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
         }
 
+        /* Secondary Button */
+        .secondary-btn {
+            display: inline-flex;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text-muted);
+            padding: 0.8rem 1.5rem;
+            border-radius: 9999px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border: 1px solid var(--border);
+        }
+
+        .secondary-btn:hover {
+            background: var(--surface-hover);
+            color: var(--text-main);
+            border-color: var(--text-muted);
+        }
+
         /* Zig-Zag Features */
         .feature-section {
             padding: 4rem 0;
@@ -727,7 +747,8 @@
                 <div style="width: 1px; height: 24px; background: rgba(255,255,255,0.1);"></div>
                 <img src="https://img.shields.io/github/downloads/Bharath-code/git-scope/total?style=flat-square&color=7C3AED&label=Downloads"
                     alt="Downloads" height="20">
-                <a href="https://github.com/Bharath-code/git-scope" target="_blank" style="text-decoration: none;">
+                <a href="https://github.com/Bharath-code/git-scope" target="_blank" style="text-decoration: none;"
+                    id="nav-github-link">
                     <img src="https://img.shields.io/github/stars/Bharath-code/git-scope?style=social"
                         alt="GitHub Stars" height="20">
                 </a>
@@ -743,6 +764,24 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
                     flow state without endlessly <code>cd</code>-ing through nested directories.
                 </p>
 
+                <!-- Hero CTAs -->
+                <div style="display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap;">
+                    <a href="https://github.com/Bharath-code/git-scope" target="_blank" class="hero-cta-btn"
+                        id="hero-cta-star">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            style="margin-right: 0.5rem;">
+                            <polygon
+                                points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
+                            </polygon>
+                        </svg>
+                        Star on GitHub
+                    </a>
+                    <a href="#features" class="secondary-btn" id="hero-cta-features">
+                        How it Works
+                    </a>
+                </div>
+
                 <!-- Simplified Install -->
                 <div class="install-section" style="margin-bottom: 2rem;">
                     <div class="install-box" onclick="copyInstallCommand()"
@@ -759,7 +798,8 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
                     </div>
                     <div style="margin-top: 1rem;">
                         <a href="https://github.com/Bharath-code/git-scope/releases" target="_blank"
-                            style="color: var(--text-muted); font-size: 0.9rem; text-decoration: underline;">View
+                            style="color: var(--text-muted); font-size: 0.9rem; text-decoration: underline;"
+                            id="hero-install-options">View
                             Windows, Linux & Go Install</a>
                     </div>
                 </div>
@@ -790,6 +830,8 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
 
             </section>
 
+
+
             <section class="value-prop" style="margin-bottom: 6rem; text-align: center;">
                 <p
                     style="color: var(--primary); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 1rem; text-transform: uppercase; font-size: 0.9rem;">
@@ -861,6 +903,17 @@ <h3><span style="color: var(--primary);">03.</span> Stats & Visuals</h3>
 
             </div>
 
+            <!-- More Features Link -->
+            <div style="text-align: center; margin-top: 4rem; margin-bottom: 6rem;">
+                <p style="color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1.1rem;">
+                    ...plus Disk Usage,Timeline,Sorting, and more.
+                </p>
+                <a href="https://github.com/Bharath-code/git-scope#features" target="_blank" class="secondary-btn"
+                    id="features-view-all">
+                    View full feature list on GitHub &rarr;
+                </a>
+            </div>
+
             <!-- Keyboard Cheat Sheet -->
             <section style="margin: 6rem 0; text-align: center;">
                 <h2 style="font-size: 2rem; margin-bottom: 2rem;">Vim-Style Efficiency</h2>

docs/main.js

@@ -30,7 +30,7 @@ function trackEvent(eventName, title) {
 // ===============================
 function copyInstallCommand() {
     const command = "brew tap Bharath-code/tap && brew install git-scope";
-    
+
     // Fallback for non-secure contexts
     if (!navigator.clipboard) {
         const ta = document.createElement('textarea');
@@ -54,9 +54,9 @@ function copyInstallCommand() {
 function showCopyFeedback() {
     const icon = document.getElementById('copy-icon');
     if (!icon) return;
-    
+
     const originalHTML = icon.innerHTML;
-    
+
     // Change to Checkmark
     icon.innerHTML = '<polyline points="20 6 9 17 4 12"></polyline>';
     icon.style.opacity = '1';
@@ -70,7 +70,37 @@ function showCopyFeedback() {
 }
 
 // ===============================
-// SESSION SUMMARY
+// CLICK TRACKING
+// ===============================
+document.getElementById('nav-github-link')?.addEventListener('click', () => {
+    trackEvent('github-star-click', 'Clicked GitHub Stars in Nav');
+});
+
+document.getElementById('hero-install-options')?.addEventListener('click', () => {
+    trackEvent('install-options-click', 'Clicked View Windows/Linux Install');
+});
+
+document.getElementById('hero-cta-star')?.addEventListener('click', () => {
+    trackEvent('hero-cta-star-click', 'Clicked Hero Star CTA');
+});
+
+document.getElementById('hero-cta-features')?.addEventListener('click', () => {
+    trackEvent('hero-cta-features-click', 'Clicked Hero Features CTA');
+});
+
+document.getElementById('features-view-all')?.addEventListener('click', () => {
+    trackEvent('features-view-all-click', 'Clicked View All Features');
+});
+
+document.querySelectorAll('footer a').forEach(link => {
+    link.addEventListener('click', () => {
+        const linkName = link.textContent.trim();
+        trackEvent('footer-click-' + linkName.toLowerCase().replace(/\s+/g, '-'), 'Clicked ' + linkName + ' in footer');
+    });
+});
+
+// ===============================
+// SCROLL DEPTH TRACKING
 // ===============================
 let maxScroll = 0;
 let scrollMilestones = { 25: false, 50: false, 75: false, 100: false };
@@ -87,6 +117,9 @@ window.addEventListener('scroll', () => {
     }
 });
 
+// ===============================
+// SESSION SUMMARY
+// ===============================
 window.addEventListener('beforeunload', () => {
     analytics.track('session_end', {
         maxScroll: maxScroll,