From 33d687f339edcd0cb80f7838143b16a4c2f66b4a Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Wed, 12 Aug 2026 19:39:34 +0530
Subject: [PATCH 1/7] feat: make landing page responsive and copy changes

---
 .../2025-02-21-data-partitioning-in-s3.mdx    |   2 +-
 src/components/BlogCTA.tsx                    |  64 +-
 src/components/FusionBlogCTA.tsx              |   4 +-
 src/components/landing/Navbar/SiteNavbar.css  | 412 +++++++++---
 src/components/landing/Navbar/SiteNavbar.tsx  | 258 ++++++--
 src/components/landing/Navbar/navData.ts      | 106 +--
 src/components/landing/pages/olake-fusion.css | 368 +++++++++--
 src/components/landing/pages/olake-go.css     | 412 ++++++++++--
 src/components/landing/pages/olake-home.css   | 299 +++++++--
 src/components/landing/pages/overrides.css    |  66 +-
 .../landing/pages/useFusionLogic.ts           |   4 +-
 src/components/landing/pages/useGoLogic.ts    |  57 +-
 src/components/landing/pages/useHomeLogic.ts  |  91 ++-
 src/css/custom.css                            |  51 +-
 src/hooks/useGetReleases.ts                   |  25 +-
 src/pages/ai-lake.tsx                         |  10 +-
 src/pages/contact.tsx                         | 164 ++---
 src/pages/index.tsx                           | 614 +++++++++++++-----
 src/pages/olake-fusion.tsx                    |  66 +-
 src/pages/olake-go.tsx                        | 228 +++++--
 src/theme/Footer/index.tsx                    | 449 ++++++-------
 src/theme/Footer/styles.css                   |  67 ++
 src/theme/Navbar/Content/index.tsx            |  27 +
 .../MobileSidebar/PrimaryMenu/index.tsx       |  73 +++
 static/llm.txt                                |   2 +-
 static/llms.txt                               |   2 +-
 26 files changed, 2758 insertions(+), 1163 deletions(-)
 create mode 100644 src/theme/Footer/styles.css
 create mode 100644 src/theme/Navbar/Content/index.tsx
 create mode 100644 src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

diff --git a/iceberg/2025-02-21-data-partitioning-in-s3.mdx b/iceberg/2025-02-21-data-partitioning-in-s3.mdx
index 7b2835fcf..ea7ee8610 100644
--- a/iceberg/2025-02-21-data-partitioning-in-s3.mdx
+++ b/iceberg/2025-02-21-data-partitioning-in-s3.mdx
@@ -296,7 +296,7 @@ Although other tools like BigQuery and Hive are robust, our solution hits the sw
 
 I hope this deep dive into our implementation gives you a clearer picture of how we tackled our data challenges. If you’re considering a similar approach, I’d love to hear your thoughts or questions.
 
-Reach out to us at [hello@olake.io](mailto:hello@olake.io) or head over to [Join Waitlist](https://olake.io/#olake-form-product) and our team will be happy to get in touch with you.
+Reach out to us at [hello@olake.io](mailto:hello@olake.io) or head over to [Join Waitlist](https://olake.io/contact) and our team will be happy to get in touch with you.
 
 
 <BlogCTA/>
\ No newline at end of file
diff --git a/src/components/BlogCTA.tsx b/src/components/BlogCTA.tsx
index f46a64933..0914c12e7 100644
--- a/src/components/BlogCTA.tsx
+++ b/src/components/BlogCTA.tsx
@@ -1,59 +1,51 @@
-import React from 'react';
-import { FaExternalLinkAlt, FaGithub, FaSlack } from 'react-icons/fa';
+import React from 'react'
+import { FaExternalLinkAlt, FaGithub, FaSlack } from 'react-icons/fa'
 
 const BlogCTA = () => {
   return (
-    <div className="bg-white dark:bg-black/70 rounded-2xl p-8 max-w-3xl w-full shadow-lg text-center transition-colors">
-      <h2 className="text-4xl font-bold mb-4 text-gray-800 dark:text-white">
-        OLake Go
-      </h2>
-      <p className="text-lg font-light text-gray-700 dark:text-gray-300 mb-8">
-        Replicate databases, Kafka, and S3 into Apache Iceberg with OLake Go, an open source EL engine built for Iceberg from the ground up.
+    <div className='w-full max-w-3xl rounded-2xl bg-white p-8 text-center shadow-lg transition-colors dark:bg-black/70'>
+      <h2 className='mb-4 text-4xl font-bold text-gray-800 dark:text-white'>OLake Go</h2>
+      <p className='mb-8 text-lg font-light text-gray-700 dark:text-gray-300'>
+        Replicate databases, Kafka, and S3 into Apache Iceberg with OLake Go, an open source EL
+        engine built for Iceberg from the ground up.
       </p>
 
-      <div className="flex flex-col md:flex-row justify-center gap-4">
+      <div className='flex flex-col justify-center gap-4 md:flex-row'>
         <a
-          href="https://olake.io/slack"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center justify-center text-lg font-medium text-white bg-black dark:bg-white dark:text-black rounded-full px-6 py-3 transition transform hover:-translate-y-1 hover:opacity-90 min-w-[150px]"
+          href='https://olake.io/slack'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='inline-flex min-w-[150px] transform items-center justify-center rounded-full bg-black px-6 py-3 text-lg font-medium text-white transition hover:-translate-y-1 hover:opacity-90 dark:bg-white dark:text-black'
         >
-          <FaSlack className="mr-2 text-white dark:text-black" />
-          <span className='text-white text-xs dark:text-black'>Join Slack</span>
+          <FaSlack className='mr-2 text-white dark:text-black' />
+          <span className='text-xs text-white dark:text-black'>Join Slack</span>
         </a>
 
         <a
-          href="https://olake.io/contact/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center justify-center text-lg font-medium text-white bg-black dark:bg-white dark:text-black rounded-full px-6 py-3 transition transform hover:-translate-y-1 hover:opacity-90 min-w-[150px]"
+          href='/contact'
+          className='inline-flex min-w-[150px] transform items-center justify-center rounded-full bg-black px-6 py-3 text-lg font-medium text-white transition hover:-translate-y-1 hover:opacity-90 dark:bg-white dark:text-black'
         >
-          <FaExternalLinkAlt className="mr-2 text-white dark:text-black" />
-          <span className='text-white text-xs  dark:text-black'>Signup</span>
+          <FaExternalLinkAlt className='mr-2 text-white dark:text-black' />
+          <span className='text-xs text-white dark:text-black'>Signup</span>
         </a>
 
         <a
-          href="https://github.com/datazip-inc/olake"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center justify-center text-lg font-medium text-white bg-black dark:bg-white dark:text-black rounded-full px-6 py-3 transition transform hover:-translate-y-1 hover:opacity-90 min-w-[150px]"
+          href='https://github.com/datazip-inc/olake'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='inline-flex min-w-[150px] transform items-center justify-center rounded-full bg-black px-6 py-3 text-lg font-medium text-white transition hover:-translate-y-1 hover:opacity-90 dark:bg-white dark:text-black'
         >
-          <FaGithub className="mr-2 text-white dark:text-black" />
+          <FaGithub className='mr-2 text-white dark:text-black' />
 
-          <span className='text-white text-xs dark:text-black'>Explore OLake GitHub</span>
+          <span className='text-xs text-white dark:text-black'>Explore OLake GitHub</span>
         </a>
-
       </div>
 
-      <div className="mt-6 text-sm text-gray-600 dark:text-gray-400">
+      <div className='mt-6 text-sm text-gray-600 dark:text-gray-400'>
         Contact us at <strong>hello@olake.io</strong>
       </div>
     </div>
-  );
-};
-
-
-// https://olake.io/#olake-form-product)
-
+  )
+}
 
