From 68d44caea9a209c5515e54da52d90d10ee250abb Mon Sep 17 00:00:00 2001
From: thanglequoc <thanglequoc.it@gmail.com>
Date: Thu, 12 Feb 2026 10:52:46 +0700
Subject: [PATCH] Merge explore-more and CTA sections into one

---
 docs/_sass/_navbar.scss        |  9 +++++++++
 docs/assets/js/theme-toggle.js |  5 ++++-
 docs/index.html                | 28 ++++------------------------
 3 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/docs/_sass/_navbar.scss b/docs/_sass/_navbar.scss
index b6a6d44..a41ccf1 100644
--- a/docs/_sass/_navbar.scss
+++ b/docs/_sass/_navbar.scss
@@ -14,6 +14,12 @@
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--color-border);
   transition: background $transition-normal, border-color $transition-normal;
+
+  &.menu-open {
+    background: var(--color-bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
 }
 
 .navbar__inner {
@@ -65,10 +71,13 @@
       right: 0;
       bottom: 0;
       background: var(--color-bg);
+      backdrop-filter: none;
       padding: $space-2xl;
       gap: $space-xl;
       z-index: $z-navbar;
       animation: fadeIn 0.2s ease;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
     }
   }
 }
diff --git a/docs/assets/js/theme-toggle.js b/docs/assets/js/theme-toggle.js
index 5f233ef..f48e8be 100644
--- a/docs/assets/js/theme-toggle.js
+++ b/docs/assets/js/theme-toggle.js
@@ -45,11 +45,13 @@
   // Hamburger menu
   var hamburger = document.getElementById('navHamburger');
   var navLinks = document.getElementById('navLinks');
+  var navbarEl = document.getElementById('navbar');
 
   if (hamburger && navLinks) {
     hamburger.addEventListener('click', function () {
-      hamburger.classList.toggle('is-open');
+      var isOpen = hamburger.classList.toggle('is-open');
       navLinks.classList.toggle('is-open');
+      if (navbarEl) navbarEl.classList.toggle('menu-open', isOpen);
     });
 
     // Close on link click (mobile)
@@ -57,6 +59,7 @@
       link.addEventListener('click', function () {
         hamburger.classList.remove('is-open');
         navLinks.classList.remove('is-open');
+        if (navbarEl) navbarEl.classList.remove('menu-open');
       });
     });
   }
diff --git a/docs/index.html b/docs/index.html
index 27d0d15..3f39dc1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -311,26 +311,6 @@ <h3>Run &amp; See the Trace &#128007;</h3>
   </div>
 </section>
 
-<!-- ==================== EXPLORE MORE ==================== -->
-<section class="section" id="explore-more" style="text-align: center;">
-  <div class="container">
-    <div class="section__header animate-fade-up">
-      <span class="badge">There's More</span>
-      <h2>Explore All <span class="text-gradient">Features</span></h2>
-      <p>Block tracking, custom thresholds, constructor tracking, global configuration, and more — Timer Ninja has everything you need for method-level performance insights.</p>
-    </div>
-    <div class="hero__actions animate-fade-up">
-      <a href="{{ '/user-guide/' | relative_url }}" class="btn btn--primary">
-        Read the Full User Guide
-        <span>&rarr;</span>
-      </a>
-      <a href="{{ '/examples/' | relative_url }}" class="btn btn--outline">
-        Browse Examples
-      </a>
-    </div>
-  </div>
-</section>
-
 <!-- ==================== CTA ==================== -->
 <section class="section" id="cta" style="text-align: center;">
   <div class="container">
@@ -338,16 +318,16 @@ <h2>Explore All <span class="text-gradient">Features</span></h2>
       <img src="{{ '/assets/images/mascot.png' | relative_url }}" alt="Timer Ninja mascot">
     </div>
     <h2 class="animate-fade-up">Ready to <span class="text-gradient">Track Like a Ninja</span>?</h2>
-    <p class="animate-fade-up" style="max-width: 500px; margin: 0 auto 2rem; font-size: 1.1rem;">
-      Start measuring method execution time the smart way. Zero boilerplate, full visibility.
+    <p class="animate-fade-up" style="max-width: 560px; margin: 0 auto 2rem; font-size: 1.1rem;">
+      Block tracking, custom thresholds, constructor tracking, and more — explore all features in the docs and start measuring the smart way.
     </p>
     <div class="hero__actions animate-fade-up">
       <a href="{{ '/user-guide/' | relative_url }}" class="btn btn--primary">
-        Read the Docs
+        Read the User Guide
         <span>&rarr;</span>
       </a>
       <a href="{{ '/examples/' | relative_url }}" class="btn btn--outline">
-        See Examples
+        Browse Examples
       </a>
     </div>
   </div>