From 8d8463c6200f789487adc97c406348246a7c545f Mon Sep 17 00:00:00 2001
From: flexykrn <knpawar6000@gmail.com>
Date: Wed, 17 Jun 2026 17:54:44 +0530
Subject: [PATCH] Docusaurus migration - website-src-theme

Part 72 of the Docusaurus migration split.
---
 website/src/theme/CodeBlock/index.tsx      | 111 ++++
 website/src/theme/Footer/index.tsx         | 117 ++++
 website/src/theme/Footer/styles.module.css | 258 +++++++++
 website/src/theme/MDXComponents/index.tsx  |  35 ++
 website/src/theme/Navbar/index.tsx         | 532 ++++++++++++++++++
 website/src/theme/Navbar/styles.module.css | 606 +++++++++++++++++++++
 website/src/theme/Root.tsx                 |  15 +
 7 files changed, 1674 insertions(+)
 create mode 100644 website/src/theme/CodeBlock/index.tsx
 create mode 100644 website/src/theme/Footer/index.tsx
 create mode 100644 website/src/theme/Footer/styles.module.css
 create mode 100644 website/src/theme/MDXComponents/index.tsx
 create mode 100644 website/src/theme/Navbar/index.tsx
 create mode 100644 website/src/theme/Navbar/styles.module.css
 create mode 100644 website/src/theme/Root.tsx