-export default BlogCTA;
\ No newline at end of file
+export default BlogCTA
diff --git a/src/components/FusionBlogCTA.tsx b/src/components/FusionBlogCTA.tsx
index 67329a437..8bdcc9835 100644
--- a/src/components/FusionBlogCTA.tsx
+++ b/src/components/FusionBlogCTA.tsx
@@ -23,9 +23,7 @@ const FusionBlogCTA = () => {
         </a>
 
         <a
-          href="https://olake.io/#olake-form-product"
-          target="_blank"
-          rel="noopener noreferrer"
+          href="/contact"
           className="inline-flex items-center justify-center text-lg font-medium text-white bg-black dark:bg-white dark:text-black rounded-full px-6 py-3 transition transform hover:-translate-y-1 hover:opacity-90 min-w-[150px]"
         >
           <FaExternalLinkAlt className="mr-2 text-white dark:text-black" />
diff --git a/src/components/landing/Navbar/SiteNavbar.css b/src/components/landing/Navbar/SiteNavbar.css
index 3852cfa76..6bafd6dcc 100644
--- a/src/components/landing/Navbar/SiteNavbar.css
+++ b/src/components/landing/Navbar/SiteNavbar.css
@@ -1,22 +1,27 @@
-/* Shared landing-page navbar — values taken verbatim from the v2 homepage
-   design's NAV block.
- *
- * NOTE ON SPECIFICITY: the generated page stylesheets contain
- * `.olakehome-page a { color: #193AE6 }` (0,1,1), which outranks a bare
- * `.olake-nav-cta` (0,1,0) and repainted the CTA's white text blue-on-blue
- * (invisible) and the Pricing link blue. Every rule that sets a link colour
- * is therefore qualified with `.olake-nav` to reach (0,2,0) and win. */
+/* Site-wide navbar, following the v2 homepage design. Every rule that sets a
+   link colour is qualified with `.olake-nav` to reach (0,2,0) and outrank the
+   page stylesheets' `.olakehome-page a { color: #193AE6 }` (0,1,1). */
 
 .olake-nav {
-  /* sticky + z-index come from the design; without them the bar scrolls away */
   position: sticky;
   top: 0;
   z-index: 50;
   width: 100%;
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(27, 30, 43, 0.09);
+  font-family: 'Space Grotesk', sans-serif;
+  color: #1b1e2b;
+}
+
+/* The homepage sits on #f0f2fa, and its design tints the bar to match; white
+   there reads as a solid strip rather than a translucent one. */
+body:has(.olakehome-page) .olake-nav {
   background: rgba(240, 242, 250, 0.82);
   backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  font-family: 'Space Grotesk', sans-serif;
 }
 
 .olake-nav-inner {
@@ -36,7 +41,9 @@
 
 .olake-nav .olake-nav-logo {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
 }
 
 .olake-nav-logo img {
@@ -44,13 +51,20 @@
   width: auto;
 }
 
+.olake-nav-tagline {
+  font-size: 8px;
+  letter-spacing: 0.02em;
+  color: #8890a8;
+  white-space: nowrap;
+}
+
 .olake-nav-links {
   display: flex;
   align-items: center;
   gap: 30px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 500;
-  color: #424865;
+  color: #5b6070;
 }
 
 .olake-nav-item {
@@ -63,7 +77,7 @@
   align-items: center;
   gap: 5px;
   cursor: pointer;
-  color: #121212;
+  color: #5b6070;
 }
 
 .olake-nav-caret {
@@ -75,11 +89,12 @@
   position: absolute;
   top: 36px;
   left: -16px;
-  background: #e7ecff;
-  border: 1px solid rgba(0, 0, 0, 0.09);
+  background: #fff;
+  border: 1px solid rgba(27, 30, 43, 0.1);
   border-radius: 12px;
+  box-shadow: 0 18px 40px -16px rgba(27, 30, 43, 0.22);
   padding: 8px;
-  min-width: 190px;
+  min-width: 220px;
   display: flex;
   flex-direction: column;
   visibility: hidden;
@@ -88,18 +103,32 @@
   z-index: 60;
 }
 
-/* Invisible bridge across the gap between the trigger and the panel.
- *
- * The panel is offset to `top: 36px` but the trigger's box ends a few pixels
- * above that, leaving a strip where the pointer is over neither element —
- * which fires mouseleave on .olake-nav-item and closes the menu while you are
- * still moving toward it.
- *
- * This works because the panel is a DOM child of .olake-nav-item, so the
- * pointer never actually leaves that subtree (mouseleave does not fire when
- * moving onto a descendant, even one positioned outside the parent's box).
- * The pseudo-element inherits `visibility: hidden` while closed, so it never
- * blocks clicks on whatever sits underneath. */
+/* Nested submenu — opens beside its parent panel rather than below it. */
+.olake-nav-flyout {
+  position: relative;
+}
+
+.olake-nav .olake-nav-flyout-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.olake-nav-flyout-caret {
+  font-size: 10px;
+}
+
+.olake-nav-panel--side {
+  top: -8px;
+  left: 100%;
+  min-width: 200px;
+}
+
+/* Invisible bridge across the gap between the trigger and the panel: without
+   it, the pointer crossing that strip fires mouseleave on .olake-nav-item and
+   closes the menu. Inherits `visibility: hidden`, so it never blocks clicks. */
 .olake-nav-panel::before {
   content: '';
   position: absolute;
@@ -117,20 +146,21 @@
 .olake-nav .olake-nav-panel-link {
   padding: 10px 14px;
   border-radius: 8px;
-  color: #0a0f23;
+  color: #1b1e2b;
   font-weight: 500;
   text-decoration: none;
   white-space: nowrap;
 }
 
-.olake-nav .olake-nav-panel-link:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: #0a0f23;
+.olake-nav .olake-nav-panel-link:hover,
+.olake-nav .olake-nav-flyout-trigger:hover {
+  background: #f4f2ec;
+  color: #1b1e2b;
   text-decoration: none;
 }
 
 .olake-nav .olake-nav-plain {
-  color: #121212;
+  color: #5b6070;
   text-decoration: none;
 }
 
@@ -142,7 +172,7 @@
 .olake-nav-right {
   display: flex;
   align-items: center;
-  gap: 18px;
+  gap: 16px;
 }
 
 .olake-nav .olake-nav-stars {
@@ -151,27 +181,35 @@
   gap: 8px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
-  color: #424865;
+  color: #5b6070;
   text-decoration: none;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(27, 30, 43, 0.14);
   border-radius: 8px;
-  padding: 7px 12px;
+  padding: 6px 12px;
   white-space: nowrap;
 }
 
 .olake-nav .olake-nav-stars:hover {
-  color: #424865;
+  color: #5b6070;
   text-decoration: none;
 }
 
 .olake-nav-stars img {
-  height: 28px;
+  height: 29px;
   width: 28px;
-  border-radius: 5px;
+  border-radius: 4px;
 }
 
-.olake-nav-star-mark {
-  color: #3fa872;
+/* Icon-only GitHub link, shown in place of the pill below the breakpoint. */
+.olake-nav .olake-nav-gh-mobile {
+  display: none;
+  align-items: center;
+}
+
+.olake-nav-gh-mobile img {
+  height: 30px;
+  width: 30px;
+  border-radius: 5px;
 }
 
 .olake-nav .olake-nav-slack {
@@ -180,51 +218,64 @@
 }
 
 .olake-nav-slack img {
-  height: 30px;
-  width: 30px;
+  height: 34px;
+  width: 35px;
+}
+
+/* Docusaurus' colour-mode toggle / search box, passed in as `trailing`. */
+.olake-nav .olake-nav-colormode,
+.olake-nav [class*='navbarSearchContainer'] {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+/* custom.css hides these on landing routes by targeting the inner controls,
+   leaving the wrappers to hold open a gap where no icon is. */
+body:has(.landing-page) .olake-nav .olake-nav-colormode,
+body:has(.landing-page) .olake-nav [class*='navbarSearchContainer'],
+.olake-nav [class*='navbarSearchContainer']:empty {
+  display: none;
 }
 
 .olake-nav .olake-nav-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: #193ae6;
   color: #fff;
-  padding: 9px 20px;
+  padding: 10px 20px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   white-space: nowrap;
-  box-shadow:
-    0 4px 0 #5762da,
-    0 5px 8px rgba(255, 255, 255, 0.18),
-    inset 0 1px 0 rgba(0, 0, 0, 0.32);
-  transition: transform 0.06s ease, box-shadow 0.06s ease;
 }
 
 .olake-nav .olake-nav-cta:hover {
   color: #fff;
   text-decoration: none;
-  transform: translateY(4px);
-  box-shadow: 0 0 0 #5762da, inset 0 1px 0 rgba(0, 0, 0, 0.2);
 }
 
-/* --- mobile ---------------------------------------------------------------
-   These routes hide Docusaurus' navbar (and therefore its mobile sidebar), so
-   this carries its own menu. 1279px matches the navbar-breakpoint plugin. */
+/* --- mobile ------------------------------------------------------------- */
 
 .olake-nav-burger {
   display: none;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   gap: 5px;
   cursor: pointer;
   padding: 6px;
   background: none;
   border: none;
+  line-height: 1;
 }
 
 .olake-nav-burger span {
   width: 22px;
   height: 2px;
-  background: #121212;
+  background: #1b1e2b;
   border-radius: 2px;
 }
 
@@ -233,31 +284,17 @@
   flex-direction: column;
   gap: 2px;
   padding: 8px 20px 20px;
-  background: #f0f2fa;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.olake-nav-mobile-group {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 6px;
-}
-
-.olake-nav-mobile-heading {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  color: #7b84a4;
-  padding: 12px 6px 4px;
+  background: #fff;
+  border-top: 1px solid rgba(27, 30, 43, 0.09);
 }
 
 .olake-nav .olake-nav-mobile-link {
-  padding: 11px 6px;
-  color: #0a0f23;
+  padding: 13px 6px;
+  color: #1b1e2b;
   font-weight: 600;
-  font-size: 15px;
+  font-size: 16px;
   text-decoration: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid #eef0f5;
 }
 
 .olake-nav .olake-nav-mobile-link:hover {
@@ -265,36 +302,147 @@
   text-decoration: none;
 }
 
-.olake-nav .olake-nav-mobile-cta {
-  margin-top: 14px;
-  background: #193ae6;
-  color: #fff;
-  padding: 12px 20px;
-  border-radius: 8px;
+/* Footer of the drawer: the star pill and Slack, which have no room in the bar. */
+.olake-nav-mobile-social {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+/* Docs row in the drawer: expands in place instead of navigating, mirroring
+   the desktop Docs dropdown (OLake Go / OLake Fusion). */
+.olake-nav .olake-nav-mobile-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.olake-nav-mobile-accordion-caret {
+  font-size: 11px;
+  transition: transform 0.15s ease;
+}
+
+.olake-nav-mobile-accordion-caret.is-open {
+  transform: rotate(180deg);
+}
+
+.olake-nav-mobile-accordion-panel {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+}
+
+.olake-nav .olake-nav-mobile-sublink {
+  padding: 11px 6px 11px 20px;
+  color: #5b6070;
   font-weight: 600;
-  font-size: 14px;
-  text-align: center;
+  font-size: 15px;
   text-decoration: none;
+  border-bottom: 1px solid #eef0f5;
 }
 
-.olake-nav .olake-nav-mobile-cta:hover {
-  color: #fff;
+.olake-nav .olake-nav-mobile-sublink:hover {
+  color: #193ae6;
   text-decoration: none;
 }
 
+/* The design collapses at 860px; we do it at 1279px to match the
+   `navbar-breakpoint` plugin, below which Docusaurus renders the mobile
+   sidebar that /docs relies on. */
 @media (max-width: 1279px) {
   .olake-nav-inner {
-    padding: 12px 20px;
+    padding: 14px 20px;
+  }
+
+  body:has(.olakehome-page) .olake-nav-inner {
+    padding: 20px 18px;
+  }
+
+  .olake-nav-right {
+    gap: 12px;
   }
 
   .olake-nav-links,
-  .olake-nav-stars {
+  .olake-nav .olake-nav-stars {
     display: none;
   }
 
+  .olake-nav .olake-nav-mobile-social .olake-nav-stars {
+    display: flex;
+  }
+
+  .olake-nav .olake-nav-gh-mobile {
+    display: flex;
+  }
+
   .olake-nav-burger {
     display: flex;
   }
+
+  /* custom.css's `img { max-width:100% }` mobile reset shrinks a squeezed
+     icon's width but not its fixed height, stretching it. Let the logo block
+     absorb the deficit instead. */
+  .olake-nav-left {
+    min-width: 0;
+  }
+
+  .olake-nav-logo img,
+  .olake-nav .olake-nav-gh-mobile img,
+  .olake-nav-slack img {
+    max-width: none;
+    flex-shrink: 0;
+  }
+
+  .olake-nav .olake-nav-gh-mobile,
+  .olake-nav-slack,
+  .olake-nav .olake-nav-cta,
+  .olake-nav-burger {
+    flex-shrink: 0;
+  }
+
+  /* Upstream absolutely-positions this below 996px, landing it on the
+     burger. Put it back in flow. */
+  .olake-nav [class*='navbarSearchContainer'] {
+    position: static;
+    right: auto;
+  }
+
+  .olake-nav [class*='navbarSearchContainer'],
+  .olake-nav .olake-nav-colormode {
+    flex-shrink: 0;
+  }
+}
+
+/* Phone widths; the designs were never tested below ~860px. */
+@media (max-width: 520px) {
+  .olake-nav-inner {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+
+  .olake-nav-right {
+    gap: 8px;
+  }
+
+  .olake-nav-tagline {
+    display: none;
+  }
+
+  .olake-nav-logo img {
+    height: 26px;
+  }
+
+  .olake-nav .olake-nav-cta {
+    padding: 9px 14px;
+    font-size: 13px;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -302,3 +450,89 @@
     display: none;
   }
 }
+
+/* --- dark mode — the design bundles are light-only ---------------------- */
+
+/* Lighter than the page's #060606 background, so the blur stays visible. */
+html[data-theme='dark'] .olake-nav {
+  background: rgba(20, 21, 28, 0.88);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+  color: #e7e9f5;
+}
+
+html[data-theme='dark'] body:has(.olakehome-page) .olake-nav {
+  background: rgba(22, 23, 32, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+html[data-theme='dark'] .olake-nav-tagline {
+  color: #7c8299;
+}
+
+html[data-theme='dark'] .olake-nav-trigger,
+html[data-theme='dark'] .olake-nav .olake-nav-plain {
+  color: #b8bcd0;
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-plain:hover {
+  color: #fff;
+}
+
+html[data-theme='dark'] .olake-nav-panel {
+  background: #17181f;
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-panel-link {
+  color: #e7e9f5;
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-panel-link:hover,
+html[data-theme='dark'] .olake-nav .olake-nav-flyout-trigger:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: #fff;
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-stars {
+  color: #b8bcd0;
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-stars:hover {
+  color: #b8bcd0;
+}
+
+/* Presentation attribute on the SVG (stroke="#10173A"); a stylesheet rule
+   outranks it regardless of specificity. */
+html[data-theme='dark'] .olake-nav-stars svg {
+  stroke: #e7e9f5;
+}
+
+html[data-theme='dark'] .olake-nav-burger span {
+  background: #e7e9f5;
+}
+
+html[data-theme='dark'] .olake-nav-mobile {
+  background: #0a0a0a;
+  border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-mobile-link,
+html[data-theme='dark'] .olake-nav .olake-nav-mobile-accordion-trigger {
+  color: #e7e9f5;
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-mobile-link:hover {
+  color: #7c93ff;
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-mobile-sublink {
+  color: #b8bcd0;
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme='dark'] .olake-nav .olake-nav-mobile-sublink:hover {
+  color: #7c93ff;
+}
diff --git a/src/components/landing/Navbar/SiteNavbar.tsx b/src/components/landing/Navbar/SiteNavbar.tsx
index 0f3e01175..d567f2270 100644
--- a/src/components/landing/Navbar/SiteNavbar.tsx
+++ b/src/components/landing/Navbar/SiteNavbar.tsx
@@ -3,12 +3,17 @@ import Link from '@docusaurus/Link'
 import { cn } from '@site/src/lib/utils'
 import useGetReleases from '@site/src/hooks/useGetReleases'
 import {
-  NAV_DROPDOWNS,
+  NAV_ENTRIES,
+  MOBILE_LINKS,
   PRICING_LINK,
   GITHUB_REPO_URL,
   SLACK_URL,
   CTA,
-  type NavDropdown
+  isFlyout,
+  isMobileGroup,
+  type NavEntry,
+  type NavLink as NavLinkType,
+  type NavFlyout
 } from './navData'
 
 /** Formats 4231 -> "4.2k", matching the design's star pill. */
@@ -17,21 +22,79 @@ function formatStars(n: number): string {
   return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
 }
 
-function Dropdown({ dropdown }: { dropdown: NavDropdown }) {
+/** The design's outlined star. */
+const StarMark = () => (
+  <svg
+    width='15'
+    height='15'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='#10173A'
+    strokeWidth='1.8'
+    strokeLinejoin='round'
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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' />
+  </svg>
+)
+
+/** Star count. In the bar on desktop; the design moves it into the drawer on mobile. */
+const StarPill = ({ stars }: { stars: string }) => (
+  <a
+    href={GITHUB_REPO_URL}
+    target='_blank'
+    rel='noopener noreferrer'
+    aria-label={`GitHub — ${stars} stars`}
+    className='olake-nav-stars'
+  >
+    <img src='/img/landing/shared/github-icon.webp' alt='' width={28} height={29} />
+    <StarMark /> {stars}
+  </a>
+)
+
+const SlackLink = () => (
+  <a
+    href={SLACK_URL}
+    aria-label='Slack'
+    target='_blank'
+    rel='noopener noreferrer'
+    className='olake-nav-slack'
+  >
+    {/* the design uses the Slack artwork here, not an icon font */}
+    <img src='/img/landing/shared/slack-icon.webp' alt='' width={35} height={34} />
+  </a>
+)
+
+/** A submenu opening to the side of its parent panel — the design's `▸` row. */
+function Flyout({ flyout }: { flyout: NavFlyout }) {
   const [open, setOpen] = useState(false)
   return (
     <div
-      className='olake-nav-item'
+      className='olake-nav-flyout'
       onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
+      onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}
     >
-      <div className='olake-nav-trigger'>
-        {dropdown.label}
-        <span className='olake-nav-caret'>▾</span>
+      <div
+        className='olake-nav-panel-link olake-nav-flyout-trigger'
+        role='button'
+        tabIndex={0}
+        aria-expanded={open}
+        aria-haspopup='true'
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setOpen((o) => !o)
+          }
+        }}
+      >
+        {flyout.label}
+        <span className='olake-nav-flyout-caret'>▸</span>
       </div>
-      {/* Always rendered so the links are crawlable and work without JS; only visibility toggles. */}
-      <div className={cn('olake-nav-panel', open && 'is-open')}>
-        {dropdown.items.map((item) => (
+      <div className={cn('olake-nav-panel olake-nav-panel--side', open && 'is-open')}>
+        {flyout.items.map((item) => (
           <Link key={item.href} to={item.href} className='olake-nav-panel-link'>
             {item.label}
           </Link>
@@ -41,33 +104,122 @@ function Dropdown({ dropdown }: { dropdown: NavDropdown }) {
   )
 }
 
+function Dropdown({ entry }: { entry: NavEntry }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div
+      className='olake-nav-item'
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}
+    >
+      <div
+        className='olake-nav-trigger'
+        role='button'
+        tabIndex={0}
+        aria-expanded={open}
+        aria-haspopup='true'
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setOpen((o) => !o)
+          }
+        }}
+      >
+        {entry.label}
+        <span className='olake-nav-caret'>▾</span>
+      </div>
+      {/* Always rendered so the links are crawlable and work without JS; only visibility toggles. */}
+      <div className={cn('olake-nav-panel', open && 'is-open')}>
+        {entry.items!.map((item) =>
+          isFlyout(item) ? (
+            <Flyout key={item.label} flyout={item} />
+          ) : (
+            <Link key={item.href} to={(item as NavLinkType).href} className='olake-nav-panel-link'>
+              {item.label}
+            </Link>
+          )
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** A drawer row that expands in place instead of navigating — the drawer's Docs entry. */
+function MobileAccordion({ entry, onNavigate }: { entry: NavEntry; onNavigate: () => void }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className='olake-nav-mobile-accordion'>
+      <button
+        type='button'
+        className='olake-nav-mobile-link olake-nav-mobile-accordion-trigger'
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+      >
+        {entry.label}
+        <span className={cn('olake-nav-mobile-accordion-caret', open && 'is-open')}>▾</span>
+      </button>
+      {open && (
+        <div className='olake-nav-mobile-accordion-panel'>
+          {entry.items!.map((item) => (
+            <Link
+              key={(item as NavLinkType).href}
+              to={(item as NavLinkType).href}
+              className='olake-nav-mobile-sublink'
+              onClick={onNavigate}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 interface SiteNavbarProps {
   /** Optional extra content at the far right, after the CTA. */
   trailing?: ReactNode
+  /**
+   * Hands the burger over to Docusaurus' mobile sidebar instead of this
+   * component's own drawer. Set when rendered as the theme navbar: that
+   * sidebar is what carries the docs secondary menu.
+   */
+  mobileSidebar?: { shown: boolean; toggle: () => void }
 }
 
 /**
- * The navbar shared by the three landing pages, following the v2 homepage
- * design. Those routes hide Docusaurus' own navbar (see custom.css), so this
- * carries its own mobile menu — without it there would be no navigation
- * below the 1279px breakpoint.
+ * The site-wide navbar, following the v2 homepage design. Rendered through the
+ * `@theme/Navbar/Content` swizzle. Keeps its own drawer for standalone use (no
+ * `mobileSidebar` prop); inside the theme it defers to Docusaurus' sidebar.
  */
-export default function SiteNavbar({ trailing }: SiteNavbarProps) {
+export default function SiteNavbar({ trailing, mobileSidebar }: SiteNavbarProps) {
   const { stargazersCount } = useGetReleases()
   const stars = formatStars(stargazersCount)
-  const [mobileOpen, setMobileOpen] = useState(false)
+  const [ownOpen, setOwnOpen] = useState(false)
+
+  const mobileOpen = mobileSidebar ? mobileSidebar.shown : ownOpen
+  const toggleMobile = mobileSidebar ? mobileSidebar.toggle : () => setOwnOpen((o) => !o)
 
   return (
     <div className='olake-nav'>
       <div className='olake-nav-inner'>
         <div className='olake-nav-left'>
           <Link to='/' className='olake-nav-logo'>
-            <img src='/img/landing/shared/olake-logo.svg' alt='OLake' />
+            <img src='/img/landing/shared/olake-logo.svg' alt='OLake' width={126} height={32} />
+            <span className='olake-nav-tagline'>Open Source · Apache 2.0 Licensed</span>
           </Link>
           <div className='olake-nav-links'>
-            {NAV_DROPDOWNS.map((d) => (
-              <Dropdown key={d.label} dropdown={d} />
-            ))}
+            {NAV_ENTRIES.map((entry) =>
+              entry.items ? (
+                <Dropdown key={entry.label} entry={entry} />
+              ) : (
+                <Link key={entry.label} to={entry.href!} className='olake-nav-plain'>
+                  {entry.label}
+                </Link>
+              )
+            )}
             <Link to={PRICING_LINK.href} className='olake-nav-plain'>
               {PRICING_LINK.label}
             </Link>
@@ -75,22 +227,19 @@ export default function SiteNavbar({ trailing }: SiteNavbarProps) {
         </div>
 
         <div className='olake-nav-right'>
+          <StarPill stars={stars} />
+          {/* Below the breakpoint the design drops the count and shows the mark
+              alone; the full pill moves into the drawer. */}
           <a
             href={GITHUB_REPO_URL}
             target='_blank'
             rel='noopener noreferrer'
-            aria-label='GitHub stars'
-            className='olake-nav-stars'
+            aria-label='GitHub'
+            className='olake-nav-gh-mobile'
           >
-            <img src='/img/landing/shared/github-icon.webp' alt='' />
-            <span>
-              <span className='olake-nav-star-mark'>★</span> {stars}
-            </span>
-          </a>
-          <a href={SLACK_URL} aria-label='Slack' className='olake-nav-slack'>
-            {/* the design uses the Slack artwork here, not an icon font */}
-            <img src='/img/landing/shared/slack-icon.webp' alt='Slack' />
+            <img src='/img/landing/shared/github-icon.webp' alt='' width={30} height={30} />
           </a>
+          <SlackLink />
           <Link to={CTA.href} className='olake-nav-cta'>
             {CTA.label}
           </Link>
@@ -100,7 +249,7 @@ export default function SiteNavbar({ trailing }: SiteNavbarProps) {
             className='olake-nav-burger'
             aria-label='Toggle navigation menu'
             aria-expanded={mobileOpen}
-            onClick={() => setMobileOpen((o) => !o)}
+            onClick={toggleMobile}
           >
             <span />
             <span />
@@ -109,33 +258,28 @@ export default function SiteNavbar({ trailing }: SiteNavbarProps) {
         </div>
       </div>
 
-      {mobileOpen && (
+      {/* Skipped when Docusaurus' sidebar is in charge; that renders the same
+          links via the MobileSidebar/PrimaryMenu swizzle, plus the docs menu. */}
+      {!mobileSidebar && mobileOpen && (
         <div className='olake-nav-mobile'>
-          {NAV_DROPDOWNS.map((d) => (
-            <div key={d.label} className='olake-nav-mobile-group'>
-              <div className='olake-nav-mobile-heading'>{d.label}</div>
-              {d.items.map((item) => (
-                <Link
-                  key={item.href}
-                  to={item.href}
-                  className='olake-nav-mobile-link'
-                  onClick={() => setMobileOpen(false)}
-                >
-                  {item.label}
-                </Link>
-              ))}
-            </div>
-          ))}
-          <Link
-            to={PRICING_LINK.href}
-            className='olake-nav-mobile-link'
-            onClick={() => setMobileOpen(false)}
-          >
-            {PRICING_LINK.label}
-          </Link>
-          <Link to={CTA.href} className='olake-nav-mobile-cta' onClick={() => setMobileOpen(false)}>
-            {CTA.label}
-          </Link>
+          {MOBILE_LINKS.map((link) =>
+            isMobileGroup(link) ? (
+              <MobileAccordion key={link.label} entry={link} onNavigate={() => setOwnOpen(false)} />
+            ) : (
+              <Link
+                key={link.href}
+                to={link.href}
+                className='olake-nav-mobile-link'
+                onClick={() => setOwnOpen(false)}
+              >
+                {link.label}
+              </Link>
+            )
+          )}
+          <div className='olake-nav-mobile-social'>
+            <StarPill stars={stars} />
+            <SlackLink />
+          </div>
         </div>
       )}
     </div>
diff --git a/src/components/landing/Navbar/navData.ts b/src/components/landing/Navbar/navData.ts
index 6daebd09b..0d7832566 100644
--- a/src/components/landing/Navbar/navData.ts
+++ b/src/components/landing/Navbar/navData.ts
@@ -3,45 +3,44 @@ export interface NavLink {
   href: string
 }
 
-export interface NavDropdown {
+/** A submenu that opens to the side of its parent panel (the design's `▸`). */
+export interface NavFlyout {
   label: string
   items: NavLink[]
 }
 
+export interface NavEntry {
+  label: string
+  href?: string
+  /** Panel contents. Omit for a plain link. */
+  items?: (NavLink | NavFlyout)[]
+}
+
+export const isFlyout = (item: NavLink | NavFlyout): item is NavFlyout =>
+  Array.isArray((item as NavFlyout).items)
+
+/** A mobile drawer row: either a plain link, or a group that expands in place. */
+export type MobileNavItem = NavLink | NavEntry
+
+export const isMobileGroup = (item: MobileNavItem): item is NavEntry =>
+  Array.isArray((item as NavEntry).items)
+
 /**
- * Information architecture for the shared site-wide navbar.
- *
- * Styling/structure follow the v2 homepage design, but the design's nav only
- * covers Products / Docs / Resources / Pricing. Everything that existed in
- * docusaurus.config.js is preserved here so no destination is lost:
- *
- *   config item                     -> where it lives now
- *   --------------------------------------------------------------
- *   Docs (dropdown)                 -> Docs (unchanged)
- *   Blogs                           -> Resources > Blog
- *   Customer Stories                -> Resources > Customer Stories
- *   Community > Webinars & Events   -> Resources > Webinars & Events
- *   Community > OLake Community     -> Community > OLake Community
- *   Community > Top Contributors    -> Community > Top Contributors
- *   Community > Contributor's Prog. -> Community > Contributor's Program
- *   Community > GSoC                -> Community > GSoC
- *   Iceberg (dropdown)              -> Iceberg (kept top-level, as requested)
- *   Pricing                         -> Pricing
- *
- * NOTE: `themeConfig.navbar.items` is not read for these — the design's
- * dropdown panels can't be expressed as plain Docusaurus `dropdown` items.
- * That config must still stay non-empty: theme-common disables the mobile
- * burger entirely when `navbar.items.length === 0`.
+ * Information architecture for the site-wide navbar. `themeConfig.navbar.items`
+ * is not read for these, but must stay non-empty: theme-common disables the
+ * mobile burger entirely when `navbar.items.length === 0`.
  */
-export const NAV_DROPDOWNS: NavDropdown[] = [
+export const NAV_ENTRIES: NavEntry[] = [
   {
-    label: 'Products',
+    label: 'Product',
     items: [
       { label: 'OLake Go', href: '/olake-go' },
       { label: 'OLake Fusion', href: '/olake-fusion' }
     ]
   },
   {
+    // A dropdown rather than the design's plain link: the two products have
+    // separate doc sets, and a bare /docs lands you in Go's with no way over.
     label: 'Docs',
     items: [
       { label: 'OLake Go', href: '/docs' },
@@ -53,29 +52,52 @@ export const NAV_DROPDOWNS: NavDropdown[] = [
     items: [
       { label: 'Blog', href: '/blog' },
       { label: 'Customer Stories', href: '/customer-stories' },
-      { label: 'Webinars & Events', href: '/webinar' }
+      { label: 'Webinars & Events', href: '/webinar' },
+      {
+        label: 'Community',
+        items: [
+          { label: 'OLake Community', href: '/community' },
+          { label: 'Top Contributors', href: '/community/contributors' },
+          { label: 'Contributor Program', href: '/community/contributor-program' },
+          { label: 'GSoC', href: '/community/gsoc' }
+        ]
+      },
+      {
+        label: 'Iceberg',
+        items: [
+          { label: 'Iceberg Blogs', href: '/iceberg' },
+          { label: 'Query Engine', href: '/iceberg/query-engine' }
+        ]
+      }
     ]
-  },
+  }
+]
+
+export const PRICING_LINK: NavLink = { label: 'Pricing', href: '/contact' }
+
+/**
+ * The mobile drawer: one flat list, stopping at section level — the pages under
+ * Community and Iceberg are reached from those pages. Docs is the exception,
+ * expanding in place to mirror the desktop dropdown.
+ */
+export const MOBILE_LINKS: MobileNavItem[] = [
+  { label: 'OLake Go', href: '/olake-go' },
+  { label: 'OLake Fusion', href: '/olake-fusion' },
   {
-    label: 'Community',
+    label: 'Docs',
     items: [
-      { label: 'OLake Community', href: '/community' },
-      { label: 'Top Contributors', href: '/community/contributors' },
-      { label: 'Contributor Program', href: '/community/contributor-program' },
-      { label: 'GSoC', href: '/community/gsoc' }
+      { label: 'OLake Go', href: '/docs' },
+      { label: 'OLake Fusion', href: '/docs/fusion/getting-started/overview' }
     ]
   },
-  {
-    label: 'Iceberg',
-    items: [
-      { label: 'Iceberg Blogs', href: '/iceberg' },
-      { label: 'Query Engine', href: '/iceberg/query-engine' }
-    ]
-  }
+  { label: 'Blog', href: '/blog' },
+  { label: 'Customer Stories', href: '/customer-stories' },
+  { label: 'Webinars & Events', href: '/webinar' },
+  { label: 'Community', href: '/community' },
+  { label: 'Iceberg', href: '/iceberg' },
+  PRICING_LINK
 ]
 
-export const PRICING_LINK: NavLink = { label: 'Pricing', href: '/contact' }
-
 export const GITHUB_REPO_URL = 'https://github.com/datazip-inc/olake'
 export const SLACK_URL = '/slack'
 export const CTA = { label: "Try, it's free!", href: '/docs/getting-started/quickstart/' }
diff --git a/src/components/landing/pages/olake-fusion.css b/src/components/landing/pages/olake-fusion.css
index e42aa3b19..77c620fc5 100644
--- a/src/components/landing/pages/olake-fusion.css
+++ b/src/components/landing/pages/olake-fusion.css
@@ -1,64 +1,310 @@
-html:has(.olakefusion-page), body:has(.olakefusion-page){ height: auto; min-height: 100%; }
-html:has(.olakefusion-page){ scroll-snap-type: y mandatory; }
-body:has(.olakefusion-page){ margin: 0; background: #F5F6FA; }
-.olakefusion-page *{ box-sizing: border-box; }
-.olakefusion-page a{ color: #3D4FF0; text-decoration: none; }
-.olakefusion-page a:hover{ color: #2A38C4; }
-.olakefusion-page h1, .olakefusion-page h2, .olakefusion-page h3, .olakefusion-page h4, .olakefusion-page h5, .olakefusion-page h6{ margin: 0; font-weight: inherit; }
-@keyframes floatBox{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
-@keyframes travelDot{ 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
-@keyframes pulseRow{ 0%, 100% { background: #171E44; } 50% { background: #2A3568; } }
-@keyframes logoSpin{ 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
-@keyframes fadeSlideIn{ from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes wordFloat{ 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-5px) rotate(var(--r, 0deg)); } }
-@keyframes feedIn{ 0% { transform: translateX(0) scale(1); opacity:1; } 65% { opacity:1; } 100% { transform: translateX(120px) scale(0.3); opacity:0; } }
-@keyframes compactAppear{ 0%, 15% { opacity:0; transform:scale(0.5); } 35%, 85% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.1); } }
-@keyframes fusionPulseRing{ 0%, 100% { box-shadow: 0 0 0 0 rgba(61,79,240,0.35); } 50% { box-shadow: 0 0 0 12px rgba(61,79,240,0); } }
-@keyframes lightUp1{ 0%, 8% { background:#E4E6F0; } 16%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-@keyframes lightUp2{ 0%, 32% { background:#E4E6F0; } 40%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-@keyframes lightUp3{ 0%, 56% { background:#E4E6F0; } 64%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-.olakefusion-page .nav-burger{ display: none; }
-@media (max-width: 900px){
-.olakefusion-page .scroll-pipeline{ display: none !important; }
-html:has(.olakefusion-page){ scroll-snap-type: none; }
-.olakefusion-page .nav-links, .olakefusion-page .nav-star{ display: none !important; }
-.olakefusion-page .nav-burger{ display: flex !important; }
-.olakefusion-page .nav-inner{ padding: 14px 20px !important; }
-.olakefusion-page .hero-wrap{ padding: 24px 20px 8px !important; }
-.olakefusion-page .hero-title{ font-size: 32px !important; }
-.olakefusion-page .hero-sub{ width: auto !important; max-width: 100% !important; height: auto !important; font-size: 16px !important; }
-.olakefusion-page .hero-btns{ flex-wrap: wrap !important; gap: 12px !important; }
-.olakefusion-page .problem-grid{ grid-template-columns: repeat(2, 1fr) !important; }
-.olakefusion-page .problem-wrap{ padding: 32px 20px 56px !important; }
-.olakefusion-page .problem-title{ font-size: 26px !important; }
-.olakefusion-page .features-wrap{ padding: 48px 20px 20px !important; }
-.olakefusion-page .features-grid{ grid-template-columns: 1fr !important; gap: 28px !important; }
-.olakefusion-page .features-card{ padding: 24px !important; }
-.olakefusion-page .sec-title{ font-size: 28px !important; }
-.olakefusion-page .bench-wrap{ padding: 60px 16px 30px !important; }
-.olakefusion-page .cta-wrap{ padding: 0 16px !important; }
-.olakefusion-page .cta-inner{ padding: 28px 24px !important; }
-.olakefusion-page .cta-title{ width: auto !important; max-width: 100% !important; height: auto !important; font-size: 24px !important; }
-.olakefusion-page .faq-wrap{ padding: 48px 20px 90px !important; }
-.olakefusion-page .faq-title{ font-size: 26px !important; }
-.olakefusion-page .footer-wrap{ padding: 48px 24px 0 !important; }
-.olakefusion-page .footer-hero{ font-size: 28px !important; }
-.olakefusion-page .footer-watermark{ font-size: 120px !important; }
-}
-@media (max-width: 560px){
-.olakefusion-page .hero-title{ font-size: 27px !important; }
-.olakefusion-page .problem-grid{ grid-template-columns: 1fr !important; }
-.olakefusion-page .arch-inner{ transform: scale(0.46); transform-origin: top center; }
-.olakefusion-page .arch-wrap{ height: 118px !important; overflow: hidden; padding: 6px 12px !important; margin: 8px auto 8px !important; }
-.olakefusion-page .bench-row{ padding-left: 16px !important; padding-right: 16px !important; }
-.olakefusion-page .bench-cell-metric{ font-size: 13px !important; }
-.olakefusion-page .faq-q{ font-size: 16px !important; }
-.olakefusion-page .footer-watermark{ font-size: 84px !important; }
+html:has(.olakefusion-page),
+body:has(.olakefusion-page) {
+  height: auto;
+  min-height: 100%;
+}
+body:has(.olakefusion-page) {
+  margin: 0;
+  background: #f5f6fa;
+}
+.olakefusion-page * {
+  box-sizing: border-box;
+}
+.olakefusion-page a {
+  color: #3d4ff0;
+  text-decoration: none;
+}
+.olakefusion-page a:hover {
+  color: #2a38c4;
+}
+.olakefusion-page h1,
+.olakefusion-page h2,
+.olakefusion-page h3,
+.olakefusion-page h4,
+.olakefusion-page h5,
+.olakefusion-page h6 {
+  margin: 0;
+  font-weight: inherit;
+}
+@keyframes floatBox {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+@keyframes travelDot {
+  0% {
+    left: 0%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+@keyframes pulseRow {
+  0%,
+  100% {
+    background: #171e44;
+  }
+  50% {
+    background: #2a3568;
+  }
+}
+@keyframes logoSpin {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(8deg) scale(1.08);
+  }
+}
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes wordFloat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-5px) rotate(var(--r, 0deg));
+  }
+}
+@keyframes feedIn {
+  0% {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
+  65% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(120px) scale(0.3);
+    opacity: 0;
+  }
+}
+@keyframes compactAppear {
+  0%,
+  15% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  35%,
+  85% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+}
+@keyframes fusionPulseRing {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(61, 79, 240, 0.35);
+  }
+  50% {
+    box-shadow: 0 0 0 12px rgba(61, 79, 240, 0);
+  }
+}
+@keyframes lightUp1 {
+  0%,
+  8% {
+    background: #e4e6f0;
+  }
+  16%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+@keyframes lightUp2 {
+  0%,
+  32% {
+    background: #e4e6f0;
+  }
+  40%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+@keyframes lightUp3 {
+  0%,
+  56% {
+    background: #e4e6f0;
+  }
+  64%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+.olakefusion-page .nav-burger {
+  display: none;
+}
+@media (max-width: 900px) {
+  .olakefusion-page .scroll-pipeline {
+    display: none !important;
+  }
+  .olakefusion-page .nav-links,
+  .olakefusion-page .nav-star {
+    display: none !important;
+  }
+  .olakefusion-page .nav-star-mobile {
+    display: flex !important;
+  }
+  .olakefusion-page .nav-burger {
+    display: flex !important;
+  }
+  .olakefusion-page .nav-inner {
+    padding: 14px 20px !important;
+  }
+  .olakefusion-page .hero-wrap {
+    padding: 24px 20px 8px !important;
+  }
+  .olakefusion-page .hero-title {
+    font-size: 32px !important;
+  }
+  .olakefusion-page .hero-sub {
+    width: auto !important;
+    max-width: 100% !important;
+    height: auto !important;
+    font-size: 16px !important;
+  }
+  .olakefusion-page .hero-btns {
+    flex-wrap: wrap !important;
+    gap: 12px !important;
+  }
+  .olakefusion-page .problem-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  .olakefusion-page .problem-wrap {
+    padding: 32px 20px 56px !important;
+  }
+  .olakefusion-page .problem-title {
+    font-size: 26px !important;
+  }
+  .olakefusion-page .features-wrap {
+    padding: 48px 20px 20px !important;
+  }
+  .olakefusion-page .features-grid {
+    grid-template-columns: 1fr !important;
+    gap: 28px !important;
+  }
+  .olakefusion-page .features-card {
+    padding: 24px !important;
+  }
+  .olakefusion-page .sec-title {
+    font-size: 28px !important;
+  }
+  .olakefusion-page .bench-wrap {
+    padding: 60px 16px 30px !important;
+  }
+  .olakefusion-page .cta-wrap {
+    padding: 0 16px !important;
+  }
+  .olakefusion-page .cta-inner {
+    padding: 28px 24px !important;
+  }
+  .olakefusion-page .cta-title {
+    width: auto !important;
+    max-width: 100% !important;
+    height: auto !important;
+    font-size: 24px !important;
+  }
+  .olakefusion-page .faq-wrap {
+    padding: 48px 20px 90px !important;
+  }
+  .olakefusion-page .faq-title {
+    font-size: 26px !important;
+  }
+  .olakefusion-page .footer-wrap {
+    padding: 48px 24px 0 !important;
+  }
+  .olakefusion-page .footer-hero {
+    font-size: 28px !important;
+  }
+  .olakefusion-page .footer-watermark {
+    font-size: 120px !important;
+  }
+}
+@media (max-width: 560px) {
+  .olakefusion-page .hero-title {
+    font-size: 27px !important;
+  }
+  .olakefusion-page .problem-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .olakefusion-page .arch-inner {
+    transform: scale(0.46);
+    transform-origin: top center;
+  }
+  .olakefusion-page .arch-wrap {
+    height: 118px !important;
+    overflow: hidden;
+    padding: 6px 12px !important;
+    margin: 8px auto 8px !important;
+  }
+  .olakefusion-page .bench-row {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+  .olakefusion-page .bench-cell-metric {
+    font-size: 13px !important;
+  }
+  .olakefusion-page .faq-q {
+    font-size: 16px !important;
+  }
+  .olakefusion-page .footer-watermark {
+    font-size: 84px !important;
+  }
 }
 
 /* style-hover rules */
-.olakefusion-page .olakefusion-h0:hover{background:#F4F2EC !important;}
-.olakefusion-page .olakefusion-h1:hover{color:#1B1E2B !important;}
-.olakefusion-page .olakefusion-h2:hover{box-shadow: 0 2px 0 #23309E !important; transform: translateY(1px) !important;}
-.olakefusion-page .olakefusion-h3:hover{box-shadow: 0 2px 0 #10173A !important; transform: translateY(1px) !important;}
-.olakefusion-page .olakefusion-h4:hover{border-color:#3D4FF0 !important; color:#3D4FF0 !important;}
+.olakefusion-page .olakefusion-h0:hover {
+  background: #f4f2ec !important;
+}
+.olakefusion-page .olakefusion-h1:hover {
+  color: #1b1e2b !important;
+}
+.olakefusion-page .olakefusion-h2:hover {
+  box-shadow: 0 2px 0 #23309e !important;
+  transform: translateY(1px) !important;
+}
+.olakefusion-page .olakefusion-h3:hover {
+  box-shadow: 0 2px 0 #10173a !important;
+  transform: translateY(1px) !important;
+}
+.olakefusion-page .olakefusion-h4:hover {
+  border-color: #3d4ff0 !important;
+  color: #3d4ff0 !important;
+}
diff --git a/src/components/landing/pages/olake-go.css b/src/components/landing/pages/olake-go.css
index 3b55f9cc6..51b090e07 100644
--- a/src/components/landing/pages/olake-go.css
+++ b/src/components/landing/pages/olake-go.css
@@ -1,63 +1,355 @@
-html:has(.olakego-page), body:has(.olakego-page){ height: auto; min-height: 100%; }
-html:has(.olakego-page){ scroll-snap-type: y proximity; }
-body:has(.olakego-page){ margin: 0; background: #F5F6FA; font-family: 'Space Grotesk', sans-serif; }
-.olakego-page *{ box-sizing: border-box; }
-.olakego-page a{ color: #3D4FF0; text-decoration: none; }
-.olakego-page a:hover{ color: #2A38C4; }
-@keyframes floatBox{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
-@keyframes travelDot{ 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
-@keyframes pulseRow{ 0%, 100% { background: #171E44; } 50% { background: #2A3568; } }
-@keyframes logoSpin{ 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
-@keyframes fadeSlideIn{ from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes wordFloat{ 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-5px) rotate(var(--r, 0deg)); } }
-@keyframes feedIn{ 0% { transform: translateX(0) scale(1); opacity:1; } 65% { opacity:1; } 100% { transform: translateX(120px) scale(0.3); opacity:0; } }
-@keyframes compactAppear{ 0%, 15% { opacity:0; transform:scale(0.5); } 35%, 85% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.1); } }
-@keyframes fusionPulseRing{ 0%, 100% { box-shadow: 0 0 0 0 rgba(61,79,240,0.35); } 50% { box-shadow: 0 0 0 12px rgba(61,79,240,0); } }
-@keyframes lightUp1{ 0%, 8% { background:#E4E6F0; } 16%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-@keyframes lightUp2{ 0%, 32% { background:#E4E6F0; } 40%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-@keyframes lightUp3{ 0%, 56% { background:#E4E6F0; } 64%, 88% { background:#A9D8F0; } 96%, 100% { background:#E4E6F0; } }
-.olakego-page .nav-burger{ display: none; }
-@media (max-width: 900px){
-.olakego-page .scroll-pipeline{ display: none !important; }
-html:has(.olakego-page){ scroll-snap-type: none; }
-.olakego-page .nav-links, .olakego-page .nav-star{ display: none !important; }
-.olakego-page .nav-burger{ display: flex !important; }
-.olakego-page .nav-inner{ padding: 14px 20px !important; }
-.olakego-page .hero-wrap{ padding: 24px 20px 8px !important; }
-.olakego-page .hero-title{ font-size: 32px !important; }
-.olakego-page .hero-sub{ width: auto !important; max-width: 100% !important; height: auto !important; font-size: 16px !important; }
-.olakego-page .hero-btns{ flex-wrap: wrap !important; gap: 12px !important; }
-.olakego-page .problem-grid{ grid-template-columns: repeat(2, 1fr) !important; }
-.olakego-page .problem-wrap{ padding: 32px 20px 56px !important; }
-.olakego-page .problem-title{ font-size: 26px !important; }
-.olakego-page .features-wrap{ padding: 48px 20px 20px !important; }
-.olakego-page .features-grid{ grid-template-columns: 1fr !important; gap: 28px !important; }
-.olakego-page .features-card{ padding: 24px !important; }
-.olakego-page .sec-title{ font-size: 28px !important; }
-.olakego-page .bench-wrap{ padding: 60px 16px 30px !important; }
-.olakego-page .bench-stats{ grid-template-columns: 1fr !important; }
-.olakego-page .cta-wrap{ padding: 0 16px !important; }
-.olakego-page .cta-inner{ padding: 28px 24px !important; }
-.olakego-page .cta-title{ width: auto !important; max-width: 100% !important; height: auto !important; font-size: 24px !important; }
-.olakego-page .faq-wrap{ padding: 48px 20px 90px !important; }
-.olakego-page .faq-title{ font-size: 26px !important; }
-.olakego-page .footer-wrap{ padding: 48px 24px 0 !important; }
-.olakego-page .footer-hero{ font-size: 28px !important; }
-.olakego-page .footer-watermark{ font-size: 120px !important; }
-}
-@media (max-width: 560px){
-.olakego-page .hero-title{ font-size: 27px !important; }
-.olakego-page .problem-grid{ grid-template-columns: 1fr !important; }
-.olakego-page .arch-inner{ transform: scale(0.46); transform-origin: top center; }
-.olakego-page .arch-wrap{ height: auto !important; overflow: visible; padding: 6px 12px !important; margin: 8px auto 8px !important; }
-.olakego-page .bench-row{ padding-left: 16px !important; padding-right: 16px !important; }
-.olakego-page .bench-cell-metric{ font-size: 13px !important; }
-.olakego-page .faq-q{ font-size: 16px !important; }
-.olakego-page .footer-watermark{ font-size: 84px !important; }
+html:has(.olakego-page),
+body:has(.olakego-page) {
+  height: auto;
+  min-height: 100%;
+}
+html:has(.olakego-page) {
+  scroll-snap-type: y proximity;
+}
+body:has(.olakego-page) {
+  margin: 0;
+  background: #f5f6fa;
+  font-family: 'Space Grotesk', sans-serif;
+}
+.olakego-page * {
+  box-sizing: border-box;
+}
+.olakego-page a {
+  color: #3d4ff0;
+  text-decoration: none;
+}
+.olakego-page a:hover {
+  color: #2a38c4;
+}
+@keyframes floatBox {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+@keyframes travelDot {
+  0% {
+    left: 0%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+@keyframes pulseRow {
+  0%,
+  100% {
+    background: #171e44;
+  }
+  50% {
+    background: #2a3568;
+  }
+}
+@keyframes logoSpin {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(8deg) scale(1.08);
+  }
+}
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes wordFloat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-5px) rotate(var(--r, 0deg));
+  }
+}
+@keyframes feedIn {
+  0% {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
+  65% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(120px) scale(0.3);
+    opacity: 0;
+  }
+}
+@keyframes compactAppear {
+  0%,
+  15% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  35%,
+  85% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+}
+@keyframes fusionPulseRing {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(61, 79, 240, 0.35);
+  }
+  50% {
+    box-shadow: 0 0 0 12px rgba(61, 79, 240, 0);
+  }
+}
+@keyframes lightUp1 {
+  0%,
+  8% {
+    background: #e4e6f0;
+  }
+  16%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+@keyframes lightUp2 {
+  0%,
+  32% {
+    background: #e4e6f0;
+  }
+  40%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+@keyframes lightUp3 {
+  0%,
+  56% {
+    background: #e4e6f0;
+  }
+  64%,
+  88% {
+    background: #a9d8f0;
+  }
+  96%,
+  100% {
+    background: #e4e6f0;
+  }
+}
+.olakego-page .nav-burger {
+  display: none;
+}
+@media (max-width: 900px) {
+  .olakego-page .scroll-pipeline {
+    display: none !important;
+  }
+  html:has(.olakego-page) {
+    scroll-snap-type: none;
+  }
+  .olakego-page .nav-links {
+    display: none !important;
+  }
+  .olakego-page .nav-star {
+    padding: 5px 8px !important;
+    gap: 5px !important;
+  }
+  .olakego-page .nav-star img {
+    height: 22px !important;
+    width: 21px !important;
+  }
+  .olakego-page .nav-star-count {
+    display: none !important;
+  }
+  .olakego-page .nav-slack img {
+    height: 26px !important;
+    width: 27px !important;
+  }
+  .olakego-page .nav-burger {
+    display: flex !important;
+  }
+  .olakego-page .nav-inner {
+    padding: 14px 20px !important;
+  }
+  .olakego-page .hero-wrap {
+    padding: 24px 20px 8px !important;
+  }
+  .olakego-page .hero-title {
+    font-size: 32px !important;
+  }
+  .olakego-page .hero-sub {
+    width: auto !important;
+    max-width: 100% !important;
+    height: auto !important;
+    font-size: 16px !important;
+  }
+  .olakego-page .hero-btns {
+    flex-wrap: wrap !important;
+    gap: 12px !important;
+  }
+  .olakego-page .problem-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  .olakego-page .problem-wrap {
+    padding: 32px 20px 56px !important;
+  }
+  .olakego-page .problem-title {
+    font-size: 26px !important;
+  }
+  .olakego-page .features-wrap {
+    padding: 48px 20px 20px !important;
+  }
+  .olakego-page .features-grid {
+    grid-template-columns: 1fr !important;
+    gap: 28px !important;
+  }
+  .olakego-page .features-card {
+    padding: 24px !important;
+  }
+  .olakego-page .sec-title {
+    font-size: 28px !important;
+  }
+  .olakego-page .bench-wrap {
+    padding: 60px 16px 30px !important;
+  }
+  .olakego-page .bench-stats {
+    grid-template-columns: 1fr !important;
+  }
+  .olakego-page .cta-wrap {
+    padding: 0 16px !important;
+  }
+  .olakego-page .cta-inner {
+    padding: 28px 24px !important;
+  }
+  .olakego-page .cta-title {
+    width: auto !important;
+    max-width: 100% !important;
+    height: auto !important;
+    font-size: 24px !important;
+  }
+  .olakego-page .faq-wrap {
+    padding: 48px 20px 90px !important;
+  }
+  .olakego-page .faq-title {
+    font-size: 26px !important;
+  }
+  .olakego-page .footer-wrap {
+    padding: 48px 24px 0 !important;
+  }
+  .olakego-page .footer-hero {
+    font-size: 28px !important;
+  }
+  .olakego-page .footer-watermark {
+    font-size: 120px !important;
+  }
+}
+@media (max-width: 560px) {
+  .olakego-page .hero-title {
+    font-size: 27px !important;
+  }
+  .olakego-page .problem-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .olakego-page .arch-inner {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 16px !important;
+    height: auto !important;
+    transform: none !important;
+  }
+  .olakego-page .arch-inner > div {
+    transform: none !important;
+    justify-self: auto !important;
+  }
+  .olakego-page .arch-sources {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    max-width: 300px;
+    gap: 8px !important;
+  }
+  .olakego-page .arch-src-label {
+    flex-basis: 100% !important;
+  }
+  .olakego-page .arch-node::before,
+  .olakego-page #opt-node::before {
+    content: '\2193';
+    display: block;
+    text-align: center;
+    color: #8ea0ff;
+    font-size: 22px;
+    line-height: 1;
+    margin-bottom: 4px;
+  }
+  .olakego-page #opt-node {
+    align-items: center !important;
+  }
+  .olakego-page .arch-wrap {
+    height: auto !important;
+    overflow: visible;
+    padding: 6px 12px !important;
+    margin: 8px auto 8px !important;
+  }
+  .olakego-page .problem-cloud {
+    height: 300px !important;
+  }
+  .olakego-page .problem-cloud span {
+    font-size: 13px !important;
+  }
+  .olakego-page .bench-row {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+  .olakego-page .bench-cell-metric {
+    font-size: 13px !important;
+  }
+  .olakego-page .faq-q {
+    font-size: 16px !important;
+  }
+  .olakego-page .footer-watermark {
+    font-size: 84px !important;
+  }
 }
 
 /* style-hover rules */
-.olakego-page .olakego-h0:hover{background:#F4F2EC !important;}
-.olakego-page .olakego-h1:hover{color:#1B1E2B !important;}
-.olakego-page .olakego-h2:hover{box-shadow: 0 2px 0 #23309E !important; transform: translateY(1px) !important;}
-.olakego-page .olakego-h3:hover{box-shadow: 0 2px 0 #10173A !important; transform: translateY(1px) !important;}
+.olakego-page .olakego-h0:hover {
+  background: #f4f2ec !important;
+}
+.olakego-page .olakego-h1:hover {
+  color: #1b1e2b !important;
+}
+.olakego-page .olakego-h2:hover {
+  box-shadow: 0 2px 0 #23309e !important;
+  transform: translateY(1px) !important;
+}
+.olakego-page .olakego-h3:hover {
+  box-shadow: 0 2px 0 #10173a !important;
+  transform: translateY(1px) !important;
+}
diff --git a/src/components/landing/pages/olake-home.css b/src/components/landing/pages/olake-home.css
index 84216c16c..ad4ba48ac 100644
--- a/src/components/landing/pages/olake-home.css
+++ b/src/components/landing/pages/olake-home.css
@@ -1,53 +1,250 @@
-html:has(.olakehome-page), body:has(.olakehome-page){ height: auto; min-height: 100%; scroll-behavior: smooth; }
-body:has(.olakehome-page){ margin: 0; background: #f0f2fa; }
-.olakehome-page *{ box-sizing: border-box; }
-.olakehome-page a{ color: #193AE6; text-decoration: none; }
-.olakehome-page a:hover{ color: #1430b8; }
-.olakehome-page ::selection{ background: #193AE6; color: #000000; }
-@keyframes gridPan{ from { background-position: 0 0; } to { background-position: 0 -80px; } }
-@keyframes blink{ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
-/* Seamless marquee: the track holds N identical copies and scrolls left by exactly
-   one copy's width. Each group's trailing padding matches its gap so the track is
-   exactly N copies wide; `--marquee-copies` comes from React's actual group count. */
-.olakehome-page .olakehome-marquee{
-    display: flex;
-    width: max-content;
-    will-change: transform;
-    animation: tickerScroll 26s linear infinite;
-    -webkit-animation: tickerScroll 26s linear infinite;
-}
-.olakehome-page .olakehome-marquee-group{
-    --marquee-gap: 28px;
-    display: flex;
-    gap: var(--marquee-gap);
-    padding-right: var(--marquee-gap);
-    flex-shrink: 0;
-}
-@keyframes tickerScroll{
-    from { transform: translateX(0); }
-    to { transform: translateX(calc(-100% / var(--marquee-copies, 4))); }
-}
-@media (prefers-reduced-motion: reduce){
-    .olakehome-page .olakehome-marquee{ animation: none; }
-}
-@keyframes glowPulse{ 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
-@keyframes floatUp{ from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes barGrow{ from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
-@keyframes kenburns{ 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.14) translate(-2%,-2%); } }
-@keyframes chipBlink{
-    0%, 100% { background:rgba(25,58,230,0.12); border-color:rgba(120,140,255,0.4); color:#AEB9FF; box-shadow:0 0 0 0 rgba(25,58,230,0); }
-    50% { background:rgba(25,58,230,0.32); border-color:#6E7CFF; color:#ffffff; box-shadow:0 0 16px 1px rgba(79,91,255,0.5); }
-  }
-@keyframes hubGlow{ 0%, 100% { box-shadow:0 0 0 10px rgba(25, 58, 230, 0.06), 0 0 40px -10px rgba(25, 58, 230, 0.4); } 50% { box-shadow:0 0 0 16px rgba(25, 58, 230, 0.12), 0 0 80px -4px rgba(25, 58, 230, 0.85); } }
-@keyframes nodeBlink{ 0%, 80%, 100% { box-shadow:0 8px 22px -10px rgba(0,0,0,0.18); transform:scale(1); } 10% { box-shadow:0 0 0 4px rgba(25,58,230,0.22), 0 12px 28px -8px rgba(25,58,230,0.55); transform:scale(1.07); } }
+html:has(.olakehome-page),
+body:has(.olakehome-page) {
+  height: auto;
+  min-height: 100%;
+  scroll-behavior: smooth;
+}
+body:has(.olakehome-page) {
+  margin: 0;
+  background: #f0f2fa;
+}
+.olakehome-page * {
+  box-sizing: border-box;
+}
+.olakehome-page a {
+  color: #193ae6;
+  text-decoration: none;
+}
+.olakehome-page a:hover {
+  color: #1430b8;
+}
+.olakehome-page ::selection {
+  background: #193ae6;
+  color: #000000;
+}
+@keyframes gridPan {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 -80px;
+  }
+}
+@keyframes blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tickerScroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes glowPulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes floatUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes barGrow {
+  from {
+    transform: scaleY(0.15);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+@keyframes kenburns {
+  0% {
+    transform: scale(1) translate(0, 0);
+  }
+  100% {
+    transform: scale(1.14) translate(-2%, -2%);
+  }
+}
+@keyframes chipBlink {
+  0%,
+  100% {
+    background: rgba(25, 58, 230, 0.12);
+    border-color: rgba(120, 140, 255, 0.4);
+    color: #aeb9ff;
+    box-shadow: 0 0 0 0 rgba(25, 58, 230, 0);
+  }
+  50% {
+    background: rgba(25, 58, 230, 0.32);
+    border-color: #6e7cff;
+    color: #ffffff;
+    box-shadow: 0 0 16px 1px rgba(79, 91, 255, 0.5);
+  }
+}
+@keyframes hubGlow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 10px rgba(25, 58, 230, 0.06),
+      0 0 40px -10px rgba(25, 58, 230, 0.4);
+  }
+  50% {
+    box-shadow:
+      0 0 0 16px rgba(25, 58, 230, 0.12),
+      0 0 80px -4px rgba(25, 58, 230, 0.85);
+  }
+}
+@keyframes nodeBlink {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.18);
+    transform: scale(1);
+  }
+  10% {
+    box-shadow:
+      0 0 0 4px rgba(25, 58, 230, 0.22),
+      0 12px 28px -8px rgba(25, 58, 230, 0.55);
+    transform: scale(1.07);
+  }
+}
+.olakehome-page .nav-burger {
+  display: none;
+}
+.olakehome-page .nav-gh-m {
+  display: none;
+}
+.olakehome-page .arch-mobile {
+  display: none;
+}
+@media (max-width: 860px) {
+  .olakehome-page .nav-gh-m {
+    display: flex !important;
+  }
+  .olakehome-page .nav-actions {
+    gap: 12px !important;
+  }
+  .olakehome-page .arch-desktop {
+    display: none !important;
+  }
+  .olakehome-page .arch-mobile {
+    display: flex !important;
+  }
+  .olakehome-page .nav-links,
+  .olakehome-page .nav-star {
+    display: none !important;
+  }
+  .olakehome-page .nav-burger {
+    display: flex !important;
+  }
+  .olakehome-page .nav-inner {
+    padding-left: 18px !important;
+    padding-right: 18px !important;
+  }
+  .olakehome-page [data-r~='stack'] {
+    grid-template-columns: 1fr !important;
+  }
+  .olakehome-page [data-r~='pad'] {
+    padding-left: 22px !important;
+    padding-right: 22px !important;
+  }
+  .olakehome-page [data-r~='padrow'] {
+    padding-left: 22px !important;
+    padding-right: 22px !important;
+  }
+  .olakehome-page [data-r~='navwrap'] {
+    padding-left: 18px !important;
+    padding-right: 18px !important;
+  }
+  .olakehome-page [data-r~='navmenu'] {
+    display: none !important;
+  }
+  .olakehome-page [data-r~='herohead'] {
+    font-size: 40px !important;
+  }
+  .olakehome-page [data-r~='bighead'] {
+    font-size: 32px !important;
+    margin-bottom: 40px !important;
+  }
+  .olakehome-page [data-r~='fixedhead'] {
+    width: auto !important;
+    max-width: 100% !important;
+    height: auto !important;
+    font-size: 34px !important;
+  }
+  .olakehome-page [data-r~='ctapad'] {
+    padding: 44px 24px !important;
+  }
+  .olakehome-page [data-r~='hero'] {
+    padding-top: 72px !important;
+    padding-bottom: 64px !important;
+    gap: 40px !important;
+  }
+  .olakehome-page [data-r~='statrow'] {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 22px !important;
+  }
+  .olakehome-page [data-r~='bignum'] {
+    font-size: 56px !important;
+  }
+  .olakehome-page [data-r~='cardpad'] {
+    padding: 30px 26px !important;
+  }
+}
 
 /* style-hover rules */
-.olakehome-page .olakehome-h0:hover{background:rgba(0, 0, 0, 0.05) !important;}
-.olakehome-page .olakehome-h1:hover{color:#000000 !important;}
-.olakehome-page .olakehome-h2:hover{transform:translateY(4px) !important; box-shadow:0 0 0 #5762da, inset 0 1px 0 rgba(0, 0, 0, 0.2) !important;}
-.olakehome-page .olakehome-h3:hover{transform:translateY(6px) !important; box-shadow:0 0 0 #5762da, inset 0 1px 0 rgba(0, 0, 0, 0.2) !important;}
-.olakehome-page .olakehome-h4:hover{transform:translateY(6px) !important; box-shadow:0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(0, 0, 0, 0.08) !important;}
-.olakehome-page .olakehome-h5:hover{transform:translateY(-4px) !important; box-shadow:0 32px 60px -26px rgba(25, 58, 230, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;}
-.olakehome-page .olakehome-h6:hover{opacity:0.72 !important;}
-.olakehome-page .olakehome-h7:hover{transform:translateY(-6px) !important; box-shadow:0 34px 60px -28px rgba(0,0,0,0.55) !important;}
-.olakehome-page .olakehome-h8:hover{opacity:0.65 !important;}
+.olakehome-page .olakehome-h0:hover {
+  background: #f4f2ec !important;
+}
+.olakehome-page .olakehome-h1:hover {
+  color: #1b1e2b !important;
+}
+.olakehome-page .olakehome-h2:hover {
+  transform: translateY(6px) !important;
+  box-shadow:
+    0 0 0 #5762da,
+    inset 0 1px 0 rgba(0, 0, 0, 0.2) !important;
+}
+.olakehome-page .olakehome-h3:hover {
+  transform: translateY(6px) !important;
+  box-shadow:
+    0 0 0 rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(0, 0, 0, 0.08) !important;
+}
+.olakehome-page .olakehome-h4:hover {
+  transform: translateY(-4px) !important;
+  box-shadow:
+    0 32px 60px -26px rgba(25, 58, 230, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
+}
+.olakehome-page .olakehome-h5:hover {
+  background: #eef1ff !important;
+}
+.olakehome-page .olakehome-h6:hover {
+  opacity: 0.72 !important;
+}
+.olakehome-page .olakehome-h7:hover {
+  transform: translateY(-6px) !important;
+  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.55) !important;
+}
+.olakehome-page .olakehome-h8:hover {
+  opacity: 0.65 !important;
+}
diff --git a/src/components/landing/pages/overrides.css b/src/components/landing/pages/overrides.css
index 67c25d85d..d4e99d857 100644
--- a/src/components/landing/pages/overrides.css
+++ b/src/components/landing/pages/overrides.css
@@ -1,18 +1,18 @@
-/* =========================================================================
-   Hand-maintained overrides for the three literal-ported landing pages.
-
-   IMPORTANT: olake-go.css / olake-fusion.css / olake-home.css are GENERATED
-   from the design templates and are overwritten on every regeneration. Put
-   any deliberate deviation from the designs HERE instead, so it survives.
-   ========================================================================= */
+/* Kills the design's `scroll-snap-type: y proximity` — same specificity as the
+   generated rule, and this file is imported after it. */
+html:has(.olakego-page) {
+  scroll-snap-type: none;
+}
 
-/* -------------------------------------------------------------------------
-   / (v2 homepage) — USER STORIES cards.
+/* The design animates the full-width logo marquee unconditionally. */
+@media (prefers-reduced-motion: reduce) {
+  .olakehome-page .olakehome-marquee {
+    animation: none;
+  }
+}
 
-   The design draws these as plain <div>s. They are converted to <a> links to
-   each customer's story (see postprocess_pages.js), so they need a hover
-   affordance — the design has none because they weren't clickable.
-   ------------------------------------------------------------------------- */
+/* USER STORIES cards: plain <div>s in the design, converted to whole-card <a>
+   links by the pipeline's postprocess.js, so they need a hover affordance. */
 .olakehome-page a[aria-label='Read the customer story'] {
   text-decoration: none;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -23,15 +23,9 @@
   box-shadow: 0 32px 60px -26px rgba(0, 0, 0, 0.6);
 }
 
-/* -------------------------------------------------------------------------
-   Shared footer hover states.
-
-   All three landing pages render one canonical footer, so its hover styles
-   live here rather than in the per-page generated stylesheets (whose hover
-   classes are page-scoped, e.g. `.olakego-h0`). The Go design's social boxes
-   are unlinked <div>s with no hover at all; these match the Fusion design,
-   which implements the same boxes as real links.
-   ------------------------------------------------------------------------- */
+/* Shared footer hovers: all three pages render one canonical footer, so these
+   can't live in the per-page generated sheets (hover classes are page-scoped).
+   Values match the Fusion design, the only one with the boxes as real links. */
 .olake-design-page .olake-footer-social {
   transition: border-color 0.15s ease, color 0.15s ease;
 }
@@ -49,22 +43,9 @@
   color: #3d4ff0 !important;
 }
 
-/* -------------------------------------------------------------------------
-   /olake-go — benchmark table horizontal-overflow "dead zone".
-
-   The design sizes the table's inner wrapper to `min-width: 860px`, while
-   `.bench-wrap` is `max-width:1080px` with 64px side padding. So the table
-   only fits without scrolling at viewports >= 988px (1080 - 128 = 952, and
-   viewport - 128 >= 860). The design's own breakpoint drops that padding to
-   16px at <= 900px, which makes it fit again (900 - 32 = 868 >= 860).
-
-   That leaves ~901-987px where the table is wider than its container and
-   clips its last column. This closes that gap by applying the narrower side
-   padding across the dead zone too (987 - 32 = 955 >= 860).
-
-   Only the horizontal padding is touched, so the design's vertical rhythm
-   above the 900px breakpoint is preserved exactly.
-   ------------------------------------------------------------------------- */
+/* The benchmark table is min-width:860px inside a 64px-padded wrap, and the
+   design's own 900px breakpoint drops that padding to 16px. Between 901-987px
+   neither applies and the last column clips, so close the gap here. */
 @media (max-width: 987px) and (min-width: 901px) {
   .olakego-page .bench-wrap {
     padding-left: 16px !important;
@@ -72,13 +53,8 @@
   }
 }
 
-/* -------------------------------------------------------------------------
-   / (v2 homepage) — footer responsive rules.
-
-   The homepage uses the OLake Go footer verbatim (all three landing pages
-   share it), but the v2 design ships no media queries at all, so the Go
-   design's footer breakpoints have to be carried over by hand.
-   ------------------------------------------------------------------------- */
+/* The homepage renders the OLake Go footer verbatim, but the v2 design has no
+   footer breakpoints, so the Go design's are carried over by hand. */
 @media (max-width: 900px) {
   .olakehome-page .footer-wrap {
     padding: 48px 24px 0 !important;
diff --git a/src/components/landing/pages/useFusionLogic.ts b/src/components/landing/pages/useFusionLogic.ts
index 446b3637b..279337811 100644
--- a/src/components/landing/pages/useFusionLogic.ts
+++ b/src/components/landing/pages/useFusionLogic.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
 export function useFusionLogic(props = {}) {
   const [state, setStateRaw] = useState({
@@ -182,7 +182,7 @@ export function useFusionLogic(props = {}) {
         const list = [
           {
             title: 'TIERED COMPACTION',
-            body: 'Trigger-based tiers instead of one blunt job, so light cleanup runs constantly and deep rewrites only run when they\u2019re actually needed.',
+            body: 'Trigger-based tiers instead of one blunt job, so lightweight compaction can run constantly and deep rewrites only run when they’re actually needed.',
             tag: 'tiered'
           },
           {
diff --git a/src/components/landing/pages/useGoLogic.ts b/src/components/landing/pages/useGoLogic.ts
index 8e298c55d..df3eb06a2 100644
--- a/src/components/landing/pages/useGoLogic.ts
+++ b/src/components/landing/pages/useGoLogic.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import {
   CONNECTORS,
   CONNECTOR_BENCHMARKS,
@@ -43,7 +43,7 @@ export function useGoLogic(props = {}) {
       },
       {
         q: 'What data platforms and tools does OLake integrate with?',
-        a: 'As of now, we integrate with Apache Iceberg as a destination. You can query it from most big data platforms like Snowflake, Databricks, Redshift and BigQuery.'
+        a: 'As of now, we integrate with Apache Iceberg and S3 as destinations. You can query it using popular query engines like Spark, AWS Athena, Snowflake, Databricks, and BigQuery.'
       }
     ],
     openFaq: -1,
@@ -81,8 +81,25 @@ export function useGoLogic(props = {}) {
     const connector = CONNECTORS[stateRef.current.activeSource] || CONNECTORS[0]
     const dataset =
       stateRef.current.benchmarkMode === 'cdc' ? CONNECTOR_CDC_BENCHMARKS : CONNECTOR_BENCHMARKS
-    const bench = dataset[connector.id]
+    const bench = dataset[connector.id] || {}
     const comps = competitorKeys(bench)
+    const def = {
+      comps: comps.map((key) => TOOLS[key].name),
+      rows: BENCHMARK_METRICS.map((metric) => {
+        const row = bench[metric] || {}
+        const isCmp = metric === 'comparison'
+        return {
+          label: CONNECTOR_METRIC_LABELS[metric],
+          cmp: isCmp,
+          // OLake is the baseline for the comparison row, so it shows a dash
+          // rather than a multiplier against itself.
+          olake: isCmp ? '–' : row.olake,
+          comps: comps.map((key) => row[key] ?? '-')
+        }
+      })
+    }
+    const comingSoon = !bench.hasData
+    const sourceName = connector.name
     const cols = [
       {
         name: 'Metrics',
@@ -102,8 +119,8 @@ export function useGoLogic(props = {}) {
         bg: GB,
         align: 'center'
       },
-      ...comps.map((key) => ({
-        name: TOOLS[key].name,
+      ...def.comps.map((name) => ({
+        name,
         sub: '',
         hasSub: false,
         olake: false,
@@ -118,24 +135,16 @@ export function useGoLogic(props = {}) {
       weight: type === 'olake' || type === 'cmp' ? 700 : 500,
       bg: type === 'olake' ? GB : 'transparent'
     })
-    const table = BENCHMARK_METRICS.map((metric) => {
-      const row = bench[metric]
-      const isCmp = metric === 'comparison'
-      return {
-        label: CONNECTOR_METRIC_LABELS[metric],
-        sub:
-          metric === 'cost'
-            ? 'OLake is OSS and self-hosted — only pay for your infrastructure.'
-            : '',
-        hasSub: metric === 'cost',
-        // OLake is the baseline for the comparison row, so it shows a dash, not a multiplier.
-        cells: [
-          cell(isCmp ? '–' : row.olake, 'olake'),
-          ...comps.map((key) => cell(row[key] ?? '-', isCmp ? 'cmp' : 'normal'))
-        ]
-      }
-    })
-    return { cols, table, comingSoon: !bench.hasData, sourceName: connector.name }
+    const table = def.rows.map((r) => ({
+      label: r.label,
+      sub:
+        r.label === 'Cost'
+          ? 'OLake is OSS and self-hosted — only pay for your infrastructure.'
+          : '',
+      hasSub: r.label === 'Cost',
+      cells: [cell(r.olake, 'olake'), ...r.comps.map((v) => cell(v, r.cmp ? 'cmp' : 'normal'))]
+    }))
+    return { cols, table, comingSoon, sourceName }
   }
 
   const selectBenchmarkMode = (mode) => {
@@ -216,7 +225,7 @@ export function useGoLogic(props = {}) {
       icebergStyle,
       problemSentences: [
         {
-          top: 27,
+          top: 22,
           left: 42,
           rot: -3,
           delay: 0,
diff --git a/src/components/landing/pages/useHomeLogic.ts b/src/components/landing/pages/useHomeLogic.ts
index c4ac68ccf..d97761336 100644
--- a/src/components/landing/pages/useHomeLogic.ts
+++ b/src/components/landing/pages/useHomeLogic.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
 export function useHomeLogic(props = {}) {
   const [state, setStateRaw] = useState({
@@ -7,6 +7,7 @@ export function useHomeLogic(props = {}) {
     contributorsOpen: false,
     productOpen: false,
     docsOpen: false,
+    mobileMenuOpen: false,
     advantage: 'go'
   })
   const stateRef = useRef(state)
@@ -50,6 +51,10 @@ export function useHomeLogic(props = {}) {
     setState({ contributorsOpen: false })
   }
 
+  const toggleMobileMenu = () => {
+    setState((s) => ({ mobileMenuOpen: !s.mobileMenuOpen }))
+  }
+
   const renderVals = () => {
     const isGo = stateRef.current.advantage === 'go'
     const activeTab = '#193AE6'
@@ -94,15 +99,57 @@ export function useHomeLogic(props = {}) {
       ")), url('" +
       advImg +
       "')"
-    // w/h are the files' intrinsic sizes, set on the <img> so the marquee reserves
-    // space before the logos load.
+    // w/h are intrinsic sizes, so the marquee row reserves space before decode.
+    // maxH/maxW are the design's per-tile boxes; Lending Kart's is larger.
     const logos = [
-      { src: '/img/landing/v2/logo-bitespeed.webp', name: 'Bitespeed', w: 340, h: 65 },
-      { src: '/img/landing/v2/logo-xeno.webp', name: 'Xeno', w: 176, h: 88 },
-      { src: '/img/landing/v2/logo-cordial.webp', name: 'Cordial', w: 244, h: 88 },
-      { src: '/img/landing/v2/logo-lendingkart.webp', name: 'Lending Kart', w: 168, h: 88 },
-      { src: '/img/landing/v2/logo-astrotalk.webp', name: 'Astro Talk', w: 246, h: 88 },
-      { src: '/img/landing/v2/logo-physicswallah.webp', name: 'Physics Wallah', w: 246, h: 88 }
+      {
+        src: '/img/landing/v2/logo-bitespeed.webp',
+        name: 'Bitespeed',
+        w: 340,
+        h: 65,
+        maxH: '44px',
+        maxW: '170px'
+      },
+      {
+        src: '/img/landing/v2/logo-xeno.webp',
+        name: 'Xeno',
+        w: 176,
+        h: 88,
+        maxH: '44px',
+        maxW: '170px'
+      },
+      {
+        src: '/img/landing/v2/logo-cordial.webp',
+        name: 'Cordial',
+        w: 244,
+        h: 88,
+        maxH: '44px',
+        maxW: '170px'
+      },
+      {
+        src: '/img/landing/v2/logo-lendingkart.webp',
+        name: 'Lending Kart',
+        w: 168,
+        h: 88,
+        maxH: '62px',
+        maxW: '230px'
+      },
+      {
+        src: '/img/landing/v2/logo-astrotalk.webp',
+        name: 'Astro Talk',
+        w: 246,
+        h: 88,
+        maxH: '44px',
+        maxW: '170px'
+      },
+      {
+        src: '/img/landing/v2/logo-physicswallah.webp',
+        name: 'Physics Wallah',
+        w: 246,
+        h: 88,
+        maxH: '44px',
+        maxW: '170px'
+      }
     ]
     const ticker = [
       'Postgres',
@@ -133,6 +180,8 @@ export function useHomeLogic(props = {}) {
       closeResources: () => closeResources(),
       openContributors: () => openContributors(),
       closeContributors: () => closeContributors(),
+      mobileMenuOpen: stateRef.current.mobileMenuOpen,
+      toggleMobileMenu: () => toggleMobileMenu(),
 
       terminalLines: [
         {
@@ -188,6 +237,23 @@ export function useHomeLogic(props = {}) {
 
       tickerLoop: [...ticker, ...ticker],
 
+      // Shared by the desktop canvas and the `.arch-mobile` stack below 860px.
+      archSources: ticker.slice(0, 8),
+      archGoChips: [{ label: 'Full Load' }, { label: 'CDC' }, { label: 'Incremental' }],
+      archFusionChips: [
+        { label: 'Compaction' },
+        { label: 'Cleanup', soon: true },
+        { label: 'Logs & metrics' }
+      ],
+      archDestinations: [
+        {
+          src: '/img/landing/v2/connector-iceberg.webp',
+          name: 'Iceberg',
+          sub: 'Tables & metadata'
+        },
+        { src: '/img/landing/shared/parquet-icon.webp', name: 'Parquet on S3', sub: '' }
+      ],
+
       engines: [
         {
           tag: '// OLAKE GO',
@@ -221,8 +287,7 @@ export function useHomeLogic(props = {}) {
         }
       ],
 
-      // Copies of the logo set; enough to keep the marquee covered on wide screens.
-      logoGroups: Array.from({ length: 4 }, () => logos),
+      logosLoop: [...logos, ...logos],
 
       selectGo: () => setState({ advantage: 'go' }),
       selectFusion: () => setState({ advantage: 'fusion' }),
@@ -251,7 +316,7 @@ export function useHomeLogic(props = {}) {
           num: '02',
           kicker: 'OPEN',
           title: 'Built on open standards',
-          body: 'Write directly to Apache Iceberg or Parquet, with support for AWS Glue, Hive Metastore, and REST catalogs like Nessie, Polaris, and Unity. '
+          body: 'Write directly to Apache Iceberg or Parquet, with support for AWS Glue, Hive Metastore, JDBC/SQL and REST catalogs like Nessie, Polaris, and Unity.'
         },
         {
           stickyTop: 180,
@@ -269,7 +334,7 @@ export function useHomeLogic(props = {}) {
           num: '04',
           kicker: 'MAINTAINED',
           title: 'Keep tables fast as data keeps growing',
-          body: 'Automated compaction and delete-file cleanup keep query performance and storage costs in check as you scale.'
+          body: 'Schedule and automate compaction and delete-file cleanup to keep query performance and storage costs in check as you scale.'
         }
       ],
 
diff --git a/src/css/custom.css b/src/css/custom.css
index ff1ace7ec..5d51c2cf6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -733,34 +733,27 @@ html[data-theme='dark'] .benchmark-table-no-border thead th {
   margin-right: calc(-1 * var(--ifm-menu-link-padding-horizontal));
 }
 
-/* Translucent Navbar Styling */
+/* SiteNavbar (@theme/Navbar/Content) brings its own height, background and border.
+   This wrapper is kept only because NavbarLayout renders the mobile sidebar inside
+   it, so it must paint nothing behind SiteNavbar's translucent bar. */
 .navbar {
-  /* Sticky positioning for scroll behavior + stacking context for backdrop-filter */
   position: sticky !important;
   top: 0;
   z-index: 200;
-  isolation: isolate;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  /* Backdrop blur effect */
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid #e9e9e9;
-  background-color: rgba(255, 255, 255, 0.8) !important;
-  height: 72px;
-  display: flex;
-  align-items: center;
+  height: auto;
+  min-height: 0;
+  padding: 0;
+  display: block;
+  background: transparent !important;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
 html[data-theme='dark'] .navbar {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.navbar__inner {
-  display: flex;
-  align-items: center;
-  height: 100%;
+  background: transparent !important;
+  border-bottom: 0;
 }
 
 /* Override Infima's internal 996px breakpoint to extend mobile navbar up to xl (1280px) */
@@ -1211,20 +1204,10 @@ html[data-theme='dark'] .tabs-container > ul.tabs {
 
 /* =========================================================================
    OLAKE DESIGN PAGES — the three landing routes are literal ports of the
-   supplied design bundles. Each renders the design's OWN navbar and footer
-   inline, so Docusaurus' chrome is hidden on them, and Infima's element
-   defaults are neutralised so the design's own rules/inline styles apply
-   exactly as authored. Everything here is scoped to `.olake-design-page`.
+   supplied design bundles: Infima's element defaults are neutralised so the
+   design's own rules/inline styles apply exactly as authored. Everything here
+   is scoped to `.olake-design-page`.
    ========================================================================= */
-/* The three landing pages render their own shared navbar inline
-   (src/components/landing/Navbar/SiteNavbar.tsx), so Docusaurus' navbar is
-   hidden on those routes only. Every other route — /docs, /blog, etc. — keeps
-   the standard navbar driven by docusaurus.config.js, untouched. */
-body:has(.olake-design-page) .navbar,
-body:has(.olake-design-page) .navbar-sidebar,
-body:has(.olake-design-page) .navbar-sidebar__backdrop {
-  display: none !important;
-}
 
 /* Infima sets `html { font: <size>/1.65 <family> }`, so every element inherits
    line-height 1.65. The designs were authored against the browser default
diff --git a/src/hooks/useGetReleases.ts b/src/hooks/useGetReleases.ts
index d55adc96a..4f9f8c1cf 100644
--- a/src/hooks/useGetReleases.ts
+++ b/src/hooks/useGetReleases.ts
@@ -4,21 +4,24 @@ import { IGlobalData } from '@site/src/types/download'
 
 const STARS_API_URL = 'https://api.github.com/repos/datazip-inc/olake'
 const STARS_CACHE_KEY = 'olake:gh-stars'
-const STARS_TTL_MS = 6 * 60 * 60 * 1000
+const STARS_TTL_MS = 24 * 60 * 60 * 1000
 
 let starsRequest: Promise<number | null> | null = null
 
-const readCachedStars = (): number | null => {
+const readStoredStars = (): { value: number; at: number } | null => {
   try {
-    const raw = window.sessionStorage.getItem(STARS_CACHE_KEY)
-    if (!raw) return null
-    const { value, at } = JSON.parse(raw) as { value: number; at: number }
-    return Date.now() - at < STARS_TTL_MS ? value : null
+    const raw = window.localStorage.getItem(STARS_CACHE_KEY)
+    return raw ? JSON.parse(raw) : null
   } catch {
-    return null
+    return null // private mode, storage disabled, or corrupt entry
   }
 }
 
+const readCachedStars = (): number | null => {
+  const stored = readStoredStars()
+  return stored && Date.now() - stored.at < STARS_TTL_MS ? stored.value : null
+}
+
 const fetchStars = (): Promise<number | null> => {
   if (starsRequest) return starsRequest
   starsRequest = fetch(STARS_API_URL)
@@ -27,14 +30,14 @@ const fetchStars = (): Promise<number | null> => {
       const value: number | null = data?.stargazers_count ?? null
       if (value) {
         try {
-          window.sessionStorage.setItem(STARS_CACHE_KEY, JSON.stringify({ value, at: Date.now() }))
+          window.localStorage.setItem(STARS_CACHE_KEY, JSON.stringify({ value, at: Date.now() }))
         } catch {
           /* private mode or storage disabled — just skip caching */
         }
       }
       return value
     })
-    .catch(() => null) // offline or rate-limited: callers keep their fallback
+    .catch(() => null) // offline or rate-limited: fall back to the stale value
   return starsRequest
 }
 
@@ -58,6 +61,10 @@ const useGetReleases = () => {
       setStargazersCount(cached)
       return
     }
+    // Expired: show the stale count rather than a dash while refreshing.
+    const stale = readStoredStars()
+    if (stale?.value) setStargazersCount(stale.value)
+
     fetchStars().then((value) => {
       if (alive && value) setStargazersCount(value)
     })
diff --git a/src/pages/ai-lake.tsx b/src/pages/ai-lake.tsx
index cbcad1404..d24d4cf97 100644
--- a/src/pages/ai-lake.tsx
+++ b/src/pages/ai-lake.tsx
@@ -5,15 +5,7 @@ const GlaceLake: React.FC = () => {
   const history = useHistory()
 
   useEffect(() => {
-    // Redirect to home page with the form anchor
-    history.replace('/#olake-form-product')
-    // Scroll to the anchor after a brief delay to ensure page loads
-    setTimeout(() => {
-      const element = document.getElementById('olake-form-product')
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth' })
-      }
-    }, 100)
+    history.replace('/contact')
   }, [history])
 
   return null
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 40e8b0b9a..eee5e9e9d 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -3,7 +3,9 @@ import Layout from '@theme/Layout'
 import Head from '@docusaurus/Head'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import { useLocation } from '@docusaurus/router'
-import { FaEnvelope, FaMapMarkerAlt, FaSlack, FaLinkedin } from 'react-icons/fa'
+import { FaEnvelope, FaPhone, FaMapMarkerAlt, FaSlack, FaLinkedin } from 'react-icons/fa'
+import LazyComponent from '@site/src/components/LazyComponent'
+import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
 
 const stripTrailingSlash = (value?: string) => {
   if (!value) {
@@ -30,40 +32,40 @@ const ContactPage = () => {
   const organizationSchema = {
     '@context': 'https://schema.org',
     '@type': 'Organization',
-    name: 'OLake',
-    alternateName: 'Datazip, Inc. (OLake project)',
-    url: 'https://olake.io/',
-    logo: 'https://olake.io/img/logo/olake-blue.svg',
-    sameAs: [
+    'name': 'OLake',
+    'alternateName': 'Datazip, Inc. (OLake project)',
+    'url': 'https://olake.io/',
+    'logo': 'https://olake.io/img/logo/olake-blue.svg',
+    'sameAs': [
       'https://github.com/datazip-inc/olake',
       'https://x.com/_olake',
       'https://www.linkedin.com/company/datazipio/',
       'https://www.youtube.com/@olakeio'
     ],
-    address: {
+    'address': {
       '@type': 'PostalAddress',
-      streetAddress: '16192 COASTAL HWY',
-      addressLocality: 'LEWES',
-      addressRegion: 'DE',
-      postalCode: '19958',
-      addressCountry: 'US'
+      'streetAddress': '16192 COASTAL HWY',
+      'addressLocality': 'LEWES',
+      'addressRegion': 'DE',
+      'postalCode': '19958',
+      'addressCountry': 'US'
     }
   }
 
   const websiteSchema = {
     '@context': 'https://schema.org',
     '@type': 'WebSite',
-    url: 'https://olake.io/',
-    name: 'Fastest Open Source Data Replication Tool',
-    description:
+    'url': 'https://olake.io/',
+    'name': 'Fastest Open Source Data Replication Tool',
+    'description':
       'Fastest open-source tool for replicating Databases to Data Lake in Open Table Formats like Apache Iceberg. Efficient, quick and scalable data ingestion. Supporting Postgres, MongoDB, MySQL, Oracle and Kafka with 5-500x faster than alternatives.',
-    publisher: {
+    'publisher': {
       '@type': 'Organization',
-      name: 'OLake'
+      'name': 'OLake'
     },
-    potentialAction: {
+    'potentialAction': {
       '@type': 'SearchAction',
-      target: 'https://olake.io/search?q={search_term_string}',
+      'target': 'https://olake.io/search?q={search_term_string}',
       'query-input': 'required name=search_term_string'
     }
   }
@@ -71,42 +73,42 @@ const ContactPage = () => {
   const contactPageSchema = {
     '@context': 'https://schema.org',
     '@type': 'ContactPage',
-    url: canonicalUrl,
-    name: 'Contact Us',
-    description:
+    'url': canonicalUrl,
+    'name': 'Contact Us',
+    'description':
       'Get in touch with OLake for product questions, community, or support. Email hello@olake.io. Join our Slack for community discussions.',
-    isPartOf: {
+    'isPartOf': {
       '@type': 'WebSite',
-      url: 'https://olake.io/',
-      name: 'OLake'
+      'url': 'https://olake.io/',
+      'name': 'OLake'
     },
-    publisher: {
+    'publisher': {
       '@type': 'Organization',
-      name: 'OLake',
-      url: 'https://olake.io/',
-      logo: {
+      'name': 'OLake',
+      'url': 'https://olake.io/',
+      'logo': {
         '@type': 'ImageObject',
-        url: 'https://olake.io/img/logo/olake-blue.svg',
-        width: 32,
-        height: 32
+        'url': 'https://olake.io/img/logo/olake-blue.svg',
+        'width': 32,
+        'height': 32
       }
     },
-    contactPoint: {
+    'contactPoint': {
       '@type': 'ContactPoint',
-      contactType: 'customer support',
-      email: 'hello@olake.io',
-      availableLanguage: ['English']
+      'contactType': 'customer support',
+      'email': 'hello@olake.io',
+      'availableLanguage': ['English']
     },
-    mainEntity: [
+    'mainEntity': [
       {
         '@type': 'ContactPoint',
-        contactType: 'general inquiries',
-        email: 'hello@olake.io'
+        'contactType': 'general inquiries',
+        'email': 'hello@olake.io'
       },
       {
         '@type': 'WebSite',
-        name: 'Join Slack',
-        url: 'https://olake.io/slack/'
+        'name': 'Join Slack',
+        'url': 'https://olake.io/slack/'
       }
     ]
   }
@@ -114,18 +116,18 @@ const ContactPage = () => {
   const breadcrumbSchema = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
-    itemListElement: [
+    'itemListElement': [
       {
         '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        item: 'https://olake.io/'
+        'position': 1,
+        'name': 'Home',
+        'item': 'https://olake.io/'
       },
       {
         '@type': 'ListItem',
-        position: 2,
-        name: 'Contact Us',
-        item: canonicalUrl
+        'position': 2,
+        'name': 'Contact Us',
+        'item': canonicalUrl
       }
     ]
   }
@@ -139,9 +141,11 @@ const ContactPage = () => {
 
   return (
     <Layout
-      title="Contact Us - OLake"
-      description="Get in touch with the OLake team. Contact us for support, partnerships, or questions about our fastest open-source data replication tool."
+      title='Contact Us - OLake'
+      description='Get in touch with the OLake team. Contact us for support, partnerships, or questions about our fastest open-source data replication tool.'
+      wrapperClassName='landing-page'
     >
+      <LightModeEnforcer />
       <Head>
         <meta property='og:type' content='website' />
         <meta property='og:title' content='Contact Us - OLake' />
@@ -163,40 +167,42 @@ const ContactPage = () => {
           />
         ))}
       </Head>
-      <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl font-extrabold text-center mb-10">Contact Us</h1>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
-            {/* Contact Info Section */}
-            <div className="space-y-8">
+      <div id='olake-form-product' className='min-h-[80vh]'>
+        <LazyComponent component='RegistrationSection' />
+      </div>
+      <div className='bg-white px-4 py-12 text-gray-800 dark:bg-gray-900 dark:text-gray-200 sm:px-6 lg:px-8'>
+        <div className='mx-auto max-w-4xl'>
+          <h1 className='mb-10 text-center text-4xl font-extrabold'>Contact Us</h1>
+          <div className='grid grid-cols-1 gap-10 md:grid-cols-2'>
+            <div className='space-y-8'>
               <div>
-                <h2 className="text-2xl font-bold mb-3">Get in Touch</h2>
-                <div className="space-y-4">
-                  <div className="flex items-center space-x-4">
-                    <FaEnvelope className="text-2xl" />
-                    <a href="mailto:hello@olake.io" className="hover:underline">
+                <h2 className='mb-3 text-2xl font-bold'>Other ways to reach us</h2>
+                <div className='space-y-4'>
+                  <div className='flex items-center space-x-4'>
+                    <FaEnvelope className='text-2xl' />
+                    <a href='mailto:hello@olake.io' className='hover:underline'>
                       hello@olake.io
                     </a>
                   </div>
-                  <div className="flex items-start space-x-4">
-                    <FaMapMarkerAlt className="text-2xl mt-1" />
+                  <div className='flex items-start space-x-4'>
+                    <FaMapMarkerAlt className='mt-1 text-2xl' />
                     <div>
-                      <p className="font-semibold">Headquarters</p>
+                      <p className='font-semibold'>Headquarters</p>
                       <p>Datazip, Inc. 16192 COASTAL HWY LEWES, DE 19958, USA</p>
-                      <p className="font-semibold mt-2">Working Address</p>
+                      <p className='mt-2 font-semibold'>Working Address</p>
                       <p>
                         HustleHub H203, 522, 24th Main Rd, Parangi Palaya, Sector 2, HSR Layout,
                         Bengaluru, Karnataka 560102
                       </p>
                     </div>
                   </div>
-                  <div className="flex items-center space-x-4">
-                    <FaSlack className="text-2xl" />
+                  <div className='flex items-center space-x-4'>
+                    <FaSlack className='text-2xl' />
                     <a
-                      href="https://olake.io/slack"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="hover:underline"
+                      href='https://olake.io/slack'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='hover:underline'
                     >
                       Join our Slack
                     </a>
@@ -205,12 +211,11 @@ const ContactPage = () => {
               </div>
             </div>
 
-            {/* Team Links Section */}
-            <div className="space-y-8">
-              <h2 className="text-2xl font-bold mb-3">Connect with Our Team on LinkedIn</h2>
-              <ul className="space-y-4">
-                <li className="flex items-center space-x-4">
-                  <FaLinkedin className="text-2xl" />
+            <div className='space-y-8'>
+              <h2 className='mb-3 text-2xl font-bold'>Connect with Our Team on LinkedIn</h2>
+              <ul className='space-y-4'>
+                <li className='flex items-center space-x-4'>
+                  <FaLinkedin className='text-2xl' />
                   <a
                     href='https://www.linkedin.com/in/rohan-khameshra/'
                     target='_blank'
@@ -220,8 +225,8 @@ const ContactPage = () => {
                     Rohan
                   </a>
                 </li>
-                <li className="flex items-center space-x-4">
-                  <FaLinkedin className="text-2xl" />
+                <li className='flex items-center space-x-4'>
+                  <FaLinkedin className='text-2xl' />
                   <a
                     href='https://www.linkedin.com/in/shubham-baldava/'
                     target='_blank'
@@ -241,4 +246,3 @@ const ContactPage = () => {
 }
 
 export default ContactPage
-
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 002bd71e1..93a5b8382 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import SiteNavbar from '@site/src/components/landing/Navbar/SiteNavbar'
-import '@site/src/components/landing/Navbar/SiteNavbar.css'
 import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
@@ -13,6 +11,14 @@ import { HOME_SEO } from '@site/src/data/landing/seo'
 import '@site/src/components/landing/pages/olake-home.css'
 import '@site/src/components/landing/pages/overrides.css'
 
+/* The dashed connector between stages of the mobile architecture stack. */
+const ArchArrow = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '9px 0' }}>
+    <div style={{ height: '22px', borderLeft: '2px dashed #4F5BFF' }} />
+    <div style={{ color: '#4F5BFF', fontSize: '13px', lineHeight: '1', marginTop: '-3px' }}>▼</div>
+  </div>
+)
+
 export default function HomePage() {
   // Derived at build time from docs/release/ingestion — see getLatestOlakeRelease()
   // in docusaurus.config.js. Keeps the BULLETIN release card from going stale.
@@ -36,10 +42,16 @@ export default function HomePage() {
     closeResources,
     openContributors,
     closeContributors,
+    mobileMenuOpen,
+    toggleMobileMenu,
     terminalLines,
     tickerLoop,
     engines,
-    logoGroups,
+    logosLoop,
+    archSources,
+    archGoChips,
+    archFusionChips,
+    archDestinations,
     selectGo,
     selectFusion,
     benchmarkHref,
@@ -89,7 +101,6 @@ export default function HomePage() {
             position: 'relative'
           }}
         >
-          <SiteNavbar />
           <div
             style={{
               position: 'relative',
@@ -111,6 +122,7 @@ export default function HomePage() {
               }}
             />{' '}
             <div
+              data-r='stack pad hero'
               style={{
                 position: 'relative',
                 maxWidth: '1360px',
@@ -150,6 +162,7 @@ export default function HomePage() {
                   Apache 2.0 licensed · Open Source
                 </div>{' '}
                 <h1
+                  data-r='herohead'
                   style={{
                     fontFamily: "'Space Grotesk', sans-serif",
                     fontWeight: '500',
@@ -177,7 +190,7 @@ export default function HomePage() {
                   style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '38px' }}
                 >
                   <a
-                    className='olakehome-h3'
+                    className='olakehome-h2'
                     href='/docs/getting-started/quickstart/'
                     style={{
                       color: '#ffffff',
@@ -194,7 +207,7 @@ export default function HomePage() {
                     Try OLake →
                   </a>{' '}
                   <a
-                    className='olakehome-h4'
+                    className='olakehome-h3'
                     href='/contact'
                     style={{
                       color: '#0a0f23',
@@ -763,44 +776,43 @@ export default function HomePage() {
             >
               <div
                 className='olakehome-marquee'
-                style={{ '--marquee-copies': (logoGroups || []).length } as React.CSSProperties}
+                style={{
+                  display: 'flex',
+                  gap: '28px',
+                  width: 'max-content',
+                  animation: 'tickerScroll 26s linear infinite'
+                }}
               >
-                {(logoGroups || []).map((group, groupIdx) => (
+                {/* One copy per pass: the second is a duplicate that makes the scroll seamless. */}
+                {(logosLoop || []).map((logo, logoIdx) => (
                   <div
-                    className='olakehome-marquee-group'
-                    key={groupIdx}
-                    aria-hidden={groupIdx > 0 || undefined}
+                    key={logoIdx}
+                    aria-hidden={logoIdx >= (logosLoop || []).length / 2 || undefined}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      height: '54px',
+                      padding: '0 26px',
+                      background: '#ffffff',
+                      borderRadius: '14px',
+                      flexShrink: '0'
+                    }}
                   >
-                    {group.map((logo, logoIdx) => (
-                      <div
-                        key={logoIdx}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          height: '54px',
-                          padding: '0 26px',
-                          background: '#ffffff',
-                          borderRadius: '14px',
-                          flexShrink: '0'
-                        }}
-                      >
-                        <img
-                          src={logo.src}
-                          alt={logo.name}
-                          width={logo.w}
-                          height={logo.h}
-                          loading={groupIdx === 0 ? undefined : 'lazy'}
-                          decoding='async'
-                          style={{
-                            maxHeight: '44px',
-                            maxWidth: '170px',
-                            width: 'auto',
-                            objectFit: 'contain'
-                          }}
-                        />
-                      </div>
-                    ))}
+                    <img
+                      src={logo.src}
+                      alt={logo.name}
+                      width={logo.w}
+                      height={logo.h}
+                      loading={logoIdx < (logosLoop || []).length / 2 ? undefined : 'lazy'}
+                      decoding='async'
+                      style={{
+                        maxHeight: logo.maxH,
+                        maxWidth: logo.maxW,
+                        width: 'auto',
+                        objectFit: 'contain'
+                      }}
+                    />
                   </div>
                 ))}
               </div>
@@ -808,6 +820,7 @@ export default function HomePage() {
           </div>
           <div
             id='platform'
+            data-r='pad'
             style={{
               position: 'relative',
               maxWidth: '1360px',
@@ -829,6 +842,7 @@ export default function HomePage() {
               </div>
             </div>
             <div
+              data-r='bighead'
               style={{
                 fontFamily: "'Space Grotesk', sans-serif",
                 fontWeight: '500',
@@ -842,11 +856,14 @@ export default function HomePage() {
             >
               One lakehouse. <span style={{ color: '#193AE6' }}>Two engines.</span>
             </div>{' '}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '34px' }}>
+            <div
+              data-r='stack'
+              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '34px' }}
+            >
               {(engines || []).map((eng, engIdx) => (
                 <React.Fragment key={engIdx}>
                   <a
-                    className='olakehome-h5'
+                    className='olakehome-h4'
                     href={eng.href}
                     target='_blank'
                     rel='noopener noreferrer'
@@ -973,7 +990,7 @@ export default function HomePage() {
               ))}
             </div>
           </div>
-          <div style={{ maxWidth: '1360px', margin: '0 auto', padding: '124px 48px' }}>
+          <div data-r='pad' style={{ maxWidth: '1360px', margin: '0 auto', padding: '124px 48px' }}>
             <div
               style={{ display: 'flex', alignItems: 'baseline', gap: '16px', marginBottom: '44px' }}
             >
@@ -1028,6 +1045,7 @@ export default function HomePage() {
               </div>
             </div>{' '}
             <div
+              data-r='cardpad'
               style={{
                 display: 'block',
                 position: 'relative',
@@ -1056,6 +1074,7 @@ export default function HomePage() {
                 }}
               />{' '}
               <div
+                data-r='statrow'
                 style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '56px' }}
               >
                 {(advantageStats || []).map((stat, statIdx) => (
@@ -1066,6 +1085,7 @@ export default function HomePage() {
                         data-prefix={stat.prefix}
                         data-suffix={stat.suffix}
                         data-decimals={stat.decimals}
+                        data-r='bignum'
                         style={{
                           fontFamily: "'Space Grotesk', sans-serif",
                           fontWeight: '600',
@@ -1101,7 +1121,10 @@ export default function HomePage() {
             </div>
           </div>
           <div style={{ padding: '112px 0 124px' }}>
-            <div style={{ maxWidth: '1360px', margin: '0 auto 34px', padding: '0 48px' }}>
+            <div
+              data-r='pad'
+              style={{ maxWidth: '1360px', margin: '0 auto 34px', padding: '0 48px' }}
+            >
               <div
                 style={{
                   display: 'flex',
@@ -1142,11 +1165,11 @@ export default function HomePage() {
               >
                 OLake Go supports ingestion from 8 different sources into Iceberg and Parquet.{' '}
                 <br />
-                OLake Fusion keeps your Iceberg tables fast, helping you scheduled compaction and
+                OLake Fusion keeps your Iceberg tables fast, through scheduled compaction and
                 maintenance.
               </div>
             </div>{' '}
-            <div style={{ maxWidth: '100%', margin: '0', padding: '0' }}>
+            <div className='arch-desktop' style={{ maxWidth: '100%', margin: '0', padding: '0' }}>
               <div
                 id='archFrame'
                 style={{
@@ -1303,119 +1326,31 @@ export default function HomePage() {
                           gap: '13px'
                         }}
                       >
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          Postgres
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          MySQL
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          MongoDB
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          Oracle
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          Kafka
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          S3
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          DB2 LUW
-                        </span>{' '}
-                        <span
-                          style={{
-                            fontFamily: "'JetBrains Mono', monospace",
-                            fontSize: '15px',
-                            color: '#2a3355',
-                            background: '#eef1fb',
-                            border: '1px solid rgba(16,24,64,0.1)',
-                            borderRadius: '11px',
-                            padding: '10px 16px'
-                          }}
-                        >
-                          MSSQL
-                        </span>
+                        {(archSources || []).map((name) => (
+                          <span
+                            key={name}
+                            style={{
+                              fontFamily: "'JetBrains Mono', monospace",
+                              fontSize: '15px',
+                              color: '#2a3355',
+                              background: '#eef1fb',
+                              border: '1px solid rgba(16,24,64,0.1)',
+                              borderRadius: '11px',
+                              padding: '10px 16px'
+                            }}
+                          >
+                            {name}
+                          </span>
+                        ))}
                       </div>
                     </div>
                     <div
                       style={{
                         position: 'absolute',
                         left: '480px',
-                        top: '100px',
+                        top: '70px',
                         width: '304px',
-                        height: '260px',
+                        height: '320px',
                         border: '2px solid #4F5BFF',
                         borderRadius: '26px',
                         padding: '34px 28px',
@@ -1455,11 +1390,25 @@ export default function HomePage() {
                       <div
                         style={{
                           display: 'flex',
+                          flexWrap: 'wrap',
                           justifyContent: 'center',
                           gap: '11px',
                           marginTop: '20px'
                         }}
                       >
+                        <span
+                          style={{
+                            fontFamily: "'JetBrains Mono', monospace",
+                            fontSize: '14px',
+                            color: '#FFFFFF',
+                            background: 'rgba(255,255,255,0.06)',
+                            border: '1px solid rgba(120,140,255,0.4)',
+                            borderRadius: '9px',
+                            padding: '7px 13px'
+                          }}
+                        >
+                          Full Load
+                        </span>{' '}
                         <span
                           style={{
                             fontFamily: "'JetBrains Mono', monospace",
@@ -1484,7 +1433,7 @@ export default function HomePage() {
                             padding: '7px 13px'
                           }}
                         >
-                          Chunking
+                          Incremental
                         </span>
                       </div>
                     </div>
@@ -1560,9 +1509,6 @@ export default function HomePage() {
                       <div>
                         <div style={{ fontWeight: '700', fontSize: '22px', color: '#0a0f23' }}>
                           Parquet on S3
-                        </div>{' '}
-                        <div style={{ fontSize: '14px', color: '#5b6486', marginTop: '2px' }}>
-                          Columnar tables
                         </div>
                       </div>
                     </div>
@@ -1680,9 +1626,261 @@ export default function HomePage() {
                   </div>
                 </div>
               </div>
+            </div>{' '}
+            <div
+              className='arch-mobile'
+              style={{
+                display: 'none',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                gap: '0',
+                maxWidth: '400px',
+                margin: '0 auto',
+                padding: '0 20px'
+              }}
+            >
+              <div
+                style={{
+                  background: '#ffffff',
+                  border: '1px solid rgba(16,24,64,0.1)',
+                  borderRadius: '20px',
+                  padding: '22px 20px',
+                  boxShadow: '0 16px 40px -30px rgba(16,24,64,0.35)'
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: "'JetBrains Mono', monospace",
+                    fontSize: '12px',
+                    letterSpacing: '2px',
+                    color: '#6b7396',
+                    textAlign: 'center',
+                    marginBottom: '16px'
+                  }}
+                >
+                  SOURCES
+                </div>{' '}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    gap: '9px'
+                  }}
+                >
+                  {(archSources || []).map((name) => (
+                    <span
+                      key={name}
+                      style={{
+                        fontFamily: "'JetBrains Mono', monospace",
+                        fontSize: '13px',
+                        color: '#2a3355',
+                        background: '#eef1fb',
+                        border: '1px solid rgba(16,24,64,0.1)',
+                        borderRadius: '10px',
+                        padding: '8px 13px'
+                      }}
+                    >
+                      {name}
+                    </span>
+                  ))}
+                </div>
+              </div>{' '}
+              <ArchArrow />{' '}
+              <div
+                style={{
+                  border: '2px solid #4F5BFF',
+                  borderRadius: '22px',
+                  padding: '26px 22px',
+                  textAlign: 'center',
+                  backgroundColor: '#193AE6'
+                }}
+              >
+                <div
+                  style={{
+                    width: '66px',
+                    height: '66px',
+                    margin: '0 auto 14px',
+                    background: 'rgba(255,255,255,0.08)',
+                    border: '1px solid rgba(120,140,255,0.4)',
+                    borderRadius: '16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}
+                >
+                  <img
+                    loading='lazy'
+                    decoding='async'
+                    src='/img/landing/shared/olake-mark-small.svg'
+                    alt=''
+                    style={{ width: '38px', height: '38px', objectFit: 'contain' }}
+                  />
+                </div>{' '}
+                <div style={{ fontWeight: '700', fontSize: '24px', color: '#ffffff' }}>
+                  OLake Go
+                </div>{' '}
+                <div style={{ fontSize: '15px', color: '#ffffff', marginTop: '3px' }}>
+                  Ingestion engine
+                </div>{' '}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    gap: '9px',
+                    marginTop: '16px'
+                  }}
+                >
+                  {(archGoChips || []).map((chip) => (
+                    <span
+                      key={chip.label}
+                      style={{
+                        fontFamily: "'JetBrains Mono', monospace",
+                        fontSize: '13px',
+                        color: '#ffffff',
+                        background: 'rgba(255,255,255,0.06)',
+                        border: '1px solid rgba(120,140,255,0.4)',
+                        borderRadius: '9px',
+                        padding: '6px 12px'
+                      }}
+                    >
+                      {chip.label}
+                    </span>
+                  ))}
+                </div>
+              </div>{' '}
+              <ArchArrow />{' '}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                {(archDestinations || []).map((dest) => (
+                  <div
+                    key={dest.name}
+                    style={{
+                      background: '#ffffff',
+                      border: '1px solid rgba(16,24,64,0.1)',
+                      borderRadius: '18px',
+                      boxShadow: '0 16px 40px -30px rgba(16,24,64,0.35)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '16px',
+                      padding: '18px 22px'
+                    }}
+                  >
+                    <img
+                      loading='lazy'
+                      decoding='async'
+                      src={dest.src}
+                      alt={dest.name}
+                      style={{
+                        width: '52px',
+                        height: '52px',
+                        objectFit: 'contain',
+                        flexShrink: '0'
+                      }}
+                    />{' '}
+                    <div>
+                      <div style={{ fontWeight: '700', fontSize: '20px', color: '#0a0f23' }}>
+                        {dest.name}
+                      </div>
+                      {dest.sub && (
+                        <div style={{ fontSize: '13px', color: '#5b6486', marginTop: '2px' }}>
+                          {dest.sub}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>{' '}
+              <ArchArrow />{' '}
+              <div
+                style={{
+                  border: '2px solid #4F5BFF',
+                  borderRadius: '22px',
+                  padding: '26px 22px',
+                  textAlign: 'center',
+                  backgroundColor: '#193AE6'
+                }}
+              >
+                <div
+                  style={{
+                    width: '66px',
+                    height: '66px',
+                    margin: '0 auto 14px',
+                    background: 'rgba(255,255,255,0.08)',
+                    border: '1px solid rgba(120,140,255,0.4)',
+                    borderRadius: '16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}
+                >
+                  <img
+                    loading='lazy'
+                    decoding='async'
+                    src='/img/landing/shared/olake-mark-small.svg'
+                    alt=''
+                    style={{ width: '38px', height: '38px', objectFit: 'contain' }}
+                  />
+                </div>{' '}
+                <div style={{ fontWeight: '700', fontSize: '24px', color: '#ffffff' }}>
+                  OLake Fusion
+                </div>{' '}
+                <div style={{ fontSize: '15px', color: '#ffffff', marginTop: '3px' }}>
+                  Maintenance engine
+                </div>{' '}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    gap: '9px',
+                    marginTop: '16px'
+                  }}
+                >
+                  {(archFusionChips || []).map((chip) => (
+                    <span
+                      key={chip.label}
+                      style={{
+                        position: 'relative',
+                        fontFamily: "'JetBrains Mono', monospace",
+                        fontSize: '13px',
+                        color: '#ffffff',
+                        background: 'rgba(25,58,230,0.32)',
+                        border: '1px solid #6E7CFF',
+                        borderRadius: '9px',
+                        padding: '6px 12px'
+                      }}
+                    >
+                      {chip.label}
+                      {chip.soon && (
+                        <span
+                          style={{
+                            position: 'absolute',
+                            top: '-11px',
+                            right: '-13px',
+                            fontFamily: "'JetBrains Mono', monospace",
+                            fontSize: '8px',
+                            letterSpacing: '0.3px',
+                            color: '#ffffff',
+                            background: '#14257A',
+                            borderRadius: '6px',
+                            padding: '3px 6px',
+                            whiteSpace: 'nowrap'
+                          }}
+                        >
+                          COMING SOON
+                        </span>
+                      )}
+                    </span>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
-          <div style={{ maxWidth: '1360px', margin: '0 auto', padding: '104px 48px 124px' }}>
+          <div
+            data-r='pad'
+            style={{ maxWidth: '1360px', margin: '0 auto', padding: '104px 48px 124px' }}
+          >
             <div
               style={{ display: 'flex', alignItems: 'baseline', gap: '16px', marginBottom: '56px' }}
             >
@@ -1760,6 +1958,7 @@ export default function HomePage() {
                         </div>
                       </div>{' '}
                       <div
+                        data-r='stack padrow'
                         style={{
                           padding: '8px 48px 44px',
                           display: 'grid',
@@ -1796,8 +1995,14 @@ export default function HomePage() {
               ))}
             </div>
           </div>
-          <div style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}>
-            <div style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}>
+          <div
+            data-r='pad'
+            style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}
+          >
+            <div
+              data-r='pad'
+              style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}
+            >
               <div
                 style={{
                   display: 'flex',
@@ -1817,9 +2022,10 @@ export default function HomePage() {
                       marginBottom: '20px'
                     }}
                   >
-                    06 / USER STORIES
+                    05 / USER STORIES
                   </div>{' '}
                   <div
+                    data-r='fixedhead'
                     style={{
                       fontFamily: "'Space Grotesk', sans-serif",
                       fontWeight: '700',
@@ -1840,7 +2046,10 @@ export default function HomePage() {
                   style={{ flex: '1', minWidth: '300px', maxWidth: '520px', paddingTop: '44px' }}
                 />
               </div>{' '}
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '24px' }}>
+              <div
+                data-r='stack'
+                style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '24px' }}
+              >
                 <a
                   href='/customer-stories/xeno-aws-dms-alternative-mysql-cdc'
                   aria-label='Read the customer story'
@@ -1908,7 +2117,7 @@ export default function HomePage() {
                   <div
                     style={{
                       position: 'relative',
-                      padding: '30px',
+                      padding: '30px 30px 0',
                       fontFamily: "'Space Grotesk', sans-serif",
                       fontWeight: '700',
                       fontSize: '25px',
@@ -1918,6 +2127,24 @@ export default function HomePage() {
                   >
                     <span style={{ color: '#93A6FF' }}>Zero pipeline failure</span>, 50% faster
                     loads.
+                  </div>{' '}
+                  <div style={{ position: 'relative', padding: '16px 30px 30px' }}>
+                    <span
+                      className='olakehome-h5'
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        background: '#ffffff',
+                        color: '#193AE6',
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        padding: '9px 16px',
+                        borderRadius: '9px'
+                      }}
+                    >
+                      Read more <span style={{ fontSize: '15px' }}>→</span>
+                    </span>
                   </div>
                 </a>{' '}
                 <a
@@ -1987,7 +2214,7 @@ export default function HomePage() {
                   <div
                     style={{
                       position: 'relative',
-                      padding: '30px',
+                      padding: '30px 30px 0',
                       fontFamily: "'Space Grotesk', sans-serif",
                       fontWeight: '700',
                       fontSize: '25px',
@@ -1997,6 +2224,24 @@ export default function HomePage() {
                   >
                     Cordial's path to an{' '}
                     <span style={{ color: '#93A6FF' }}>AI-ready lakehouse</span>.
+                  </div>{' '}
+                  <div style={{ position: 'relative', padding: '16px 30px 30px' }}>
+                    <span
+                      className='olakehome-h5'
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        background: '#ffffff',
+                        color: '#193AE6',
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        padding: '9px 16px',
+                        borderRadius: '9px'
+                      }}
+                    >
+                      Read more <span style={{ fontSize: '15px' }}>→</span>
+                    </span>
                   </div>
                 </a>{' '}
                 <a
@@ -2066,7 +2311,7 @@ export default function HomePage() {
                   <div
                     style={{
                       position: 'relative',
-                      padding: '30px',
+                      padding: '30px 30px 0',
                       fontFamily: "'Space Grotesk', sans-serif",
                       fontWeight: '700',
                       fontSize: '25px',
@@ -2076,6 +2321,24 @@ export default function HomePage() {
                   >
                     From <span style={{ color: '#93A6FF' }}>40-minute to sub-minute</span>{' '}
                     segmentation queries.
+                  </div>{' '}
+                  <div style={{ position: 'relative', padding: '16px 30px 30px' }}>
+                    <span
+                      className='olakehome-h5'
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        background: '#ffffff',
+                        color: '#193AE6',
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        padding: '9px 16px',
+                        borderRadius: '9px'
+                      }}
+                    >
+                      Read more <span style={{ fontSize: '15px' }}>→</span>
+                    </span>
                   </div>
                 </a>
               </div>{' '}
@@ -2097,6 +2360,7 @@ export default function HomePage() {
             </div>
             <div
               id='enterprise'
+              data-r='pad'
               style={{
                 maxWidth: '1360px',
                 margin: '0 auto 132px',
@@ -2105,6 +2369,7 @@ export default function HomePage() {
               }}
             >
               <div
+                data-r='ctapad'
                 style={{
                   position: 'relative',
                   border: '1px solid rgba(212, 215, 228, 0.12)',
@@ -2160,7 +2425,7 @@ export default function HomePage() {
                         marginBottom: '16px'
                       }}
                     >
-                      // OLAKE FOR ENTERPRISES
+                      06 / OLAKE FOR ENTERPRISES
                     </div>{' '}
                     <div
                       style={{
@@ -2181,7 +2446,7 @@ export default function HomePage() {
                     </div>
                   </div>{' '}
                   <a
-                    className='olakehome-h3'
+                    className='olakehome-h2'
                     href='/contact'
                     style={{
                       background: '#193AE6',
@@ -2218,7 +2483,7 @@ export default function HomePage() {
                     color: '#193AE6'
                   }}
                 >
-                  05 / BULLETIN
+                  07 / BULLETIN
                 </div>
                 <a
                   href='/blog'
@@ -2233,6 +2498,7 @@ export default function HomePage() {
                 </a>
               </div>{' '}
               <div
+                data-r='stack'
                 style={{
                   display: 'grid',
                   gridTemplateColumns: 'repeat(3,minmax(0,1fr))',
@@ -2317,7 +2583,10 @@ export default function HomePage() {
                 ))}
               </div>
             </div>
-            <div style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}>
+            <div
+              data-r='pad'
+              style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 48px 132px' }}
+            >
               <div
                 style={{
                   display: 'flex',
@@ -2337,7 +2606,7 @@ export default function HomePage() {
                       marginBottom: '20px'
                     }}
                   >
-                    07 / ADDITIONAL RESOURCES
+                    08 / ADDITIONAL RESOURCES
                   </div>
                 </div>{' '}
                 <a
@@ -2353,6 +2622,7 @@ export default function HomePage() {
                 </a>
               </div>{' '}
               <div
+                data-r='stack'
                 style={{
                   display: 'grid',
                   gridTemplateColumns: '1fr 1fr',
@@ -2362,7 +2632,9 @@ export default function HomePage() {
               >
                 <a
                   className='olakehome-h7'
-                  href='/docs/getting-started/quickstart/'
+                  href='https://youtu.be/IcAJmW72d2A?si=hhKFCgp0Dsl2pRGp'
+                  target='_blank'
+                  rel='noopener noreferrer'
                   style={{
                     position: 'relative',
                     background: '#111319',
diff --git a/src/pages/olake-fusion.tsx b/src/pages/olake-fusion.tsx
index 0ecdd0501..b254ab45f 100644
--- a/src/pages/olake-fusion.tsx
+++ b/src/pages/olake-fusion.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import SiteNavbar from '@site/src/components/landing/Navbar/SiteNavbar'
-import '@site/src/components/landing/Navbar/SiteNavbar.css'
 import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
 import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
@@ -54,7 +52,6 @@ export default function OLakeFusionPage() {
       />
       <LightModeEnforcer />
       <div className='olakefusion-page olake-design-page'>
-        <SiteNavbar />
         <div
           style={{
             position: 'fixed',
@@ -195,8 +192,7 @@ export default function OLakeFusionPage() {
               minHeight: '65vh',
               display: 'flex',
               flexDirection: 'column',
-              justifyContent: 'center',
-              scrollSnapAlign: 'start'
+              justifyContent: 'center'
             }}
           >
             <div
@@ -620,7 +616,6 @@ export default function OLakeFusionPage() {
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'center',
-              scrollSnapAlign: 'start',
               borderTop: '1px solid rgba(27,30,43,0.08)'
             }}
           >
@@ -709,27 +704,18 @@ export default function OLakeFusionPage() {
               </h2>
             </div>
           </div>{' '}
-          <div
-            style={{
-              height: '120px',
-              background:
-                'linear-gradient(180deg, #F5F6FA 0%, #EDEFFB 35%, #7385DD 80%, #3C52CC 100%)'
-            }}
-          />{' '}
           <div
             style={{
               minHeight: '65vh',
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'center',
-              scrollSnapAlign: 'start'
+              marginTop: '-1px',
+              background:
+                'linear-gradient(180deg, #F5F6FA 0%, #EDEFFB 12%, #7385DD 26%, #4F63D1 33%) top/100% 240px no-repeat, linear-gradient(0deg, #F5F6FA 0%, #EDEFFB 12%, #7385DD 26%, #4F63D1 33%) bottom/100% 240px no-repeat, #4F63D1'
             }}
           >
-            <div
-              className='features-wrap'
-              id='features'
-              style={{ padding: '60px 64px 20px', backgroundColor: '#3C52CCE5' }}
-            >
+            <div className='features-wrap' id='features' style={{ padding: '60px 64px 20px' }}>
               <div style={{ maxWidth: '1160px', margin: '0 auto' }}>
                 <div style={{ textAlign: 'center', marginBottom: '64px' }}>
                   <div
@@ -1342,7 +1328,15 @@ export default function OLakeFusionPage() {
                                     <div
                                       style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                                     >
-                                      {/* image-slot: Docker logo */}{' '}
+                                      <span
+                                        style={{
+                                          width: '8px',
+                                          height: '8px',
+                                          borderRadius: '50%',
+                                          background: '#3D4FF0',
+                                          flexShrink: '0'
+                                        }}
+                                      />{' '}
                                       <span
                                         style={{
                                           fontSize: '13px',
@@ -1356,7 +1350,15 @@ export default function OLakeFusionPage() {
                                     <div
                                       style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                                     >
-                                      {/* image-slot: K8s logo */}{' '}
+                                      <span
+                                        style={{
+                                          width: '8px',
+                                          height: '8px',
+                                          borderRadius: '50%',
+                                          background: '#3D4FF0',
+                                          flexShrink: '0'
+                                        }}
+                                      />{' '}
                                       <span
                                         style={{
                                           fontSize: '13px',
@@ -1383,14 +1385,7 @@ export default function OLakeFusionPage() {
                   </div>
                 </div>
               </div>
-            </div>{' '}
-            <div
-              style={{
-                height: '120px',
-                background:
-                  'linear-gradient(180deg, #3C52CC 0%, #7385DD 20%, #EDEFFB 65%, #F5F6FA 100%)'
-              }}
-            />
+            </div>
           </div>{' '}
           <div
             style={{
@@ -1398,7 +1393,6 @@ export default function OLakeFusionPage() {
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'center',
-              scrollSnapAlign: 'start',
               position: 'relative'
             }}
           >
@@ -1460,8 +1454,8 @@ export default function OLakeFusionPage() {
                   margin: '0 auto 56px'
                 }}
               >
-                OLake Fusion compacted Apache Iceberg tables <b>2.06×</b> faster than Apache Spark
-                and at roughly <b>half the cost</b>.
+                OLake Fusion compacts Apache Iceberg tables <b>2.06× </b>
+                faster than Apache Spark and at roughly <b>half the cost</b>.
               </div>{' '}
               <div
                 style={{
@@ -1707,8 +1701,7 @@ export default function OLakeFusionPage() {
               minHeight: '65vh',
               display: 'flex',
               flexDirection: 'column',
-              justifyContent: 'center',
-              scrollSnapAlign: 'start'
+              justifyContent: 'center'
             }}
           >
             <div
@@ -1792,8 +1785,7 @@ export default function OLakeFusionPage() {
               minHeight: '65vh',
               display: 'flex',
               flexDirection: 'column',
-              justifyContent: 'center',
-              scrollSnapAlign: 'start'
+              justifyContent: 'center'
             }}
           >
             <div
@@ -1840,7 +1832,7 @@ export default function OLakeFusionPage() {
                       maxWidth: '480px'
                     }}
                   >
-                    Fastest <span style={{ fontWeight: '800' }}>Data Replication</span>
+                    Optimized <span style={{ fontWeight: '800' }}>Iceberg Tables</span>
                   </h2>
                   <div
                     style={{
diff --git a/src/pages/olake-go.tsx b/src/pages/olake-go.tsx
index c63bdcfb9..dac4c337a 100644
--- a/src/pages/olake-go.tsx
+++ b/src/pages/olake-go.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import SiteNavbar from '@site/src/components/landing/Navbar/SiteNavbar'
-import '@site/src/components/landing/Navbar/SiteNavbar.css'
 import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
 import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
@@ -18,10 +16,10 @@ export default function OLakeGoPage() {
     problemSentences,
     features,
     benchSources,
-    benchCols,
-    benchTable,
     benchModes,
     benchModeIndicatorLeft,
+    benchCols,
+    benchTable,
     benchComingSoon,
     benchHasData,
     benchSourceName,
@@ -61,7 +59,6 @@ export default function OLakeGoPage() {
       />
       <LightModeEnforcer />
       <div className='olakego-page olake-design-page'>
-        <SiteNavbar />
         <div
           style={{
             position: 'fixed',
@@ -119,7 +116,6 @@ export default function OLakeGoPage() {
         >
           <div
             style={{
-              minHeight: '65vh',
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'center',
@@ -130,7 +126,7 @@ export default function OLakeGoPage() {
               className='hero-wrap'
               style={{
                 position: 'relative',
-                padding: '88px 64px 60px',
+                padding: '56px 64px 36px',
                 maxWidth: '1120px',
                 margin: '0 auto',
                 textAlign: 'center'
@@ -179,7 +175,7 @@ export default function OLakeGoPage() {
                   fontWeight: '700',
                   letterSpacing: '0.08em',
                   color: '#3D4FF0',
-                  marginBottom: '48px'
+                  marginBottom: '32px'
                 }}
               >
                 <img
@@ -204,56 +200,56 @@ export default function OLakeGoPage() {
                 }}
               >
                 Fastest Replication to Iceberg & S3
-              </h1>
-            </div>{' '}
-            <div
-              className='hero-btns'
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '20px',
-                marginTop: '56px'
-              }}
-            >
-              <a
-                className='olakego-h2'
-                href='/docs/getting-started/quickstart/'
-                style={{
-                  color: '#fff',
-                  background: '#3D4FF0',
-                  padding: '14px 28px',
-                  borderRadius: '9px',
-                  fontWeight: '600',
-                  fontSize: '15px',
-                  border: '2px solid #3D4FF0',
-                  boxShadow: '0 5px 0 #23309E',
-                  transform: 'translateY(-2px)',
-                  textDecoration: 'none',
-                  display: 'inline-block'
-                }}
-              >
-                Get Started
-              </a>{' '}
-              <a
-                className='olakego-h3'
-                href='/contact'
+              </h1>{' '}
+              <div
+                className='hero-btns'
                 style={{
-                  color: '#10173A',
-                  background: '#fff',
-                  padding: '14px 28px',
-                  borderRadius: '9px',
-                  fontWeight: '600',
-                  fontSize: '15px',
-                  border: '2px solid #10173A',
-                  boxShadow: '0 5px 0 #10173A',
-                  transform: 'translateY(-2px)',
-                  textDecoration: 'none',
-                  display: 'inline-block'
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '20px',
+                  marginTop: '36px'
                 }}
               >
-                Talk to us
-              </a>
+                <a
+                  className='olakego-h2'
+                  href='/docs/getting-started/quickstart/'
+                  style={{
+                    color: '#fff',
+                    background: '#3D4FF0',
+                    padding: '14px 28px',
+                    borderRadius: '9px',
+                    fontWeight: '600',
+                    fontSize: '15px',
+                    border: '2px solid #3D4FF0',
+                    boxShadow: '0 5px 0 #23309E',
+                    transform: 'translateY(-2px)',
+                    textDecoration: 'none',
+                    display: 'inline-block'
+                  }}
+                >
+                  Get Started
+                </a>{' '}
+                <a
+                  className='olakego-h3'
+                  href='/contact'
+                  style={{
+                    color: '#10173A',
+                    background: '#fff',
+                    padding: '14px 28px',
+                    borderRadius: '9px',
+                    fontWeight: '600',
+                    fontSize: '15px',
+                    border: '2px solid #10173A',
+                    boxShadow: '0 5px 0 #10173A',
+                    transform: 'translateY(-2px)',
+                    textDecoration: 'none',
+                    display: 'inline-block'
+                  }}
+                >
+                  Talk to us
+                </a>
+              </div>
             </div>
           </div>
           <div
@@ -261,7 +257,7 @@ export default function OLakeGoPage() {
             style={{
               maxWidth: '900px',
               width: '100%',
-              margin: '72px auto 56px',
+              margin: '28px auto 56px',
               padding: '20px 40px',
               position: 'relative',
               zIndex: '10'
@@ -273,7 +269,7 @@ export default function OLakeGoPage() {
                 display: 'grid',
                 gridTemplateColumns: '1fr auto 1fr',
                 alignItems: 'start',
-                height: '210px',
+                height: '326px',
                 position: 'relative'
               }}
             >
@@ -290,6 +286,7 @@ export default function OLakeGoPage() {
                 }}
               />
               <div
+                className='arch-sources'
                 style={{
                   display: 'flex',
                   flexDirection: 'column',
@@ -299,6 +296,7 @@ export default function OLakeGoPage() {
                 }}
               >
                 <div
+                  className='arch-src-label'
                   style={{
                     fontFamily: "'Space Grotesk', sans-serif",
                     fontSize: '10px',
@@ -475,14 +473,114 @@ export default function OLakeGoPage() {
                   >
                     S3
                   </span>
+                </div>{' '}
+                <div
+                  className='src-box'
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '9px',
+                    background: '#fff',
+                    border: '1.5px solid #E1E4F3',
+                    borderRadius: '9px',
+                    padding: '6px 12px'
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      background: '#C74634',
+                      flexShrink: '0'
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontFamily: "'Space Grotesk',sans-serif",
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      color: '#10173A',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    Oracle
+                  </span>
+                </div>{' '}
+                <div
+                  className='src-box'
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '9px',
+                    background: '#fff',
+                    border: '1.5px solid #E1E4F3',
+                    borderRadius: '9px',
+                    padding: '6px 12px'
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      background: '#A91D22',
+                      flexShrink: '0'
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontFamily: "'Space Grotesk',sans-serif",
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      color: '#10173A',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    MSSQL
+                  </span>
+                </div>{' '}
+                <div
+                  className='src-box'
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '9px',
+                    background: '#fff',
+                    border: '1.5px solid #E1E4F3',
+                    borderRadius: '9px',
+                    padding: '6px 12px'
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      background: '#1F70C1',
+                      flexShrink: '0'
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontFamily: "'Space Grotesk',sans-serif",
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      color: '#10173A',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    DB2 LUW
+                  </span>
                 </div>
               </div>
               <div
+                className='arch-node'
                 style={{
                   textAlign: 'center',
                   flexShrink: '0',
                   justifySelf: 'center',
-                  transform: 'translateY(55px)'
+                  transform: 'translateY(68px)'
                 }}
               >
                 <div
@@ -578,7 +676,7 @@ export default function OLakeGoPage() {
                   gap: '12px',
                   flexShrink: '0',
                   justifySelf: 'end',
-                  transform: 'translateY(36px)'
+                  transform: 'translateY(96px)'
                 }}
               >
                 <div
@@ -788,15 +886,7 @@ export default function OLakeGoPage() {
               'linear-gradient(180deg, #F5F6FA 0%, #EDEFFB 35%, #7385DD 80%, #3C52CC 100%)'
           }}
         />
-        <div
-          style={{
-            minHeight: '65vh',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            scrollSnapAlign: 'start'
-          }}
-        >
+        <div style={{ scrollSnapAlign: 'start' }}>
           <div
             className='features-wrap'
             id='features'
@@ -1725,7 +1815,7 @@ export default function OLakeGoPage() {
                   </div>
                 ))}
               </div>
-            </div>{' '}
+            </div>
             <div
               style={{
                 display: 'flex',
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index f6a95dae6..8e5c52b05 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -1,287 +1,200 @@
 import React from 'react'
-import { useColorMode } from '@docusaurus/theme-common'
 import Link from '@docusaurus/Link'
-import { PiLinkedinLogo, PiYoutubeLogo, PiXLogo, PiRedditLogo, PiSlackLogo } from 'react-icons/pi'
-
-interface LinkItem {
-  label: string
-  href: string
+import { PiLinkedinLogo, PiYoutubeLogo, PiXLogo, PiSlackLogo } from 'react-icons/pi'
+import './styles.css'
+
+const SOCIAL_BOX: React.CSSProperties = {
+  width: '34px',
+  height: '34px',
+  borderRadius: '8px',
+  border: '1px solid #DADEEA',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '#5B6484'
 }
 
-interface SocialLinkItem {
-  icon: 'linkedin' | 'youtube' | 'slack' | 'reddit' | 'twitter'
-  href: string
-  ariaLabel: string
-  IconComponent: React.ElementType
+const COL_HEAD: React.CSSProperties = {
+  fontFamily: "'Space Grotesk', sans-serif",
+  fontSize: '12px',
+  letterSpacing: '0.08em',
+  fontWeight: 700,
+  color: '#10173A',
+  marginBottom: '18px'
 }
 
-const Footer: React.FC = () => {
-  const { colorMode } = useColorMode()
-  const isDarkTheme = colorMode === 'dark'
-
-  const companyLinks: LinkItem[] = [
-    { label: 'About us', href: '/about-us' },
-    { label: 'Contact us', href: '/contact' },
-    { label: 'Branding', href: '/branding' },
-    { label: 'Terms of Use', href: '/terms-of-use' },
-    { label: 'Privacy Policy', href: '/privacy-policy' }
-  ]
-
-  const resourceLinks: LinkItem[] = [
-    { label: 'Blogs', href: '/blog' },
-    { label: 'Docs', href: '/docs' },
-    { label: 'Search', href: '/search' },
-    { label: 'Community Slack Archive', href: '/slack-archive' }
-  ]
-
-  const topReadLinks: LinkItem[] = [
-    { label: 'Issues with Debezium', href: '/blog/issues-debezium-kafka' },
-    { label: 'OLake Architecture', href: '/blog/olake-architecture' }
-  ]
-
-  const socialLinks: SocialLinkItem[] = [
-    {
-      icon: 'linkedin',
-      href: 'https://www.linkedin.com/company/datazipio/',
-      ariaLabel: 'LinkedIn',
-      IconComponent: PiLinkedinLogo
-    },
-    {
-      icon: 'youtube',
-      href: 'https://www.youtube.com/@olakeio',
-      ariaLabel: 'YouTube',
-      IconComponent: PiYoutubeLogo
-    },
-    {
-      icon: 'slack',
-      href: 'https://olake.io/slack',
-      ariaLabel: 'Slack',
-      IconComponent: PiSlackLogo
-    },
-    {
-      icon: 'reddit',
-      href: 'https://reddit.com/r/olake',
-      ariaLabel: 'Reddit',
-      IconComponent: PiRedditLogo
-    },
-    {
-      icon: 'twitter',
-      href: 'https://x.com/_olake',
-      ariaLabel: 'X (Twitter)',
-      IconComponent: PiXLogo
-    }
-  ]
-
-  return (
-    <footer className='relative h-[62vh] overflow-hidden bg-neutral-100 py-8 dark:bg-gray-900 md:h-[72vh] xl:py-12 2xl:h-[62vh]'>
-      {/* Large OLake Watermark - smaller on mobile, positioned to not overlap */}
-      <div
-        aria-hidden='true'
-        className='pointer-events-none absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[36%] select-none bg-[linear-gradient(180deg,#EAEAEA_27.62%,rgba(255,255,255,0)_70.27%)] font-space text-[clamp(133px,25vw,420px)] font-medium leading-[1.2] opacity-80 dark:bg-[linear-gradient(180deg,rgba(50,50,50,1)_27.62%,rgba(50,50,50,0)_70.27%)] xl:translate-y-[36%] xl:bg-[linear-gradient(180deg,#EAEAEA_27.62%,rgba(255,255,255,0)_70.27%)] xl:text-[clamp(200px,30vw,572px)] xl:dark:bg-[linear-gradient(180deg,rgba(50,50,50,1)_27.62%,rgba(50,50,50,0)_70.27%)]'
-        style={{
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
-          backgroundClip: 'text'
-        }}
-      >
-        OLake
-      </div>
-
-      <div className='container relative z-10 mx-auto px-4 xl:px-0'>
-        {/* Mobile Layout */}
-        <div className='xl:hidden'>
-          {/* Logo Section - Mobile */}
-          <div className='mb-4'>
-            <Link
-              to='/'
-              className='font-space text-xs font-medium leading-tight text-blue-600 dark:text-blue-400'
-            >
-              OLake
-            </Link>
-            <h2 className='mt-2 font-space text-3xl font-normal leading-tight text-gray-800 dark:text-white'>
-              Fastest <span className='font-medium'>Data Replication</span>
-            </h2>
-          </div>
+const COL_LINKS: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '14px',
+  fontSize: '15px',
+  color: '#8890A8'
+}
 
-          {/* Social Icons - Mobile (10px) */}
-          <div className='mb-6 flex space-x-3'>
-            {socialLinks.map((social) => (
+const LINK_COLOR: React.CSSProperties = { color: '#8890A8' }
+
+const COLUMNS: { title: string; style: React.CSSProperties; links: [string, string][] }[] = [
+  {
+    title: 'COMPANY',
+    style: COL_LINKS,
+    links: [
+      ['About us', '/about-us'],
+      ['Contact us', '/contact'],
+      ['Branding', '/branding'],
+      ['Terms of Use', '/terms-of-use'],
+      ['Privacy Policy', '/privacy-policy']
+    ]
+  },
+  {
+    title: 'RESOURCES',
+    style: COL_LINKS,
+    links: [
+      ['Blogs', '/blog'],
+      ['Docs', '/docs'],
+      ['Search', '/search'],
+      ['Community Slack Archive', '/slack-archive']
+    ]
+  },
+  {
+    title: 'TOP READS',
+    style: { ...COL_LINKS, maxWidth: '180px' },
+    links: [
+      ['Issues with Debezium', '/blog/issues-debezium-kafka'],
+      ['OLake Architecture', '/blog/olake-architecture']
+    ]
+  }
+]
+
+const SOCIALS = [
+  { href: 'https://www.linkedin.com/company/datazipio/', label: 'LinkedIn', Icon: PiLinkedinLogo },
+  { href: 'https://www.youtube.com/@olakeio', label: 'YouTube', Icon: PiYoutubeLogo },
+  { href: '/slack', label: 'Slack', Icon: PiSlackLogo },
+  { href: 'https://x.com/_olake', label: 'X', Icon: PiXLogo }
+]
+
+const Footer: React.FC = () => (
+  <div
+    className='olake-footer footer-wrap'
+    style={{
+      background: '#F7F8FA',
+      padding: '64px 64px 0',
+      overflow: 'hidden',
+      position: 'relative'
+    }}
+  >
+    <div
+      style={{
+        maxWidth: '1280px',
+        margin: '0 auto',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: '40px',
+        flexWrap: 'wrap',
+        position: 'relative',
+        zIndex: 1
+      }}
+    >
+      <div>
+        <div
+          className='olake-footer-brand'
+          style={{
+            fontFamily: "'Space Grotesk', sans-serif",
+            fontWeight: 700,
+            fontSize: '24px',
+            color: '#3D4FF0',
+            marginBottom: '20px'
+          }}
+        >
+          OLake
+        </div>
+        <h2
+          className='footer-hero'
+          style={{
+            fontFamily: "'Space Grotesk', sans-serif",
+            fontWeight: 600,
+            fontSize: '38px',
+            lineHeight: '1.15',
+            color: '#10173A',
+            maxWidth: '480px'
+          }}
+        >
+          Fastest <span style={{ fontWeight: 800 }}>Data Replication</span>
+        </h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '28px' }}>
+          {SOCIALS.map(({ href, label, Icon }) =>
+            href.startsWith('/') ? (
+              <Link
+                key={label}
+                className='olake-footer-social'
+                to={href}
+                aria-label={label}
+                style={SOCIAL_BOX}
+              >
+                <Icon size={17} aria-hidden />
+              </Link>
+            ) : (
               <a
-                key={social.icon}
-                href={social.href}
-                aria-label={social.ariaLabel}
-                className='flex items-center justify-center'
+                key={label}
+                className='olake-footer-social'
+                href={href}
                 target='_blank'
                 rel='noopener noreferrer'
+                aria-label={label}
+                style={SOCIAL_BOX}
               >
-                <social.IconComponent
-                  className='my-1 size-2.5 text-gray-700 dark:text-white md:size-3'
-                  aria-hidden
-                />
+                <Icon size={17} aria-hidden />
               </a>
-            ))}
-          </div>
-
-          {/* Link Sections - 3 column grid on mobile */}
-          <div className='grid grid-cols-3 gap-4'>
-            {/* Company Links */}
-            <div className='font-sans'>
-              <h3 className='mb-2 text-[8px] font-normal uppercase leading-normal tracking-wider text-brand-black dark:text-white md:text-xs'>
-                COMPANY
-              </h3>
-              <ul className='list-none space-y-0.5 p-0'>
-                {companyLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='font-sans text-[8px] leading-3 tracking-[0.01em] text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300 md:text-xs'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Resources Links */}
-            <div className='font-sans'>
-              <h3 className='mb-2 text-[8px] font-normal uppercase leading-normal tracking-wider text-brand-black dark:text-white md:text-xs'>
-                RESOURCES
-              </h3>
-              <ul className='list-none space-y-0.5 p-0'>
-                {resourceLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='font-sans text-[8px] leading-3 tracking-[0.01em] text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300 md:text-xs'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Top Reads Links */}
-            <div className='font-sans'>
-              <h3 className='mb-2 text-[8px] font-normal uppercase leading-normal tracking-wider text-brand-black dark:text-white md:text-xs'>
-                TOP READS
-              </h3>
-              <ul className='list-none space-y-0.5 p-0'>
-                {topReadLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='font-sans text-[8px] leading-3 tracking-[0.01em] text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300 md:text-xs'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
+            )
+          )}
         </div>
-
-        {/* Desktop Layout */}
-        <div className='hidden xl:block'>
-          <div className='grid grid-cols-2 gap-8 xl:grid-cols-10'>
-            {/* Logo and Social Links Section */}
-            <div className='col-span-1 xl:col-span-7'>
-              <div className='mb-6'>
-                <Link to='/' className='text-2xl font-medium text-blue-600 dark:text-blue-400'>
-                  OLake
-                </Link>
-                <h2 className='mb-6 mt-6 text-[56px] font-extralight text-gray-800 dark:text-white'>
-                  Fastest <span className='font-medium'>Data Replication</span>
-                </h2>
-              </div>
-
-              <div className='flex space-x-4'>
-                {socialLinks.map((social) => (
-                  <a
-                    key={social.icon}
-                    href={social.href}
-                    aria-label={social.ariaLabel}
-                    className='flex h-10 w-10 items-center justify-center'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    <social.IconComponent
-                      className='h-5 w-5 text-gray-700 dark:text-white'
-                      aria-hidden
-                    />
-                  </a>
-                ))}
-              </div>
-            </div>
-
-            {/* Company Links Section */}
-            <div className='col-span-1 font-sans'>
-              <h3 className='mb-4 text-base font-normal tracking-wider text-brand-black dark:text-white'>
-                COMPANY
-              </h3>
-              <ul className='list-none space-y-3 p-0'>
-                {companyLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Resources Links Section */}
-            <div className='col-span-1 font-sans'>
-              <h3 className='mb-4 text-base font-normal tracking-wider text-brand-black dark:text-white'>
-                RESOURCES
-              </h3>
-              <ul className='list-none space-y-3 p-0'>
-                {resourceLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+      </div>
+      <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
+        {COLUMNS.map((col) => (
+          <div key={col.title}>
+            <div className='olake-footer-colhead' style={COL_HEAD}>
+              {col.title}
             </div>
-
-            {/* Top Reads Links Section */}
-            <div className='col-span-1 font-sans'>
-              <h3 className='mb-4 text-base font-normal tracking-wider text-brand-black dark:text-white'>
-                TOP READS
-              </h3>
-              <ul className='list-none space-y-3 p-0'>
-                {topReadLinks.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      to={link.href}
-                      className='text-brand-gray-450 transition-colors hover:text-blue-500 dark:text-gray-300'
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+            <div style={col.style}>
+              {col.links.map(([label, href]) => (
+                <Link key={href} className='olake-footer-link' to={href} style={LINK_COLOR}>
+                  {label}
+                </Link>
+              ))}
             </div>
           </div>
-        </div>
-      </div>
-
-      {/* Copyright Section - Desktop only, positioned relative to footer */}
-      <div className='absolute bottom-8 left-12 hidden text-brand-gray-450 xl:block'>
-        By Datazip
+        ))}
       </div>
-    </footer>
-  )
-}
+    </div>
+    <div
+      className='olake-footer-byline'
+      style={{
+        maxWidth: '1280px',
+        margin: '40px auto 0',
+        position: 'relative',
+        zIndex: 1,
+        fontSize: '13px',
+        color: '#AEB4C4',
+        paddingBottom: '24px'
+      }}
+    >
+      By Datazip
+    </div>
+    <div
+      className='footer-watermark'
+      style={{
+        fontFamily: "'Space Grotesk', sans-serif",
+        fontWeight: 700,
+        fontSize: '260px',
+        lineHeight: '1',
+        color: '#EDEFF4',
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        userSelect: 'none'
+      }}
+    >
+      OLake
+    </div>
+  </div>
+)
 
 export default Footer
diff --git a/src/theme/Footer/styles.css b/src/theme/Footer/styles.css
new file mode 100644
index 000000000..d1e643797
--- /dev/null
+++ b/src/theme/Footer/styles.css
@@ -0,0 +1,67 @@
+/* The landing pages' copies of these rules are scoped to .olakehome-page /
+   .olake-design-page, so the theme footer needs its own. */
+
+.olake-footer .olake-footer-social {
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.olake-footer .olake-footer-social:hover {
+  border-color: #3d4ff0 !important;
+  color: #3d4ff0 !important;
+}
+
+.olake-footer .olake-footer-link {
+  transition: color 0.15s ease;
+}
+
+.olake-footer .olake-footer-link:hover {
+  color: #3d4ff0 !important;
+}
+
+@media (max-width: 900px) {
+  .olake-footer.footer-wrap {
+    padding: 48px 24px 0 !important;
+  }
+  .olake-footer .footer-hero {
+    font-size: 28px !important;
+  }
+  .olake-footer .footer-watermark {
+    font-size: 120px !important;
+  }
+}
+
+@media (max-width: 560px) {
+  .olake-footer .footer-watermark {
+    font-size: 84px !important;
+  }
+}
+
+/* Dark mode. The design sets its colours inline, so these need !important.
+   Values match the footer this replaced. */
+
+html[data-theme='dark'] .olake-footer.footer-wrap {
+  background: #111827 !important;
+}
+
+html[data-theme='dark'] .olake-footer .footer-hero,
+html[data-theme='dark'] .olake-footer .olake-footer-colhead {
+  color: #ffffff !important;
+}
+
+html[data-theme='dark'] .olake-footer .olake-footer-brand {
+  color: #60a5fa !important;
+}
+
+html[data-theme='dark'] .olake-footer .olake-footer-link,
+html[data-theme='dark'] .olake-footer .olake-footer-byline {
+  color: #d1d5db !important;
+}
+
+html[data-theme='dark'] .olake-footer .olake-footer-social {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: #d1d5db !important;
+}
+
+html[data-theme='dark'] .olake-footer .footer-watermark {
+  color: #323232 !important;
+}
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
new file mode 100644
index 000000000..169d36194
--- /dev/null
+++ b/src/theme/Navbar/Content/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
+import NavbarSearch from '@theme/Navbar/Search'
+import SearchBar from '@theme/SearchBar'
+import SiteNavbar from '@site/src/components/landing/Navbar/SiteNavbar'
+import '@site/src/components/landing/Navbar/SiteNavbar.css'
+
+// Swizzled at Content, not at @theme/Navbar: the root owns NavbarMobileSidebar,
+// the only thing rendering the docs sidebar below 1279px.
+export default function NavbarContent() {
+  const mobileSidebar = useNavbarMobileSidebar()
+
+  return (
+    <SiteNavbar
+      mobileSidebar={mobileSidebar}
+      trailing={
+        <>
+          <NavbarColorModeToggle className='olake-nav-colormode' />
+          <NavbarSearch>
+            <SearchBar />
+          </NavbarSearch>
+        </>
+      }
+    />
+  )
+}
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
new file mode 100644
index 000000000..7f3bec9f4
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import Link from '@docusaurus/Link'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import { cn } from '@site/src/lib/utils'
+import {
+  MOBILE_LINKS,
+  isMobileGroup,
+  type NavEntry,
+  type NavLink as NavLinkType
+} from '@site/src/components/landing/Navbar/navData'
+
+// A row that expands in place, mirroring the desktop Docs dropdown. Uses
+// Infima's own collapsible classes, so it picks up dark mode for free.
+function MenuGroupItem({ entry, onNavigate }: { entry: NavEntry; onNavigate: () => void }) {
+  const [collapsed, setCollapsed] = useState(true)
+  return (
+    <li className={cn('menu__list-item', collapsed && 'menu__list-item--collapsed')}>
+      <div className='menu__list-item-collapsible'>
+        <a
+          className='menu__link menu__link--sublist menu__link--sublist-caret'
+          role='button'
+          href='#'
+          aria-expanded={!collapsed}
+          onClick={(e) => {
+            e.preventDefault()
+            setCollapsed((c) => !c)
+          }}
+        >
+          {entry.label}
+        </a>
+      </div>
+      <ul className='menu__list' style={{ display: collapsed ? 'none' : 'block' }}>
+        {entry.items!.map((item) => (
+          <li key={(item as NavLinkType).href} className='menu__list-item'>
+            <Link
+              className='menu__link olake-nav-sidebar-link'
+              to={(item as NavLinkType).href}
+              onClick={onNavigate}
+            >
+              {item.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </li>
+  )
+}
+
+// Upstream renders themeConfig.navbar.items; those describe the old navbar.
+// Only the primary menu is replaced — the docs secondary menu is untouched.
+export default function NavbarMobilePrimaryMenu() {
+  const mobileSidebar = useNavbarMobileSidebar()
+
+  return (
+    <ul className='menu__list olake-nav-sidebar-list'>
+      {MOBILE_LINKS.map((link) =>
+        isMobileGroup(link) ? (
+          <MenuGroupItem key={link.label} entry={link} onNavigate={() => mobileSidebar.toggle()} />
+        ) : (
+          <li key={link.href} className='menu__list-item'>
+            <Link
+              className='menu__link olake-nav-sidebar-link'
+              to={link.href}
+              onClick={() => mobileSidebar.toggle()}
+            >
+              {link.label}
+            </Link>
+          </li>
+        )
+      )}
+    </ul>
+  )
+}
diff --git a/static/llm.txt b/static/llm.txt
index d7d5e77a5..cf27fb078 100644
--- a/static/llm.txt
+++ b/static/llm.txt
@@ -48,7 +48,7 @@ OLake is built for data engineers, data architects, and developers building or s
 
 ## Key Features & Concepts
 
-- [OLake Managed Offering Interest Form](https://olake.io/#olake-form-product): Form for teams interested in OLake's managed offering.
+- [OLake Managed Offering Interest Form](https://olake.io/contact): Form for teams interested in OLake's managed offering.
 - [Apache Iceberg Hub](https://olake.io/iceberg): Curated Apache Iceberg blogs and resources.
 - [Iceberg Query Engine](https://olake.io/iceberg/query-engine): Information on query engines for data stored in Apache Iceberg format.
 
diff --git a/static/llms.txt b/static/llms.txt
index d7d5e77a5..cf27fb078 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -48,7 +48,7 @@ OLake is built for data engineers, data architects, and developers building or s
 
 ## Key Features & Concepts
 
-- [OLake Managed Offering Interest Form](https://olake.io/#olake-form-product): Form for teams interested in OLake's managed offering.
+- [OLake Managed Offering Interest Form](https://olake.io/contact): Form for teams interested in OLake's managed offering.
 - [Apache Iceberg Hub](https://olake.io/iceberg): Curated Apache Iceberg blogs and resources.
 - [Iceberg Query Engine](https://olake.io/iceberg/query-engine): Information on query engines for data stored in Apache Iceberg format.
 

From 636a9a1cce2fccb2b40e5857e875bbede47a3531 Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Wed, 12 Aug 2026 20:22:10 +0530
Subject: [PATCH 2/7] fix: centralize footer

---
 src/pages/index.tsx        | 281 ----------------------------------
 src/pages/olake-fusion.tsx | 303 -------------------------------------
 src/pages/olake-go.tsx     | 295 +-----------------------------------
 3 files changed, 2 insertions(+), 877 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 93a5b8382..c4026de65 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
 import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
@@ -76,7 +75,6 @@ export default function HomePage() {
       title={HOME_SEO.title}
       description={HOME_SEO.description}
       wrapperClassName='landing-page'
-      noFooter
     >
       <LandingSeo
         title={HOME_SEO.title}
@@ -2837,285 +2835,6 @@ export default function HomePage() {
               </div>
             </div>
           </div>
-          <div
-            className='footer-wrap'
-            style={{
-              background: '#F7F8FA',
-              padding: '64px 64px 0',
-              overflow: 'hidden',
-              position: 'relative'
-            }}
-          >
-            <div
-              style={{
-                maxWidth: '1280px',
-                margin: '0 auto',
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: '40px',
-                flexWrap: 'wrap',
-                position: 'relative',
-                zIndex: '1'
-              }}
-            >
-              <div>
-                <div
-                  style={{
-                    fontFamily: "'Space Grotesk', sans-serif",
-                    fontWeight: '700',
-                    fontSize: '24px',
-                    color: '#3D4FF0',
-                    marginBottom: '20px'
-                  }}
-                >
-                  OLake
-                </div>
-                <h2
-                  className='footer-hero'
-                  style={{
-                    fontFamily: "'Space Grotesk', sans-serif",
-                    fontWeight: '600',
-                    fontSize: '38px',
-                    lineHeight: '1.15',
-                    color: '#10173A',
-                    maxWidth: '480px'
-                  }}
-                >
-                  Fastest <span style={{ fontWeight: '800' }}>Data Replication</span>
-                </h2>
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '28px' }}
-                >
-                  <a
-                    className='olake-footer-social'
-                    href='https://www.linkedin.com/company/datazipio/'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='LinkedIn'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiLinkedinLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='https://www.youtube.com/@olakeio'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='YouTube'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiYoutubeLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='/slack'
-                    aria-label='Slack'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiSlackLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='https://x.com/_olake'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='X'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiXLogo size={17} aria-hidden />
-                  </a>
-                </div>
-              </div>
-              <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    COMPANY
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8'
-                    }}
-                  >
-                    <a className='olake-footer-link' href='/about-us' style={{ color: '#8890A8' }}>
-                      About us
-                    </a>
-                    <a className='olake-footer-link' href='/contact' style={{ color: '#8890A8' }}>
-                      Contact us
-                    </a>
-                    <a className='olake-footer-link' href='/branding' style={{ color: '#8890A8' }}>
-                      Branding
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/terms-of-use'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Terms of Use
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/privacy-policy'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Privacy Policy
-                    </a>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    RESOURCES
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8'
-                    }}
-                  >
-                    <a className='olake-footer-link' href='/blog' style={{ color: '#8890A8' }}>
-                      Blogs
-                    </a>
-                    <a className='olake-footer-link' href='/docs' style={{ color: '#8890A8' }}>
-                      Docs
-                    </a>
-                    <a className='olake-footer-link' href='/search' style={{ color: '#8890A8' }}>
-                      Search
-                    </a>
-                    <a className='olake-footer-link' href='/slack-archive' style={{ color: '#8890A8' }}>
-                      Community Slack Archive
-                    </a>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    TOP READS
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8',
-                      maxWidth: '180px'
-                    }}
-                  >
-                    <a
-                      className='olake-footer-link'
-                      href='/blog/issues-debezium-kafka'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Issues with Debezium
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/blog/olake-architecture'
-                      style={{ color: '#8890A8' }}
-                    >
-                      OLake Architecture
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              style={{
-                maxWidth: '1280px',
-                margin: '40px auto 0',
-                position: 'relative',
-                zIndex: '1',
-                fontSize: '13px',
-                color: '#AEB4C4',
-                paddingBottom: '24px'
-              }}
-            >
-              By Datazip
-            </div>
-            <div
-              className='footer-watermark'
-              style={{
-                fontFamily: "'Space Grotesk', sans-serif",
-                fontWeight: '700',
-                fontSize: '260px',
-                lineHeight: '1',
-                color: '#EDEFF4',
-                whiteSpace: 'nowrap',
-                textAlign: 'center',
-                userSelect: 'none'
-              }}
-            >
-              OLake
-            </div>
-          </div>
         </div>
       </div>
     </Layout>
diff --git a/src/pages/olake-fusion.tsx b/src/pages/olake-fusion.tsx
index b254ab45f..338de9f75 100644
--- a/src/pages/olake-fusion.tsx
+++ b/src/pages/olake-fusion.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
 import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
 import { useFusionLogic } from '@site/src/components/landing/pages/useFusionLogic'
@@ -40,7 +39,6 @@ export default function OLakeFusionPage() {
       title={FUSION_SEO.title}
       description={FUSION_SEO.description}
       wrapperClassName='landing-page'
-      noFooter
     >
       <LandingSeo
         title={FUSION_SEO.title}
@@ -1780,307 +1778,6 @@ export default function OLakeFusionPage() {
               </div>
             </div>
           </div>{' '}
-          <div
-            style={{
-              minHeight: '65vh',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center'
-            }}
-          >
-            <div
-              className='footer-wrap'
-              style={{
-                background: '#F7F8FA',
-                padding: '64px 64px 0',
-                overflow: 'hidden',
-                position: 'relative'
-              }}
-            >
-              <div
-                style={{
-                  maxWidth: '1280px',
-                  margin: '0 auto',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  gap: '40px',
-                  flexWrap: 'wrap',
-                  position: 'relative',
-                  zIndex: '1'
-                }}
-              >
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontWeight: '700',
-                      fontSize: '24px',
-                      color: '#3D4FF0',
-                      marginBottom: '20px'
-                    }}
-                  >
-                    OLake
-                  </div>
-                  <h2
-                    className='footer-hero'
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontWeight: '600',
-                      fontSize: '38px',
-                      lineHeight: '1.15',
-                      color: '#10173A',
-                      maxWidth: '480px'
-                    }}
-                  >
-                    Optimized <span style={{ fontWeight: '800' }}>Iceberg Tables</span>
-                  </h2>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '16px',
-                      marginTop: '28px'
-                    }}
-                  >
-                    <a
-                      className='olake-footer-social'
-                      href='https://www.linkedin.com/company/datazipio/'
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      aria-label='LinkedIn'
-                      style={{
-                        width: '34px',
-                        height: '34px',
-                        borderRadius: '8px',
-                        border: '1px solid #DADEEA',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: '#5B6484'
-                      }}
-                    >
-                      <PiLinkedinLogo size={17} aria-hidden />
-                    </a>
-                    <a
-                      className='olake-footer-social'
-                      href='https://www.youtube.com/@olakeio'
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      aria-label='YouTube'
-                      style={{
-                        width: '34px',
-                        height: '34px',
-                        borderRadius: '8px',
-                        border: '1px solid #DADEEA',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: '#5B6484'
-                      }}
-                    >
-                      <PiYoutubeLogo size={17} aria-hidden />
-                    </a>
-                    <a
-                      className='olake-footer-social'
-                      href='/slack'
-                      aria-label='Slack'
-                      style={{
-                        width: '34px',
-                        height: '34px',
-                        borderRadius: '8px',
-                        border: '1px solid #DADEEA',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: '#5B6484'
-                      }}
-                    >
-                      <PiSlackLogo size={17} aria-hidden />
-                    </a>
-                    <a
-                      className='olake-footer-social'
-                      href='https://x.com/_olake'
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      aria-label='X'
-                      style={{
-                        width: '34px',
-                        height: '34px',
-                        borderRadius: '8px',
-                        border: '1px solid #DADEEA',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: '#5B6484'
-                      }}
-                    >
-                      <PiXLogo size={17} aria-hidden />
-                    </a>
-                  </div>
-                </div>
-                <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
-                  <div>
-                    <div
-                      style={{
-                        fontFamily: "'Space Grotesk', sans-serif",
-                        fontSize: '12px',
-                        letterSpacing: '0.08em',
-                        fontWeight: '700',
-                        color: '#10173A',
-                        marginBottom: '18px'
-                      }}
-                    >
-                      COMPANY
-                    </div>
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '14px',
-                        fontSize: '15px',
-                        color: '#8890A8'
-                      }}
-                    >
-                      <a
-                        className='olake-footer-link'
-                        href='/about-us'
-                        style={{ color: '#8890A8' }}
-                      >
-                        About us
-                      </a>
-                      <a className='olake-footer-link' href='/contact' style={{ color: '#8890A8' }}>
-                        Contact us
-                      </a>
-                      <a
-                        className='olake-footer-link'
-                        href='/branding'
-                        style={{ color: '#8890A8' }}
-                      >
-                        Branding
-                      </a>
-                      <a
-                        className='olake-footer-link'
-                        href='/terms-of-use'
-                        style={{ color: '#8890A8' }}
-                      >
-                        Terms of Use
-                      </a>
-                      <a
-                        className='olake-footer-link'
-                        href='/privacy-policy'
-                        style={{ color: '#8890A8' }}
-                      >
-                        Privacy Policy
-                      </a>
-                    </div>
-                  </div>
-                  <div>
-                    <div
-                      style={{
-                        fontFamily: "'Space Grotesk', sans-serif",
-                        fontSize: '12px',
-                        letterSpacing: '0.08em',
-                        fontWeight: '700',
-                        color: '#10173A',
-                        marginBottom: '18px'
-                      }}
-                    >
-                      RESOURCES
-                    </div>
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '14px',
-                        fontSize: '15px',
-                        color: '#8890A8'
-                      }}
-                    >
-                      <a className='olake-footer-link' href='/blog' style={{ color: '#8890A8' }}>
-                        Blogs
-                      </a>
-                      <a className='olake-footer-link' href='/docs' style={{ color: '#8890A8' }}>
-                        Docs
-                      </a>
-                      <a className='olake-footer-link' href='/search' style={{ color: '#8890A8' }}>
-                        Search
-                      </a>
-                      <a className='olake-footer-link' href='/slack-archive' style={{ color: '#8890A8' }}>
-                        Community Slack Archive
-                      </a>
-                    </div>
-                  </div>
-                  <div>
-                    <div
-                      style={{
-                        fontFamily: "'Space Grotesk', sans-serif",
-                        fontSize: '12px',
-                        letterSpacing: '0.08em',
-                        fontWeight: '700',
-                        color: '#10173A',
-                        marginBottom: '18px'
-                      }}
-                    >
-                      TOP READS
-                    </div>
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '14px',
-                        fontSize: '15px',
-                        color: '#8890A8',
-                        maxWidth: '180px'
-                      }}
-                    >
-                      <a
-                        className='olake-footer-link'
-                        href='/blog/issues-debezium-kafka'
-                        style={{ color: '#8890A8' }}
-                      >
-                        Issues with Debezium
-                      </a>
-                      <a
-                        className='olake-footer-link'
-                        href='/blog/olake-architecture'
-                        style={{ color: '#8890A8' }}
-                      >
-                        OLake Architecture
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                style={{
-                  maxWidth: '1280px',
-                  margin: '40px auto 0',
-                  position: 'relative',
-                  zIndex: '1',
-                  fontSize: '13px',
-                  color: '#AEB4C4',
-                  paddingBottom: '24px'
-                }}
-              >
-                By Datazip
-              </div>
-              <div
-                className='footer-watermark'
-                style={{
-                  fontFamily: "'Space Grotesk', sans-serif",
-                  fontWeight: '700',
-                  fontSize: '260px',
-                  lineHeight: '1',
-                  color: '#EDEFF4',
-                  whiteSpace: 'nowrap',
-                  textAlign: 'center',
-                  userSelect: 'none'
-                }}
-              >
-                OLake
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </Layout>
diff --git a/src/pages/olake-go.tsx b/src/pages/olake-go.tsx
index dac4c337a..66dc2bbd2 100644
--- a/src/pages/olake-go.tsx
+++ b/src/pages/olake-go.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react'
 import Layout from '@theme/Layout'
-import { PiLinkedinLogo, PiYoutubeLogo, PiSlackLogo, PiXLogo } from 'react-icons/pi'
 import LandingSeo from '@site/src/components/landing/seo/LandingSeo'
 import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
 import { useGoLogic } from '@site/src/components/landing/pages/useGoLogic'
@@ -47,7 +46,6 @@ export default function OLakeGoPage() {
       title={GO_SEO.title}
       description={GO_SEO.description}
       wrapperClassName='landing-page'
-      noFooter
     >
       <LandingSeo
         title={GO_SEO.title}
@@ -1918,7 +1916,7 @@ export default function OLakeGoPage() {
                       style={{
                         display: 'grid',
                         gridTemplateColumns:
-                          'minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)',
+                          'minmax(0,1.15fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)',
                         borderBottom: '1px solid #EEF0F8'
                       }}
                     >
@@ -1977,7 +1975,7 @@ export default function OLakeGoPage() {
                           style={{
                             display: 'grid',
                             gridTemplateColumns:
-                              'minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)',
+                              'minmax(0,1.15fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)',
                             borderTop: '1px solid #EEF0F8'
                           }}
                         >
@@ -2300,295 +2298,6 @@ export default function OLakeGoPage() {
             </div>
           </div>
         </div>
-        <div
-          style={{
-            minHeight: '65vh',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            scrollSnapAlign: 'start'
-          }}
-        >
-          <div
-            className='footer-wrap'
-            style={{
-              background: '#F7F8FA',
-              padding: '64px 64px 0',
-              overflow: 'hidden',
-              position: 'relative'
-            }}
-          >
-            <div
-              style={{
-                maxWidth: '1280px',
-                margin: '0 auto',
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: '40px',
-                flexWrap: 'wrap',
-                position: 'relative',
-                zIndex: '1'
-              }}
-            >
-              <div>
-                <div
-                  style={{
-                    fontFamily: "'Space Grotesk', sans-serif",
-                    fontWeight: '700',
-                    fontSize: '24px',
-                    color: '#3D4FF0',
-                    marginBottom: '20px'
-                  }}
-                >
-                  OLake
-                </div>
-                <h2
-                  className='footer-hero'
-                  style={{
-                    fontFamily: "'Space Grotesk', sans-serif",
-                    fontWeight: '600',
-                    fontSize: '38px',
-                    lineHeight: '1.15',
-                    color: '#10173A',
-                    maxWidth: '480px'
-                  }}
-                >
-                  Fastest <span style={{ fontWeight: '800' }}>Data Replication</span>
-                </h2>
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '28px' }}
-                >
-                  <a
-                    className='olake-footer-social'
-                    href='https://www.linkedin.com/company/datazipio/'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='LinkedIn'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiLinkedinLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='https://www.youtube.com/@olakeio'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='YouTube'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiYoutubeLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='/slack'
-                    aria-label='Slack'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiSlackLogo size={17} aria-hidden />
-                  </a>
-                  <a
-                    className='olake-footer-social'
-                    href='https://x.com/_olake'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    aria-label='X'
-                    style={{
-                      width: '34px',
-                      height: '34px',
-                      borderRadius: '8px',
-                      border: '1px solid #DADEEA',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#5B6484'
-                    }}
-                  >
-                    <PiXLogo size={17} aria-hidden />
-                  </a>
-                </div>
-              </div>
-              <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    COMPANY
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8'
-                    }}
-                  >
-                    <a className='olake-footer-link' href='/about-us' style={{ color: '#8890A8' }}>
-                      About us
-                    </a>
-                    <a className='olake-footer-link' href='/contact' style={{ color: '#8890A8' }}>
-                      Contact us
-                    </a>
-                    <a className='olake-footer-link' href='/branding' style={{ color: '#8890A8' }}>
-                      Branding
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/terms-of-use'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Terms of Use
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/privacy-policy'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Privacy Policy
-                    </a>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    RESOURCES
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8'
-                    }}
-                  >
-                    <a className='olake-footer-link' href='/blog' style={{ color: '#8890A8' }}>
-                      Blogs
-                    </a>
-                    <a className='olake-footer-link' href='/docs' style={{ color: '#8890A8' }}>
-                      Docs
-                    </a>
-                    <a className='olake-footer-link' href='/search' style={{ color: '#8890A8' }}>
-                      Search
-                    </a>
-                    <a className='olake-footer-link' href='/slack-archive' style={{ color: '#8890A8' }}>
-                      Community Slack Archive
-                    </a>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    style={{
-                      fontFamily: "'Space Grotesk', sans-serif",
-                      fontSize: '12px',
-                      letterSpacing: '0.08em',
-                      fontWeight: '700',
-                      color: '#10173A',
-                      marginBottom: '18px'
-                    }}
-                  >
-                    TOP READS
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '14px',
-                      fontSize: '15px',
-                      color: '#8890A8',
-                      maxWidth: '180px'
-                    }}
-                  >
-                    <a
-                      className='olake-footer-link'
-                      href='/blog/issues-debezium-kafka'
-                      style={{ color: '#8890A8' }}
-                    >
-                      Issues with Debezium
-                    </a>
-                    <a
-                      className='olake-footer-link'
-                      href='/blog/olake-architecture'
-                      style={{ color: '#8890A8' }}
-                    >
-                      OLake Architecture
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              style={{
-                maxWidth: '1280px',
-                margin: '40px auto 0',
-                position: 'relative',
-                zIndex: '1',
-                fontSize: '13px',
-                color: '#AEB4C4',
-                paddingBottom: '24px'
-              }}
-            >
-              By Datazip
-            </div>
-            <div
-              className='footer-watermark'
-              style={{
-                fontFamily: "'Space Grotesk', sans-serif",
-                fontWeight: '700',
-                fontSize: '260px',
-                lineHeight: '1',
-                color: '#EDEFF4',
-                whiteSpace: 'nowrap',
-                textAlign: 'center',
-                userSelect: 'none'
-              }}
-            >
-              OLake
-            </div>
-          </div>
-        </div>
       </div>
     </Layout>
   )

From 60c9055d3c06d1a0dd8a2c69f055600f53c0af75 Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Thu, 13 Aug 2026 18:33:57 +0530
Subject: [PATCH 3/7] fix: resolve comments

---
 src/components/landing/Navbar/SiteNavbar.css  |    5 +
 src/components/landing/Navbar/SiteNavbar.tsx  |   33 +-
 src/components/landing/Navbar/navData.ts      |    4 +-
 src/components/landing/pages/olake-fusion.css |    2 +-
 src/components/landing/pages/olake-home.css   |    2 +-
 src/components/landing/pages/useGoLogic.ts    |   16 +-
 src/components/landing/pages/useHomeLogic.ts  |    4 +-
 src/pages/index.tsx                           |   90 +-
 src/pages/olake-fusion.tsx                    |  974 +++++++-------
 src/pages/olake-go.tsx                        | 1168 +++++++++--------
 src/theme/Footer/index.tsx                    |    4 +-
 11 files changed, 1171 insertions(+), 1131 deletions(-)

diff --git a/src/components/landing/Navbar/SiteNavbar.css b/src/components/landing/Navbar/SiteNavbar.css
index 6bafd6dcc..43768d379 100644
--- a/src/components/landing/Navbar/SiteNavbar.css
+++ b/src/components/landing/Navbar/SiteNavbar.css
@@ -194,6 +194,11 @@ body:has(.olakehome-page) .olake-nav {
   text-decoration: none;
 }
 
+.olake-nav .olake-nav-stars--icon-only {
+  border: none;
+  padding: 0;
+}
+
 .olake-nav-stars img {
   height: 29px;
   width: 28px;
diff --git a/src/components/landing/Navbar/SiteNavbar.tsx b/src/components/landing/Navbar/SiteNavbar.tsx
index d567f2270..188b70fdd 100644
--- a/src/components/landing/Navbar/SiteNavbar.tsx
+++ b/src/components/landing/Navbar/SiteNavbar.tsx
@@ -1,5 +1,6 @@
 import React, { useState, type ReactNode } from 'react'
 import Link from '@docusaurus/Link'
+import { useLocation } from '@docusaurus/router'
 import { cn } from '@site/src/lib/utils'
 import useGetReleases from '@site/src/hooks/useGetReleases'
 import {
@@ -7,6 +8,7 @@ import {
   MOBILE_LINKS,
   PRICING_LINK,
   GITHUB_REPO_URL,
+  FUSION_GITHUB_REPO_URL,
   SLACK_URL,
   CTA,
   isFlyout,
@@ -39,17 +41,28 @@ const StarMark = () => (
   </svg>
 )
 
-/** Star count. In the bar on desktop; the design moves it into the drawer on mobile. */
-const StarPill = ({ stars }: { stars: string }) => (
+const StarPill = ({
+  stars,
+  repoUrl,
+  showCount
+}: {
+  stars: string
+  repoUrl: string
+  showCount: boolean
+}) => (
   <a
-    href={GITHUB_REPO_URL}
+    href={repoUrl}
     target='_blank'
     rel='noopener noreferrer'
-    aria-label={`GitHub — ${stars} stars`}
-    className='olake-nav-stars'
+    aria-label={showCount ? `GitHub — ${stars} stars` : 'GitHub'}
+    className={cn('olake-nav-stars', !showCount && 'olake-nav-stars--icon-only')}
   >
     <img src='/img/landing/shared/github-icon.webp' alt='' width={28} height={29} />
-    <StarMark /> {stars}
+    {showCount && (
+      <>
+        <StarMark /> {stars}
+      </>
+    )}
   </a>
 )
 
@@ -198,6 +211,8 @@ export default function SiteNavbar({ trailing, mobileSidebar }: SiteNavbarProps)
   const { stargazersCount } = useGetReleases()
   const stars = formatStars(stargazersCount)
   const [ownOpen, setOwnOpen] = useState(false)
+  const isFusion = useLocation().pathname.startsWith('/olake-fusion')
+  const repoUrl = isFusion ? FUSION_GITHUB_REPO_URL : GITHUB_REPO_URL
 
   const mobileOpen = mobileSidebar ? mobileSidebar.shown : ownOpen
   const toggleMobile = mobileSidebar ? mobileSidebar.toggle : () => setOwnOpen((o) => !o)
@@ -227,11 +242,11 @@ export default function SiteNavbar({ trailing, mobileSidebar }: SiteNavbarProps)
         </div>
 
         <div className='olake-nav-right'>
-          <StarPill stars={stars} />
+          <StarPill stars={stars} repoUrl={repoUrl} showCount={!isFusion} />
           {/* Below the breakpoint the design drops the count and shows the mark
               alone; the full pill moves into the drawer. */}
           <a
-            href={GITHUB_REPO_URL}
+            href={repoUrl}
             target='_blank'
             rel='noopener noreferrer'
             aria-label='GitHub'
@@ -277,7 +292,7 @@ export default function SiteNavbar({ trailing, mobileSidebar }: SiteNavbarProps)
             )
           )}
           <div className='olake-nav-mobile-social'>
-            <StarPill stars={stars} />
+            <StarPill stars={stars} repoUrl={repoUrl} showCount={!isFusion} />
             <SlackLink />
           </div>
         </div>
diff --git a/src/components/landing/Navbar/navData.ts b/src/components/landing/Navbar/navData.ts
index 0d7832566..853fa8ebb 100644
--- a/src/components/landing/Navbar/navData.ts
+++ b/src/components/landing/Navbar/navData.ts
@@ -58,8 +58,7 @@ export const NAV_ENTRIES: NavEntry[] = [
         items: [
           { label: 'OLake Community', href: '/community' },
           { label: 'Top Contributors', href: '/community/contributors' },
-          { label: 'Contributor Program', href: '/community/contributor-program' },
-          { label: 'GSoC', href: '/community/gsoc' }
+          { label: 'Contributor Program', href: '/community/contributor-program' }
         ]
       },
       {
@@ -99,5 +98,6 @@ export const MOBILE_LINKS: MobileNavItem[] = [
 ]
 
 export const GITHUB_REPO_URL = 'https://github.com/datazip-inc/olake'
+export const FUSION_GITHUB_REPO_URL = 'https://github.com/datazip-inc/olake-fusion'
 export const SLACK_URL = '/slack'
 export const CTA = { label: "Try, it's free!", href: '/docs/getting-started/quickstart/' }
diff --git a/src/components/landing/pages/olake-fusion.css b/src/components/landing/pages/olake-fusion.css
index 77c620fc5..a206c50b9 100644
--- a/src/components/landing/pages/olake-fusion.css
+++ b/src/components/landing/pages/olake-fusion.css
@@ -214,7 +214,7 @@ body:has(.olakefusion-page) {
     font-size: 26px !important;
   }
   .olakefusion-page .features-wrap {
-    padding: 48px 20px 20px !important;
+    padding: 48px 20px 100px !important;
   }
   .olakefusion-page .features-grid {
     grid-template-columns: 1fr !important;
diff --git a/src/components/landing/pages/olake-home.css b/src/components/landing/pages/olake-home.css
index ad4ba48ac..094adef81 100644
--- a/src/components/landing/pages/olake-home.css
+++ b/src/components/landing/pages/olake-home.css
@@ -45,7 +45,7 @@ body:has(.olakehome-page) {
     transform: translateX(0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translateX(calc(-100% - 28px));
   }
 }
 @keyframes glowPulse {
diff --git a/src/components/landing/pages/useGoLogic.ts b/src/components/landing/pages/useGoLogic.ts
index df3eb06a2..267755eeb 100644
--- a/src/components/landing/pages/useGoLogic.ts
+++ b/src/components/landing/pages/useGoLogic.ts
@@ -23,26 +23,26 @@ export function useGoLogic(props = {}) {
     faqs: [
       {
         q: 'How to get started?',
-        a: 'Check the Quickstart Guide. With a single Docker command you can spin up OLake and access the UI.'
+        a: 'Check the Quickstart Guide. With a single Docker command you can spin up OLake Go and access the UI.'
       },
       {
-        q: 'Is OLake really open source?',
-        a: 'Yes. OLake is fully open source under the Apache 2.0 license. You can explore the GitHub repository (already starred by 1K+ developers) and use it freely without hidden costs.'
+        q: 'Is OLake Go really open source?',
+        a: 'Yes. OLake Go is fully open source under the Apache 2.0 license. You can explore the GitHub repository (already starred by 1K+ developers) and use it freely without hidden costs.'
       },
       {
         q: 'Is there any enterprise plan?',
-        a: "We're actively working on providing enterprise support, from professional assistance and pilot programs to helping teams scale OLake in production. You can reach out at hello@olake.io to learn more."
+        a: "We're actively working on providing enterprise support, from professional assistance and pilot programs to helping teams scale OLake Go in production. You can reach out at hello@olake.io to learn more."
       },
       {
         q: 'How can I contribute?',
         a: 'Join our Slack community, review the Contribution Guide, and explore "Good First Issues" on GitHub. Contributors can get their pull requests merged and be part of building the fastest open-source Iceberg-native ingestion tool.'
       },
       {
-        q: 'Why should I use OLake?',
-        a: 'OLake makes data replication into Apache Iceberg seamless, faster, and cost-efficient. It handles real-time CDC, schema and partition evolution, full and incremental syncs, and compaction, all without vendor lock-in, so your Iceberg tables stay open, scalable, and ready for analytics.'
+        q: 'Why should I use OLake Go?',
+        a: 'OLake Go makes data replication into Apache Iceberg seamless, faster, and cost-efficient. It handles real-time CDC, schema and partition evolution, full and incremental syncs, and compaction, all without vendor lock-in, so your Iceberg tables stay open, scalable, and ready for analytics.'
       },
       {
-        q: 'What data platforms and tools does OLake integrate with?',
+        q: 'What data platforms and tools does OLake Go integrate with?',
         a: 'As of now, we integrate with Apache Iceberg and S3 as destinations. You can query it using popular query engines like Spark, AWS Athena, Snowflake, Databricks, and BigQuery.'
       }
     ],
@@ -281,7 +281,7 @@ export function useGoLogic(props = {}) {
           },
           {
             title: 'STATEFUL, RESUMABLE SYNCS',
-            body: 'Syncs checkpoint their progress and resume automatically after crashes, network failures, or pauses, never from scratch.',
+            body: 'Syncs checkpoint their progress and resume automatically after crashes or network failures; never from scratch.',
             tag: 'resume',
             stats: ['Checkpointed', 'Auto-resume', 'Fault-tolerant']
           }
diff --git a/src/components/landing/pages/useHomeLogic.ts b/src/components/landing/pages/useHomeLogic.ts
index d97761336..18a9fe415 100644
--- a/src/components/landing/pages/useHomeLogic.ts
+++ b/src/components/landing/pages/useHomeLogic.ts
@@ -287,7 +287,7 @@ export function useHomeLogic(props = {}) {
         }
       ],
 
-      logosLoop: [...logos, ...logos],
+      logos,
 
       selectGo: () => setState({ advantage: 'go' }),
       selectFusion: () => setState({ advantage: 'fusion' }),
@@ -307,7 +307,7 @@ export function useHomeLogic(props = {}) {
           num: '01',
           kicker: 'FAST',
           title: 'Replicate databases at scale',
-          body: 'Sync MySQL, Postgres, MongoDB, Kafka, and more to Apache Iceberg with parallelised chunking, incremental sync, and CDC.'
+          body: 'Sync MySQL, Postgres, MongoDB, Kafka, and more to Apache Iceberg and Parquet with parallelised chunking, incremental sync, and CDC.'
         },
         {
           stickyTop: 138,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c4026de65..e92173b34 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -46,7 +46,7 @@ export default function HomePage() {
     terminalLines,
     tickerLoop,
     engines,
-    logosLoop,
+    logos,
     archSources,
     archGoChips,
     archFusionChips,
@@ -767,53 +767,61 @@ export default function HomePage() {
               style={{
                 overflow: 'hidden',
                 width: '100%',
+                display: 'flex',
+                gap: '28px',
                 WebkitMaskImage:
                   'linear-gradient(90deg,transparent,#ffffff 12%,#ffffff 88%,transparent)',
                 maskImage: 'linear-gradient(90deg,transparent,#ffffff 12%,#ffffff 88%,transparent)'
               }}
             >
-              <div
-                className='olakehome-marquee'
-                style={{
-                  display: 'flex',
-                  gap: '28px',
-                  width: 'max-content',
-                  animation: 'tickerScroll 26s linear infinite'
-                }}
-              >
-                {/* One copy per pass: the second is a duplicate that makes the scroll seamless. */}
-                {(logosLoop || []).map((logo, logoIdx) => (
-                  <div
-                    key={logoIdx}
-                    aria-hidden={logoIdx >= (logosLoop || []).length / 2 || undefined}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      height: '54px',
-                      padding: '0 26px',
-                      background: '#ffffff',
-                      borderRadius: '14px',
-                      flexShrink: '0'
-                    }}
-                  >
-                    <img
-                      src={logo.src}
-                      alt={logo.name}
-                      width={logo.w}
-                      height={logo.h}
-                      loading={logoIdx < (logosLoop || []).length / 2 ? undefined : 'lazy'}
-                      decoding='async'
+              {/* Two groups, each logos repeated enough to outwidth any screen:
+                  shifting one full group left is then seamless at any width. */}
+              {[0, 1].map((groupIdx) => (
+                <div
+                  key={groupIdx}
+                  className='olakehome-marquee'
+                  aria-hidden={groupIdx === 1 || undefined}
+                  style={{
+                    display: 'flex',
+                    gap: '28px',
+                    width: 'max-content',
+                    flexShrink: 0,
+                    animation: 'tickerScroll 30s linear infinite'
+                  }}
+                >
+                  {/* 3x: group must outwidth any screen or the loop gap shows. */}
+                  {[...(logos || []), ...(logos || []), ...(logos || [])].map((logo, logoIdx) => (
+                    <div
+                      key={logoIdx}
                       style={{
-                        maxHeight: logo.maxH,
-                        maxWidth: logo.maxW,
-                        width: 'auto',
-                        objectFit: 'contain'
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '54px',
+                        padding: '0 26px',
+                        background: '#ffffff',
+                        borderRadius: '14px',
+                        flexShrink: '0'
                       }}
-                    />
-                  </div>
-                ))}
-              </div>
+                    >
+                      <img
+                        src={logo.src}
+                        alt={logo.name}
+                        width={logo.w}
+                        height={logo.h}
+                        loading={groupIdx === 0 ? undefined : 'lazy'}
+                        decoding='async'
+                        style={{
+                          maxHeight: logo.maxH,
+                          maxWidth: logo.maxW,
+                          width: 'auto',
+                          objectFit: 'contain'
+                        }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              ))}
             </div>
           </div>
           <div
diff --git a/src/pages/olake-fusion.tsx b/src/pages/olake-fusion.tsx
index 338de9f75..5bfa34d81 100644
--- a/src/pages/olake-fusion.tsx
+++ b/src/pages/olake-fusion.tsx
@@ -713,7 +713,7 @@ export default function OLakeFusionPage() {
                 'linear-gradient(180deg, #F5F6FA 0%, #EDEFFB 12%, #7385DD 26%, #4F63D1 33%) top/100% 240px no-repeat, linear-gradient(0deg, #F5F6FA 0%, #EDEFFB 12%, #7385DD 26%, #4F63D1 33%) bottom/100% 240px no-repeat, #4F63D1'
             }}
           >
-            <div className='features-wrap' id='features' style={{ padding: '60px 64px 20px' }}>
+            <div className='features-wrap' id='features' style={{ padding: '60px 64px 100px' }}>
               <div style={{ maxWidth: '1160px', margin: '0 auto' }}>
                 <div style={{ textAlign: 'center', marginBottom: '64px' }}>
                   <div
@@ -746,7 +746,7 @@ export default function OLakeFusionPage() {
                     display: 'grid',
                     gridTemplateColumns: '0.8fr 1.2fr',
                     gap: '56px',
-                    alignItems: 'start'
+                    alignItems: 'center'
                   }}
                 >
                   <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -790,102 +790,167 @@ export default function OLakeFusionPage() {
                       </React.Fragment>
                     ))}
                   </div>{' '}
-                  <div style={{ minHeight: '220px' }}>
+                  <div
+                    className='features-card-slot'
+                    style={{ display: 'grid', gridTemplateColumns: '1fr', minWidth: 0 }}
+                  >
                     {(features || []).map((feat, featIdx) => (
                       <React.Fragment key={featIdx}>
-                        {feat.active ? (
-                          <>
+                        <div
+                          style={{
+                            gridColumn: '1',
+                            gridRow: '1',
+                            minWidth: 0,
+                            visibility: feat.active ? 'visible' : 'hidden',
+                            pointerEvents: feat.active ? 'auto' : 'none'
+                          }}
+                        >
+                          <div
+                            key={feat.active ? `active-${featIdx}` : 'idle'}
+                            className='features-card'
+                            style={{
+                              border: '1px solid #E4E7F2',
+                              borderRadius: '18px',
+                              padding: '40px',
+                              background: '#fff',
+                              boxShadow: '0 24px 50px -30px rgba(10,14,39,0.5)',
+                              animation: 'fadeSlideIn 0.5s ease'
+                            }}
+                          >
                             <div
-                              className='features-card'
                               style={{
-                                border: '1px solid #E4E7F2',
-                                borderRadius: '18px',
-                                padding: '40px',
-                                background: '#fff',
-                                boxShadow: '0 24px 50px -30px rgba(10,14,39,0.5)',
-                                animation: 'fadeSlideIn 0.5s ease'
+                                width: '44px',
+                                height: '44px',
+                                borderRadius: '10px',
+                                background: 'linear-gradient(135deg,#3D4FF0,#6E7CFF)',
+                                marginBottom: '22px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
                               }}
                             >
-                              <div
-                                style={{
-                                  width: '44px',
-                                  height: '44px',
-                                  borderRadius: '10px',
-                                  background: 'linear-gradient(135deg,#3D4FF0,#6E7CFF)',
-                                  marginBottom: '22px',
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  justifyContent: 'center'
-                                }}
-                              >
-                                {feat.isTiered ? (
-                                  <>
+                              {feat.isTiered ? (
+                                <>
+                                  <div
+                                    style={{
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '3px',
+                                      width: '22px'
+                                    }}
+                                  >
                                     <div
                                       style={{
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '3px',
-                                        width: '22px'
+                                        height: '3px',
+                                        width: '100%',
+                                        background: '#fff',
+                                        borderRadius: '2px'
                                       }}
-                                    >
-                                      <div
-                                        style={{
-                                          height: '3px',
-                                          width: '100%',
-                                          background: '#fff',
-                                          borderRadius: '2px'
-                                        }}
-                                      />{' '}
-                                      <div
-                                        style={{
-                                          height: '3px',
-                                          width: '75%',
-                                          background: '#fff',
-                                          borderRadius: '2px'
-                                        }}
-                                      />{' '}
-                                      <div
-                                        style={{
-                                          height: '3px',
-                                          width: '50%',
-                                          background: '#fff',
-                                          borderRadius: '2px'
-                                        }}
-                                      />
-                                    </div>
-                                  </>
-                                ) : null}{' '}
-                                {feat.isDecay ? (
-                                  <>
+                                    />{' '}
                                     <div
                                       style={{
-                                        width: '20px',
-                                        height: '20px',
-                                        border: '2.5px solid #fff',
-                                        borderRadius: '5px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center'
+                                        height: '3px',
+                                        width: '75%',
+                                        background: '#fff',
+                                        borderRadius: '2px'
+                                      }}
+                                    />{' '}
+                                    <div
+                                      style={{
+                                        height: '3px',
+                                        width: '50%',
+                                        background: '#fff',
+                                        borderRadius: '2px'
+                                      }}
+                                    />
+                                  </div>
+                                </>
+                              ) : null}{' '}
+                              {feat.isDecay ? (
+                                <>
+                                  <div
+                                    style={{
+                                      width: '20px',
+                                      height: '20px',
+                                      border: '2.5px solid #fff',
+                                      borderRadius: '5px',
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'center'
+                                    }}
+                                  >
+                                    <div
+                                      style={{
+                                        width: '8px',
+                                        height: '8px',
+                                        background: '#fff',
+                                        borderRadius: '2px'
+                                      }}
+                                    />
+                                  </div>
+                                </>
+                              ) : null}{' '}
+                              {feat.isConfig ? (
+                                <>
+                                  <div
+                                    style={{
+                                      width: '24px',
+                                      height: '4px',
+                                      background: 'rgba(255,255,255,0.4)',
+                                      borderRadius: '2px',
+                                      position: 'relative'
+                                    }}
+                                  >
+                                    <div
+                                      style={{
+                                        position: 'absolute',
+                                        left: '14px',
+                                        top: '-4px',
+                                        width: '12px',
+                                        height: '12px',
+                                        background: '#fff',
+                                        borderRadius: '50%'
+                                      }}
+                                    />
+                                  </div>
+                                </>
+                              ) : null}{' '}
+                              {feat.isHosted ? (
+                                <>
+                                  <div
+                                    style={{
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '3px',
+                                      width: '20px'
+                                    }}
+                                  >
+                                    <div
+                                      style={{
+                                        height: '6px',
+                                        width: '100%',
+                                        background: '#fff',
+                                        borderRadius: '2px',
+                                        position: 'relative'
                                       }}
                                     >
                                       <div
                                         style={{
-                                          width: '8px',
-                                          height: '8px',
-                                          background: '#fff',
-                                          borderRadius: '2px'
+                                          position: 'absolute',
+                                          right: '2px',
+                                          top: '2px',
+                                          width: '2px',
+                                          height: '2px',
+                                          background: '#3D4FF0',
+                                          borderRadius: '50%'
                                         }}
                                       />
-                                    </div>
-                                  </>
-                                ) : null}{' '}
-                                {feat.isConfig ? (
-                                  <>
+                                    </div>{' '}
                                     <div
                                       style={{
-                                        width: '24px',
-                                        height: '4px',
-                                        background: 'rgba(255,255,255,0.4)',
+                                        height: '6px',
+                                        width: '100%',
+                                        background: '#fff',
                                         borderRadius: '2px',
                                         position: 'relative'
                                       }}
@@ -893,491 +958,434 @@ export default function OLakeFusionPage() {
                                       <div
                                         style={{
                                           position: 'absolute',
-                                          left: '14px',
-                                          top: '-4px',
-                                          width: '12px',
-                                          height: '12px',
-                                          background: '#fff',
+                                          right: '2px',
+                                          top: '2px',
+                                          width: '2px',
+                                          height: '2px',
+                                          background: '#3D4FF0',
                                           borderRadius: '50%'
                                         }}
                                       />
                                     </div>
-                                  </>
-                                ) : null}{' '}
-                                {feat.isHosted ? (
-                                  <>
+                                  </div>
+                                </>
+                              ) : null}
+                            </div>{' '}
+                            <h3
+                              style={{
+                                fontFamily: "'Space Grotesk', sans-serif",
+                                fontWeight: '700',
+                                fontSize: '18px',
+                                letterSpacing: '0.03em',
+                                color: '#10173A',
+                                marginBottom: '22px'
+                              }}
+                            >
+                              {feat.title}
+                            </h3>{' '}
+                            {feat.isTiered ? (
+                              <>
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '10px',
+                                    marginBottom: '26px'
+                                  }}
+                                >
+                                  <div
+                                    style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
+                                  >
                                     <div
                                       style={{
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '3px',
-                                        width: '20px'
+                                        width: '64px',
+                                        fontSize: '11px',
+                                        fontWeight: '700',
+                                        letterSpacing: '0.04em',
+                                        color: '#3D4FF0',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      LITE
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        flex: '1',
+                                        height: '8px',
+                                        borderRadius: '4px',
+                                        background: '#EEF0F8'
                                       }}
                                     >
                                       <div
                                         style={{
-                                          height: '6px',
-                                          width: '100%',
-                                          background: '#fff',
-                                          borderRadius: '2px',
-                                          position: 'relative'
+                                          width: '30%',
+                                          height: '100%',
+                                          borderRadius: '4px',
+                                          background: '#6E7CFF'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            position: 'absolute',
-                                            right: '2px',
-                                            top: '2px',
-                                            width: '2px',
-                                            height: '2px',
-                                            background: '#3D4FF0',
-                                            borderRadius: '50%'
-                                          }}
-                                        />
-                                      </div>{' '}
+                                      />
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        fontSize: '12px',
+                                        color: '#5B6484',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      every 20 min
+                                    </div>
+                                  </div>{' '}
+                                  <div
+                                    style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
+                                  >
+                                    <div
+                                      style={{
+                                        width: '64px',
+                                        fontSize: '11px',
+                                        fontWeight: '700',
+                                        letterSpacing: '0.04em',
+                                        color: '#3D4FF0',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      MEDIUM
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        flex: '1',
+                                        height: '8px',
+                                        borderRadius: '4px',
+                                        background: '#EEF0F8'
+                                      }}
+                                    >
                                       <div
                                         style={{
-                                          height: '6px',
-                                          width: '100%',
-                                          background: '#fff',
-                                          borderRadius: '2px',
-                                          position: 'relative'
+                                          width: '60%',
+                                          height: '100%',
+                                          borderRadius: '4px',
+                                          background: '#4F5FF5'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            position: 'absolute',
-                                            right: '2px',
-                                            top: '2px',
-                                            width: '2px',
-                                            height: '2px',
-                                            background: '#3D4FF0',
-                                            borderRadius: '50%'
-                                          }}
-                                        />
-                                      </div>
+                                      />
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        fontSize: '12px',
+                                        color: '#5B6484',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      every 40 min
                                     </div>
-                                  </>
-                                ) : null}
-                              </div>{' '}
-                              <h3
-                                style={{
-                                  fontFamily: "'Space Grotesk', sans-serif",
-                                  fontWeight: '700',
-                                  fontSize: '18px',
-                                  letterSpacing: '0.03em',
-                                  color: '#10173A',
-                                  marginBottom: '22px'
-                                }}
-                              >
-                                {feat.title}
-                              </h3>{' '}
-                              {feat.isTiered ? (
-                                <>
+                                  </div>{' '}
                                   <div
-                                    style={{
-                                      display: 'flex',
-                                      flexDirection: 'column',
-                                      gap: '10px',
-                                      marginBottom: '26px'
-                                    }}
+                                    style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
                                   >
                                     <div
-                                      style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
+                                      style={{
+                                        width: '64px',
+                                        fontSize: '11px',
+                                        fontWeight: '700',
+                                        letterSpacing: '0.04em',
+                                        color: '#3D4FF0',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      FULL
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        flex: '1',
+                                        height: '8px',
+                                        borderRadius: '4px',
+                                        background: '#EEF0F8'
+                                      }}
                                     >
                                       <div
                                         style={{
-                                          width: '64px',
-                                          fontSize: '11px',
-                                          fontWeight: '700',
-                                          letterSpacing: '0.04em',
-                                          color: '#3D4FF0',
-                                          flexShrink: '0'
+                                          width: '100%',
+                                          height: '100%',
+                                          borderRadius: '4px',
+                                          background: '#3D4FF0'
                                         }}
-                                      >
-                                        LITE
-                                      </div>{' '}
+                                      />
+                                    </div>{' '}
+                                    <div
+                                      style={{
+                                        fontSize: '12px',
+                                        color: '#5B6484',
+                                        flexShrink: '0'
+                                      }}
+                                    >
+                                      deep-clean
+                                    </div>
+                                  </div>
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isDecay ? (
+                              <>
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    gap: '20px',
+                                    marginBottom: '26px'
+                                  }}
+                                >
+                                  <div style={{ textAlign: 'center' }}>
+                                    <div
+                                      style={{
+                                        display: 'flex',
+                                        gap: '4px',
+                                        flexWrap: 'wrap',
+                                        width: '110px',
+                                        justifyContent: 'center',
+                                        marginBottom: '10px'
+                                      }}
+                                    >
                                       <div
                                         style={{
-                                          flex: '1',
-                                          height: '8px',
-                                          borderRadius: '4px',
-                                          background: '#EEF0F8'
+                                          width: '14px',
+                                          height: '14px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            width: '30%',
-                                            height: '100%',
-                                            borderRadius: '4px',
-                                            background: '#6E7CFF'
-                                          }}
-                                        />
-                                      </div>{' '}
+                                      />
                                       <div
                                         style={{
-                                          fontSize: '12px',
-                                          color: '#5B6484',
-                                          flexShrink: '0'
+                                          width: '10px',
+                                          height: '10px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px',
+                                          marginTop: '4px'
                                         }}
-                                      >
-                                        every 20 min
-                                      </div>
-                                    </div>{' '}
-                                    <div
-                                      style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-                                    >
+                                      />
                                       <div
                                         style={{
-                                          width: '64px',
-                                          fontSize: '11px',
-                                          fontWeight: '700',
-                                          letterSpacing: '0.04em',
-                                          color: '#3D4FF0',
-                                          flexShrink: '0'
+                                          width: '16px',
+                                          height: '16px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        MEDIUM
-                                      </div>{' '}
+                                      />{' '}
                                       <div
                                         style={{
-                                          flex: '1',
-                                          height: '8px',
-                                          borderRadius: '4px',
-                                          background: '#EEF0F8'
+                                          width: '9px',
+                                          height: '9px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            width: '60%',
-                                            height: '100%',
-                                            borderRadius: '4px',
-                                            background: '#4F5FF5'
-                                          }}
-                                        />
-                                      </div>{' '}
+                                      />
                                       <div
                                         style={{
-                                          fontSize: '12px',
-                                          color: '#5B6484',
-                                          flexShrink: '0'
+                                          width: '13px',
+                                          height: '13px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        every 40 min
-                                      </div>
-                                    </div>{' '}
-                                    <div
-                                      style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-                                    >
+                                      />
                                       <div
                                         style={{
-                                          width: '64px',
-                                          fontSize: '11px',
-                                          fontWeight: '700',
-                                          letterSpacing: '0.04em',
-                                          color: '#3D4FF0',
-                                          flexShrink: '0'
+                                          width: '11px',
+                                          height: '11px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        FULL
-                                      </div>{' '}
+                                      />{' '}
                                       <div
                                         style={{
-                                          flex: '1',
-                                          height: '8px',
-                                          borderRadius: '4px',
-                                          background: '#EEF0F8'
+                                          width: '15px',
+                                          height: '15px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            width: '100%',
-                                            height: '100%',
-                                            borderRadius: '4px',
-                                            background: '#3D4FF0'
-                                          }}
-                                        />
-                                      </div>{' '}
+                                      />
                                       <div
                                         style={{
-                                          fontSize: '12px',
-                                          color: '#5B6484',
-                                          flexShrink: '0'
+                                          width: '8px',
+                                          height: '8px',
+                                          background: '#D5D9EC',
+                                          borderRadius: '3px'
                                         }}
-                                      >
-                                        deep-clean
-                                      </div>
+                                      />
+                                    </div>{' '}
+                                    <div style={{ fontSize: '11px', color: '#5B6484' }}>
+                                      fragmented files
                                     </div>
-                                  </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isDecay ? (
-                                <>
-                                  <div
-                                    style={{
-                                      display: 'flex',
-                                      alignItems: 'center',
-                                      justifyContent: 'space-between',
-                                      gap: '20px',
-                                      marginBottom: '26px'
-                                    }}
-                                  >
-                                    <div style={{ textAlign: 'center' }}>
+                                  </div>{' '}
+                                  <div style={{ fontSize: '20px', color: '#6E7CFF' }}>→</div>{' '}
+                                  <div style={{ textAlign: 'center' }}>
+                                    <div
+                                      style={{
+                                        display: 'flex',
+                                        gap: '6px',
+                                        justifyContent: 'center',
+                                        marginBottom: '10px'
+                                      }}
+                                    >
                                       <div
                                         style={{
-                                          display: 'flex',
-                                          gap: '4px',
-                                          flexWrap: 'wrap',
-                                          width: '110px',
-                                          justifyContent: 'center',
-                                          marginBottom: '10px'
+                                          width: '26px',
+                                          height: '26px',
+                                          background: '#3D4FF0',
+                                          borderRadius: '5px'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            width: '14px',
-                                            height: '14px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '10px',
-                                            height: '10px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px',
-                                            marginTop: '4px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '16px',
-                                            height: '16px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />{' '}
-                                        <div
-                                          style={{
-                                            width: '9px',
-                                            height: '9px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '13px',
-                                            height: '13px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '11px',
-                                            height: '11px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />{' '}
-                                        <div
-                                          style={{
-                                            width: '15px',
-                                            height: '15px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '8px',
-                                            height: '8px',
-                                            background: '#D5D9EC',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                      </div>{' '}
-                                      <div style={{ fontSize: '11px', color: '#5B6484' }}>
-                                        fragmented files
-                                      </div>
-                                    </div>{' '}
-                                    <div style={{ fontSize: '20px', color: '#6E7CFF' }}>→</div>{' '}
-                                    <div style={{ textAlign: 'center' }}>
+                                      />
                                       <div
                                         style={{
-                                          display: 'flex',
-                                          gap: '6px',
-                                          justifyContent: 'center',
-                                          marginBottom: '10px'
+                                          width: '26px',
+                                          height: '26px',
+                                          background: '#3D4FF0',
+                                          borderRadius: '5px'
                                         }}
-                                      >
-                                        <div
-                                          style={{
-                                            width: '26px',
-                                            height: '26px',
-                                            background: '#3D4FF0',
-                                            borderRadius: '5px'
-                                          }}
-                                        />
-                                        <div
-                                          style={{
-                                            width: '26px',
-                                            height: '26px',
-                                            background: '#3D4FF0',
-                                            borderRadius: '5px'
-                                          }}
-                                        />
-                                      </div>{' '}
-                                      <div style={{ fontSize: '11px', color: '#5B6484' }}>
-                                        compacted
-                                      </div>
+                                      />
+                                    </div>{' '}
+                                    <div style={{ fontSize: '11px', color: '#5B6484' }}>
+                                      compacted
                                     </div>
                                   </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isConfig ? (
-                                <>
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isConfig ? (
+                              <>
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '20px',
+                                    marginBottom: '26px'
+                                  }}
+                                >
                                   <div
                                     style={{
-                                      display: 'flex',
-                                      alignItems: 'center',
-                                      gap: '20px',
-                                      marginBottom: '26px'
+                                      flex: '1',
+                                      textAlign: 'center',
+                                      padding: '18px 0',
+                                      background: '#F6F7FC',
+                                      border: '1px solid #EEF0F8',
+                                      borderRadius: '12px'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        flex: '1',
-                                        textAlign: 'center',
-                                        padding: '18px 0',
-                                        background: '#F6F7FC',
-                                        border: '1px solid #EEF0F8',
-                                        borderRadius: '12px'
+                                        fontFamily: "'Space Grotesk', sans-serif",
+                                        fontSize: '34px',
+                                        fontWeight: '700',
+                                        color: '#10173A'
                                       }}
                                     >
-                                      <div
-                                        style={{
-                                          fontFamily: "'Space Grotesk', sans-serif",
-                                          fontSize: '34px',
-                                          fontWeight: '700',
-                                          color: '#10173A'
-                                        }}
-                                      >
-                                        1
-                                      </div>{' '}
-                                      <div
-                                        style={{
-                                          fontSize: '11px',
-                                          color: '#5B6484',
-                                          marginTop: '4px'
-                                        }}
-                                      >
-                                        Fusion parameter
-                                      </div>
+                                      1
                                     </div>{' '}
                                     <div
                                       style={{
-                                        flex: '1',
-                                        textAlign: 'center',
-                                        padding: '18px 0',
-                                        background: '#F6F7FC',
-                                        border: '1px solid #EEF0F8',
-                                        borderRadius: '12px',
-                                        opacity: '0.6'
+                                        fontSize: '11px',
+                                        color: '#5B6484',
+                                        marginTop: '4px'
                                       }}
                                     >
-                                      <div
-                                        style={{
-                                          fontFamily: "'Space Grotesk', sans-serif",
-                                          fontSize: '34px',
-                                          fontWeight: '700',
-                                          color: '#A6ABC5'
-                                        }}
-                                      >
-                                        10+
-                                      </div>{' '}
-                                      <div
-                                        style={{
-                                          fontSize: '11px',
-                                          color: '#8890C4',
-                                          marginTop: '4px'
-                                        }}
-                                      >
-                                        Spark parameters
-                                      </div>
+                                      Fusion parameter
                                     </div>
-                                  </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isHosted ? (
-                                <>
+                                  </div>{' '}
                                   <div
                                     style={{
-                                      display: 'flex',
-                                      alignItems: 'center',
-                                      gap: '24px',
-                                      marginBottom: '26px',
-                                      paddingBottom: '22px',
-                                      borderBottom: '1px solid #EDEFF6'
+                                      flex: '1',
+                                      textAlign: 'center',
+                                      padding: '18px 0',
+                                      background: '#F6F7FC',
+                                      border: '1px solid #EEF0F8',
+                                      borderRadius: '12px',
+                                      opacity: '0.6'
                                     }}
                                   >
                                     <div
-                                      style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                                      style={{
+                                        fontFamily: "'Space Grotesk', sans-serif",
+                                        fontSize: '34px',
+                                        fontWeight: '700',
+                                        color: '#A6ABC5'
+                                      }}
                                     >
-                                      <span
-                                        style={{
-                                          width: '8px',
-                                          height: '8px',
-                                          borderRadius: '50%',
-                                          background: '#3D4FF0',
-                                          flexShrink: '0'
-                                        }}
-                                      />{' '}
-                                      <span
-                                        style={{
-                                          fontSize: '13px',
-                                          fontWeight: '600',
-                                          color: '#10173A'
-                                        }}
-                                      >
-                                        Docker
-                                      </span>
+                                      10+
                                     </div>{' '}
                                     <div
-                                      style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                                      style={{
+                                        fontSize: '11px',
+                                        color: '#8890C4',
+                                        marginTop: '4px'
+                                      }}
                                     >
-                                      <span
-                                        style={{
-                                          width: '8px',
-                                          height: '8px',
-                                          borderRadius: '50%',
-                                          background: '#3D4FF0',
-                                          flexShrink: '0'
-                                        }}
-                                      />{' '}
-                                      <span
-                                        style={{
-                                          fontSize: '13px',
-                                          fontWeight: '600',
-                                          color: '#10173A'
-                                        }}
-                                      >
-                                        Kubernetes
-                                      </span>
+                                      Spark parameters
                                     </div>
                                   </div>
-                                </>
-                              ) : null}{' '}
-                              <div
-                                style={{ fontSize: '15px', lineHeight: '1.7', color: '#5B6484' }}
-                              >
-                                {feat.body}
-                              </div>
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isHosted ? (
+                              <>
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '24px',
+                                    marginBottom: '26px',
+                                    paddingBottom: '22px',
+                                    borderBottom: '1px solid #EDEFF6'
+                                  }}
+                                >
+                                  <div
+                                    style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                                  >
+                                    <span
+                                      style={{
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        background: '#3D4FF0',
+                                        flexShrink: '0'
+                                      }}
+                                    />{' '}
+                                    <span
+                                      style={{
+                                        fontSize: '13px',
+                                        fontWeight: '600',
+                                        color: '#10173A'
+                                      }}
+                                    >
+                                      Docker
+                                    </span>
+                                  </div>{' '}
+                                  <div
+                                    style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                                  >
+                                    <span
+                                      style={{
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        background: '#3D4FF0',
+                                        flexShrink: '0'
+                                      }}
+                                    />{' '}
+                                    <span
+                                      style={{
+                                        fontSize: '13px',
+                                        fontWeight: '600',
+                                        color: '#10173A'
+                                      }}
+                                    >
+                                      Kubernetes
+                                    </span>
+                                  </div>
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            <div style={{ fontSize: '15px', lineHeight: '1.7', color: '#5B6484' }}>
+                              {feat.body}
                             </div>
-                          </>
-                        ) : null}
+                          </div>
+                        </div>
                       </React.Fragment>
                     ))}
                   </div>
diff --git a/src/pages/olake-go.tsx b/src/pages/olake-go.tsx
index 66dc2bbd2..6f1ce5af1 100644
--- a/src/pages/olake-go.tsx
+++ b/src/pages/olake-go.tsx
@@ -42,11 +42,7 @@ export default function OLakeGoPage() {
   } = useGoLogic({ icebergPosX: 54, icebergPosY: 53, icebergZoom: 100, icebergOpacity: 65 })
 
   return (
-    <Layout
-      title={GO_SEO.title}
-      description={GO_SEO.description}
-      wrapperClassName='landing-page'
-    >
+    <Layout title={GO_SEO.title} description={GO_SEO.description} wrapperClassName='landing-page'>
       <LandingSeo
         title={GO_SEO.title}
         description={GO_SEO.description}
@@ -923,7 +919,7 @@ export default function OLakeGoPage() {
                   display: 'grid',
                   gridTemplateColumns: '0.8fr 1.2fr',
                   gap: '56px',
-                  alignItems: 'start'
+                  alignItems: 'center'
                 }}
               >
                 <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -967,720 +963,728 @@ export default function OLakeGoPage() {
                     </React.Fragment>
                   ))}
                 </div>{' '}
-                <div style={{ minHeight: '220px' }}>
+                <div
+                  className='features-card-slot'
+                  style={{ display: 'grid', gridTemplateColumns: '1fr', minWidth: 0 }}
+                >
                   {(features || []).map((feat, featIdx) => (
                     <React.Fragment key={featIdx}>
-                      {feat.active ? (
-                        <>
+                      <div
+                        style={{
+                          gridColumn: '1',
+                          gridRow: '1',
+                          minWidth: 0,
+                          visibility: feat.active ? 'visible' : 'hidden',
+                          pointerEvents: feat.active ? 'auto' : 'none'
+                        }}
+                      >
+                        <div
+                          key={feat.active ? `active-${featIdx}` : 'idle'}
+                          className='features-card'
+                          style={{
+                            border: '1px solid #E4E7F2',
+                            borderRadius: '18px',
+                            padding: '40px',
+                            background: '#fff',
+                            boxShadow: '0 24px 50px -30px rgba(10,14,39,0.5)',
+                            animation: 'fadeSlideIn 0.5s ease'
+                          }}
+                        >
                           <div
-                            className='features-card'
                             style={{
-                              border: '1px solid #E4E7F2',
-                              borderRadius: '18px',
-                              padding: '40px',
-                              background: '#fff',
-                              boxShadow: '0 24px 50px -30px rgba(10,14,39,0.5)',
-                              animation: 'fadeSlideIn 0.5s ease'
+                              width: '44px',
+                              height: '44px',
+                              borderRadius: '10px',
+                              background: 'linear-gradient(135deg,#3D4FF0,#6E7CFF)',
+                              marginBottom: '22px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center'
                             }}
                           >
-                            <div
-                              style={{
-                                width: '44px',
-                                height: '44px',
-                                borderRadius: '10px',
-                                background: 'linear-gradient(135deg,#3D4FF0,#6E7CFF)',
-                                marginBottom: '22px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                              }}
-                            >
-                              {feat.isTiered ? (
-                                <>
+                            {feat.isTiered ? (
+                              <>
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'flex-end',
+                                    gap: '3px',
+                                    height: '20px'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      width: '5px',
+                                      height: '8px',
+                                      background: 'rgba(255,255,255,0.55)',
+                                      borderRadius: '2px'
+                                    }}
+                                  />{' '}
+                                  <div
+                                    style={{
+                                      width: '5px',
+                                      height: '14px',
+                                      background: 'rgba(255,255,255,0.8)',
+                                      borderRadius: '2px'
+                                    }}
+                                  />{' '}
                                   <div
                                     style={{
+                                      width: '5px',
+                                      height: '20px',
+                                      background: '#fff',
+                                      borderRadius: '2px'
+                                    }}
+                                  />
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isDecay ? (
+                              <>
+                                <div
+                                  style={{ position: 'relative', width: '22px', height: '22px' }}
+                                >
+                                  <div
+                                    style={{
+                                      position: 'absolute',
+                                      inset: '0',
+                                      border: '2.5px solid rgba(255,255,255,0.5)',
+                                      borderRadius: '5px'
+                                    }}
+                                  />{' '}
+                                  <div
+                                    style={{
+                                      position: 'absolute',
+                                      right: '-3px',
+                                      bottom: '-3px',
+                                      width: '12px',
+                                      height: '12px',
+                                      background: '#fff',
+                                      borderRadius: '50%',
                                       display: 'flex',
-                                      alignItems: 'flex-end',
-                                      gap: '3px',
-                                      height: '20px'
+                                      alignItems: 'center',
+                                      justifyContent: 'center'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        width: '5px',
-                                        height: '8px',
-                                        background: 'rgba(255,255,255,0.55)',
-                                        borderRadius: '2px'
-                                      }}
-                                    />{' '}
-                                    <div
-                                      style={{
-                                        width: '5px',
-                                        height: '14px',
-                                        background: 'rgba(255,255,255,0.8)',
-                                        borderRadius: '2px'
+                                        width: '6px',
+                                        height: '2px',
+                                        background: '#3D4FF0',
+                                        borderRadius: '1px'
                                       }}
-                                    />{' '}
+                                    />
                                     <div
                                       style={{
-                                        width: '5px',
-                                        height: '20px',
-                                        background: '#fff',
-                                        borderRadius: '2px'
+                                        position: 'absolute',
+                                        width: '2px',
+                                        height: '6px',
+                                        background: '#3D4FF0',
+                                        borderRadius: '1px'
                                       }}
                                     />
                                   </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isDecay ? (
-                                <>
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isChunk ? (
+                              <>
+                                <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+                                  <div
+                                    style={{
+                                      width: '4px',
+                                      height: '20px',
+                                      background: '#fff',
+                                      borderRadius: '2px'
+                                    }}
+                                  />{' '}
+                                  <div
+                                    style={{
+                                      width: '4px',
+                                      height: '20px',
+                                      background: 'rgba(255,255,255,0.75)',
+                                      borderRadius: '2px'
+                                    }}
+                                  />{' '}
+                                  <div
+                                    style={{
+                                      width: '4px',
+                                      height: '20px',
+                                      background: 'rgba(255,255,255,0.55)',
+                                      borderRadius: '2px'
+                                    }}
+                                  />{' '}
                                   <div
-                                    style={{ position: 'relative', width: '22px', height: '22px' }}
+                                    style={{
+                                      width: '4px',
+                                      height: '20px',
+                                      background: 'rgba(255,255,255,0.4)',
+                                      borderRadius: '2px'
+                                    }}
+                                  />
+                                </div>
+                              </>
+                            ) : null}{' '}
+                            {feat.isResume ? (
+                              <>
+                                <div
+                                  style={{
+                                    width: '20px',
+                                    height: '20px',
+                                    border: '2.5px solid #fff',
+                                    borderTopColor: 'transparent',
+                                    borderRadius: '50%',
+                                    position: 'relative'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      position: 'absolute',
+                                      top: '-3px',
+                                      right: '-1px',
+                                      width: '0',
+                                      height: '0',
+                                      borderLeft: '5px solid #fff',
+                                      borderTop: '3px solid transparent',
+                                      borderBottom: '3px solid transparent',
+                                      transform: 'rotate(20deg)'
+                                    }}
+                                  />
+                                </div>
+                              </>
+                            ) : null}
+                          </div>{' '}
+                          <h3
+                            style={{
+                              fontFamily: "'Space Grotesk', sans-serif",
+                              fontWeight: '700',
+                              fontSize: '20px',
+                              letterSpacing: '0.03em',
+                              color: '#10173A',
+                              margin: '0 0 22px'
+                            }}
+                          >
+                            {feat.title}
+                          </h3>{' '}
+                          {feat.isTiered ? (
+                            <>
+                              <div style={{ display: 'flex', gap: '12px', marginBottom: '26px' }}>
+                                <div
+                                  style={{
+                                    flex: '1',
+                                    background: '#F6F7FC',
+                                    border: '1px solid #EEF0F8',
+                                    borderRadius: '12px',
+                                    padding: '16px 14px'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      letterSpacing: '0.05em',
+                                      color: '#3D4FF0',
+                                      marginBottom: '12px'
+                                    }}
                                   >
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        inset: '0',
-                                        border: '2.5px solid rgba(255,255,255,0.5)',
-                                        borderRadius: '5px'
-                                      }}
-                                    />{' '}
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        right: '-3px',
-                                        bottom: '-3px',
-                                        width: '12px',
-                                        height: '12px',
-                                        background: '#fff',
-                                        borderRadius: '50%',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center'
-                                      }}
-                                    >
-                                      <div
-                                        style={{
-                                          width: '6px',
-                                          height: '2px',
-                                          background: '#3D4FF0',
-                                          borderRadius: '1px'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          position: 'absolute',
-                                          width: '2px',
-                                          height: '6px',
-                                          background: '#3D4FF0',
-                                          borderRadius: '1px'
-                                        }}
-                                      />
-                                    </div>
-                                  </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isChunk ? (
-                                <>
+                                    FULL
+                                  </div>{' '}
                                   <div
-                                    style={{ display: 'flex', gap: '3px', alignItems: 'center' }}
+                                    style={{
+                                      display: 'flex',
+                                      alignItems: 'flex-end',
+                                      gap: '3px',
+                                      height: '34px'
+                                    }}
                                   >
                                     <div
                                       style={{
-                                        width: '4px',
-                                        height: '20px',
-                                        background: '#fff',
-                                        borderRadius: '2px'
-                                      }}
-                                    />{' '}
-                                    <div
-                                      style={{
-                                        width: '4px',
-                                        height: '20px',
-                                        background: 'rgba(255,255,255,0.75)',
-                                        borderRadius: '2px'
+                                        flex: '1',
+                                        height: '100%',
+                                        background: '#3D4FF0',
+                                        borderRadius: '3px'
                                       }}
-                                    />{' '}
+                                    />
                                     <div
                                       style={{
-                                        width: '4px',
-                                        height: '20px',
-                                        background: 'rgba(255,255,255,0.55)',
-                                        borderRadius: '2px'
+                                        flex: '1',
+                                        height: '100%',
+                                        background: '#3D4FF0',
+                                        borderRadius: '3px'
                                       }}
-                                    />{' '}
+                                    />
                                     <div
                                       style={{
-                                        width: '4px',
-                                        height: '20px',
-                                        background: 'rgba(255,255,255,0.4)',
-                                        borderRadius: '2px'
+                                        flex: '1',
+                                        height: '100%',
+                                        background: '#3D4FF0',
+                                        borderRadius: '3px'
                                       }}
                                     />
-                                  </div>
-                                </>
-                              ) : null}{' '}
-                              {feat.isResume ? (
-                                <>
+                                  </div>{' '}
                                   <div
                                     style={{
-                                      width: '20px',
-                                      height: '20px',
-                                      border: '2.5px solid #fff',
-                                      borderTopColor: 'transparent',
-                                      borderRadius: '50%',
-                                      position: 'relative'
+                                      fontSize: '11px',
+                                      color: '#5B6484',
+                                      marginTop: '10px'
                                     }}
                                   >
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        top: '-3px',
-                                        right: '-1px',
-                                        width: '0',
-                                        height: '0',
-                                        borderLeft: '5px solid #fff',
-                                        borderTop: '3px solid transparent',
-                                        borderBottom: '3px solid transparent',
-                                        transform: 'rotate(20deg)'
-                                      }}
-                                    />
+                                    one-time load
                                   </div>
-                                </>
-                              ) : null}
-                            </div>{' '}
-                            <h3
-                              style={{
-                                fontFamily: "'Space Grotesk', sans-serif",
-                                fontWeight: '700',
-                                fontSize: '20px',
-                                letterSpacing: '0.03em',
-                                color: '#10173A',
-                                margin: '0 0 22px'
-                              }}
-                            >
-                              {feat.title}
-                            </h3>{' '}
-                            {feat.isTiered ? (
-                              <>
-                                <div style={{ display: 'flex', gap: '12px', marginBottom: '26px' }}>
+                                </div>{' '}
+                                <div
+                                  style={{
+                                    flex: '1',
+                                    background: '#F6F7FC',
+                                    border: '1px solid #EEF0F8',
+                                    borderRadius: '12px',
+                                    padding: '16px 14px'
+                                  }}
+                                >
                                   <div
                                     style={{
-                                      flex: '1',
-                                      background: '#F6F7FC',
-                                      border: '1px solid #EEF0F8',
-                                      borderRadius: '12px',
-                                      padding: '16px 14px'
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      letterSpacing: '0.05em',
+                                      color: '#4F5FF5',
+                                      marginBottom: '12px'
                                     }}
                                   >
-                                    <div
-                                      style={{
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        letterSpacing: '0.05em',
-                                        color: '#3D4FF0',
-                                        marginBottom: '12px'
-                                      }}
-                                    >
-                                      FULL
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        display: 'flex',
-                                        alignItems: 'flex-end',
-                                        gap: '3px',
-                                        height: '34px'
-                                      }}
-                                    >
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '100%',
-                                          background: '#3D4FF0',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '100%',
-                                          background: '#3D4FF0',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '100%',
-                                          background: '#3D4FF0',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        fontSize: '11px',
-                                        color: '#5B6484',
-                                        marginTop: '10px'
-                                      }}
-                                    >
-                                      one-time load
-                                    </div>
+                                    INCREMENTAL
                                   </div>{' '}
                                   <div
                                     style={{
-                                      flex: '1',
-                                      background: '#F6F7FC',
-                                      border: '1px solid #EEF0F8',
-                                      borderRadius: '12px',
-                                      padding: '16px 14px'
+                                      display: 'flex',
+                                      alignItems: 'flex-end',
+                                      gap: '3px',
+                                      height: '34px'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        letterSpacing: '0.05em',
-                                        color: '#4F5FF5',
-                                        marginBottom: '12px'
+                                        flex: '1',
+                                        height: '38%',
+                                        background: '#4F5FF5',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      INCREMENTAL
-                                    </div>{' '}
+                                    />
                                     <div
                                       style={{
-                                        display: 'flex',
-                                        alignItems: 'flex-end',
-                                        gap: '3px',
-                                        height: '34px'
+                                        flex: '1',
+                                        height: '60%',
+                                        background: '#4F5FF5',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '38%',
-                                          background: '#4F5FF5',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '60%',
-                                          background: '#4F5FF5',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '48%',
-                                          background: '#4F5FF5',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                    </div>{' '}
+                                    />
                                     <div
                                       style={{
-                                        fontSize: '11px',
-                                        color: '#5B6484',
-                                        marginTop: '10px'
+                                        flex: '1',
+                                        height: '48%',
+                                        background: '#4F5FF5',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      on schedule
-                                    </div>
+                                    />
                                   </div>{' '}
                                   <div
                                     style={{
-                                      flex: '1',
-                                      background: '#F6F7FC',
-                                      border: '1px solid #EEF0F8',
-                                      borderRadius: '12px',
-                                      padding: '16px 14px'
+                                      fontSize: '11px',
+                                      color: '#5B6484',
+                                      marginTop: '10px'
+                                    }}
+                                  >
+                                    on schedule
+                                  </div>
+                                </div>{' '}
+                                <div
+                                  style={{
+                                    flex: '1',
+                                    background: '#F6F7FC',
+                                    border: '1px solid #EEF0F8',
+                                    borderRadius: '12px',
+                                    padding: '16px 14px'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      letterSpacing: '0.05em',
+                                      color: '#6E7CFF',
+                                      marginBottom: '12px'
+                                    }}
+                                  >
+                                    CDC
+                                  </div>{' '}
+                                  <div
+                                    style={{
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      gap: '6px',
+                                      height: '34px'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        letterSpacing: '0.05em',
-                                        color: '#6E7CFF',
-                                        marginBottom: '12px'
-                                      }}
-                                    >
-                                      CDC
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: '6px',
-                                        height: '34px'
+                                        width: '9px',
+                                        height: '9px',
+                                        borderRadius: '50%',
+                                        background: '#6E7CFF',
+                                        animation: 'wordFloat 1.6s ease-in-out infinite'
                                       }}
-                                    >
-                                      <div
-                                        style={{
-                                          width: '9px',
-                                          height: '9px',
-                                          borderRadius: '50%',
-                                          background: '#6E7CFF',
-                                          animation: 'wordFloat 1.6s ease-in-out infinite'
-                                        }}
-                                      />
-                                      <div
-                                        style={{
-                                          flex: '1',
-                                          height: '2px',
-                                          background: 'linear-gradient(90deg,#6E7CFF,transparent)',
-                                          borderRadius: '2px'
-                                        }}
-                                      />
-                                    </div>{' '}
+                                    />
                                     <div
                                       style={{
-                                        fontSize: '11px',
-                                        color: '#5B6484',
-                                        marginTop: '10px'
+                                        flex: '1',
+                                        height: '2px',
+                                        background: 'linear-gradient(90deg,#6E7CFF,transparent)',
+                                        borderRadius: '2px'
                                       }}
-                                    >
-                                      real-time
-                                    </div>
+                                    />
+                                  </div>{' '}
+                                  <div
+                                    style={{
+                                      fontSize: '11px',
+                                      color: '#5B6484',
+                                      marginTop: '10px'
+                                    }}
+                                  >
+                                    real-time
                                   </div>
                                 </div>
-                              </>
-                            ) : null}{' '}
-                            {feat.isDecay ? (
-                              <>
+                              </div>
+                            </>
+                          ) : null}{' '}
+                          {feat.isDecay ? (
+                            <>
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '16px',
+                                  marginBottom: '26px'
+                                }}
+                              >
                                 <div
                                   style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '16px',
-                                    marginBottom: '26px'
+                                    flex: '1',
+                                    background: '#F6F7FC',
+                                    border: '1px solid #EEF0F8',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden'
                                   }}
                                 >
                                   <div
                                     style={{
-                                      flex: '1',
-                                      background: '#F6F7FC',
-                                      border: '1px solid #EEF0F8',
-                                      borderRadius: '12px',
-                                      overflow: 'hidden'
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      letterSpacing: '0.04em',
+                                      color: '#8890C4',
+                                      padding: '10px 14px',
+                                      borderBottom: '1px solid #EEF0F8'
+                                    }}
+                                  >
+                                    SOURCE TABLE
+                                  </div>{' '}
+                                  <div
+                                    style={{
+                                      padding: '8px 14px',
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '7px'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        letterSpacing: '0.04em',
-                                        color: '#8890C4',
-                                        padding: '10px 14px',
-                                        borderBottom: '1px solid #EEF0F8'
+                                        height: '7px',
+                                        width: '80%',
+                                        background: '#D5D9EC',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      SOURCE TABLE
-                                    </div>{' '}
+                                    />{' '}
                                     <div
                                       style={{
-                                        padding: '8px 14px',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '7px'
+                                        height: '7px',
+                                        width: '65%',
+                                        background: '#D5D9EC',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      <div
-                                        style={{
-                                          height: '7px',
-                                          width: '80%',
-                                          background: '#D5D9EC',
-                                          borderRadius: '3px'
-                                        }}
-                                      />{' '}
-                                      <div
-                                        style={{
-                                          height: '7px',
-                                          width: '65%',
-                                          background: '#D5D9EC',
-                                          borderRadius: '3px'
-                                        }}
-                                      />{' '}
-                                      <div
-                                        style={{
-                                          height: '7px',
-                                          width: '72%',
-                                          background: '#3D4FF0',
-                                          borderRadius: '3px'
-                                        }}
-                                      />
-                                    </div>
-                                  </div>{' '}
+                                    />{' '}
+                                    <div
+                                      style={{
+                                        height: '7px',
+                                        width: '72%',
+                                        background: '#3D4FF0',
+                                        borderRadius: '3px'
+                                      }}
+                                    />
+                                  </div>
+                                </div>{' '}
+                                <div
+                                  style={{ fontSize: '22px', color: '#6E7CFF', flexShrink: '0' }}
+                                >
+                                  →
+                                </div>{' '}
+                                <div
+                                  style={{
+                                    flex: '1',
+                                    background: '#fff',
+                                    border: '1.5px solid #3D4FF0',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden',
+                                    boxShadow: '0 8px 20px -12px rgba(61,79,240,0.5)'
+                                  }}
+                                >
                                   <div
-                                    style={{ fontSize: '22px', color: '#6E7CFF', flexShrink: '0' }}
+                                    style={{
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      letterSpacing: '0.04em',
+                                      color: '#3D4FF0',
+                                      padding: '10px 14px',
+                                      borderBottom: '1px solid #EEF0F8'
+                                    }}
                                   >
-                                    →
+                                    ICEBERG TABLE
                                   </div>{' '}
                                   <div
                                     style={{
-                                      flex: '1',
-                                      background: '#fff',
-                                      border: '1.5px solid #3D4FF0',
-                                      borderRadius: '12px',
-                                      overflow: 'hidden',
-                                      boxShadow: '0 8px 20px -12px rgba(61,79,240,0.5)'
+                                      padding: '8px 14px',
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '7px'
                                     }}
                                   >
                                     <div
                                       style={{
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        letterSpacing: '0.04em',
-                                        color: '#3D4FF0',
-                                        padding: '10px 14px',
-                                        borderBottom: '1px solid #EEF0F8'
+                                        height: '7px',
+                                        width: '80%',
+                                        background: '#D5D9EC',
+                                        borderRadius: '3px'
                                       }}
-                                    >
-                                      ICEBERG TABLE
-                                    </div>{' '}
+                                    />{' '}
+                                    <div
+                                      style={{
+                                        height: '7px',
+                                        width: '65%',
+                                        background: '#D5D9EC',
+                                        borderRadius: '3px'
+                                      }}
+                                    />{' '}
                                     <div
                                       style={{
-                                        padding: '8px 14px',
                                         display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '7px'
+                                        alignItems: 'center',
+                                        gap: '6px'
                                       }}
                                     >
                                       <div
                                         style={{
                                           height: '7px',
-                                          width: '80%',
-                                          background: '#D5D9EC',
-                                          borderRadius: '3px'
-                                        }}
-                                      />{' '}
-                                      <div
-                                        style={{
-                                          height: '7px',
-                                          width: '65%',
-                                          background: '#D5D9EC',
+                                          width: '72%',
+                                          background: '#3D4FF0',
                                           borderRadius: '3px'
                                         }}
-                                      />{' '}
-                                      <div
+                                      />
+                                      <span
                                         style={{
-                                          display: 'flex',
-                                          alignItems: 'center',
-                                          gap: '6px'
+                                          fontSize: '9px',
+                                          fontWeight: '700',
+                                          color: '#1D8A4C',
+                                          background: '#E4F8EA',
+                                          padding: '1px 6px',
+                                          borderRadius: '6px'
                                         }}
                                       >
-                                        <div
-                                          style={{
-                                            height: '7px',
-                                            width: '72%',
-                                            background: '#3D4FF0',
-                                            borderRadius: '3px'
-                                          }}
-                                        />
-                                        <span
-                                          style={{
-                                            fontSize: '9px',
-                                            fontWeight: '700',
-                                            color: '#1D8A4C',
-                                            background: '#E4F8EA',
-                                            padding: '1px 6px',
-                                            borderRadius: '6px'
-                                          }}
-                                        >
-                                          + NEW
-                                        </span>
-                                      </div>
+                                        + NEW
+                                      </span>
                                     </div>
                                   </div>
                                 </div>
-                              </>
-                            ) : null}{' '}
-                            {feat.isChunk ? (
-                              <>
-                                <div style={{ marginBottom: '26px' }}>
+                              </div>
+                            </>
+                          ) : null}{' '}
+                          {feat.isChunk ? (
+                            <>
+                              <div style={{ marginBottom: '26px' }}>
+                                <div
+                                  style={{
+                                    height: '14px',
+                                    borderRadius: '5px',
+                                    background: 'linear-gradient(90deg,#3D4FF0,#6E7CFF)',
+                                    marginBottom: '14px'
+                                  }}
+                                />{' '}
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    gap: '6px',
+                                    marginBottom: '14px'
+                                  }}
+                                >
                                   <div
                                     style={{
+                                      width: '1px',
                                       height: '14px',
-                                      borderRadius: '5px',
-                                      background: 'linear-gradient(90deg,#3D4FF0,#6E7CFF)',
-                                      marginBottom: '14px'
+                                      background: '#C7CCE8'
                                     }}
-                                  />{' '}
+                                  />
+                                </div>{' '}
+                                <div style={{ display: 'flex', gap: '8px' }}>
                                   <div
                                     style={{
+                                      flex: '1',
+                                      height: '38px',
+                                      background: '#EEF0FE',
+                                      border: '1px solid #D9DEFB',
+                                      borderRadius: '8px',
                                       display: 'flex',
+                                      alignItems: 'center',
                                       justifyContent: 'center',
-                                      gap: '6px',
-                                      marginBottom: '14px'
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      color: '#3D4FF0'
                                     }}
                                   >
-                                    <div
-                                      style={{
-                                        width: '1px',
-                                        height: '14px',
-                                        background: '#C7CCE8'
-                                      }}
-                                    />
+                                    chunk 1
                                   </div>{' '}
-                                  <div style={{ display: 'flex', gap: '8px' }}>
-                                    <div
-                                      style={{
-                                        flex: '1',
-                                        height: '38px',
-                                        background: '#EEF0FE',
-                                        border: '1px solid #D9DEFB',
-                                        borderRadius: '8px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        color: '#3D4FF0'
-                                      }}
-                                    >
-                                      chunk 1
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        flex: '1',
-                                        height: '38px',
-                                        background: '#EEF0FE',
-                                        border: '1px solid #D9DEFB',
-                                        borderRadius: '8px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        color: '#3D4FF0'
-                                      }}
-                                    >
-                                      chunk 2
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        flex: '1',
-                                        height: '38px',
-                                        background: '#EEF0FE',
-                                        border: '1px solid #D9DEFB',
-                                        borderRadius: '8px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        color: '#3D4FF0'
-                                      }}
-                                    >
-                                      chunk 3
-                                    </div>{' '}
-                                    <div
-                                      style={{
-                                        flex: '1',
-                                        height: '38px',
-                                        background: '#EEF0FE',
-                                        border: '1px solid #D9DEFB',
-                                        borderRadius: '8px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        color: '#3D4FF0'
-                                      }}
-                                    >
-                                      chunk 4
-                                    </div>
+                                  <div
+                                    style={{
+                                      flex: '1',
+                                      height: '38px',
+                                      background: '#EEF0FE',
+                                      border: '1px solid #D9DEFB',
+                                      borderRadius: '8px',
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'center',
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      color: '#3D4FF0'
+                                    }}
+                                  >
+                                    chunk 2
                                   </div>{' '}
                                   <div
                                     style={{
-                                      textAlign: 'center',
-                                      fontSize: '11px',
-                                      color: '#5B6484',
-                                      marginTop: '12px'
+                                      flex: '1',
+                                      height: '38px',
+                                      background: '#EEF0FE',
+                                      border: '1px solid #D9DEFB',
+                                      borderRadius: '8px',
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'center',
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      color: '#3D4FF0'
+                                    }}
+                                  >
+                                    chunk 3
+                                  </div>{' '}
+                                  <div
+                                    style={{
+                                      flex: '1',
+                                      height: '38px',
+                                      background: '#EEF0FE',
+                                      border: '1px solid #D9DEFB',
+                                      borderRadius: '8px',
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'center',
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      color: '#3D4FF0'
                                     }}
                                   >
-                                    read in parallel
+                                    chunk 4
                                   </div>
+                                </div>{' '}
+                                <div
+                                  style={{
+                                    textAlign: 'center',
+                                    fontSize: '11px',
+                                    color: '#5B6484',
+                                    marginTop: '12px'
+                                  }}
+                                >
+                                  read in parallel
                                 </div>
-                              </>
-                            ) : null}{' '}
-                            {feat.isResume ? (
-                              <>
-                                <div style={{ marginBottom: '26px' }}>
+                              </div>
+                            </>
+                          ) : null}{' '}
+                          {feat.isResume ? (
+                            <>
+                              <div style={{ marginBottom: '26px' }}>
+                                <div
+                                  style={{
+                                    position: 'relative',
+                                    height: '12px',
+                                    borderRadius: '6px',
+                                    background: '#EEF0F8',
+                                    margin: '26px 0 14px'
+                                  }}
+                                >
                                   <div
                                     style={{
-                                      position: 'relative',
-                                      height: '12px',
+                                      position: 'absolute',
+                                      left: '0',
+                                      top: '0',
+                                      bottom: '0',
+                                      width: '62%',
                                       borderRadius: '6px',
-                                      background: '#EEF0F8',
-                                      margin: '26px 0 14px'
+                                      background: 'linear-gradient(90deg,#3D4FF0,#6E7CFF)'
                                     }}
-                                  >
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        left: '0',
-                                        top: '0',
-                                        bottom: '0',
-                                        width: '62%',
-                                        borderRadius: '6px',
-                                        background: 'linear-gradient(90deg,#3D4FF0,#6E7CFF)'
-                                      }}
-                                    />{' '}
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        left: '62%',
-                                        top: '50%',
-                                        transform: 'translate(-50%,-50%)',
-                                        width: '20px',
-                                        height: '20px',
-                                        borderRadius: '50%',
-                                        background: '#fff',
-                                        border: '3px solid #3D4FF0'
-                                      }}
-                                    />{' '}
-                                    <div
-                                      style={{
-                                        position: 'absolute',
-                                        left: '62%',
-                                        top: '-24px',
-                                        transform: 'translateX(-50%)',
-                                        fontSize: '10px',
-                                        fontWeight: '700',
-                                        color: '#3D4FF0',
-                                        whiteSpace: 'nowrap'
-                                      }}
-                                    >
-                                      ✓ checkpoint
-                                    </div>
-                                  </div>{' '}
+                                  />{' '}
                                   <div
                                     style={{
-                                      display: 'flex',
-                                      justifyContent: 'space-between',
-                                      fontSize: '11px',
-                                      color: '#5B6484'
+                                      position: 'absolute',
+                                      left: '62%',
+                                      top: '50%',
+                                      transform: 'translate(-50%,-50%)',
+                                      width: '20px',
+                                      height: '20px',
+                                      borderRadius: '50%',
+                                      background: '#fff',
+                                      border: '3px solid #3D4FF0'
+                                    }}
+                                  />{' '}
+                                  <div
+                                    style={{
+                                      position: 'absolute',
+                                      left: '62%',
+                                      top: '-24px',
+                                      transform: 'translateX(-50%)',
+                                      fontSize: '10px',
+                                      fontWeight: '700',
+                                      color: '#3D4FF0',
+                                      whiteSpace: 'nowrap'
                                     }}
                                   >
-                                    <span>interrupted</span>
-                                    <span style={{ color: '#3D4FF0', fontWeight: '600' }}>
-                                      resumes here →
-                                    </span>
+                                    ✓ checkpoint
                                   </div>
+                                </div>{' '}
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    fontSize: '11px',
+                                    color: '#5B6484'
+                                  }}
+                                >
+                                  <span>interrupted</span>
+                                  <span style={{ color: '#3D4FF0', fontWeight: '600' }}>
+                                    resumes here →
+                                  </span>
                                 </div>
-                              </>
-                            ) : null}{' '}
-                            <div style={{ fontSize: '15px', lineHeight: '1.7', color: '#5B6484' }}>
-                              {feat.body}
-                            </div>
+                              </div>
+                            </>
+                          ) : null}{' '}
+                          <div style={{ fontSize: '15px', lineHeight: '1.7', color: '#5B6484' }}>
+                            {feat.body}
                           </div>
-                        </>
-                      ) : null}
+                        </div>
+                      </div>
                     </React.Fragment>
                   ))}
                 </div>
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index 8e5c52b05..b03b27055 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -73,7 +73,7 @@ const SOCIALS = [
 ]
 
 const Footer: React.FC = () => (
-  <div
+  <footer
     className='olake-footer footer-wrap'
     style={{
       background: '#F7F8FA',
@@ -194,7 +194,7 @@ const Footer: React.FC = () => (
     >
       OLake
     </div>
-  </div>
+  </footer>
 )
 
 export default Footer

From cd837d8fdbf3cb71a85cc7b4cfdc83b7e66f3bee Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Fri, 14 Aug 2026 10:46:59 +0530
Subject: [PATCH 4/7] fix: resolve comments

---
 src/components/landing/Navbar/navData.ts | 15 ++++++++++-----
 src/pages/olake-fusion.tsx               |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/landing/Navbar/navData.ts b/src/components/landing/Navbar/navData.ts
index 853fa8ebb..9b72bc697 100644
--- a/src/components/landing/Navbar/navData.ts
+++ b/src/components/landing/Navbar/navData.ts
@@ -89,11 +89,16 @@ export const MOBILE_LINKS: MobileNavItem[] = [
       { label: 'OLake Fusion', href: '/docs/fusion/getting-started/overview' }
     ]
   },
-  { label: 'Blog', href: '/blog' },
-  { label: 'Customer Stories', href: '/customer-stories' },
-  { label: 'Webinars & Events', href: '/webinar' },
-  { label: 'Community', href: '/community' },
-  { label: 'Iceberg', href: '/iceberg' },
+  {
+    label: 'Resources',
+    items: [
+      { label: 'Blog', href: '/blog' },
+      { label: 'Customer Stories', href: '/customer-stories' },
+      { label: 'Webinars & Events', href: '/webinar' },
+      { label: 'Community', href: '/community' },
+      { label: 'Iceberg', href: '/iceberg' }
+    ]
+  },
   PRICING_LINK
 ]
 
diff --git a/src/pages/olake-fusion.tsx b/src/pages/olake-fusion.tsx
index 5bfa34d81..ba30a32d1 100644
--- a/src/pages/olake-fusion.tsx
+++ b/src/pages/olake-fusion.tsx
@@ -269,7 +269,7 @@ export default function OLakeFusionPage() {
                   color: '#0D1230'
                 }}
               >
-                Simplify your Iceberg table maintenance
+                Keep your Iceberg tables fast with less compute
               </h1>{' '}
               <div
                 className='hero-btns'

From 6dbe93d44d9088592d7d3317eebf079473b446d9 Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Fri, 14 Aug 2026 11:12:16 +0530
Subject: [PATCH 5/7] fix: mobile navbar

---
 src/components/landing/Navbar/SiteNavbar.css  | 11 +++++
 src/components/landing/Navbar/SiteNavbar.tsx  | 42 +++++++++++++------
 src/components/landing/Navbar/navData.ts      | 17 +++++++-
 .../MobileSidebar/PrimaryMenu/index.tsx       | 38 +++++++++++------
 4 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/src/components/landing/Navbar/SiteNavbar.css b/src/components/landing/Navbar/SiteNavbar.css
index 43768d379..abfbe42ca 100644
--- a/src/components/landing/Navbar/SiteNavbar.css
+++ b/src/components/landing/Navbar/SiteNavbar.css
@@ -358,6 +358,17 @@ body:has(.landing-page) .olake-nav [class*='navbarSearchContainer'],
   text-decoration: none;
 }
 
+.olake-nav .olake-nav-mobile-accordion-trigger--nested {
+  padding-left: 20px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #5b6070;
+}
+
+.olake-nav .olake-nav-mobile-sublink--nested {
+  padding-left: 34px;
+}
+
 /* The design collapses at 860px; we do it at 1279px to match the
    `navbar-breakpoint` plugin, below which Docusaurus renders the mobile
    sidebar that /docs relies on. */
diff --git a/src/components/landing/Navbar/SiteNavbar.tsx b/src/components/landing/Navbar/SiteNavbar.tsx
index 188b70fdd..a8a10cffe 100644
--- a/src/components/landing/Navbar/SiteNavbar.tsx
+++ b/src/components/landing/Navbar/SiteNavbar.tsx
@@ -159,14 +159,26 @@ function Dropdown({ entry }: { entry: NavEntry }) {
   )
 }
 
-/** A drawer row that expands in place instead of navigating — the drawer's Docs entry. */
-function MobileAccordion({ entry, onNavigate }: { entry: NavEntry; onNavigate: () => void }) {
+/** A drawer row that expands in place instead of navigating — the drawer's
+ * Docs entry, and any nested group inside it (e.g. Resources > Community). */
+function MobileAccordion({
+  entry,
+  onNavigate,
+  nested
+}: {
+  entry: NavEntry | NavFlyout
+  onNavigate: () => void
+  nested?: boolean
+}) {
   const [open, setOpen] = useState(false)
   return (
     <div className='olake-nav-mobile-accordion'>
       <button
         type='button'
-        className='olake-nav-mobile-link olake-nav-mobile-accordion-trigger'
+        className={cn(
+          'olake-nav-mobile-link olake-nav-mobile-accordion-trigger',
+          nested && 'olake-nav-mobile-accordion-trigger--nested'
+        )}
         aria-expanded={open}
         onClick={() => setOpen((o) => !o)}
       >
@@ -175,16 +187,20 @@ function MobileAccordion({ entry, onNavigate }: { entry: NavEntry; onNavigate: (
       </button>
       {open && (
         <div className='olake-nav-mobile-accordion-panel'>
-          {entry.items!.map((item) => (
-            <Link
-              key={(item as NavLinkType).href}
-              to={(item as NavLinkType).href}
-              className='olake-nav-mobile-sublink'
-              onClick={onNavigate}
-            >
-              {item.label}
-            </Link>
-          ))}
+          {entry.items!.map((item) =>
+            isFlyout(item) ? (
+              <MobileAccordion key={item.label} entry={item} onNavigate={onNavigate} nested />
+            ) : (
+              <Link
+                key={item.href}
+                to={item.href}
+                className={cn('olake-nav-mobile-sublink', nested && 'olake-nav-mobile-sublink--nested')}
+                onClick={onNavigate}
+              >
+                {item.label}
+              </Link>
+            )
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/landing/Navbar/navData.ts b/src/components/landing/Navbar/navData.ts
index 9b72bc697..ca7436d46 100644
--- a/src/components/landing/Navbar/navData.ts
+++ b/src/components/landing/Navbar/navData.ts
@@ -95,8 +95,21 @@ export const MOBILE_LINKS: MobileNavItem[] = [
       { label: 'Blog', href: '/blog' },
       { label: 'Customer Stories', href: '/customer-stories' },
       { label: 'Webinars & Events', href: '/webinar' },
-      { label: 'Community', href: '/community' },
-      { label: 'Iceberg', href: '/iceberg' }
+      {
+        label: 'Community',
+        items: [
+          { label: 'OLake Community', href: '/community' },
+          { label: 'Top Contributors', href: '/community/contributors' },
+          { label: 'Contributor Program', href: '/community/contributor-program' }
+        ]
+      },
+      {
+        label: 'Iceberg',
+        items: [
+          { label: 'Iceberg Blogs', href: '/iceberg' },
+          { label: 'Query Engine', href: '/iceberg/query-engine' }
+        ]
+      }
     ]
   },
   PRICING_LINK
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
index 7f3bec9f4..f3a6a56df 100644
--- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
+++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -5,13 +5,21 @@ import { cn } from '@site/src/lib/utils'
 import {
   MOBILE_LINKS,
   isMobileGroup,
+  isFlyout,
   type NavEntry,
-  type NavLink as NavLinkType
+  type NavFlyout
 } from '@site/src/components/landing/Navbar/navData'
 
 // A row that expands in place, mirroring the desktop Docs dropdown. Uses
 // Infima's own collapsible classes, so it picks up dark mode for free.
-function MenuGroupItem({ entry, onNavigate }: { entry: NavEntry; onNavigate: () => void }) {
+// Recurses for nested groups (e.g. Resources > Community).
+function MenuGroupItem({
+  entry,
+  onNavigate
+}: {
+  entry: NavEntry | NavFlyout
+  onNavigate: () => void
+}) {
   const [collapsed, setCollapsed] = useState(true)
   return (
     <li className={cn('menu__list-item', collapsed && 'menu__list-item--collapsed')}>
@@ -30,17 +38,21 @@ function MenuGroupItem({ entry, onNavigate }: { entry: NavEntry; onNavigate: ()
         </a>
       </div>
       <ul className='menu__list' style={{ display: collapsed ? 'none' : 'block' }}>
-        {entry.items!.map((item) => (
-          <li key={(item as NavLinkType).href} className='menu__list-item'>
-            <Link
-              className='menu__link olake-nav-sidebar-link'
-              to={(item as NavLinkType).href}
-              onClick={onNavigate}
-            >
-              {item.label}
-            </Link>
-          </li>
-        ))}
+        {entry.items!.map((item) =>
+          isFlyout(item) ? (
+            <MenuGroupItem key={item.label} entry={item} onNavigate={onNavigate} />
+          ) : (
+            <li key={item.href} className='menu__list-item'>
+              <Link
+                className='menu__link olake-nav-sidebar-link'
+                to={item.href}
+                onClick={onNavigate}
+              >
+                {item.label}
+              </Link>
+            </li>
+          )
+        )}
       </ul>
     </li>
   )

From a465766fee0368e3ec38d166ff8130c6fc7c5fb2 Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Fri, 14 Aug 2026 14:33:46 +0530
Subject: [PATCH 6/7] fix: navbar and add posthog experiment

---
 package-lock.json                        | 102 +++++++++++++++++++++--
 package.json                             |   1 +
 src/components/landing/Navbar/navData.ts |   9 +-
 src/lib/posthog/client.ts                |  13 +++
 src/lib/posthog/useFeatureFlagVariant.ts |  22 +++++
 src/pages/olake-fusion.tsx               |  10 ++-
 src/theme/Root/index.tsx                 |   6 ++
 7 files changed, 154 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/posthog/client.ts
 create mode 100644 src/lib/posthog/useFeatureFlagVariant.ts
 create mode 100644 src/theme/Root/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 70a412919..a92211bbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.475.0",
         "plugin-image-zoom": "^1.2.0",
+        "posthog-js": "^1.417.0",
         "prism-react-renderer": "^2.4.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -5213,6 +5214,31 @@
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "license": "MIT"
     },
+    "node_modules/@posthog/browser-common": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@posthog/browser-common/-/browser-common-0.5.0.tgz",
+      "integrity": "sha512-8DaxVZS1bQPbA514RePurLNbYjei3P4jhnC206DwVv5XThmZM3QdlsXenI2ujE3pLbgQ79hYn9o1Kda8I3WK/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@posthog/core": "^1.47.0",
+        "@posthog/types": "^1.402.2"
+      }
+    },
+    "node_modules/@posthog/core": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.48.0.tgz",
+      "integrity": "sha512-ezKjVLw9y3Q235PUY+2hRr5DN9t6j2jF1mFAvnvhCCu/Ha6/qBv3zmVJBaHu9PnqqSNtx2St3ggN8Z3TTu/12A==",
+      "license": "MIT",
+      "dependencies": {
+        "@posthog/types": "^1.403.1"
+      }
+    },
+    "node_modules/@posthog/types": {
+      "version": "1.404.0",
+      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.404.0.tgz",
+      "integrity": "sha512-/Y1zKv8SdwkK725SkmgT5QVYnXE7Fi23SPDCZ5Ybu27gTQub4yMTKWuUQekW+gkSKBZ0LyYCQK52mhyMMigMBw==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-avatar": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
@@ -8926,11 +8952,14 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.45.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
-      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
+      "integrity": "sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
@@ -10304,9 +10333,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.13.tgz",
+      "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -11062,6 +11091,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.9.tgz",
+      "integrity": "sha512-zdxgIEddhfsyCaWpJ2SdXEP8ZMrKJ6+5jl4OupODcywU0IhRk6gdXuVGcPICyfx2H97hVK7xmJtRLPjkxAX8Vw==",
+      "license": "MIT"
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -18618,6 +18653,42 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/posthog-js": {
+      "version": "1.417.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.417.0.tgz",
+      "integrity": "sha512-jokL2hiuBYO0+bSJ1l/ZLxFIc4+xwe5P8srIbivSU3MVSWsE4AP2U6IaVW8hQLdcz4k8ZWEa2jDPn9sTUcQ5yw==",
+      "license": "(Apache-2.0 AND MIT)",
+      "dependencies": {
+        "@posthog/browser-common": "^0.5.0",
+        "@posthog/core": "^1.48.0",
+        "@posthog/types": "^1.404.0",
+        "core-js": "^3.49.0",
+        "dompurify": "^3.4.13",
+        "fflate": "^0.4.8",
+        "preact": "^10.29.3",
+        "query-selector-shadow-dom": "^1.0.1",
+        "web-vitals": "^5.3.0",
+        "web-vitals-soft-navs": "npm:web-vitals@6.0.0"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.29.8",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.8.tgz",
+      "integrity": "sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -18956,6 +19027,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/query-selector-shadow-dom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/query-selector-shadow-dom/-/query-selector-shadow-dom-1.0.1.tgz",
+      "integrity": "sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -22306,6 +22383,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.3.0.tgz",
+      "integrity": "sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/web-vitals-soft-navs": {
+      "name": "web-vitals",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.0.0.tgz",
+      "integrity": "sha512-Guaibvy/+uNtL6Bsu4jmMJGzuSl91oeRH5iO9pPRbYftnFUr3yqT1TUNX/OE4o9HexuEMU3Kb/Wg7iKhlffZUA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/webpack": {
       "version": "5.101.3",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.3.tgz",
diff --git a/package.json b/package.json
index e720759f9..ab9edda32 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "plugin-image-zoom": "^1.2.0",
+    "posthog-js": "^1.417.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/landing/Navbar/navData.ts b/src/components/landing/Navbar/navData.ts
index ca7436d46..c918ea2c6 100644
--- a/src/components/landing/Navbar/navData.ts
+++ b/src/components/landing/Navbar/navData.ts
@@ -80,8 +80,13 @@ export const PRICING_LINK: NavLink = { label: 'Pricing', href: '/contact' }
  * expanding in place to mirror the desktop dropdown.
  */
 export const MOBILE_LINKS: MobileNavItem[] = [
-  { label: 'OLake Go', href: '/olake-go' },
-  { label: 'OLake Fusion', href: '/olake-fusion' },
+  {
+    label: 'Product',
+    items: [
+      { label: 'OLake Go', href: '/olake-go' },
+      { label: 'OLake Fusion', href: '/olake-fusion' }
+    ]
+  },
   {
     label: 'Docs',
     items: [
diff --git a/src/lib/posthog/client.ts b/src/lib/posthog/client.ts
new file mode 100644
index 000000000..ad5310dc9
--- /dev/null
+++ b/src/lib/posthog/client.ts
@@ -0,0 +1,13 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
+import posthog from 'posthog-js'
+
+// Side-effect import: initializes on load, client-side only. Root/index.tsx
+// imports this so init runs before any page mounts.
+if (ExecutionEnvironment.canUseDOM) {
+  posthog.init('phc_nT2syEvyPUz7FYFgbpadiAFyd7NHBu7W9ewdQ4ciVfac', {
+    api_host: 'https://us.i.posthog.com',
+    defaults: '2026-05-30'
+  })
+}
+
+export default posthog
diff --git a/src/lib/posthog/useFeatureFlagVariant.ts b/src/lib/posthog/useFeatureFlagVariant.ts
new file mode 100644
index 000000000..ef2791d68
--- /dev/null
+++ b/src/lib/posthog/useFeatureFlagVariant.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+import posthog from './client'
+
+/** Picks a variant from a PostHog multivariate flag. `variants` keys must
+ * match the flag's variant keys in the PostHog UI; unmatched/loading state
+ * falls back to `defaultVariant`. */
+export function useFeatureFlagVariant<T extends Record<string, string>>(
+  flagKey: string,
+  variants: T,
+  defaultVariant: keyof T
+): string {
+  const [variantKey, setVariantKey] = useState<keyof T>(defaultVariant)
+  useEffect(
+    () =>
+      posthog.onFeatureFlags(() => {
+        const flag = posthog.getFeatureFlag(flagKey)
+        setVariantKey(typeof flag === 'string' && flag in variants ? flag : defaultVariant)
+      }),
+    [flagKey]
+  )
+  return variants[variantKey]
+}
diff --git a/src/pages/olake-fusion.tsx b/src/pages/olake-fusion.tsx
index ba30a32d1..2f1a7f8ef 100644
--- a/src/pages/olake-fusion.tsx
+++ b/src/pages/olake-fusion.tsx
@@ -6,10 +6,18 @@ import LightModeEnforcer from '@site/src/components/LightModeEnforcer'
 import { useFusionLogic } from '@site/src/components/landing/pages/useFusionLogic'
 import { cssToObj as __css } from '@site/src/components/landing/pages/cssToObj'
 import { FUSION_SEO } from '@site/src/data/landing/seo'
+import { useFeatureFlagVariant } from '@site/src/lib/posthog/useFeatureFlagVariant'
 import '@site/src/components/landing/pages/olake-fusion.css'
 import '@site/src/components/landing/pages/overrides.css'
 
+const HERO_HEADLINE_FLAG = 'fusion-hero-headline'
+const HERO_HEADLINES = {
+  performance: 'Keep your Iceberg tables fast with less compute',
+  simplicity: 'Simplify your Iceberg table maintenance'
+}
+
 export default function OLakeFusionPage() {
+  const heroHeadline = useFeatureFlagVariant(HERO_HEADLINE_FLAG, HERO_HEADLINES, 'performance')
   const {
     icebergStyle,
     problemCards,
@@ -269,7 +277,7 @@ export default function OLakeFusionPage() {
                   color: '#0D1230'
                 }}
               >
-                Keep your Iceberg tables fast with less compute
+                {heroHeadline}
               </h1>{' '}
               <div
                 className='hero-btns'
diff --git a/src/theme/Root/index.tsx b/src/theme/Root/index.tsx
new file mode 100644
index 000000000..cca6f2edf
--- /dev/null
+++ b/src/theme/Root/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import '@site/src/lib/posthog/client'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

From c70a983b15bca4355c02b58b072edbc74a932606 Mon Sep 17 00:00:00 2001
From: deepanshupal09-datazip <deepanshu@datazip.io>
Date: Fri, 14 Aug 2026 15:19:35 +0530
Subject: [PATCH 7/7] fix: fusion diagram

---
 src/components/landing/pages/olake-fusion.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/landing/pages/olake-fusion.css b/src/components/landing/pages/olake-fusion.css
index a206c50b9..197f4cdf7 100644
--- a/src/components/landing/pages/olake-fusion.css
+++ b/src/components/landing/pages/olake-fusion.css
@@ -189,7 +189,7 @@ body:has(.olakefusion-page) {
     padding: 14px 20px !important;
   }
   .olakefusion-page .hero-wrap {
-    padding: 24px 20px 8px !important;
+    padding: 48px 20px 8px !important;
   }
   .olakefusion-page .hero-title {
     font-size: 32px !important;
@@ -265,14 +265,14 @@ body:has(.olakefusion-page) {
     grid-template-columns: 1fr !important;
   }
   .olakefusion-page .arch-inner {
-    transform: scale(0.46);
+    transform: scale(0.78);
     transform-origin: top center;
   }
   .olakefusion-page .arch-wrap {
-    height: 118px !important;
+    height: 168px !important;
     overflow: hidden;
     padding: 6px 12px !important;
-    margin: 8px auto 8px !important;
+    margin: 84px auto 8px !important;
   }
   .olakefusion-page .bench-row {
     padding-left: 16px !important;