diff --git a/website/src/components/GetStarted.astro b/website/src/components/GetStarted.astro
new file mode 100644
index 00000000..f08c36a1
--- /dev/null
+++ b/website/src/components/GetStarted.astro
@@ -0,0 +1,18 @@
+---
+import InstallCommand from '@/components/ui/InstallCommand.astro';
+import SectionHeading from '@/components/ui/SectionHeading.astro';
+import type { GetStartedData } from '@/data/landing-page';
+
+type Props = GetStartedData;
+
+const { eyebrow, heading, description, install } = Astro.props;
+---
+
+<section id="get-started" class="relative scroll-mt-20 py-20 md:py-28" data-reveal aria-label="Quick Start">
+  <div class="mx-auto max-w-6xl px-5 md:px-8">
+    <SectionHeading align="center" eyebrow={eyebrow} heading={heading} subheading={description} />
+    <div class="mx-auto max-w-3xl">
+      <InstallCommand install={install} />
+    </div>
+  </div>
+</section>
diff --git a/website/src/components/Hero.astro b/website/src/components/Hero.astro
index 475cba07..7b3548c4 100644
--- a/website/src/components/Hero.astro
+++ b/website/src/components/Hero.astro
@@ -1,7 +1,6 @@
 ---
 import Contributors from '@/components/Contributors.astro';
 import Icon from '@/components/ui/Icon.astro';
-import InstallCommand from '@/components/ui/InstallCommand.astro';
 import LinkButton from '@/components/ui/LinkButton.astro';
 import type { GitHubContributor } from '@/lib/github';
 import { Code } from 'astro:components';
@@ -10,17 +9,10 @@ interface Props {
   badge?: string;
   title?: string;
   description?: string;
-  installCommands: {
-    posix: string;
-    windows: string;
-  };
-  installPlatformLabel: string;
-  posixInstallLabel: string;
-  windowsInstallLabel: string;
-  copyInstallCommandLabel: string;
-  copiedInstallCommandLabel: string;
   primaryHref: string;
   primaryLabel?: string;
+  secondaryHref?: string;
+  secondaryLabel?: string;
   contributorsLabel?: string;
   contributors?: GitHubContributor[];
 }
@@ -29,14 +21,10 @@ const {
   badge,
   title,
   description,
-  installCommands,
-  installPlatformLabel,
-  posixInstallLabel,
-  windowsInstallLabel,
-  copyInstallCommandLabel,
-  copiedInstallCommandLabel,
   primaryHref,
   primaryLabel,
+  secondaryHref,
+  secondaryLabel,
   contributorsLabel,
   contributors = [],
 }: Props = Astro.props;