diff --git a/website/src/theme/CodeBlock/index.tsx b/website/src/theme/CodeBlock/index.tsx
new file mode 100644
index 00000000..28d3663c
--- /dev/null
+++ b/website/src/theme/CodeBlock/index.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useCallback, useRef } from 'react';
+import OriginalCodeBlock from '@theme-original/CodeBlock';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '@site/src/lib/utils';
+
+// Map common language identifiers to display labels
+const LANG_LABELS: Record<string, string> = {
+  solidity: 'Solidity',
+  sol: 'Solidity',
+  javascript: 'JavaScript',
+  js: 'JavaScript',
+  typescript: 'TypeScript',
+  ts: 'TypeScript',
+  python: 'Python',
+  py: 'Python',
+  bash: 'Bash',
+  sh: 'Shell',
+  shell: 'Shell',
+  yaml: 'YAML',
+  yml: 'YAML',
+  json: 'JSON',
+  toml: 'TOML',
+  go: 'Go',
+  rust: 'Rust',
+  sql: 'SQL',
+  dockerfile: 'Dockerfile',
+  html: 'HTML',
+  css: 'CSS',
+  jsx: 'JSX',
+  tsx: 'TSX',
+  xml: 'XML',
+  graphql: 'GraphQL',
+};
+
+type CodeBlockProps = React.ComponentProps<typeof OriginalCodeBlock>;
+
+export default function CodeBlockWrapper(props: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const [toastVisible, setToastVisible] = useState(false);
+  const toastTimer = useRef<ReturnType<typeof setTimeout>>();
+
+  // Resolve language label from className prop (e.g. "language-solidity")
+  const langClass = (props.className || '') as string;
+  const langKey = langClass.replace(/^language-/, '').toLowerCase();
+  const langLabel = LANG_LABELS[langKey] || (langKey || '');
+
+  const handleCopy = useCallback(async () => {
+    const code = typeof props.children === 'string' ? props.children : '';
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+
+      // Show toast
+      setToastVisible(true);
+      if (toastTimer.current) clearTimeout(toastTimer.current);
+      toastTimer.current = setTimeout(() => {
+        setToastVisible(false);
+        setCopied(false);
+      }, 2000);
+    } catch {
+      // Ignore — clipboard may not be available in all contexts
+    }
+  }, [props.children]);
+
+  return (
+    <div className="group relative my-6 overflow-hidden rounded-lg border border-border/70 bg-background shadow-[0_0_0_1px_rgba(0,0,0,0.06)] dark:border-white/[0.07] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06)]">
+      {/* Language label — top-left */}
+      {langLabel && (
+        <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded-md border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground backdrop-blur-sm dark:border-white/[0.08]">
+          {langLabel}
+        </div>
+      )}
+
+      <OriginalCodeBlock {...props} />
+
+      {/* Copy button — top-right, appears on group hover */}
+      <button
+        type="button"
+        id={`code-copy-${langKey}`}
+        onClick={handleCopy}
+        className={cn(
+          'absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-md border border-border/60 bg-background/95 text-muted-foreground opacity-0 shadow-sm backdrop-blur-sm transition-all duration-150',
+          'hover:border-primary/40 hover:text-primary focus:opacity-100 group-hover:opacity-100',
+          copied && 'border-emerald-500/50 text-emerald-500 hover:border-emerald-500/50 hover:text-emerald-500',
+          'dark:border-white/[0.1] dark:bg-black/60'
+        )}
+        aria-label={copied ? 'Copied!' : 'Copy code to clipboard'}
+        title={copied ? 'Copied!' : 'Copy'}
+      >
+        {copied ? (
+          <Check className="h-3.5 w-3.5" />
+        ) : (
+          <Copy className="h-3.5 w-3.5" />
+        )}
+      </button>
+
+      {/* Inline toast */}
+      {toastVisible && (
+        <div
+          role="status"
+          aria-live="polite"
+          className="absolute right-3 top-14 z-20 flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-background/95 px-2.5 py-1.5 text-xs font-medium text-emerald-500 shadow-md backdrop-blur-sm animate-in slide-in-from-top-1 duration-200 dark:bg-black/80"
+        >
+          <Check className="h-3 w-3" />
+          Copied!
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/website/src/theme/Footer/index.tsx b/website/src/theme/Footer/index.tsx
new file mode 100644
index 00000000..7910c486
--- /dev/null
+++ b/website/src/theme/Footer/index.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Github, Twitter, MessageCircle, Send, Heart } from 'lucide-react';
+import styles from './styles.module.css';
+
+interface FooterLinkItem {
+  label: string;
+  to?: string;
+  href?: string;
+}
+
+interface FooterLinkColumn {
+  title: string;
+  items: FooterLinkItem[];
+}
+
+const socialLinks = [
+  { icon: Github, href: 'https://github.com/XinFinOrg', label: 'GitHub' },
+  { icon: Twitter, href: 'https://twitter.com/XinFin_Official', label: 'Twitter / X' },
+  { icon: MessageCircle, href: 'https://discord.gg/xdc', label: 'Discord' },
+  { icon: Send, href: 'https://t.me/xinfintalk', label: 'Telegram' },
+];
+
+export default function Footer() {
+  const { footer } = useThemeConfig();
+  const footerLinks = (footer?.links as FooterLinkColumn[]) ?? [];
+  const logoSrc = useBaseUrl('img/logo-dark.svg');
+  const logoSrcDark = useBaseUrl('img/logo.svg');
+
+  const renderLink = (item: FooterLinkItem) => {
+    const content = (
+      <>
+        <span className={styles.linkText}>{item.label}</span>
+        <span className={styles.linkUnderline} aria-hidden="true" />
+      </>
+    );
+    return item.href ? (
+      <a
+        key={item.label}
+        href={item.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.link}
+      >
+        {content}
+      </a>
+    ) : (
+      <Link key={item.label} to={item.to ?? '#'} className={styles.link}>{content}</Link>
+    );
+  };
+
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.gradientLine} aria-hidden="true" />
+      <div className={styles.container}>
+        <div className={styles.grid}>
+          {/* Brand column */}
+          <div className={styles.brandColumn}>
+            <Link to="/" className={styles.logo}>
+              <img
+                src={logoSrc}
+                alt="XDC Network"
+                className="dark:hidden"
+                width="120"
+                height="32"
+              />
+              <img
+                src={logoSrcDark}
+                alt="XDC Network"
+                className="hidden dark:block"
+                width="120"
+                height="32"
+              />
+            </Link>
+            <p className={styles.tagline}>
+              Built for global finance. Enterprise-grade hybrid blockchain powering trade, tokenization, and decentralized infrastructure.
+            </p>
+            <div className={styles.socials}>
+              {socialLinks.map(({ icon: Icon, href, label }) => (
+                <a
+                  key={label}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={label}
+                  className={styles.socialLink}
+                >
+                  <Icon className={styles.socialIcon} />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Link columns */}
+          {footerLinks.map((column) => (
+            <div key={column.title} className={styles.linkColumn}>
+              <h3 className={styles.columnTitle}>{column.title}</h3>
+              <div className={styles.linkList}>{column.items.map(renderLink)}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom bar */}
+        <div className={styles.bottom}>
+          <div className={styles.builtWith}>
+            Built with <Heart className={styles.heart} /> by the XDC community
+          </div>
+          <div className={styles.copyright}>
+            Copyright © {new Date().getFullYear()} XDC Network. All rights reserved.
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/website/src/theme/Footer/styles.module.css b/website/src/theme/Footer/styles.module.css
new file mode 100644
index 00000000..5957c6c2
--- /dev/null
+++ b/website/src/theme/Footer/styles.module.css
@@ -0,0 +1,258 @@
+.footer {
+  position: relative;
+  background: var(--ifm-footer-background-color);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  padding: 4rem 0 2rem;
+  margin-top: 4rem;
+}
+
+.gradientLine {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, var(--ifm-color-primary) 25%, #4ba6ff 50%, var(--ifm-color-primary) 75%, transparent 100%);
+  background-size: 200% 100%;
+  animation: gradientShift 4s linear infinite;
+  opacity: 0.5;
+}
+
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1.75fr repeat(4, 1fr);
+  gap: 2.5rem;
+}
+
+.brandColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.logo {
+  display: inline-flex;
+  text-decoration: none;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+.logo:hover {
+  opacity: 0.8;
+}
+
+.logo img {
+  height: 32px;
+  width: auto;
+}
+
+.tagline {
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  max-width: 320px;
+  margin: 0;
+}
+
+.socials {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.socialLink {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all 0.2s ease;
+}
+
+.socialLink:hover {
+  color: var(--ifm-color-primary);
+  background: color-mix(in srgb, var(--ifm-color-primary) 5%, transparent);
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+}
+
+.socialIcon {
+  width: 17px;
+  height: 17px;
+}
+
+.linkColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.columnTitle {
+  color: var(--ifm-font-color-base);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0;
+}
+
+.linkList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.link {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.9rem;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  width: fit-content;
+}
+
+.link:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.linkUnderline {
+  height: 1px;
+  width: 0;
+  background: var(--ifm-color-primary);
+  transition: width 0.2s ease;
+  margin-top: 1px;
+}
+
+.link:hover .linkUnderline {
+  width: 100%;
+}
+
+.bottom {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.builtWith {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.85rem;
+}
+
+.heart {
+  width: 14px;
+  height: 14px;
+  color: var(--ifm-color-danger);
+  fill: var(--ifm-color-danger);
+  vertical-align: -2px;
+  margin: 0 0.15rem;
+}
+
+.copyright {
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.85rem;
+}
+
+@media (max-width: 1100px) {
+  .grid {
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 2rem;
+  }
+
+  .brandColumn {
+    grid-column: 1 / -1;
+  }
+
+  .tagline {
+    max-width: 420px;
+  }
+}
+
+@media (max-width: 768px) {
+  .footer {
+    padding: 3rem 0 1.5rem;
+    margin-top: 3rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.75rem;
+  }
+
+  .brandColumn {
+    grid-column: 1 / -1;
+  }
+
+  .bottom {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .linkColumn {
+    gap: 0.75rem;
+  }
+
+  .columnTitle {
+    font-size: 0.75rem;
+  }
+
+  .link {
+    font-size: 0.85rem;
+  }
+
+  .tagline {
+    font-size: 0.85rem;
+  }
+
+  .bottom {
+    margin-top: 2rem;
+  }
+}
+
+[data-theme='dark'] .socialLink {
+  background: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .socialLink:hover {
+  background: rgba(30, 144, 255, 0.1);
+  border-color: var(--ifm-color-primary);
+}
diff --git a/website/src/theme/MDXComponents/index.tsx b/website/src/theme/MDXComponents/index.tsx
new file mode 100644
index 00000000..ffdc856f
--- /dev/null
+++ b/website/src/theme/MDXComponents/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import { CodeTabs, TabsList, TabsTrigger, TabsContent } from '@site/src/components/CodeTabs';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@site/src/components/ui/card';
+import { DocsHero } from '@site/src/components/DocsHero';
+import { NetworkStatusWidget } from '@site/src/components/NetworkStatusWidget';
+import { GasFeeCalculator } from '@site/src/components/GasFeeCalculator';
+import { StakingCalculator } from '@site/src/components/StakingCalculator';
+import { ConsensusVisualizer } from '@site/src/components/ConsensusVisualizer';
+import { TransactionLifecycle } from '@site/src/components/TransactionLifecycle';
+import { CodeSnippetSwitcher } from '@site/src/components/CodeSnippetSwitcher';
+import { ArchitectureLayers } from '@site/src/components/ArchitectureLayers';
+import { BridgeVisualizer } from '@site/src/components/BridgeVisualizer';
+
+export default {
+  ...MDXComponents,
+  CodeTabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  DocsHero,
+  NetworkStatusWidget,
+  GasFeeCalculator,
+  StakingCalculator,
+  ConsensusVisualizer,
+  TransactionLifecycle,
+  CodeSnippetSwitcher,
+  ArchitectureLayers,
+  BridgeVisualizer,
+};
diff --git a/website/src/theme/Navbar/index.tsx b/website/src/theme/Navbar/index.tsx
new file mode 100644
index 00000000..d71c3dff
--- /dev/null
+++ b/website/src/theme/Navbar/index.tsx
@@ -0,0 +1,532 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useThemeConfig, useColorMode } from '@docusaurus/theme-common';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Menu, X, Bot, Search, Moon, Sun, Command, Clock, ArrowRight } from 'lucide-react';
+import * as lunr from 'lunr';
+import { useScrollProgress } from '@site/src/hooks/useCountUp';
+import { AIChatbot } from '@site/src/components/AIChatbot';
+import styles from './styles.module.css';
+
+const RECENT_SEARCHES_KEY = 'xdc-docs-recent-searches';
+const MAX_RECENTS = 5;
+
+function getRecentSearches(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(RECENT_SEARCHES_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentSearch(query: string) {
+  try {
+    const q = query.trim();
+    if (!q) return;
+    const existing = getRecentSearches().filter(r => r !== q);
+    const updated = [q, ...existing].slice(0, MAX_RECENTS);
+    localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+  } catch {
+    // ignore
+  }
+}
+
+/** Bold-highlight matched query terms in a string */
+function HighlightMatch({ text, query }: { text: string; query: string }) {
+  if (!query.trim()) return <>{text}</>;
+  const terms = query.trim().split(/\s+/).filter(Boolean);
+  const pattern = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
+  const parts = text.split(pattern);
+  return (
+    <>
+      {parts.map((part, i) =>
+        pattern.test(part) ? (
+          <mark key={i} className={styles.searchHighlight}>{part}</mark>
+        ) : (
+          <React.Fragment key={i}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  );
+}
+
+interface SearchDoc {
+  title: string;
+  url: string;
+  content?: string;
+  pageTitle?: string;
+}
+
+function cleanTitle(title?: string) {
+  if (!title) return '';
+  return title.replace(/[\uFFFD\u001A]/g, '').replace(/\s+/g, ' ').trim();
+}
+
+function idToTitle(id: string) {
+  const last = id.split('/').pop() || id;
+  return last
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase())
+    .trim();
+}
+
+function buildDevDocs(allDocs: ReturnType<typeof useAllDocsData>): SearchDoc[] {
+  const out: SearchDoc[] = [];
+  Object.values(allDocs).forEach(plugin => {
+    plugin.versions.forEach(version => {
+      version.docs.forEach(doc => {
+        if (!doc.unlisted) {
+          out.push({
+            title: idToTitle(doc.id),
+            url: doc.path,
+            content: '',
+          });
+        }
+      });
+    });
+  });
+  return out;
+}
+
+export default function Navbar() {
+  const { navbar } = useThemeConfig();
+  const { colorMode, setColorMode } = useColorMode();
+  const { siteConfig } = useDocusaurusContext();
+  const pluginData = usePluginData('docusaurus-lunr-search') as { fileNames?: { searchDoc?: string; lunrIndex?: string } } | undefined;
+  const allDocs = useAllDocsData();
+  const [aiOpen, setAiOpen] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchDoc[]>([]);
+  const [selected, setSelected] = useState(0);
+  const [docs, setDocs] = useState<SearchDoc[]>([]);
+  const [index, setIndex] = useState<lunr.Index | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isDevFallback, setIsDevFallback] = useState(false);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+  const [navHidden, setNavHidden] = useState(false);
+  const [navVisible, setNavVisible] = useState(true);
+  const [secondaryHidden, setSecondaryHidden] = useState(false);
+  const [secondaryVisible, setSecondaryVisible] = useState(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const lastScrollY = useRef(0);
+  const scrollProgress = useScrollProgress();
+
+  const baseUrl = siteConfig?.baseUrl || '/';
+  const searchDocFile = pluginData?.fileNames?.searchDoc;
+  const lunrIndexFile = pluginData?.fileNames?.lunrIndex;
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setIsDevFallback(false);
+
+    async function load() {
+      const candidates = [
+        { searchDoc: 'search-doc.json', lunrIndex: 'lunr-index.json' },
+        ...(searchDocFile && lunrIndexFile
+          ? [{ searchDoc: searchDocFile, lunrIndex: lunrIndexFile }]
+          : []),
+      ];
+
+      let lastErr: Error | undefined;
+      for (const names of candidates) {
+        try {
+          const [searchRes, indexRes] = await Promise.all([
+            fetch(`${baseUrl}${names.searchDoc}`.replace(/\/{2,}/g, '/')),
+            fetch(`${baseUrl}${names.lunrIndex}`.replace(/\/{2,}/g, '/')),
+          ]);
+          if (!searchRes.ok || !indexRes.ok) {
+            throw new Error(`status ${searchRes.status}/${indexRes.status}`);
+          }
+          const docData = await searchRes.json();
+          const idxData = await indexRes.json();
+          const raw = Array.isArray(docData) ? docData : docData?.searchDocs ?? [];
+          const normalized = raw
+            .filter((doc: SearchDoc) => doc && (doc.url || doc.title || doc.pageTitle))
+            .map((doc: SearchDoc) => ({
+              ...doc,
+              title: cleanTitle(doc.title || doc.pageTitle),
+              content: doc.content || '',
+            }));
+          if (!cancelled) {
+            setDocs(normalized);
+            try {
+              setIndex(lunr.Index.load(idxData));
+            } catch (e) {
+              console.warn('[XDC Search] lunr.Index.load failed, using substring fallback', e);
+              setIndex(null);
+            }
+            setLoading(false);
+          }
+          return;
+        } catch (e) {
+          lastErr = e as Error;
+          console.warn(`[XDC Search] failed to load ${names.searchDoc}/${names.lunrIndex}:`, e);
+        }
+      }
+
+      console.warn('[XDC Search] using dev fallback (title-only search)');
+      const devDocs = buildDevDocs(allDocs);
+      if (!cancelled) {
+        setDocs(devDocs);
+        setIndex(null);
+        setIsDevFallback(true);
+        setLoading(false);
+      }
+    }
+
+    load();
+    return () => { cancelled = true; };
+  }, [baseUrl, searchDocFile, lunrIndexFile, allDocs]);
+
+  useEffect(() => {
+    const q = query.trim();
+    if (!q || !docs.length) {
+      setResults([]);
+      return;
+    }
+
+    let matches: SearchDoc[] = [];
+
+    if (index) {
+      try {
+        const lunrResults = index.search(q);
+        const seen = new Set<string>();
+        matches = [];
+        for (const res of lunrResults) {
+          const doc = docs[Number(res.ref)];
+          if (doc && !seen.has(doc.url)) {
+            seen.add(doc.url);
+            matches.push(doc);
+          }
+        }
+      } catch {
+        matches = [];
+      }
+    }
+
+    if (matches.length === 0) {
+      const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
+      const scored = docs
+        .map(doc => {
+          const title = (doc.title || '').toLowerCase();
+          const content = (doc.content || '').toLowerCase();
+          let score = 0;
+          for (const term of terms) {
+            if (title === term) score += 100;
+            else if (title.startsWith(term)) score += 50;
+            else if (title.includes(term)) score += 20;
+            else if (content.includes(term)) score += 5;
+          }
+          return { doc, score };
+        })
+        .filter(item => item.score > 0)
+        .sort((a, b) => b.score - a.score)
+        .slice(0, 15)
+        .map(item => item.doc);
+      matches = scored;
+    }
+
+    setResults(matches);
+    setSelected(0);
+  }, [query, docs, index]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setSearchOpen(open => !open);
+      }
+      if (e.shiftKey && e.key === 'K') {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+      if (e.key === 'Escape') {
+        setSearchOpen(false);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    let raf = 0;
+    const onScroll = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        const y = window.scrollY;
+        const delta = y - lastScrollY.current;
+        if (y < 80) {
+          setNavHidden(false);
+          setNavVisible(true);
+          setSecondaryHidden(false);
+          setSecondaryVisible(true);
+        } else if (delta > 8) {
+          setNavHidden(true);
+          setNavVisible(false);
+          setSecondaryHidden(true);
+          setSecondaryVisible(false);
+        } else if (delta < -8) {
+          setNavHidden(false);
+          setNavVisible(true);
+          setSecondaryHidden(false);
+          setSecondaryVisible(true);
+        }
+        lastScrollY.current = y;
+        raf = 0;
+      });
+    };
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (searchOpen) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setRecentSearches(getRecentSearches());
+    } else {
+      setQuery('');
+      setResults([]);
+      setSelected(0);
+    }
+  }, [searchOpen]);
+
+  const handleResultClick = useCallback((url: string, title: string) => {
+    saveRecentSearch(title || url);
+    setRecentSearches(getRecentSearches());
+    setSearchOpen(false);
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelected(i => (i + 1) % Math.max(results.length, 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelected(i => (i - 1 + Math.max(results.length, 1)) % Math.max(results.length, 1));
+    } else if (e.key === 'Enter' && results[selected]) {
+      e.preventDefault();
+      window.location.href = results[selected].url;
+      setSearchOpen(false);
+    }
+  };
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SearchDoc[]>();
+    results.forEach(r => {
+      const section = r.url.split('/')[1] || 'Other';
+      if (!map.has(section)) map.set(section, []);
+      map.get(section)!.push(r);
+    });
+    return map;
+  }, [results]);
+
+  const navLinks = [
+    { to: '/learn', label: 'Learn' },
+    { to: '/xdcchain', label: 'XDC Chain' },
+    { to: '/subnet', label: 'XDC Subnet' },
+    { to: '/enterprise', label: 'Enterprise' },
+    { to: '/interoperability/', label: 'Interoperability' },
+    { to: '/api', label: 'API Reference' },
+    { to: '/smartcontract', label: 'Smart Contract Developments' },
+    { to: '/security', label: 'Security' },
+  ];
+
+  return (
+    <>
+      <AIChatbot open={aiOpen} onClose={() => setAiOpen(false)} />
+
+      <div className={styles.scrollProgress} aria-hidden="true">
+        <div className={styles.scrollProgressBar} style={{ transform: `scaleX(${scrollProgress})` }} />
+      </div>
+
+      <nav className={`${styles.topNavbar} navbar ${navHidden ? styles.topNavbarHidden : ''} ${navVisible ? styles.topNavbarVisible : ''}`} aria-label="Main">
+        <div className={styles.topNavbarInner}>
+          <Link to="/" className={styles.logo}>
+            <img
+              src={useBaseUrl(colorMode === 'dark' ? navbar.logo?.srcDark : navbar.logo?.src)}
+              alt={navbar.logo?.alt || 'XDC Network'}
+              className={styles.logoImg}
+            />
+          </Link>
+
+          <div className={styles.topRight}>
+            <button
+              className={styles.aiButton}
+              onClick={() => setAiOpen(true)}
+              aria-label="AI Chatbot"
+            >
+              <Bot className={styles.iconSize} />
+            </button>
+
+            <div className={styles.searchBox} onClick={() => setSearchOpen(true)}>
+              <Search className={styles.searchIcon} />
+              <span>Search</span>
+              <kbd className={styles.searchShortcut}>
+                <Command className={styles.kbdIcon} />K
+              </kbd>
+            </div>
+
+            <button
+              className={styles.themeToggle}
+              onClick={() => {
+                const html = document.documentElement;
+                html.classList.add('theme-transition');
+                setTimeout(() => html.classList.remove('theme-transition'), 300);
+                setColorMode(colorMode === 'dark' ? 'light' : 'dark');
+              }}
+              aria-label="Toggle dark mode"
+            >
+              {colorMode === 'dark' ? (
+                <Sun className={styles.iconSize} />
+              ) : (
+                <Moon className={styles.iconSize} />
+              )}
+            </button>
+
+            <button
+              className={styles.mobileMenuButton}
+              onClick={() => setMobileMenuOpen(o => !o)}
+              aria-label="Toggle navigation menu"
+              aria-expanded={mobileMenuOpen}
+            >
+              {mobileMenuOpen ? <X className={styles.iconSize} /> : <Menu className={styles.iconSize} />}
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <nav
+        className={`${styles.secondaryNavbar} ${secondaryHidden ? styles.secondaryNavbarHidden : ''} ${secondaryVisible ? styles.secondaryNavbarVisible : ''}`}
+        aria-label="Sections"
+      >
+        <div className={styles.secondaryNavbarInner}>
+          {navLinks.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={styles.navLink}
+              activeClassName={styles.navLinkActive}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </nav>
+
+      {mobileMenuOpen && (
+        <div className={styles.mobileMenu}>
+          {navLinks.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={styles.mobileNavLink}
+              activeClassName={styles.mobileNavLinkActive}
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {searchOpen && (
+        <div className={styles.searchModal} onClick={() => setSearchOpen(false)}>
+          <div className={styles.searchModalContent} onClick={e => e.stopPropagation()}>
+            <div className={styles.searchInputWrapper}>
+              <Search className={styles.searchInputIcon} />
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Search documentation..."
+                className={styles.searchInput}
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                autoFocus
+                aria-label="Search documentation"
+              />
+              <kbd className={styles.searchEsc}>Esc</kbd>
+            </div>
+            <div className={styles.searchResults}>
+              {loading ? (
+                <p className={styles.searchPlaceholder}>Loading search index...</p>
+              ) : results.length === 0 && !query.trim() ? (
+                // Empty state: show recents if available
+                recentSearches.length > 0 ? (
+                  <div>
+                    <div className={styles.searchGroupTitle} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                      <Clock style={{ width: 11, height: 11 }} />
+                      Recent
+                    </div>
+                    {recentSearches.map((r, i) => (
+                      <button
+                        key={i}
+                        className={styles.recentItem}
+                        onClick={() => setQuery(r)}
+                      >
+                        <ArrowRight style={{ width: 12, height: 12, opacity: 0.5 }} />
+                        {r}
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <p className={styles.searchPlaceholder}>
+                    {isDevFallback
+                      ? 'Type to search titles (full search available in production build)'
+                      : 'Type to search docs...'}
+                  </p>
+                )
+              ) : results.length === 0 && query.trim() ? (
+                <div className={styles.searchEmpty}>
+                  <Search style={{ width: 28, height: 28, opacity: 0.25, marginBottom: '0.75rem' }} />
+                  <p style={{ margin: 0, fontSize: '0.9rem' }}>No results for <strong>&ldquo;{query}&rdquo;</strong></p>
+                  <p style={{ margin: '0.35rem 0 0', fontSize: '0.8rem', opacity: 0.6 }}>Try different keywords or explore the sidebar.</p>
+                </div>
+              ) : (
+                <div className={styles.searchResultsList}>
+                  {Array.from(grouped.entries()).map(([section, items]) => (
+                    <div key={section} className={styles.searchGroup}>
+                      <div className={styles.searchGroupTitle}>{section.replace(/-/g, ' ')}</div>
+                      {items.map((r, idx) => {
+                        const globalIndex = results.indexOf(r);
+                        const snippet = r.content
+                          ? r.content.slice(0, 110).replace(/\s+/g, ' ')
+                          : '';
+                        return (
+                          <Link
+                            key={idx}
+                            to={r.url}
+                            className={`${styles.searchResult} ${globalIndex === selected ? styles.searchResultSelected : ''}`}
+                            onClick={() => handleResultClick(r.url, r.title)}
+                          >
+                            <div className={styles.searchResultTitle}>
+                              <HighlightMatch text={r.title || r.url} query={query} />
+                            </div>
+                            {snippet && (
+                              <div className={styles.searchResultSnippet}>{snippet}...</div>
+                            )}
+                            <div className={styles.searchResultUrl}>{r.url}</div>
+                          </Link>
+                        );
+                      })}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/website/src/theme/Navbar/styles.module.css b/website/src/theme/Navbar/styles.module.css
new file mode 100644
index 00000000..7b755405
--- /dev/null
+++ b/website/src/theme/Navbar/styles.module.css
@@ -0,0 +1,606 @@
+.topNavbar {
+  background: var(--ifm-navbar-background-color);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  padding: 0 1.25rem;
+  height: 64px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
+  transform: translateY(0);
+}
+
+.topNavbarHidden {
+  transform: translateY(-100%);
+}
+
+.topNavbarVisible {
+  transform: translateY(0);
+}
+
+.scrollProgress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 201;
+  background: transparent;
+  pointer-events: none;
+}
+
+.scrollProgressBar {
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(90deg, var(--ifm-color-primary), #4ba6ff, #8ec5ff);
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform 0.1s linear;
+}
+
+.topNavbarInner {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+  color: var(--ifm-navbar-link-color);
+  margin-right: auto;
+}
+
+.logoImg {
+  height: 36px;
+  width: auto;
+  max-width: 140px;
+  object-fit: contain;
+}
+
+.topRight {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+.iconSize {
+  width: 18px;
+  height: 18px;
+}
+
+.aiButton,
+.themeToggle,
+.mobileMenuButton {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  border: none;
+  background: transparent;
+  color: var(--ifm-color-emphasis-800);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 9999px;
+  transition: all 0.15s ease;
+}
+
+@media (min-width: 641px) {
+  .aiButton,
+  .themeToggle,
+  .mobileMenuButton {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.aiButton:hover,
+.themeToggle:hover,
+.mobileMenuButton:hover {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+}
+
+.aiButton:active,
+.themeToggle:active,
+.mobileMenuButton:active {
+  transform: scale(0.95);
+}
+
+.mobileMenuButton {
+  display: none;
+}
+
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 9999px;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 220px;
+  position: relative;
+  overflow: hidden;
+}
+
+.searchBox:hover {
+  border-color: var(--ifm-color-emphasis-500);
+  box-shadow: var(--shadow-xs);
+}
+
+.searchBox span {
+  font-weight: 400;
+  flex: 1;
+}
+
+.searchIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.searchShortcut {
+  margin-left: auto;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.7rem;
+  font-family: var(--ifm-font-family-monospace);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.kbdIcon {
+  width: 10px;
+  height: 10px;
+}
+
+.secondaryNavbar {
+  background: var(--ifm-navbar-background-color);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  padding: 0 1.25rem;
+  height: 48px;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  right: 0;
+  z-index: 199;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  transform: translateY(0);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+}
+
+.secondaryNavbarHidden {
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.secondaryNavbarVisible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.secondaryNavbarInner {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.secondaryNavbarInner::-webkit-scrollbar {
+  display: none;
+}
+
+.navLink {
+  color: var(--ifm-color-emphasis-700);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.85rem;
+  padding: 0.45rem 0.875rem;
+  border-radius: 9999px;
+  position: relative;
+  transition: color 0.15s ease, background 0.15s ease;
+  white-space: nowrap;
+}
+
+.navLink:hover {
+  color: var(--ifm-font-color-base);
+  background: var(--ifm-color-emphasis-100);
+}
+
+.navLinkActive {
+  color: var(--ifm-font-color-base);
+  background: transparent;
+  font-weight: 600;
+}
+
+.navLinkActive::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 0.875rem;
+  right: 0.875rem;
+  height: 2px;
+  background: var(--ifm-color-primary);
+  border-radius: 2px;
+  animation: underlineGrow 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes underlineGrow {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.mobileMenu {
+  position: fixed;
+  top: 112px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ifm-background-color);
+  z-index: 198;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  animation: mobileSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes mobileSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.mobileNavLink {
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1rem;
+  padding: 0.875rem 1rem;
+  min-height: 48px;
+  border-radius: 12px;
+  transition: all 0.15s ease;
+}
+
+.mobileNavLink:hover {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-primary);
+}
+
+.mobileNavLinkActive {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+.searchModal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12vh 1rem 1rem;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.searchModalContent {
+  background: var(--ifm-background-color);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 640px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  overflow: hidden;
+  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.searchInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.searchInputIcon {
+  width: 18px;
+  height: 18px;
+  color: var(--ifm-color-emphasis-600);
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--ifm-font-color-base);
+  font-size: 1rem;
+  outline: none;
+  padding: 0.25rem 0;
+}
+
+.searchInput::placeholder {
+  color: var(--ifm-color-emphasis-600);
+}
+
+.searchEsc {
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.75rem;
+  font-family: var(--ifm-font-family-monospace);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.searchResults {
+  padding: 1rem;
+  min-height: 200px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.searchPlaceholder {
+  text-align: center;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.9rem;
+  padding: 2rem 0;
+}
+
+.searchResultsList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.searchGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.searchGroupTitle {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ifm-color-emphasis-600);
+  padding: 0 0.5rem;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.searchResult {
+  display: block;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--ifm-font-color-base);
+  transition: background 0.15s ease;
+}
+
+.searchResult:hover,
+.searchResultSelected {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.searchResultTitle {
+  font-weight: 500;
+  font-size: 0.95rem;
+  margin-bottom: 0.15rem;
+}
+
+.searchResultUrl {
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-600);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  min-width: 0;
+}
+
+.searchResultSnippet {
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-700);
+  margin: 0.15rem 0 0.25rem;
+  line-height: 1.4;
+}
+
+/* Highlighted query match */
+.searchHighlight {
+  background: transparent;
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+  padding: 0;
+}
+
+/* Recent search item */
+.recentItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.875rem;
+  text-align: left;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.recentItem:hover {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+}
+
+/* Empty / no-results state */
+.searchEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1rem;
+  text-align: center;
+  color: var(--ifm-font-color-base);
+}
+
+.navbar {
+  display: none !important;
+}
+
+.main-wrapper {
+  padding-top: 0 !important;
+}
+
+@media (max-width: 768px) {
+  .topNavbar {
+    height: 56px;
+  }
+
+  .secondaryNavbar {
+    top: 56px;
+  }
+
+  .searchBox {
+    min-width: auto;
+    padding: 0.5rem;
+    border-radius: 9999px;
+  }
+
+  .searchBox span,
+  .searchShortcut {
+    display: none;
+  }
+
+  .secondaryNavbar {
+    display: none;
+  }
+
+  .mobileMenuButton {
+    display: flex;
+  }
+
+  .mobileMenu {
+    top: 56px;
+    height: 100dvh;
+    height: 100vh;
+    padding-bottom: 2rem;
+  }
+
+  .searchModal {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .searchModalContent {
+    max-height: 85vh;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(100%); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
+
+@media (max-width: 480px) {
+  .topNavbar {
+    padding: 0 0.75rem;
+  }
+
+  .logoImg {
+    height: 30px;
+    max-width: 120px;
+  }
+
+  .aiButton,
+  .themeToggle,
+  .mobileMenuButton {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .iconSize {
+    width: 18px;
+    height: 18px;
+  }
+
+  .topRight {
+    gap: 0.35rem;
+  }
+}
+
+@media (max-width: 360px) {
+  .topNavbar {
+    padding: 0 0.5rem;
+  }
+
+  .logoImg {
+    height: 26px;
+    max-width: 100px;
+  }
+
+  .searchBox {
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    padding: 0;
+  }
+}
diff --git a/website/src/theme/Root.tsx b/website/src/theme/Root.tsx
new file mode 100644
index 00000000..3997ec8a
--- /dev/null
+++ b/website/src/theme/Root.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { NoiseOverlay } from '@site/src/components/NoiseOverlay';
+import { ScrollProgress } from '@site/src/components/ScrollProgress';
+import { ScrollToTop } from '@site/src/components/ScrollToTop';
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ScrollProgress />
+      <NoiseOverlay />
+      {children}
+      <ScrollToTop />
+    </>
+  );
+}