From ae672bf1855cabb31e54d63c79ada18dbdaa3ae7 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Mon, 8 Sep 2025 12:51:40 +0530
Subject: [PATCH 1/2] fix: make width related changes in footer

---
 overrides/partials/footer.html | 57 ++++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 9 deletions(-)

diff --git a/overrides/partials/footer.html b/overrides/partials/footer.html
index 7a9db5f6..7ab369b3 100644
--- a/overrides/partials/footer.html
+++ b/overrides/partials/footer.html
@@ -21,6 +21,32 @@
   IN THE SOFTWARE.
 -->
 
+<style>
+  .custom-container {
+    max-width: 100%; /* container: full width by default */
+    margin-left: auto; /* mx-auto: horizontal centering */
+    margin-right: auto;
+    padding-left: 1rem; /* px-4: padding left/right 1rem (16px) */
+    padding-right: 1rem;
+    padding-top: 2.5rem; /* py-10: padding top/bottom 2.5rem (40px) */
+    padding-bottom: 2.5rem;
+  }
+  @media (min-width: 1024px) {
+    /* lg:px-8: 1024px breakpoint */
+    .custom-container {
+      padding-left: 2rem; /* 2rem = 32px */
+      padding-right: 2rem;
+    }
+  }
+  @media (min-width: 1280px) {
+    /* xl:px-12: 1280px breakpoint */
+    .custom-container {
+      padding-left: 8rem; /* 3rem = 48px */
+      padding-right: 8rem;
+    }
+  }
+</style>
+
 <footer class="relative bg-[#121212] w-full">
   <!-- Background SVG -->
   <svg
@@ -73,16 +99,19 @@
     </defs>
   </svg>
 
-  <div class="relative container mx-auto px-4 py-10 lg:px-8 xl:px-12">
+  <div class="relative custom-container">
     <div class="flex flex-col lg:flex-row gap-6">
       <!-- Footer Grid -->
       <div
         id="footer-columns"
-        class="w-full lg:w-[75%] grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6"
+        class="w-full lg:w-[75%] grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap -6"
       ></div>
 
       <!-- Newsletter -->
-      <div class="rounded-lg text-center mx-auto">
+      <div
+        class="rounded-lg text-center mx-auto w-70"
+        style="width: 20rem; max-width: 20rem"
+      >
         <form id="newsletter-form" name="newsletter" novalidate>
           <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
             Stay Updated
@@ -126,7 +155,8 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
           </div>
 
           <p class="text-xs text-[rgba(255,255,255,0.6)]">
-            By subscribing, you agree to receive product and marketing related updates from OpenObserve.
+            By subscribing, you agree to receive product and marketing related
+            updates from OpenObserve.
           </p>
         </form>
         <div
@@ -181,10 +211,13 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
                   showToast("Subscribed successfully with: " + email);
                   form.reset();
                   // Segment tracking
-                  if (window.analytics && typeof window.analytics.track === "function") {
+                  if (
+                    window.analytics &&
+                    typeof window.analytics.track === "function"
+                  ) {
                     window.analytics.track("O2 Website - Newsletter Signup", {
                       email: email,
-                      source: "website"
+                      source: "website",
                     });
                   }
                 } else {
@@ -363,11 +396,11 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
     <div
       class="border-t border-gray-700 mt-10 pt-5 flex flex-col lg:flex-row justify-between items-center text-white gap-4"
     >
-      <div class="text-center text-xs lg:text-left">
+      <div class="text-center lg:text-left" style="font-size: 0.6rem">
         <p class="">OpenObserve Inc. © <span id="current-year"></span></p>
         <p>3000 Sand Hill Rd Building 1, Suite 260, Menlo Park, CA 94025</p>
       </div>
-      <ul class="flex flex-wrap gap-4 text-xs text-gray-300">
+      <ul class="flex flex-wrap gap-4 text-gray-300" style="font-size: 0.8rem">
         <li class="hover:text-[#7782FF]">
           <a href="/policies/terms-of-service/" target="_blank"
             >Terms of Service</a
@@ -376,6 +409,11 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
         <li class="hover:text-[#7782FF]">
           <a href="/policies/privacy-policy/" target="_blank">Privacy Policy</a>
         </li>
+        <li class="hover:text-[#7782FF]">
+          <a href="/security-compliance/" target="_blank"
+            >Security & Compliance</a
+          >
+        </li>
       </ul>
       <ul class="flex gap-2">
         <li
@@ -516,6 +554,7 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
             { text: "Careers", link: "/careers/" },
             { text: "Contact Us", link: "/contact-us/" },
             { text: "Contact Sales", link: "/contact-sales/" },
+            { text: "Partners", link: "/partners/" },
             { text: "Enterprise License", link: "/enterprise-license/" },
           ],
         },
@@ -527,7 +566,7 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
           <h2 class="text-white font-medium text-base mb-3">${
             section.title
           }</h2>
