From a15e9c4c1853b2cd4822330eb8a594f5bcb376a4 Mon Sep 17 00:00:00 2001
From: Rahul Kumar <rahulkr3960@gmail.com>
Date: Tue, 14 Apr 2026 08:07:49 +0530
Subject: [PATCH 1/2] navlinked

---
 website/docs/.vitepress/theme/components/NavBar.vue    |  8 +++++---
 .../theme/components/landing/LandingFooter.vue         | 10 +++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/website/docs/.vitepress/theme/components/NavBar.vue b/website/docs/.vitepress/theme/components/NavBar.vue
index 4774078..9c4d5ca 100644
--- a/website/docs/.vitepress/theme/components/NavBar.vue
+++ b/website/docs/.vitepress/theme/components/NavBar.vue
@@ -13,9 +13,9 @@ const { isDark } = useData()
 const mobileMenuOpen = ref(false)
 
 const navLinks = [
-  { text: 'Docs', href: '/docs/getting-started/' },
-  { text: 'Packages', href: '/packages/' },
-  { text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang' },
+  { text: 'Docs', href: '/docs/getting-started/', target: '_self' },
+  { text: 'Packages', href: 'https://packages.meshlang.dev', target: '_blank' },
+  { text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang', target: '_blank' },
 ]
 </script>
 
@@ -66,6 +66,7 @@ const navLinks = [
         </a>
         <a
           href="https://github.com/hyperpush-org/mesh-lang"
+          target="_blank"
           class="pointer-events-auto rounded-md px-3 py-1.5 text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
         >
           GitHub
@@ -89,6 +90,7 @@ const navLinks = [
           v-for="link in navLinks"
           :key="link.href"
           :href="link.href"
+          :target="link.target"
           class="flex items-center rounded-md px-3 py-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
           @click="mobileMenuOpen = false"
         >
diff --git a/website/docs/.vitepress/theme/components/landing/LandingFooter.vue b/website/docs/.vitepress/theme/components/landing/LandingFooter.vue
index c4fac6c..784bee9 100644
--- a/website/docs/.vitepress/theme/components/landing/LandingFooter.vue
+++ b/website/docs/.vitepress/theme/components/landing/LandingFooter.vue
@@ -19,9 +19,9 @@ const features = [
 ]
 
 const community = [
-  { label: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang' },
-  { label: 'Discussions', href: 'https://github.com/hyperpush-org/mesh-lang/discussions' },
-  { label: 'Packages', href: '/packages/' },
+  { label: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang', target:'_blank' },
+  { label: 'Discussions', href: 'https://github.com/hyperpush-org/mesh-lang/discussions', target: '_blank' },
+  { label: 'Packages', href: 'https://packages.meshlang.dev', target: '_blank' },
 ]
 </script>
 
@@ -72,8 +72,8 @@ const community = [
         <div>
           <h3 class="text-xs font-semibold text-foreground uppercase tracking-wider">Community</h3>
           <ul class="mt-4 space-y-2.5">
-            <li v-for="link in community" :key="link.href">
-              <a :href="link.href" class="text-sm text-muted-foreground transition-colors hover:text-foreground">
+            <li v-for="link in community" :key="link.href" >
+              <a :href="link.href" :target="link.target" class="text-sm text-muted-foreground transition-colors hover:text-foreground">
                 {{ link.label }}
               </a>
             </li>

From c9f44d8a0029b592a64c0538b31e6bbff8f32b5e Mon Sep 17 00:00:00 2001
From: Rahul Kumar <rahulkr3960@gmail.com>
Date: Tue, 14 Apr 2026 08:33:38 +0530
Subject: [PATCH 2/2] improved reponsivness

---
 .../theme/components/docs/MobileSidebar.vue   | 28 +++++++++-
 .../components/landing/BenchmarkSection.vue   | 48 ++++++++---------
 .../components/landing/FeatureShowcase.vue    |  8 +--
 .../components/landing/GetStartedCTA.vue      | 14 ++---
 .../theme/components/landing/HeroSection.vue  | 54 ++++++++++++-------
 .../theme/composables/useSidebar.ts           | 22 +++++---
 6 files changed, 111 insertions(+), 63 deletions(-)

diff --git a/website/docs/.vitepress/theme/components/docs/MobileSidebar.vue b/website/docs/.vitepress/theme/components/docs/MobileSidebar.vue
index 436ad90..1513142 100644
--- a/website/docs/.vitepress/theme/components/docs/MobileSidebar.vue
+++ b/website/docs/.vitepress/theme/components/docs/MobileSidebar.vue
@@ -8,13 +8,37 @@ defineProps<{
 }>()
 
 const { isOpen } = useSidebar()
+
+const quickLinks = [
+  { text: 'Main Page', href: '/', target: '_self' },
+  { text: 'Packages', href: 'https://packages.meshlang.dev', target: '_blank' },
+  { text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang', target: '_blank' },
+]
 </script>
 
 <template>
   <Sheet v-model:open="isOpen">
-    <SheetContent side="left" class="w-72 p-0">
+    <SheetContent side="left" class="flex h-full w-72 flex-col overflow-hidden p-0">
       <SheetTitle class="sr-only">Navigation</SheetTitle>
-      <DocsSidebar :items="items" />
+      <div class="border-b border-border px-4 py-4">
+        <div class="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">Quick Links</div>
+        <nav class="mt-2 flex flex-col gap-1">
+          <a
+            v-for="link in quickLinks"
+            :key="link.href"
+            :href="link.href"
+            :target="link.target"
+            :rel="link.target === '_blank' ? 'noreferrer noopener' : undefined"
+            class="rounded-md px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            @click="isOpen = false"
+          >
+            {{ link.text }}
+          </a>
+        </nav>
+      </div>
+      <div class="min-h-0 flex-1">
+        <DocsSidebar :items="items" />
+      </div>
     </SheetContent>
   </Sheet>
 </template>
diff --git a/website/docs/.vitepress/theme/components/landing/BenchmarkSection.vue b/website/docs/.vitepress/theme/components/landing/BenchmarkSection.vue
index 5834f9e..0fb4d55 100644
--- a/website/docs/.vitepress/theme/components/landing/BenchmarkSection.vue
+++ b/website/docs/.vitepress/theme/components/landing/BenchmarkSection.vue
@@ -84,11 +84,11 @@ onMounted(() => {
       </div>
 
       <!-- Tab switcher -->
-      <div class="mt-12 flex items-center justify-center">
-        <div class="inline-flex rounded-lg border border-border bg-card p-1 gap-1">
+      <div class="mt-10 flex items-center justify-center sm:mt-12">
+        <div class="grid w-full max-w-md grid-cols-3 rounded-lg border border-border bg-card p-1 gap-1">
           <button
             @click="activeTab = 'throughput'"
-            class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
+            class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
             :class="activeTab === 'throughput' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
           >
             <Server class="size-3.5" />
@@ -96,7 +96,7 @@ onMounted(() => {
           </button>
           <button
             @click="activeTab = 'latency'"
-            class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
+            class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
             :class="activeTab === 'latency' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
           >
             <Clock class="size-3.5" />
@@ -104,7 +104,7 @@ onMounted(() => {
           </button>
           <button
             @click="activeTab = 'memory'"
-            class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
+            class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
             :class="activeTab === 'memory' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
           >
             <Cpu class="size-3.5" />
@@ -114,7 +114,7 @@ onMounted(() => {
       </div>
 
       <!-- Throughput chart -->
-      <div v-show="activeTab === 'throughput'" class="mt-10">
+      <div v-show="activeTab === 'throughput'" class="mt-8 sm:mt-10">
         <div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
           <div class="flex items-baseline justify-between mb-8">
             <div>
@@ -128,10 +128,10 @@ onMounted(() => {
 
           <div class="space-y-5">
             <div v-for="(item, index) in throughputData" :key="item.lang" class="group">
-              <div class="flex items-center gap-4">
-                <div class="w-16 shrink-0 text-right">
+              <div class="flex items-center gap-2 sm:gap-4">
+                <div class="w-12 shrink-0 text-right sm:w-16">
                   <span
-                    class="text-sm font-semibold"
+                    class="text-xs font-semibold sm:text-sm"
                     :class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
                   >{{ item.lang }}</span>
                 </div>
@@ -161,9 +161,9 @@ onMounted(() => {
                   />
                 </div>
 
-                <div class="w-20 shrink-0 text-right">
+                <div class="w-16 shrink-0 text-right sm:w-20">
                   <span
-                    class="text-sm font-mono font-bold tabular-nums"
+                    class="text-xs font-mono font-bold tabular-nums sm:text-sm"
                     :class="[
                       item.highlight ? 'text-foreground' : 'text-muted-foreground',
                       barsVisible ? 'counter-animated' : 'opacity-0',
@@ -178,7 +178,7 @@ onMounted(() => {
       </div>
 
       <!-- Latency chart -->
-      <div v-show="activeTab === 'latency'" class="mt-10">
+      <div v-show="activeTab === 'latency'" class="mt-8 sm:mt-10">
         <div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
           <div class="flex items-baseline justify-between mb-8">
             <div>
@@ -192,21 +192,21 @@ onMounted(() => {
 
           <div class="space-y-6">
             <div v-for="item in latencyData" :key="item.lang" class="group">
-              <div class="flex items-center gap-4 mb-1.5">
-                <div class="w-16 shrink-0 text-right">
+              <div class="mb-1.5 flex items-center gap-2 sm:gap-4">
+                <div class="w-12 shrink-0 text-right sm:w-16">
                   <span
-                    class="text-sm font-semibold"
+                    class="text-xs font-semibold sm:text-sm"
                     :class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
                   >{{ item.lang }}</span>
                 </div>
                 <div class="flex-1" />
-                <div class="shrink-0 flex items-center gap-4 text-xs font-mono tabular-nums">
+                <div class="shrink-0 flex items-center gap-2 text-[11px] font-mono tabular-nums sm:gap-4 sm:text-xs">
                   <span class="text-muted-foreground">p50 <strong :style="{ color: item.highlight ? 'var(--foreground)' : item.textColor }">{{ item.p50 }}ms</strong></span>
                   <span class="text-muted-foreground">p99 <strong :style="{ color: item.highlight ? 'var(--foreground)' : item.textColor }">{{ item.p99 }}ms</strong></span>
                 </div>
               </div>
-              <div class="flex items-center gap-4">
-                <div class="w-16 shrink-0" />
+              <div class="flex items-center gap-2 sm:gap-4">
+                <div class="w-12 shrink-0 sm:w-16" />
                 <div class="flex-1 relative h-3 rounded-full bg-muted/50 overflow-hidden">
                   <!-- p99 bar (background) -->
                   <div
@@ -233,7 +233,7 @@ onMounted(() => {
       </div>
 
       <!-- Memory chart -->
-      <div v-show="activeTab === 'memory'" class="mt-10">
+      <div v-show="activeTab === 'memory'" class="mt-8 sm:mt-10">
         <div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
           <div class="flex items-baseline justify-between mb-8">
             <div>
@@ -247,10 +247,10 @@ onMounted(() => {
 
           <div class="space-y-5">
             <div v-for="item in memoryData" :key="item.lang" class="group">
-              <div class="flex items-center gap-4">
-                <div class="w-16 shrink-0 text-right">
+              <div class="flex items-center gap-2 sm:gap-4">
+                <div class="w-12 shrink-0 text-right sm:w-16">
                   <span
-                    class="text-sm font-semibold"
+                    class="text-xs font-semibold sm:text-sm"
                     :class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
                   >{{ item.lang }}</span>
                 </div>
@@ -266,9 +266,9 @@ onMounted(() => {
                   />
                 </div>
 
-                <div class="w-16 shrink-0 text-right">
+                <div class="w-14 shrink-0 text-right sm:w-16">
                   <span
-                    class="text-sm font-mono font-bold tabular-nums"
+                    class="text-xs font-mono font-bold tabular-nums sm:text-sm"
                     :class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
                   >{{ item.value }} MB</span>
                 </div>
diff --git a/website/docs/.vitepress/theme/components/landing/FeatureShowcase.vue b/website/docs/.vitepress/theme/components/landing/FeatureShowcase.vue
index 8cbb865..8c60489 100644
--- a/website/docs/.vitepress/theme/components/landing/FeatureShowcase.vue
+++ b/website/docs/.vitepress/theme/components/landing/FeatureShowcase.vue
@@ -129,7 +129,7 @@ onMounted(async () => {
           class="reveal grid items-center gap-10 lg:grid-cols-2 lg:gap-16"
         >
           <!-- Text -->
-          <div :class="{ 'lg:order-last': index % 2 === 1 }">
+          <div class="min-w-0" :class="{ 'lg:order-last': index % 2 === 1 }">
             <div class="flex items-center gap-3">
               <div class="font-mono text-sm font-bold text-muted-foreground/50">{{ feature.number }}</div>
               <div
@@ -150,7 +150,7 @@ onMounted(async () => {
           </div>
 
           <!-- Code block -->
-          <div v-if="!feature.visual" class="group overflow-hidden rounded-xl border border-border bg-card shadow-lg transition-shadow duration-300 hover:shadow-xl ring-1 ring-foreground/[0.03]">
+          <div v-if="!feature.visual" class="group min-w-0 w-full max-w-full overflow-hidden rounded-xl border border-border bg-card shadow-lg transition-shadow duration-300 hover:shadow-xl ring-1 ring-foreground/[0.03]">
             <!-- Terminal chrome -->
             <div class="flex items-center gap-2 border-b border-border px-4 py-3 bg-muted/30">
               <div class="flex gap-1.5">
@@ -163,11 +163,11 @@ onMounted(async () => {
             <div
               v-if="highlighted[index]"
               v-html="highlighted[index]"
-              class="vp-code [&_pre]:p-5 [&_pre]:!bg-transparent [&_pre]:text-sm [&_pre]:leading-relaxed"
+              class="vp-code w-full max-w-full [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_pre]:p-4 sm:[&_pre]:p-5 [&_pre]:!bg-transparent [&_pre]:text-xs sm:[&_pre]:text-sm [&_pre]:leading-relaxed"
             />
             <pre
               v-else
-              class="overflow-x-auto p-5 text-sm leading-relaxed text-foreground font-mono"
+              class="max-w-full overflow-x-auto p-4 text-xs leading-relaxed text-foreground font-mono sm:p-5 sm:text-sm"
             ><code>{{ feature.code }}</code></pre>
           </div>
 
diff --git a/website/docs/.vitepress/theme/components/landing/GetStartedCTA.vue b/website/docs/.vitepress/theme/components/landing/GetStartedCTA.vue
index 4198f1e..3a18ce9 100644
--- a/website/docs/.vitepress/theme/components/landing/GetStartedCTA.vue
+++ b/website/docs/.vitepress/theme/components/landing/GetStartedCTA.vue
@@ -40,17 +40,17 @@ onMounted(() => {
       <h2 class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl">
         Start building your distributed system
       </h2>
-      <p class="mt-4 text-lg text-muted-foreground">
+      <p class="mt-4 text-base text-muted-foreground sm:text-lg">
         Install Mesh in seconds. Works on macOS, Linux, and Windows.
       </p>
 
       <!-- Install command -->
-      <div class="mx-auto mt-8 flex max-w-xl items-center gap-3 rounded-xl border border-border bg-card px-5 py-4 font-mono text-sm shadow-lg ring-1 ring-foreground/[0.03]">
+      <div class="mx-auto mt-8 flex max-w-xl flex-col items-start gap-3 rounded-xl border border-border bg-card px-4 py-4 font-mono text-sm shadow-lg ring-1 ring-foreground/[0.03] sm:flex-row sm:items-center sm:px-5">
         <span class="text-emerald-500 select-none font-bold">$</span>
-        <code class="flex-1 text-left text-foreground truncate">{{ installCommand }}</code>
+        <code class="flex-1 text-left text-foreground break-all sm:truncate">{{ installCommand }}</code>
         <button
           @click="copyCommand"
-          class="shrink-0 rounded-md p-1.5 text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
+          class="shrink-0 self-end rounded-md p-1.5 text-muted-foreground transition-all hover:bg-muted hover:text-foreground sm:self-auto"
           :title="copied ? 'Copied!' : 'Copy to clipboard'"
         >
           <Check v-if="copied" class="size-4 text-emerald-500" />
@@ -59,12 +59,12 @@ onMounted(() => {
       </div>
 
       <!-- CTA buttons -->
-      <div class="mt-8 flex items-center justify-center gap-3">
-        <Button as="a" href="/docs/getting-started/" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow">
+      <div class="mt-8 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
+        <Button as="a" href="/docs/getting-started/" size="lg" class="h-12 w-full px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow sm:w-auto">
           Get Started
           <ArrowRight class="ml-1.5 size-4" />
         </Button>
-        <Button as="a" href="/docs/distributed/" variant="outline" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold">
+        <Button as="a" href="/docs/distributed/" variant="outline" size="lg" class="h-12 w-full px-8 rounded-lg text-base font-semibold sm:w-auto">
           Distributed Docs
         </Button>
       </div>
diff --git a/website/docs/.vitepress/theme/components/landing/HeroSection.vue b/website/docs/.vitepress/theme/components/landing/HeroSection.vue
index 5589b0b..fc18868 100644
--- a/website/docs/.vitepress/theme/components/landing/HeroSection.vue
+++ b/website/docs/.vitepress/theme/components/landing/HeroSection.vue
@@ -36,15 +36,18 @@ onMounted(async () => {
 <template>
   <section class="relative overflow-x-clip">
     <!-- Layered background: radial vignette + subtle grid -->
-    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--border),transparent_70%)] opacity-60" />
-    <div class="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]" style="background-image: linear-gradient(var(--foreground) 1px, transparent 1px), linear-gradient(90deg, var(--foreground) 1px, transparent 1px); background-size: 48px 48px;" />
+    <div
+      class="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--border),transparent_70%)] opacity-60" />
+    <div class="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
+      style="background-image: linear-gradient(var(--foreground) 1px, transparent 1px), linear-gradient(90deg, var(--foreground) 1px, transparent 1px); background-size: 48px 48px;" />
 
-    <div class="relative mx-auto max-w-6xl px-6 pt-16 pb-20 md:pt-20 lg:pt-28 md:pb-28">
-      <div class="grid items-center gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
+    <div class="relative mx-auto w-full max-w-6xl px-3 pt-10 pb-14 sm:px-6 sm:pt-16 sm:pb-20 md:pt-20 md:pb-28 lg:pt-28">
+      <div class="grid items-center gap-8 sm:gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
         <!-- Left column: text -->
-        <div class="text-center lg:text-left animate-fade-in-up">
+        <div class="min-w-0 text-center animate-fade-in-up lg:text-left">
           <!-- Version badge -->
-          <div class="mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-card/80 backdrop-blur-sm px-3.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm">
+          <div
+            class="mb-6 inline-flex max-w-full flex-wrap items-center justify-center gap-2 rounded-full border border-border bg-card/80 px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground shadow-sm backdrop-blur-sm sm:mb-8 sm:px-3.5 sm:text-xs lg:justify-start">
             <span class="relative inline-flex size-2">
               <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500/50" />
               <span class="relative inline-block size-2 rounded-full bg-emerald-500" />
@@ -52,26 +55,32 @@ onMounted(async () => {
             Now in development &mdash; v{{ theme.meshVersion }}
           </div>
 
-          <h1 class="text-[1.75rem] font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-[4.25rem]" style="line-height: 1.1;">
+          <h1 class="text-[clamp(1.7rem,8vw,2.45rem)] font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-[4.25rem]"
+            style="line-height: 1.1; text-wrap: balance;">
             The language built for
-            <span class="relative inline-block">
+            <span class="relative mt-1 block sm:mt-0 sm:inline-block">
               distributed systems.
-              <svg class="absolute -bottom-1 left-0 w-full h-3 text-foreground/15" viewBox="0 0 200 12" preserveAspectRatio="none">
-                <path d="M0 9 Q50 0 100 7 Q150 14 200 5" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round"/>
+              <svg class="absolute -bottom-1 left-0 hidden h-3 w-full text-foreground/15 sm:block" viewBox="0 0 200 12"
+                preserveAspectRatio="none">
+                <path d="M0 9 Q50 0 100 7 Q150 14 200 5" stroke="currentColor" stroke-width="3" fill="none"
+                  stroke-linecap="round" />
               </svg>
             </span>
           </h1>
 
-          <p class="mx-auto mt-6 max-w-lg text-lg text-muted-foreground sm:text-xl lg:mx-0" style="line-height: 1.7;">
-            One annotation to distribute work across a fleet. Built-in failover, load balancing, and everything a server needs — no orchestration layer required.
+          <p class="mx-auto mt-5 max-w-lg text-base text-muted-foreground sm:mt-6 sm:text-xl lg:mx-0" style="line-height: 1.7;">
+            One annotation to distribute work across a fleet. Built-in failover, load balancing, and everything a server
+            needs — no orchestration layer required.
           </p>
 
-          <div class="mt-10 flex items-center justify-center gap-3 lg:justify-start">
-            <Button as="a" href="/docs/getting-started/" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow">
+          <div class="mt-8 flex flex-col items-stretch justify-center gap-3 sm:mt-10 sm:flex-row sm:items-center lg:justify-start">
+            <Button as="a" href="/docs/getting-started/" size="lg"
+              class="h-12 w-full px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow sm:w-auto">
               Get Started
               <ArrowRight class="ml-1.5 size-4" />
             </Button>
-            <Button as="a" href="https://github.com/hyperpush-org/mesh-lang" variant="outline" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold">
+            <Button as="a" href="https://github.com/hyperpush-org/mesh-lang" variant="outline" size="lg"
+              class="h-12 w-full px-8 rounded-lg text-base font-semibold sm:w-auto">
               <Github class="mr-1.5 size-4" />
               GitHub
             </Button>
@@ -79,9 +88,10 @@ onMounted(async () => {
         </div>
 
         <!-- Right column: code block -->
-        <div class="relative animate-fade-in-up" style="animation-delay: 200ms;">
+        <div class="relative min-w-0 w-full animate-fade-in-up" style="animation-delay: 200ms;">
           <!-- Terminal -->
-          <div class="relative overflow-hidden rounded-xl border border-border bg-card shadow-2xl ring-1 ring-foreground/[0.05]">
+          <div
+            class="relative w-full max-w-full overflow-hidden rounded-xl border border-border bg-card shadow-2xl ring-1 ring-foreground/[0.05]">
             <!-- Terminal header -->
             <div class="flex items-center gap-2 border-b border-border px-4 py-3 bg-muted/30">
               <div class="flex gap-1.5">
@@ -92,12 +102,16 @@ onMounted(async () => {
               <span class="ml-2 text-xs text-muted-foreground font-medium">clustered starter</span>
             </div>
             <!-- Code content -->
-            <div v-if="highlightedHtml" v-html="highlightedHtml" class="vp-code [&_pre]:px-5 [&_pre]:py-4 [&_pre]:!bg-transparent" />
-            <pre v-else class="overflow-x-auto px-5 py-4 text-sm leading-relaxed text-foreground font-mono"><code>{{ heroCode }}</code></pre>
+            <div v-if="highlightedHtml" v-html="highlightedHtml"
+              class="vp-code w-full max-w-full [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_pre]:px-4 [&_pre]:py-4 sm:[&_pre]:px-5 [&_pre]:!bg-transparent" />
+            <pre v-else
+              class="max-w-full overflow-x-auto px-4 py-4 text-xs leading-relaxed text-foreground font-mono sm:px-5 sm:text-sm"><code>{{ heroCode }}</code></pre>
           </div>
 
           <!-- Floating language tag -->
-          <div class="absolute -bottom-3 -right-3 md:-bottom-4 md:-right-4 rounded-lg border border-border bg-card px-3 py-1.5 shadow-lg text-xs font-mono text-muted-foreground animate-float" style="animation-delay: 1s;">
+          <div
+            class="absolute -bottom-2 right-2 hidden rounded-lg border border-border bg-card px-2.5 py-1 text-[11px] shadow-lg font-mono text-muted-foreground animate-float sm:block sm:-bottom-3 sm:-right-3 sm:px-3 sm:py-1.5 sm:text-xs md:-bottom-4 md:-right-4"
+            style="animation-delay: 1s;">
             .mpl
           </div>
         </div>
diff --git a/website/docs/.vitepress/theme/composables/useSidebar.ts b/website/docs/.vitepress/theme/composables/useSidebar.ts
index 6539a47..70dbd67 100644
--- a/website/docs/.vitepress/theme/composables/useSidebar.ts
+++ b/website/docs/.vitepress/theme/composables/useSidebar.ts
@@ -2,6 +2,9 @@ import { computed, ref, watch } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import { useMediaQuery } from '@vueuse/core'
 
+// Shared mobile sidebar state across NavBar, DocsLayout and MobileSidebar.
+const sharedSidebarOpen = ref(false)
+
 export interface SidebarItem {
   text?: string
   link?: string
@@ -16,7 +19,6 @@ export function useSidebar() {
   const { theme, page, frontmatter } = useData()
   const route = useRoute()
   const is960 = useMediaQuery('(min-width: 960px)')
-  const isOpen = ref(false)
 
   const sidebar = computed<SidebarItem[]>(() => {
     const sidebarConfig = theme.value.sidebar
@@ -44,21 +46,29 @@ export function useSidebar() {
   watch(
     () => route.path,
     () => {
-      isOpen.value = false
+      sharedSidebarOpen.value = false
     },
   )
 
   function open() {
-    isOpen.value = true
+    sharedSidebarOpen.value = true
   }
   function close() {
-    isOpen.value = false
+    sharedSidebarOpen.value = false
   }
   function toggle() {
-    isOpen.value ? close() : open()
+    sharedSidebarOpen.value ? close() : open()
   }
 
-  return { sidebar, hasSidebar, isOpen, is960, open, close, toggle }
+  return {
+    sidebar,
+    hasSidebar,
+    isOpen: sharedSidebarOpen,
+    is960,
+    open,
+    close,
+    toggle,
+  }
 }
 
 function ensureStartingSlash(path: string): string {