From 9e670a52b6cfd47e91c5fac13cf77ff65f136ddc Mon Sep 17 00:00:00 2001
From: Solomon Mithra <solomonmithra99@gmail.com>
Date: Mon, 30 Jun 2025 15:02:15 -0700
Subject: [PATCH] UI improvements: Enhanced hero section and search
 functionality

---
 assets/scss/common/_custom.scss | 95 ++++++++++++++++++++++++++++++++-
 layouts/docs/single.html        |  6 ---
 layouts/index.html              | 71 +++++++++++++++++++-----
 3 files changed, 150 insertions(+), 22 deletions(-)

diff --git a/assets/scss/common/_custom.scss b/assets/scss/common/_custom.scss
index 5189a5f9d7..e77be55e51 100644
--- a/assets/scss/common/_custom.scss
+++ b/assets/scss/common/_custom.scss
@@ -97,13 +97,31 @@ b {
 
 .hero-container {
   background-color: #121421;
-  background-image: url(/images/hero-bgdecor.svg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 -8em;
+  position: relative;
+  
+  // Add blur effect to background
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url(/images/hero-bgdecor.svg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 0 -8em;
+    filter: blur(2px);
+    z-index: 0;
+  }
 
   > .container {
-    margin: auto;
+   margin: auto;
+    position: relative;
+    z-index: 1;
   }
   .lead {
     font-size: 1.8em;
@@ -517,3 +535,76 @@ b {
     }
   }
 }
+
+
+// Style the suggestions dropdown
+#suggestions.shadow.bg-white.rounded {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  // Custom scrollbar styling
+  scrollbar-width: thin;
+  scrollbar-color: rgba(111, 66, 193, 0.4) transparent;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(111, 66, 193, 0.4);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(111, 66, 193, 0.6);
+    }
+  }
+}
+
+// Modern Recording Badge
+.modern-badge {
+  background: transparent;
+  color: #64748b;
+  padding: 0.625rem 1.25rem;
+  border-radius: 50px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1.5px solid #e2e8f0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  
+  // Add recording dot before text
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: #ef4444;
+    border-radius: 50%;
+    display: inline-block;
+    animation: blink 1.5s infinite;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  
+  // Blinking animation for the red dot
+  @keyframes blink {
+    0% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+    }
+    50% {
+      opacity: 0.3;
+      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
+    }
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+    }
+  }
+}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 900c2387e1..6a41c9639e 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -23,10 +23,4 @@ <h1>{{ .Title }}</h1>
 			{{ end -}}
 		</main>
 	</div>
-	{{ if .Page.Store.Get "hasMermaid" }}
-		<script type="module">
-			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-			mermaid.initialize({ startOnLoad: true });
-		</script>
-	{{ end }}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 3c11a22dbd..3386c0f5b5 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,18 +1,43 @@
 {{ define "main" }}
-<section class="section hero-container">
-  <div class="container row justify-content-center align-items-center">
-    <figure class="hero-image-container col-lg-9 col-md-16">
-      <img src="/images/owncast-splash-loading.png" alt="" class="splash-image splash-image-loader" id="splash-image-loader" />
-      <img src="/images/owncast-splash.png" alt="Owncast on desktop and mobile" class="splash-image" loading="lazy" onLoad="handleHeroImageLoad()" id="splash-image-main" />
-    </figure>
-
-    <div class="intro col-lg-7 col-md-16">
-      <p class="lead">Owncast is a free and open source live video and web chat server for use with existing popular broadcasting software.</p>
-      <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ "quickstart/" | absURL }}" role="button">Get started</a>
+<section class="section hero-container pb-0">
+  <div class="container">
+    <!-- Badge -->
+    <div class="text-center mb-4">
+      <span class="modern-badge">Start your own live streaming server</span>
+    </div>
+    
+    <!-- Main headline -->
+    <div class="text-center mb-5">
+      <h1 class="hero-title display-3 font-weight-bold mb-4">
+        Take control of your<br>
+        <span class="text-primary">live streaming</span> with Owncast
+      </h1>
+      <p class="hero-subtitle text-muted mb-4">
+        A free and open source live video and web chat server for use with<br>
+        existing popular broadcasting software. Self-hosted and independent.
+      </p>
+      
+      <!-- CTA Buttons -->
+      <div class="hero-actions">
+        <a class="btn btn-primary px-4 py-2 mr-3" href="{{ "quickstart/" | absURL }}" role="button">
+          Get Started →
+        </a>
+        <a class="btn btn-outline-light px-4 py-2" href="{{ "docs/" | absURL }}" role="button">
+          Learn More →
+        </a>
+      </div>
+    </div>
+
+    <!-- Hero Image -->
+    <div class="text-center hero-image-section">
+      <figure class="hero-image-container">
+        <img src="/images/owncast-splash-loading.png" alt="" class="splash-image splash-image-loader" id="splash-image-loader" />
+        <img src="/images/owncast-splash.png" alt="Owncast streaming dashboard" class="splash-image hero-main-image shadow-lg rounded" loading="lazy" onLoad="handleHeroImageLoad()" id="splash-image-main" />
+      </figure>
     </div>
   </div>
   <script>
-    //
+    // Modern image loading with better UX
     const timeout = setTimeout(function() {
       handleHeroImageLoad();
     }, 2000);
@@ -22,13 +47,31 @@
 
       const loader = document.getElementById('splash-image-loader');
       const main = document.getElementById('splash-image-main');
-      if (loader) {
-        loader.style.opacity = 0;
-      }
+      
       if (main) {
+        main.classList.add('loaded');
         main.style.opacity = 1;
       }
+      
+      if (loader) {
+        setTimeout(() => {
+          loader.style.opacity = 0;
+          setTimeout(() => {
+            if (loader.parentNode) {
+              loader.style.display = 'none';
+            }
+          }, 300);
+        }, 200);
+      }
     }
+
+    // Also trigger on image load
+    document.addEventListener('DOMContentLoaded', function() {
+      const mainImage = document.getElementById('splash-image-main');
+      if (mainImage && mainImage.complete) {
+        handleHeroImageLoad();
+      }
+    });
   </script>
 </section>