-          <ul class="space-y-2 text-gray-300 text-xs">
+          <ul class="space-y-2 text-gray-300 text-xs" style="font-size: .80rem;">
             ${section.items
               .map(
                 (item) => `<li class="hover:text-[#7782FF]">

From 52e0d130590f5d1a19c2f717b4f328fb39d71bb0 Mon Sep 17 00:00:00 2001
From: ktx-monil <monil.desai@kiara.tech>
Date: Mon, 8 Sep 2025 18:20:16 +0530
Subject: [PATCH 2/2] feat: open youtube video popup on click of overview
 button

---
 overrides/partials/index.html | 163 +++++++++++++++++++++++++++++++++-
 1 file changed, 161 insertions(+), 2 deletions(-)

diff --git a/overrides/partials/index.html b/overrides/partials/index.html
index dff7cac1..0c002f3f 100644
--- a/overrides/partials/index.html
+++ b/overrides/partials/index.html
@@ -17,14 +17,18 @@
             </p>
           </div>
           <div class="landing-hero-buttons">
-            <a href="overview/" class="primary-button">
+            <button
+              id="overview-video-btn"
+              class="primary-button"
+              type="button"
+            >
               <span class="landing-btn-content">
                 <span class="landing-play-icon">
                   <img src="/docs/assets/view.svg" alt="" />
                 </span>
                 <span>Overview</span>
               </span>
-            </a>
+            </button>
             <a href="/downloads/" class="primary-button">
               <span class="landing-btn-content">
                 <span class="landing-play-icon">
@@ -405,4 +409,159 @@ <h3>Contact Sales</h3>
     </main>
   </div>
 </div>
+
+<!-- YouTube Video Popup Script -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const overviewBtn = document.getElementById("overview-video-btn");
+
+    if (overviewBtn) {
+      overviewBtn.addEventListener("click", function () {
+        // Extract video ID from the YouTube URL
+        const videoUrl =
+          "https://www.youtube.com/embed/C0GH5Ox8NnY?si=Xm-tEpbnm-iywGqH";
+        const videoId = extractVideoId(videoUrl);
+
+        if (videoId) {
+          openVideoPopup(videoId);
+        }
+      });
+    }
+
+    function extractVideoId(url) {
+      try {
+        const urlObj = new URL(url);
+        if (urlObj.hostname.includes("youtu.be")) {
+          return urlObj.pathname.slice(1);
+        }
+        if (urlObj.hostname.includes("youtube.com")) {
+          // Handle /embed/ URLs
+          if (urlObj.pathname.includes("/embed/")) {
+            return urlObj.pathname.split("/embed/")[1].split("?")[0];
+          }
+          // Handle regular watch URLs
+          return urlObj.searchParams.get("v");
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    }
+
+    function openVideoPopup(videoId) {
+      // Create popup overlay
+      const popupOverlay = document.createElement("div");
+      popupOverlay.style.cssText = `
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      background: rgba(0,0,0,0.8) !important;
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
+      z-index: 99999 !important;
+      animation: fadeIn 0.3s ease;
+    `;
+
+      const popupContent = document.createElement("div");
+      popupContent.style.cssText = `
+      position: relative;
+      background: #000;
+      border-radius: 10px;
+      max-width: 90%;
+      max-height: 90%;
+      box-shadow: 0 0 20px #000;
+    `;
+
+      const iframe = document.createElement("iframe");
+      iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
+      iframe.allow =
+        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+      iframe.allowFullscreen = true;
+      iframe.style.cssText = `
+      display: block;
+      width: 80vw;
+      height: calc(80vw * 9 / 16);
+      max-width: 1200px;
+      max-height: 675px;
+      border: none;
+      border-radius: 10px;
+    `;
+
+      // Responsive adjustments
+      if (window.innerWidth <= 600) {
+        iframe.style.width = "95vw";
+        iframe.style.height = "calc(95vw * 9 / 16)";
+      } else if (window.innerWidth <= 900) {
+        iframe.style.width = "90vw";
+        iframe.style.height = "calc(90vw * 9 / 16)";
+      }
+
+      const closeBtn = document.createElement("div");
+      closeBtn.textContent = "×";
+      closeBtn.style.cssText = `
+      position: absolute;
+      top: -15px;
+      right: -10px;
+      background: #fff;
+      border-radius: 50%;
+      border: 2px solid #999;
+      width: 40px;
+      height: 40px;
+      font-weight: bold;
+      font-size: 24px;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+      color: #333;
+      transition: all 0.2s ease;
+    `;
+
+      // Hover effect for close button
+      closeBtn.addEventListener("mouseenter", function () {
+        this.style.backgroundColor = "#f0f0f0";
+        this.style.transform = "scale(1.1)";
+      });
+
+      closeBtn.addEventListener("mouseleave", function () {
+        this.style.backgroundColor = "#fff";
+        this.style.transform = "scale(1)";
+      });
+
+      // Close popup function
+      function closePopup() {
+        if (popupOverlay && document.body.contains(popupOverlay)) {
+          popupOverlay.remove();
+          document.removeEventListener("keydown", handleEscape);
+          document.body.style.overflow = "";
+        }
+      }
+
+      // Handle ESC key
+      function handleEscape(e) {
+        if (e.key === "Escape") closePopup();
+      }
+
+      // Add event listeners
+      closeBtn.addEventListener("click", closePopup);
+      popupOverlay.addEventListener("click", (e) => {
+        if (e.target === popupOverlay) closePopup();
+      });
+      document.addEventListener("keydown", handleEscape);
+
+      // Prevent body scroll when popup is open
+      document.body.style.overflow = "hidden";
+
+      // Assemble and show popup
+      popupContent.appendChild(closeBtn);
+      popupContent.appendChild(iframe);
+      popupOverlay.appendChild(popupContent);
+      document.body.appendChild(popupOverlay);
+    }
+  });
+</script>
 {% endblock %}