@@ -61,136 +49,6 @@ class MyPlugin:
             prompt, model=state.get("model")
         )
         return reply.text`;
-
-const heroCodeScopes = {
-  keyword: [
-    'keyword.control',
-    'keyword.operator',
-    'storage.type',
-    'storage.modifier',
-    'keyword.other.unit.python',
-  ],
-  decorator: [
-    'entity.name.function.decorator',
-    'entity.name.function.decorator.python',
-    'meta.annotation',
-    'meta.annotation punctuation',
-  ],
-  functionName: [
-    'entity.name.function',
-    'meta.function.python entity.name.function.python',
-    'meta.function-call.generic.python',
-  ],
-  callable: [
-    'support.function',
-    'support.function.builtin',
-    'support.type.property-name',
-    'meta.function-call.python',
-  ],
-  parameter: [
-    'variable.parameter',
-    'variable.parameter.function.python',
-    'meta.function-call.arguments.python',
-  ],
-  string: [
-    'string',
-    'string.quoted',
-    'comment.block.documentation',
-    'punctuation.definition.string',
-  ],
-  punctuation: [
-    'punctuation',
-    'meta.brace',
-    'meta.delimiter',
-    'entity.name.type',
-  ],
-};
-
-function createHeroCodeTheme(name, type, palette) {
-  return {
-    name,
-    type,
-    colors: {
-      'editor.background': palette.background,
-      'editor.foreground': palette.foreground,
-    },
-    tokenColors: [
-      {
-        settings: {
-          foreground: palette.foreground,
-        },
-      },
-      {
-        scope: heroCodeScopes.keyword,
-        settings: {
-          foreground: palette.keyword,
-          fontStyle: 'italic',
-        },
-      },
-      {
-        scope: heroCodeScopes.decorator,
-        settings: {
-          foreground: palette.decorator,
-        },
-      },
-      {
-        scope: heroCodeScopes.functionName,
-        settings: {
-          foreground: palette.functionName,
-        },
-      },
-      {
-        scope: heroCodeScopes.callable,
-        settings: {
-          foreground: palette.callable,
-        },
-      },
-      {
-        scope: heroCodeScopes.parameter,
-        settings: {
-          foreground: palette.parameter,
-        },
-      },
-      {
-        scope: heroCodeScopes.string,
-        settings: {
-          foreground: palette.string,
-        },
-      },
-      {
-        scope: heroCodeScopes.punctuation,
-        settings: {
-          foreground: palette.punctuation,
-        },
-      },
-    ],
-  };
-}
-
-const heroCodeThemes = {
-  light: createHeroCodeTheme('bub-hero-light', 'light', {
-    background: '#F6F7F9',
-    foreground: '#403F53',
-    keyword: '#8844AE',
-    decorator: '#3B61B0',
-    functionName: '#3B61B0',
-    callable: '#096E72',
-    parameter: '#096E72',
-    string: '#984E4D',
-    punctuation: '#111111',
-  }),
-  dark: createHeroCodeTheme('bub-hero-dark', 'dark', {
-    background: '#252525',
-    foreground: '#D6DEEB',
-    keyword: '#C792EA',
-    decorator: '#C5E478',
-    functionName: '#82AAFF',
-    callable: '#B2CCD6',
-    parameter: '#7FDBCA',
-    string: '#ECC48D',
-    punctuation: '#D9F5DD',
-  }),
-};
 ---
 
 <section class="pb-20 pt-14 md:pb-28 md:pt-20" aria-label="Hero">
@@ -222,23 +80,16 @@ const heroCodeThemes = {
           </div>
         )}
 
-        <div class="mt-6 max-w-xl">
-          <InstallCommand
-            commands={installCommands}
-            platformLabel={installPlatformLabel}
-            posixLabel={posixInstallLabel}
-            windowsLabel={windowsInstallLabel}
-            copyLabel={copyInstallCommandLabel}
-            copiedLabel={copiedInstallCommandLabel}
-          />
-        </div>
-
         <!-- CTAs -->
-        <div class="mt-3 flex flex-col gap-3 sm:flex-row">
+        <div class="mt-8 flex flex-col gap-3 sm:flex-row">
           <LinkButton href={primaryHref} class="w-full px-6 py-3 sm:w-auto">
             {primaryLabel}
-            <Icon name="arrowUpRight" size={15} aria-hidden="true" />
           </LinkButton>
+          {secondaryHref && (
+            <LinkButton href={secondaryHref} variant="secondary" class="w-full px-6 py-3 sm:w-auto">
+              {secondaryLabel}
+            </LinkButton>
+          )}
         </div>
       </div>
 
@@ -252,10 +103,7 @@ const heroCodeThemes = {
             <Code
               code={exampleCode}
               lang="python"
-              themes={{
-                light: heroCodeThemes.light,
-                dark: heroCodeThemes.dark,
-              }}
+              themes={{ light: 'night-owl-light', dark: 'night-owl' }}
               defaultColor="light"
             />
           </figure>
diff --git a/website/src/components/ui/InstallCommand.astro b/website/src/components/ui/InstallCommand.astro
index d37d546a..9d4fa5b7 100644
--- a/website/src/components/ui/InstallCommand.astro
+++ b/website/src/components/ui/InstallCommand.astro
@@ -1,66 +1,64 @@
 ---
 import Icon from '@/components/ui/Icon.astro';
+import type { InstallCommandData } from '@/data/landing-page';
+import { Code } from 'astro:components';
 
 interface Props {
-  commands: {
-    posix: string;
-    windows: string;
-  };
-  platformLabel: string;
-  posixLabel: string;
-  windowsLabel: string;
-  copyLabel: string;
-  copiedLabel: string;
+  install: InstallCommandData;
 }
 
-const { commands, platformLabel, posixLabel, windowsLabel, copyLabel, copiedLabel } = Astro.props;
-const installOptions = [
-  { id: 'posix', label: posixLabel, command: commands.posix },
-  { id: 'windows', label: windowsLabel, command: commands.windows },
-];
+const { install } = Astro.props;
+const { platforms, copyLabel, copiedLabel } = install;
 ---
 
 <div
-  class="min-w-0 border border-border bg-card/80 shadow-[var(--site-shadow)]"
+  class="install-command min-w-0 border border-border bg-card text-left shadow-(--site-shadow)"
   data-install-command
-  data-command={commands.posix}
+  data-command={platforms[0]?.command ?? ''}
   data-copied-label={copiedLabel}
 >
-  <div
-    class="flex border-b border-border"
-    role="group"
-    aria-label={platformLabel}
-  >
-    {installOptions.map((option, index) => (
+  <div class="flex border-b border-border bg-secondary">
+    {platforms.map((platform, index) => (
       <button
         type="button"
         class:list={[
-          'install-platform min-h-11 w-1/2 cursor-pointer px-3 font-mono text-xs font-medium',
-          'text-muted-foreground transition-colors hover:bg-secondary/60 hover:text-foreground',
+          'min-h-11 flex-1 cursor-pointer px-3 font-mono text-xs font-medium',
+          'text-muted-foreground transition-colors hover:bg-card/60 hover:text-foreground',
+          'aria-pressed:relative aria-pressed:z-[1] aria-pressed:bg-card aria-pressed:text-foreground',
+          // Hide the border under the selected tab.
+          'aria-pressed:shadow-[0_1px_0_var(--card)]',
           'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
           index === 0 && 'border-r border-border',
         ]}
         aria-pressed={index === 0 ? 'true' : 'false'}
-        data-platform={option.id}
-        data-command={option.command}
+        data-platform={platform.id}
+        data-command={platform.command}
       >
-        {option.label}
+        {platform.label}
       </button>
     ))}
   </div>
-  <div class="flex min-w-0 items-start">
+  <div class="flex min-w-0 items-stretch">
     <span class="shrink-0 pl-4 pt-3 font-mono text-sm leading-5 text-muted-foreground" aria-hidden="true">$</span>
-    <code
-      class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap px-2 py-3 font-mono text-sm leading-5 text-foreground"
-      data-command-value
-    >
-      {commands.posix}
-    </code>
+    <div class="install-code min-w-0 flex-1 py-3 pl-2 pr-1 font-mono text-sm leading-5">
+      {platforms.map((platform, index) => (
+        <span data-command-view={platform.id} hidden={index !== 0}>
+          <Code
+            inline
+            wrap
+            code={platform.command}
+            lang="shellscript"
+            themes={{ light: 'night-owl-light', dark: 'night-owl' }}
+            defaultColor="light"
+          />
+        </span>
+      ))}
+    </div>
     <button
       type="button"
       class:list={[
-        'flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center border-l border-border',
-        'text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground',
+        'mr-2 flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center self-center',
+        'text-muted-foreground transition hover:bg-secondary hover:text-foreground hover:shadow-(--site-shadow)',
         'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
       ]}
       aria-label={copyLabel}
@@ -79,9 +77,13 @@ const installOptions = [
 </div>
 
 <style>
-  .install-platform[aria-pressed='true'] {
-    background: var(--secondary);
-    color: var(--foreground);
+  .install-code :global(code.astro-code) {
+    background: transparent !important;
+  }
+
+  :global(.dark) .install-code :global(code.astro-code span[style*='--shiki-dark']),
+  :global([data-theme='dark']) .install-code :global(code.astro-code span[style*='--shiki-dark']) {
+    color: var(--shiki-dark) !important;
   }
 </style>
 
@@ -120,7 +122,9 @@ const installOptions = [
     container.dataset.copyReady = 'true';
 
     const button = container.querySelector<HTMLButtonElement>('[data-copy-command]');
-    const commandValue = container.querySelector<HTMLElement>('[data-command-value]');
+    const commandViews = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-command-view]'),
+    );
     const platformOptions = Array.from(
       container.querySelectorAll<HTMLButtonElement>('[data-platform]'),
     );
@@ -132,8 +136,13 @@ const installOptions = [
       for (const option of platformOptions) {
         option.setAttribute('aria-pressed', String(option === selectedOption));
       }
+
       container.dataset.command = selectedOption.dataset.command ?? '';
-      if (commandValue) commandValue.textContent = container.dataset.command;
+
+      const activePlatform = selectedOption.dataset.platform;
+      for (const view of commandViews) {
+        view.hidden = view.dataset.commandView !== activePlatform;
+      }
     };
 
     for (const option of platformOptions) {
diff --git a/website/src/data/landing-page.ts b/website/src/data/landing-page.ts
index 2ac72c0a..0d41670e 100644
--- a/website/src/data/landing-page.ts
+++ b/website/src/data/landing-page.ts
@@ -9,20 +9,33 @@ export type HeroData = {
   badge?: string;
   title?: string;
   description?: string;
-  installCommands: {
-    posix: string;
-    windows: string;
-  };
-  installPlatformLabel: string;
-  posixInstallLabel: string;
-  windowsInstallLabel: string;
-  copyInstallCommandLabel: string;
-  copiedInstallCommandLabel: string;
   primaryHref: string;
   primaryLabel?: string;
+  secondaryHref?: string;
+  secondaryLabel?: string;
   contributorsLabel?: string;
 };
 
+export type InstallPlatform = {
+  /** `windows` also drives the default tab on Windows; `posix` is the fallback. */
+  id: 'posix' | 'windows';
+  label: string;
+  command: string;
+};
+
+export type InstallCommandData = {
+  platforms: InstallPlatform[];
+  copyLabel: string;
+  copiedLabel: string;
+};
+
+export type GetStartedData = {
+  eyebrow?: string;
+  heading?: string;
+  description?: string;
+  install: InstallCommandData;
+};
+
 export type FeatureItem = { icon: string; title: string; description: string };
 
 export type FeaturesData = {
@@ -54,6 +67,7 @@ export type TestimonialsData = {
 
 export type LandingPageData = {
   hero: HeroData;
+  getStarted?: GetStartedData;
   features?: FeaturesData;
   hookIntro?: HookIntroData;
   tapeModel?: TapeModelData;
@@ -69,19 +83,33 @@ const landingPageData: Record<LandingLocale, LandingPageData> = {
       title: 'Bub is a tiny agent runtime, composable with plugins.',
       description:
         'Start with a working agent. Use plugins to change how it thinks, remembers, and connects.',
-      installCommands: {
-        posix: 'curl -fsSL https://bub.build/install.sh | bash',
-        windows: 'powershell -ExecutionPolicy ByPass -c "irm https://bub.build/install.ps1 | iex"',
-      },
-      installPlatformLabel: 'Choose installation platform',
-      posixInstallLabel: 'macOS / Linux',
-      windowsInstallLabel: 'Windows',
-      copyInstallCommandLabel: 'Copy install command',
-      copiedInstallCommandLabel: 'Install command copied',
-      primaryHref: '/docs/getting-started/',
+      primaryHref: '#get-started',
       primaryLabel: 'Get Started',
+      secondaryHref: '/docs/getting-started/',
+      secondaryLabel: 'Read the docs',
       contributorsLabel: 'Developed by contributors worldwide',
     },
+    getStarted: {
+      eyebrow: 'Install',
+      heading: 'Quick Start',
+      description: 'Pick a preset, add plugins as needed. Done.',
+      install: {
+        platforms: [
+          {
+            id: 'posix',
+            label: 'macOS / Linux',
+            command: 'curl -fsSL https://bub.build/install.sh | bash',
+          },
+          {
+            id: 'windows',
+            label: 'Windows',
+            command: 'powershell -ExecutionPolicy ByPass -c "irm https://bub.build/install.ps1 | iex"',
+          },
+        ],
+        copyLabel: 'Copy install command',
+        copiedLabel: 'Install command copied',
+      },
+    },
     features: {
       eyebrow: 'Features',
       heading: 'Every decision has a reason.',
@@ -161,19 +189,33 @@ const landingPageData: Record<LandingLocale, LandingPageData> = {
       title: 'Bub，轻量的 Agent 运行时，以插件自由组合。',
       description:
         '开箱即用，再用插件按需定制模型执行、记忆和消息渠道。',
-      installCommands: {
-        posix: 'curl -fsSL https://bub.build/install.sh | bash',
-        windows: 'powershell -ExecutionPolicy ByPass -c "irm https://bub.build/install.ps1 | iex"',
-      },
-      installPlatformLabel: '选择安装平台',
-      posixInstallLabel: 'macOS / Linux',
-      windowsInstallLabel: 'Windows',
-      copyInstallCommandLabel: '复制安装命令',
-      copiedInstallCommandLabel: '安装命令已复制',
-      primaryHref: '/zh-cn/docs/getting-started/',
+      primaryHref: '#get-started',
       primaryLabel: '开始使用',
+      secondaryHref: '/zh-cn/docs/getting-started/',
+      secondaryLabel: '阅读文档',
       contributorsLabel: '由全球开发者共同打造',
     },
+    getStarted: {
+      eyebrow: '安装',
+      heading: '快速开始',
+      description: '选预设，按需装插件。完成。',
+      install: {
+        platforms: [
+          {
+            id: 'posix',
+            label: 'macOS / Linux',
+            command: 'curl -fsSL https://bub.build/install.sh | bash',
+          },
+          {
+            id: 'windows',
+            label: 'Windows',
+            command: 'powershell -ExecutionPolicy ByPass -c "irm https://bub.build/install.ps1 | iex"',
+          },
+        ],
+        copyLabel: '复制安装命令',
+        copiedLabel: '安装命令已复制',
+      },
+    },
     features: {
       eyebrow: '特性',
       heading: '每个决定都有理由。',
diff --git a/website/src/layouts/LandingLayout.astro b/website/src/layouts/LandingLayout.astro
index e0553889..0707e155 100644
--- a/website/src/layouts/LandingLayout.astro
+++ b/website/src/layouts/LandingLayout.astro
@@ -1,5 +1,6 @@
 ---
 import Features from '@/components/Features.astro';
+import GetStarted from '@/components/GetStarted.astro';
 import Hero from '@/components/Hero.astro';
 import HookIntro from '@/components/HookIntro.astro';
 import TapeModel from '@/components/TapeModel.astro';
@@ -8,7 +9,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getRepoStats } from '@/lib/github';
 import { SITE_URL } from 'astro:env/client';
 
-const { title, description, ogImage, hero, features = {}, hookIntro = {}, tapeModel = {}, testimonials = {} } = Astro.props;
+const { title, description, ogImage, hero, getStarted = {}, features = {}, hookIntro = {}, tapeModel = {}, testimonials = {} } = Astro.props;
 
 const { contributors } = getRepoStats();
 ---
@@ -26,6 +27,7 @@ const { contributors } = getRepoStats();
     </div>
     <div class="divide-y divide-border">
       <Hero {...hero} contributors={contributors} />
+      <GetStarted {...getStarted} />
       <Features {...features} />
       <HookIntro {...hookIntro} />
       <TapeModel {...tapeModel} />
diff --git a/website/src/pages/[...locale]/index.astro b/website/src/pages/[...locale]/index.astro
index 60131cf3..17248264 100644
--- a/website/src/pages/[...locale]/index.astro
+++ b/website/src/pages/[...locale]/index.astro
@@ -38,6 +38,7 @@ const testimonials = {
   description={t('site.description')}
   ogImage={ogImage}
   hero={pageData.hero}
+  getStarted={pageData.getStarted}
   features={pageData.features}
   hookIntro={pageData.hookIntro}
   tapeModel={pageData.tapeModel}