diff --git a/docs/src/components/copy-command.astro b/docs/src/components/copy-command.astro
new file mode 100644
index 000000000..b561e5337
--- /dev/null
+++ b/docs/src/components/copy-command.astro
@@ -0,0 +1,39 @@
+---
+const { command, label = 'Copy' } = Astro.props;
+---
+<div class="copy-command" data-copy-command>
+  <span class="copy-command-prompt" aria-hidden="true">$</span>
+  <code class="copy-command-code">{command}</code>
+  <button
+    type="button"
+    class="copy-command-btn"
+    data-copy-btn
+    data-command={command}
+    aria-label={label}
+  >
+    <svg class="copy-command-icon copy-command-icon-copy" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+    </svg>
+    <svg class="copy-command-icon copy-command-icon-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll('[data-copy-command]').forEach((el) => {
+    const btn = el.querySelector<HTMLButtonElement>('[data-copy-btn]');
+    if (!btn) return;
+    btn.addEventListener('click', async () => {
+      const cmd = btn.getAttribute('data-command') ?? '';
+      try {
+        await navigator.clipboard.writeText(cmd);
+        el.classList.add('is-copied');
+        setTimeout(() => el.classList.remove('is-copied'), 1600);
+      } catch {
+        // noop
+      }
+    });
+  });
+</script>
diff --git a/docs/src/components/generator-carousel.astro b/docs/src/components/generator-carousel.astro
new file mode 100644
index 000000000..ed398cfc9
--- /dev/null
+++ b/docs/src/components/generator-carousel.astro
@@ -0,0 +1,134 @@
+---
+import { Code } from '@astrojs/starlight/components';
+
+const slides = [
+  {
+    title: 'Multi-Agent AI App',
+    description: 'TypeScript and Python Strands agents and an MCP server.',
+    commands: [
+      'pnpm nx g @aws/nx-plugin:ts#project',
+      'pnpm nx g @aws/nx-plugin:ts#strands-agent',
+      'pnpm nx g @aws/nx-plugin:py#project',
+      'pnpm nx g @aws/nx-plugin:py#strands-agent',
+      'pnpm nx g @aws/nx-plugin:ts#mcp-server',
+      'pnpm nx g @aws/nx-plugin:connection',
+    ],
+  },
+  {
+    title: 'tRPC Web App with CDK',
+    description: 'A type-safe tRPC API with a React frontend, Cognito auth, and CDK.',
+    commands: [
+      'pnpm nx g @aws/nx-plugin:ts#react-website',
+      'pnpm nx g @aws/nx-plugin:ts#react-website#auth',
+      'pnpm nx g @aws/nx-plugin:ts#trpc-api',
+      'pnpm nx g @aws/nx-plugin:ts#infra',
+      'pnpm nx g @aws/nx-plugin:connection',
+    ],
+  },
+  {
+    title: 'FastAPI Web App with Terraform',
+    description: 'A Python FastAPI with a React frontend, Cognito auth, and Terraform.',
+    commands: [
+      'pnpm nx g @aws/nx-plugin:py#fast-api',
+      'pnpm nx g @aws/nx-plugin:ts#react-website',
+      'pnpm nx g @aws/nx-plugin:ts#react-website#auth',
+      'pnpm nx g @aws/nx-plugin:terraform#project',
+      'pnpm nx g @aws/nx-plugin:connection',
+    ],
+  },
+  {
+    title: 'AG-UI Web App',
+    description: 'A React app with Cognito auth and an AG-UI Strands agent.',
+    commands: [
+      'pnpm nx g @aws/nx-plugin:ts#react-website',
+      'pnpm nx g @aws/nx-plugin:ts#react-website#auth',
+      'pnpm nx g @aws/nx-plugin:py#project',
+      'pnpm nx g @aws/nx-plugin:py#strands-agent',
+      'pnpm nx g @aws/nx-plugin:ts#infra',
+      'pnpm nx g @aws/nx-plugin:connection',
+    ],
+  },
+];
+
+const generatorIdHighlight = /\:([^\s]+)/g;
+---
+<div class="gen-carousel" data-gen-carousel>
+  <div class="gen-carousel-window">
+    <div class="gen-carousel-chrome" aria-hidden="true">
+      <span class="gen-carousel-dot gen-carousel-dot--red"></span>
+      <span class="gen-carousel-dot gen-carousel-dot--yellow"></span>
+      <span class="gen-carousel-dot gen-carousel-dot--green"></span>
+      <span class="gen-carousel-chrome-title" data-carousel-title>{slides[0].title}</span>
+    </div>
+    <div class="gen-carousel-track" data-carousel-track>
+      {slides.map((slide, idx) => (
+        <div class={`gen-carousel-slide${idx === 0 ? ' is-active' : ''}`} data-slide-index={idx}>
+          <p class="gen-carousel-caption">{slide.description}</p>
+          <div class="gen-carousel-code">
+            <Code lang="bash" code={slide.commands.join('\n')} mark={[generatorIdHighlight]} />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+  <div class="gen-carousel-controls" role="tablist" aria-label="Example scenarios">
+    {slides.map((slide, idx) => (
+      <button
+        type="button"
+        class={`gen-carousel-pill${idx === 0 ? ' is-active' : ''}`}
+        data-carousel-pill
+        data-slide-target={idx}
+        role="tab"
+        aria-selected={idx === 0 ? 'true' : 'false'}
+      >
+        {slide.title}
+      </button>
+    ))}
+  </div>
+</div>
+
+<script>
+  const carousels = document.querySelectorAll<HTMLElement>('[data-gen-carousel]');
+  carousels.forEach((carousel) => {
+    const slides = carousel.querySelectorAll<HTMLElement>('.gen-carousel-slide');
+    const pills = carousel.querySelectorAll<HTMLButtonElement>('[data-carousel-pill]');
+    const titleEl = carousel.querySelector<HTMLElement>('[data-carousel-title]');
+    const titles = Array.from(pills).map((p) => p.textContent ?? '');
+    let current = 0;
+    let timer: ReturnType<typeof setInterval> | null = null;
+
+    const show = (next: number) => {
+      slides[current].classList.remove('is-active');
+      pills[current].classList.remove('is-active');
+      pills[current].setAttribute('aria-selected', 'false');
+      current = next;
+      slides[current].classList.add('is-active');
+      pills[current].classList.add('is-active');
+      pills[current].setAttribute('aria-selected', 'true');
+      if (titleEl) titleEl.textContent = titles[current];
+    };
+
+    const start = () => {
+      stop();
+      timer = setInterval(() => show((current + 1) % slides.length), 6000);
+    };
+    const stop = () => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    };
+
+    pills.forEach((pill) => {
+      pill.addEventListener('click', () => {
+        const idx = Number(pill.getAttribute('data-slide-target'));
+        show(idx);
+        start();
+      });
+    });
+
+    carousel.addEventListener('mouseenter', stop);
+    carousel.addEventListener('mouseleave', start);
+    start();
+  });
+</script>
diff --git a/docs/src/content/docs/en/index.mdx b/docs/src/content/docs/en/index.mdx
index 3d0c54f5e..26148757b 100644
--- a/docs/src/content/docs/en/index.mdx
+++ b/docs/src/content/docs/en/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: '@aws/nx-plugin'
-description: Rapidly scaffold and build projects on AWS
+description: Rapidly scaffold and build production-ready apps on AWS.
 template: splash
 hero:
-  tagline: Rapidly scaffold and build projects on AWS
+  tagline: Build full-stack AWS apps in minutes, not days.
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,103 +11,67 @@ hero:
     - text: Get started
       link: get_started/quick-start
       icon: right-arrow
-    - text: Concepts
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Build with AI
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Read the NX docs
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Apache 2.0 License"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod ready-to-code"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Release badge"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Commit activity"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### A collection of Nx Generators for rapidly building cloud-native applications on AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    A collection of Nx generators for rapidly building cloud-native applications on AWS — type-safe, locally runnable, and ready to deploy.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="Full-Stack AWS in Minutes, Not Days">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="Type-Safe Across Your Entire Stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Build AI Agents, APIs, Websites, and More">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Create a new workspace</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Replace the below gif with the watch and learn series */}
-{/* ##### Watch and learn series */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
-
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="A short example of using a generator"
-    width="800"
-    height="600"
-  />
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Scaffold anything. Connect it together.</h2>
+  <p class="landing-lede">
+    Each generator produces production-ready application code <em>and</em> the infrastructure to deploy it. Run them interactively — you'll be prompted for the values you need.
+  </p>
+  <GeneratorCarousel />
 </div>
 
+<div class="landing-section">
+  <h2 class="landing-heading">Why @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="Full-stack in minutes" icon="puzzle">
+      Website, API, auth, agents and infrastructure — all scaffolded and wired together.
+    </Card>
+    <Card title="Build with AI" icon="rocket">
+      An MCP server ships with the plugin so your AI assistant can scaffold and connect projects for you.
+    </Card>
+    <Card title="Type-safe, end to end" icon="seti:json">
+      Shared types flow from your API through to your frontend. Refactor with confidence.
+    </Card>
+    <Card title="Your code, your way" icon="setting">
+      Generators give you a head start, not a framework. The code is yours to read, modify, and extend.
+    </Card>
+  </CardGrid>
 </div>
 
-<div class="container community-section">
-  ##### Join the community
-
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Join the community</h2>
   <p>Have questions or want to share feedback?</p>
-  <p>Join us on the <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> Slack channel to connect with other users and contributors.</p>
-
-  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">Join us on Slack</LinkButton>
+  <p>
+    Join us on the <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> Slack channel to connect with other users and contributors.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Join us on Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### Thank you to our amazing contributors!
+<div class="landing-section">
+  <h2 class="landing-heading">Thank you to our amazing contributors!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index f681c42df..0d9b8febd 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/docs/src/content/docs/es/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: "@aws/nx-plugin"
-description: "Cree e implemente proyectos en AWS rápidamente"
+description: "Cree e implemente aplicaciones listas para producción en AWS rápidamente."
 template: splash
 hero:
-  tagline: "Cree e implemente proyectos en AWS rápidamente"
+  tagline: "Cree aplicaciones AWS full-stack en minutos, no en días."
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: Comenzar
       link: get_started/quick-start
       icon: right-arrow
-    - text: Conceptos
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Construir con IA
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Leer la documentación de NX
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Licencia Apache 2.0"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod listo para codificar"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Insignia de lanzamiento"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Actividad de commits"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### Una colección de Generadores Nx para construir rápidamente aplicaciones nativas en la nube en AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    Una colección de generadores Nx para construir rápidamente aplicaciones nativas en la nube en AWS — con tipado seguro, ejecutables localmente y listas para desplegar.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="Full-Stack de AWS en Minutos, No en Días">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="Tipado Seguro en Todo Tu Stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Construye Agentes de IA, APIs, Sitios Web y Más">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Crear un nuevo espacio de trabajo</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Reemplazar el gif inferior por la serie de videos instructivos */}
-{/* ##### Serie Mira y aprende */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Genera cualquier cosa. Conéctalo todo.</h2>
+  <p class="landing-lede">
+    Cada generador produce código de aplicación listo para producción <em>y</em> la infraestructura para desplegarlo. Ejecútalos de forma interactiva — se te solicitarán los valores que necesites.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="Un breve ejemplo del uso de un generador"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">¿Por qué @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="Full-stack en minutos" icon="puzzle">
+      Sitio web, API, autenticación, agentes e infraestructura — todo generado y conectado.
+    </Card>
+    <Card title="Construye con IA" icon="rocket">
+      Un servidor MCP se incluye con el plugin para que tu asistente de IA pueda generar y conectar proyectos por ti.
+    </Card>
+    <Card title="Tipado seguro, de extremo a extremo" icon="seti:json">
+      Los tipos compartidos fluyen desde tu API hasta tu frontend. Refactoriza con confianza.
+    </Card>
+    <Card title="Tu código, a tu manera" icon="setting">
+      Los generadores te dan una ventaja inicial, no un framework. El código es tuyo para leer, modificar y extender.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Únete a la comunidad</h2>
+  <p>¿Tienes preguntas o quieres compartir comentarios?</p>
+  <p>
+    Únete a nosotros en el canal de Slack <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> para conectar con otros usuarios y colaboradores.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Únete a nosotros en Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### ¡Gracias a nuestros increíbles colaboradores!
+<div class="landing-section">
+  <h2 class="landing-heading">¡Gracias a nuestros increíbles colaboradores!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
index f0944498a..93be9db70 100644
--- a/docs/src/content/docs/fr/index.mdx
+++ b/docs/src/content/docs/fr/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: "@aws/nx-plugin"
-description: "Créez et construisez rapidement des projets sur AWS"
+description: "Créez et construisez rapidement des applications prêtes pour la production sur AWS."
 template: splash
 hero:
-  tagline: "Créez et construisez rapidement des projets sur AWS"
+  tagline: "Créez des applications AWS full-stack en quelques minutes, pas en plusieurs jours."
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: Commencer
       link: get_started/quick-start
       icon: right-arrow
-    - text: Concepts
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Construire avec l'IA
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Lire la documentation NX
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Licence Apache 2.0"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod prêt à coder"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Badge de version"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Activité des commits"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### Une collection de générateurs Nx pour créer rapidement des applications cloud-natives sur AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    Une collection de générateurs Nx pour créer rapidement des applications cloud-natives sur AWS — typées de manière sûre, exécutables localement et prêtes à déployer.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="AWS Full-Stack en minutes, pas en jours">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="Typage sûr sur l'ensemble de votre stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Créez des agents IA, des API, des sites web et plus encore">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Créer un nouveau workspace</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Replace the below gif with the watch and learn series */}
-{/* ##### Série de vidéos éducatives */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Générez n'importe quoi. Connectez-le ensemble.</h2>
+  <p class="landing-lede">
+    Chaque générateur produit du code d'application prêt pour la production <em>et</em> l'infrastructure pour le déployer. Exécutez-les de manière interactive — vous serez invité à fournir les valeurs dont vous avez besoin.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="Un court exemple d'utilisation d'un générateur"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">Pourquoi @aws/nx-plugin ?</h2>
+  <CardGrid>
+    <Card title="Full-stack en quelques minutes" icon="puzzle">
+      Site web, API, authentification, agents et infrastructure — tout est généré et interconnecté.
+    </Card>
+    <Card title="Créez avec l'IA" icon="rocket">
+      Un serveur MCP est fourni avec le plugin pour que votre assistant IA puisse générer et connecter des projets pour vous.
+    </Card>
+    <Card title="Typage sûr, de bout en bout" icon="seti:json">
+      Les types partagés circulent de votre API jusqu'à votre frontend. Refactorisez en toute confiance.
+    </Card>
+    <Card title="Votre code, à votre manière" icon="setting">
+      Les générateurs vous donnent une longueur d'avance, pas un framework. Le code vous appartient pour le lire, le modifier et l'étendre.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Rejoignez la communauté</h2>
+  <p>Vous avez des questions ou souhaitez partager vos retours ?</p>
+  <p>
+    Rejoignez-nous sur le canal Slack <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> pour échanger avec d'autres utilisateurs et contributeurs.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Rejoignez-nous sur Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### Un grand merci à nos incroyables contributeurs !
+<div class="landing-section">
+  <h2 class="landing-heading">Un grand merci à nos incroyables contributeurs !</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/it/index.mdx b/docs/src/content/docs/it/index.mdx
index 3e6f45fa7..f2f7a6803 100644
--- a/docs/src/content/docs/it/index.mdx
+++ b/docs/src/content/docs/it/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: '@aws/nx-plugin'
-description: Crea e sviluppa rapidamente progetti su AWS
+description: Crea e sviluppa rapidamente app pronte per la produzione su AWS.
 template: splash
 hero:
-  tagline: Crea e sviluppa rapidamente progetti su AWS
+  tagline: Crea app AWS full-stack in pochi minuti, non giorni.
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: Inizia
       link: get_started/quick-start
       icon: right-arrow
-    - text: Concetti
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Costruisci con l'IA
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Leggi la documentazione NX
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Licenza Apache 2.0"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Pronto per codificare con Gitpod"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Badge di rilascio"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Attività dei commit"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### Una raccolta di generatori Nx per costruire rapidamente applicazioni cloud-native su AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    Una raccolta di generatori Nx per costruire rapidamente applicazioni cloud-native su AWS — type-safe, eseguibili localmente e pronte per il deploy.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="Full-Stack AWS in minuti, non giorni">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="Type-Safe su tutto il tuo stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Costruisci agenti AI, API, siti web e altro">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Crea un nuovo workspace</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Sostituire la gif sottostante con la serie watch and learn */}
-{/* ##### Guarda e impara */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Genera qualsiasi cosa. Collegala insieme.</h2>
+  <p class="landing-lede">
+    Ogni generatore produce codice applicativo pronto per la produzione <em>e</em> l'infrastruttura per distribuirlo. Eseguili in modo interattivo — ti verranno richiesti i valori di cui hai bisogno.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="Un breve esempio di utilizzo di un generatore"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">Perché @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="Full-stack in minuti" icon="puzzle">
+      Sito web, API, autenticazione, agenti e infrastruttura — tutto generato e collegato insieme.
+    </Card>
+    <Card title="Costruisci con l'AI" icon="rocket">
+      Un server MCP è incluso nel plugin così il tuo assistente AI può generare e collegare progetti per te.
+    </Card>
+    <Card title="Type-safe, end to end" icon="seti:json">
+      I tipi condivisi fluiscono dalla tua API fino al frontend. Refactorizza con fiducia.
+    </Card>
+    <Card title="Il tuo codice, a modo tuo" icon="setting">
+      I generatori ti danno un vantaggio iniziale, non un framework. Il codice è tuo da leggere, modificare ed estendere.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Unisciti alla community</h2>
+  <p>Hai domande o vuoi condividere feedback?</p>
+  <p>
+    Unisciti a noi sul canale Slack <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> per connetterti con altri utenti e collaboratori.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Unisciti a noi su Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### Grazie ai nostri fantastici collaboratori!
+<div class="landing-section">
+  <h2 class="landing-heading">Grazie ai nostri fantastici collaboratori!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/jp/index.mdx b/docs/src/content/docs/jp/index.mdx
index 5f37f6615..00574cec3 100644
--- a/docs/src/content/docs/jp/index.mdx
+++ b/docs/src/content/docs/jp/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: '@aws/nx-plugin'
-description: 'AWS上でプロジェクトを迅速にスキャフォールドおよび構築'
+description: 'AWS上で本番環境対応のアプリを迅速にスキャフォールドおよび構築'
 template: splash
 hero:
-  tagline: 'AWS上でプロジェクトを迅速にスキャフォールドおよび構築'
+  tagline: '数日ではなく数分でフルスタックAWSアプリを構築'
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: はじめに
       link: get_started/quick-start
       icon: right-arrow
-    - text: コンセプト
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: AIで構築
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: NXドキュメントを読む
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Apache 2.0 License"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod ready-to-code"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Release badge"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Commit activity"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### AWS上でクラウドネイティブアプリケーションを迅速に構築するためのNxジェネレーターコレクション
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    AWS上でクラウドネイティブアプリケーションを迅速に構築するためのNxジェネレーターコレクション — 型安全で、ローカル実行可能、デプロイ準備完了。
+  </p>
 
-<CardGrid className="foo">
-  <Card title="フルスタックAWSを数日ではなく数分で">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="スタック全体で型安全性を確保">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="AIエージェント、API、ウェブサイトなどを構築">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">新しいワークスペースを作成</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Replace the below gif with the watch and learn series */}
-{/* ##### 動画チュートリアルシリーズ */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">あらゆるものをスキャフォールド。それらを接続。</h2>
+  <p class="landing-lede">
+    各ジェネレーターは、本番環境対応のアプリケーションコード<em>と</em>それをデプロイするためのインフラストラクチャを生成します。対話的に実行すれば、必要な値の入力を促されます。
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="ジェネレーター使用例のショートデモ"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">なぜ @aws/nx-plugin なのか？</h2>
+  <CardGrid>
+    <Card title="数分でフルスタック" icon="puzzle">
+      ウェブサイト、API、認証、エージェント、インフラストラクチャ — すべてがスキャフォールドされ、接続されます。
+    </Card>
+    <Card title="AIで構築" icon="rocket">
+      MCPサーバーがプラグインに同梱されているため、AIアシスタントがプロジェクトのスキャフォールドと接続を代行できます。
+    </Card>
+    <Card title="エンドツーエンドで型安全" icon="seti:json">
+      共有型がAPIからフロントエンドまで流れます。自信を持ってリファクタリングできます。
+    </Card>
+    <Card title="あなたのコード、あなたの方法で" icon="setting">
+      ジェネレーターはフレームワークではなく、スタートダッシュを提供します。コードはあなたのもので、読み、修正し、拡張できます。
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">コミュニティに参加</h2>
+  <p>質問やフィードバックをお持ちですか？</p>
+  <p>
+    <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> Slackチャンネルに参加して、他のユーザーやコントリビューターとつながりましょう。
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Slackで参加
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### 素晴らしいコントリビューターの皆さんに感謝します！
+<div class="landing-section">
+  <h2 class="landing-heading">素晴らしいコントリビューターの皆さんに感謝します！</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/ko/index.mdx b/docs/src/content/docs/ko/index.mdx
index 938b7704c..765707410 100644
--- a/docs/src/content/docs/ko/index.mdx
+++ b/docs/src/content/docs/ko/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: '@aws/nx-plugin'
-description: 'AWS에서 프로젝트를 빠르게 스캐폴드하고 빌드'
+description: 'AWS에서 프로덕션 준비가 완료된 앱을 빠르게 스캐폴드하고 빌드'
 template: splash
 hero:
-  tagline: 'AWS에서 프로젝트를 빠르게 스캐폴드하고 빌드'
+  tagline: '며칠이 아닌 몇 분 만에 풀스택 AWS 앱을 빌드하세요.'
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: 시작하기
       link: get_started/quick-start
       icon: right-arrow
-    - text: 개념
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: AI로 빌드하기
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: NX 문서 읽기
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Apache 2.0 라이선스"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod ready-to-code"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="릴리스 배지"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="커밋 활동"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### AWS에서 클라우드 네이티브 애플리케이션을 빠르게 구축하기 위한 Nx 제너레이터 모음
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    AWS에서 클라우드 네이티브 애플리케이션을 빠르게 구축하기 위한 Nx 제너레이터 모음 — 타입 안정성, 로컬 실행 가능, 배포 준비 완료.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="며칠이 아닌 몇 분 만에 풀스택 AWS 구축">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="전체 스택에 걸친 타입 안정성">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="AI 에이전트, API, 웹사이트 등을 구축">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">새 워크스페이스 생성</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: 아래 gif를 watch and learn 시리즈로 교체 */}
-{/* ##### 시청 및 학습 시리즈 */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">무엇이든 스캐폴딩하고 함께 연결하세요.</h2>
+  <p class="landing-lede">
+    각 제너레이터는 프로덕션 준비가 완료된 애플리케이션 코드<em>와</em> 배포를 위한 인프라를 생성합니다. 대화형으로 실행하면 필요한 값을 입력하라는 메시지가 표시됩니다.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="제너레이터 사용 예시"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">왜 @aws/nx-plugin인가요?</h2>
+  <CardGrid>
+    <Card title="몇 분 만에 풀스택 구축" icon="puzzle">
+      웹사이트, API, 인증, 에이전트 및 인프라 — 모두 스캐폴딩되고 연결됩니다.
+    </Card>
+    <Card title="AI로 구축" icon="rocket">
+      플러그인에 MCP 서버가 포함되어 있어 AI 어시스턴트가 프로젝트를 스캐폴딩하고 연결할 수 있습니다.
+    </Card>
+    <Card title="엔드 투 엔드 타입 안정성" icon="seti:json">
+      공유 타입이 API에서 프론트엔드까지 흐릅니다. 자신감 있게 리팩토링하세요.
+    </Card>
+    <Card title="여러분의 코드, 여러분의 방식" icon="setting">
+      제너레이터는 프레임워크가 아닌 빠른 시작을 제공합니다. 코드는 읽고, 수정하고, 확장할 수 있는 여러분의 것입니다.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">커뮤니티에 참여하세요</h2>
+  <p>질문이 있거나 피드백을 공유하고 싶으신가요?</p>
+  <p>
+    <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> Slack 채널에 참여하여 다른 사용자 및 기여자와 소통하세요.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Slack에서 참여하기
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### 우리의 놀라운 기여자분들께 감사드립니다!
+<div class="landing-section">
+  <h2 class="landing-heading">우리의 놀라운 기여자분들께 감사드립니다!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/pt/index.mdx b/docs/src/content/docs/pt/index.mdx
index 28abaec55..9a0facf43 100644
--- a/docs/src/content/docs/pt/index.mdx
+++ b/docs/src/content/docs/pt/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: "@aws/nx-plugin"
-description: "Crie e construa projetos rapidamente na AWS"
+description: "Crie e construa aplicações prontas para produção rapidamente na AWS."
 template: splash
 hero:
-  tagline: "Crie e construa projetos rapidamente na AWS"
+  tagline: "Construa aplicações AWS full-stack em minutos, não em dias."
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: Começar
       link: get_started/quick-start
       icon: right-arrow
-    - text: Conceitos
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Construir com IA
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Ler documentação do NX
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Licença Apache 2.0"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod pronto para codar"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Badge de release"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Atividade de commits"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### Uma coleção de Geradores Nx para construir rapidamente aplicações nativas em nuvem na AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    Uma coleção de geradores Nx para construir rapidamente aplicações nativas em nuvem na AWS — com segurança de tipos, executáveis localmente e prontas para deploy.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="AWS Full-Stack em Minutos, Não Dias">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="Segurança de Tipos em Toda a Sua Stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Construa Agentes de IA, APIs, Sites e Muito Mais">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Crie um novo workspace</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Replace the below gif with the watch and learn series */}
-{/* ##### Série Assista e Aprenda */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Estruture qualquer coisa. Conecte tudo junto.</h2>
+  <p class="landing-lede">
+    Cada gerador produz código de aplicação pronto para produção <em>e</em> a infraestrutura para implantá-lo. Execute-os interativamente — você será solicitado pelos valores que precisa.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="Um breve exemplo de uso de um gerador"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">Por que @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="Full-stack em minutos" icon="puzzle">
+      Site, API, autenticação, agentes e infraestrutura — tudo estruturado e conectado.
+    </Card>
+    <Card title="Construa com IA" icon="rocket">
+      Um servidor MCP vem com o plugin para que seu assistente de IA possa estruturar e conectar projetos para você.
+    </Card>
+    <Card title="Segurança de tipos, ponta a ponta" icon="seti:json">
+      Tipos compartilhados fluem da sua API até o frontend. Refatore com confiança.
+    </Card>
+    <Card title="Seu código, do seu jeito" icon="setting">
+      Os geradores te dão um ponto de partida, não um framework. O código é seu para ler, modificar e estender.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Junte-se à comunidade</h2>
+  <p>Tem dúvidas ou quer compartilhar feedback?</p>
+  <p>
+    Junte-se a nós no canal <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> do Slack para se conectar com outros usuários e contribuidores.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Junte-se a nós no Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### Agradecimento aos nossos incríveis contribuidores!
+<div class="landing-section">
+  <h2 class="landing-heading">Agradecimento aos nossos incríveis contribuidores!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/vi/index.mdx b/docs/src/content/docs/vi/index.mdx
index 22be75bd3..81bb16396 100644
--- a/docs/src/content/docs/vi/index.mdx
+++ b/docs/src/content/docs/vi/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: "@aws/nx-plugin"
-description: "Khởi tạo nhanh chóng và xây dựng các dự án trên AWS"
+description: "Khởi tạo nhanh chóng và xây dựng các ứng dụng sẵn sàng cho production trên AWS."
 template: splash
 hero:
-  tagline: "Khởi tạo nhanh chóng và xây dựng các dự án trên AWS"
+  tagline: "Xây dựng ứng dụng AWS full-stack trong vài phút, không phải vài ngày."
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: Bắt đầu
       link: get_started/quick-start
       icon: right-arrow
-    - text: Khái niệm
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: Xây dựng với AI
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: Đọc tài liệu NX
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Apache 2.0 License"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod ready-to-code"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Release badge"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Commit activity"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### Bộ sưu tập các Nx Generator để xây dựng nhanh ứng dụng cloud-native trên AWS
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    Bộ sưu tập các Nx generator để xây dựng nhanh các ứng dụng cloud-native trên AWS — an toàn kiểu dữ liệu, chạy được cục bộ và sẵn sàng triển khai.
+  </p>
 
-<CardGrid className="foo">
-  <Card title="Full-Stack AWS trong Vài Phút, Không Phải Vài Ngày">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="An Toàn Kiểu Dữ Liệu Trên Toàn Bộ Stack">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="Xây Dựng AI Agent, API, Website và Nhiều Hơn Nữa">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">Tạo workspace mới</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: Replace the below gif with the watch and learn series */}
-{/* ##### Watch and learn series */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">Scaffold bất cứ thứ gì. Kết nối chúng lại với nhau.</h2>
+  <p class="landing-lede">
+    Mỗi generator tạo ra mã ứng dụng sẵn sàng cho production <em>và</em> cơ sở hạ tầng để triển khai nó. Chạy chúng một cách tương tác — bạn sẽ được nhắc nhập các giá trị cần thiết.
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="Ví dụ ngắn về cách sử dụng generator"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">Tại sao chọn @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="Full-stack trong vài phút" icon="puzzle">
+      Website, API, xác thực, agent và cơ sở hạ tầng — tất cả được scaffold và kết nối với nhau.
+    </Card>
+    <Card title="Xây dựng với AI" icon="rocket">
+      Một MCP server đi kèm với plugin để trợ lý AI của bạn có thể scaffold và kết nối các dự án cho bạn.
+    </Card>
+    <Card title="An toàn kiểu dữ liệu, từ đầu đến cuối" icon="seti:json">
+      Các kiểu dữ liệu được chia sẻ từ API của bạn đến frontend. Refactor với sự tự tin.
+    </Card>
+    <Card title="Mã của bạn, theo cách của bạn" icon="setting">
+      Generator giúp bạn khởi đầu nhanh, không phải một framework. Mã nguồn là của bạn để đọc, sửa đổi và mở rộng.
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">Tham gia cộng đồng</h2>
+  <p>Có câu hỏi hoặc muốn chia sẻ phản hồi?</p>
+  <p>
+    Tham gia với chúng tôi trên kênh Slack <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> để kết nối với người dùng và người đóng góp khác.
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    Tham gia trên Slack
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### Cảm ơn những người đóng góp tuyệt vời của chúng tôi!
+<div class="landing-section">
+  <h2 class="landing-heading">Cảm ơn những người đóng góp tuyệt vời của chúng tôi!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/content/docs/zh/index.mdx b/docs/src/content/docs/zh/index.mdx
index fe2e27173..7f403a798 100644
--- a/docs/src/content/docs/zh/index.mdx
+++ b/docs/src/content/docs/zh/index.mdx
@@ -1,9 +1,9 @@
 ---
 title: '@aws/nx-plugin'
-description: '在 AWS 上快速搭建和构建项目'
+description: '在 AWS 上快速搭建和构建生产就绪的应用程序。'
 template: splash
 hero:
-  tagline: '在 AWS 上快速搭建和构建项目'
+  tagline: '在几分钟内构建全栈 AWS 应用，而非数天。'
   image:
     light: ../assets/bulb-black.svg
     dark: ../assets/bulb-white.svg
@@ -11,94 +11,67 @@ hero:
     - text: 开始使用
       link: get_started/quick-start
       icon: right-arrow
-    - text: 概念
-      link: get_started/concepts
-      icon: right-arrow
+      variant: primary
+    - text: 使用 AI 构建
+      link: get_started/building-with-ai
+      icon: rocket
       variant: secondary
-    - text: 阅读 NX 文档
-      link: https://nx.dev/getting-started/intro
-      icon: external
-      variant: minimal
 ---
 
-<p class="badges">
-  <a href="https://opensource.org/licenses/Apache-2.0">
-    <img
-      src="https://img.shields.io/badge/License-Apache%202.0-yellowgreen.svg"
-      alt="Apache 2.0 License"
-    />
-  </a>
-  <a href="https://codecov.io/gh/awslabs/nx-plugin-for-aws">
-    <img src="https://codecov.io/gh/awslabs/nx-plugin-for-aws/graph/badge.svg?token=X27pgFfxuQ" />
-  </a>
-  <a href="https://gitpod.io/new/?workspaceClass=g1-large#https://github.com/awslabs/nx-plugin-for-aws">
-    <img
-      src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod"
-      alt="Gitpod ready-to-code"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml">
-    <img
-      src="https://github.com/awslabs/nx-plugin-for-aws/actions/workflows/ci.yml/badge.svg"
-      alt="Release badge"
-    />
-  </a>
-  <a href="https://github.com/awslabs/nx-plugin-for-aws/commits/main">
-    <img
-      src="https://img.shields.io/github/commit-activity/w/awslabs/nx-plugin-for-aws"
-      alt="Commit activity"
-    />
-  </a>
-</p>
-
+import { CardGrid, Card, Icon, LinkButton } from '@astrojs/starlight/components';
 import { ContributorList } from 'starlight-contributor-list';
-import { VideoPlayer } from 'starlight-videos/components';
-import {
-  CardGrid,
-  Card,
-  Icon,
-  LinkButton,
-} from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
-import websiteGeneratorGif from '@assets/website-generator.gif';
+import CopyCommand from '@components/copy-command.astro';
+import GeneratorCarousel from '@components/generator-carousel.astro';
 
-<div class='container three-column grid-icons'>
-##### 用于在 AWS 上快速构建云原生应用的 Nx 生成器集合
+<div class="landing-section landing-hero-extras">
+  <p class="landing-subline">
+    用于在 AWS 上快速构建云原生应用的 Nx 生成器集合——类型安全、可本地运行、随时可部署。
+  </p>
 
-<CardGrid className="foo">
-  <Card title="几分钟而非数天完成全栈 AWS 开发">
-    <Icon name="rocket" size="100px"/>
-  </Card>
-  <Card title="整个技术栈类型安全">
-    <Icon name="seti:json" size="100px"/>
-  </Card>
-  <Card title="构建 AI 代理、API、网站等">
-    <Icon name="puzzle" size="100px"/>
-  </Card>
-</CardGrid>
+  <div class="landing-install">
+    <span class="landing-install-label">创建新工作空间</span>
+    <CopyCommand command="pnpm create @aws/nx-workspace" />
+  </div>
 </div>
 
-<div class='container'>
-
-{/* TODO: 替换下方gif为观看学习系列 */}
-{/* ##### 观看学习系列 */}
-{/* <a href="/videos/course/overview"> */}
-{/* <VideoPlayer link="https://www.youtube.com/watch?v=5u0Ds7wzUeI" /> */}
-{/* </a> */}
+<div class="landing-section landing-carousel-section">
+  <h2 class="landing-heading">搭建任何项目。连接整合。</h2>
+  <p class="landing-lede">
+    每个生成器都会生成生产就绪的应用代码<em>以及</em>部署所需的基础设施。交互式运行——系统会提示您输入所需的值。
+  </p>
+  <GeneratorCarousel />
+</div>
 
-<div style={{ width: '100%' }}>
-  <Image
-    style={{ margin: 'auto' }}
-    src={websiteGeneratorGif}
-    alt="使用生成器的简短示例"
-    width="800"
-    height="600"
-  />
+<div class="landing-section">
+  <h2 class="landing-heading">为什么选择 @aws/nx-plugin?</h2>
+  <CardGrid>
+    <Card title="几分钟完成全栈开发" icon="puzzle">
+      网站、API、身份验证、代理和基础设施——全部搭建并连接完成。
+    </Card>
+    <Card title="使用 AI 构建" icon="rocket">
+      插件自带 MCP 服务器,让您的 AI 助手为您搭建和连接项目。
+    </Card>
+    <Card title="端到端类型安全" icon="seti:json">
+      共享类型从您的 API 流向前端。放心重构。
+    </Card>
+    <Card title="您的代码,您做主" icon="setting">
+      生成器为您提供起步优势,而非框架束缚。代码完全属于您,可随意阅读、修改和扩展。
+    </Card>
+  </CardGrid>
 </div>
 
+<div class="landing-section landing-community">
+  <h2 class="landing-heading">加入社区</h2>
+  <p>有疑问或想分享反馈?</p>
+  <p>
+    加入我们的 <a href="https://cdk-dev.slack.com/archives/C0AG11EUHM4"><strong>#nx-plugin-for-aws</strong></a> Slack 频道,与其他用户和贡献者交流。
+  </p>
+  <LinkButton href="https://cdk-dev.slack.com/archives/C0AG11EUHM4" icon="slack" variant="secondary">
+    在 Slack 上加入我们
+  </LinkButton>
 </div>
 
-<div class="container">
-  ##### 感谢我们杰出的贡献者们!
+<div class="landing-section">
+  <h2 class="landing-heading">感谢我们杰出的贡献者们!</h2>
   <ContributorList githubRepo="awslabs/nx-plugin-for-aws" />
 </div>
\ No newline at end of file
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index b53de3341..d6918bb00 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,9 +1,356 @@
 @custom-variant dark (&:is(.dark *));
 
+.site-title span {
+  font-family: var(--__sl-font-mono), ui-monospace, monospace;
+  font-weight: 500;
+}
+
+[data-has-hero] .hero h1 {
+  font-family: var(--__sl-font-mono), ui-monospace, monospace;
+  font-weight: 500;
+}
+
+/* ============================================================
+ * Brand accent (royal neon purple)
+ * Swap the --brand-* values below to change the accent palette.
+ * ============================================================ */
+:root {
+  --brand-50: oklch(0.97 0.02 290);
+  --brand-100: oklch(0.93 0.05 290);
+  --brand-200: oklch(0.85 0.1 290);
+  --brand-300: oklch(0.76 0.16 290);
+  --brand-400: oklch(0.66 0.22 290);
+  --brand-500: oklch(0.56 0.28 290);
+  --brand-600: oklch(0.48 0.28 290);
+  --brand-700: oklch(0.42 0.26 290);
+  --brand-800: oklch(0.36 0.22 290);
+  --brand-900: oklch(0.28 0.16 290);
+  --brand-950: oklch(0.18 0.1 290);
+
+  --sl-color-accent-low: var(--brand-100);
+  --sl-color-accent: var(--brand-600);
+  --sl-color-accent-high: var(--brand-800);
+  --sl-color-text-accent: var(--brand-700);
+}
+
+:root[data-theme='dark'] {
+  --sl-color-accent-low: var(--brand-950);
+  --sl-color-accent: var(--brand-500);
+  --sl-color-accent-high: var(--brand-200);
+  --sl-color-text-accent: var(--brand-400);
+}
+
 div.hero {
   margin-bottom: -50px !important;
 }
 
+/* Splash hero tweaks */
+[data-has-hero] .hero > img,
+[data-has-hero] .hero > .hero-html {
+  max-height: 240px;
+}
+
+[data-has-hero] .hero h1 {
+  letter-spacing: -0.02em;
+}
+
+[data-has-hero] .hero .tagline {
+  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+  max-width: 36ch;
+}
+
+[data-has-hero] .hero .actions .sl-link-button.primary {
+  background: var(--sl-color-accent);
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-white);
+}
+
+[data-has-hero] .hero .actions .sl-link-button.primary:hover {
+  background: var(--sl-color-accent-high);
+  border-color: var(--sl-color-accent-high);
+}
+
+/* Landing page sections */
+.landing-section {
+  max-width: 72rem;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+.landing-hero-extras {
+  margin-top: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.landing-subline {
+  font-size: 1.05rem;
+  color: var(--sl-color-gray-2);
+  max-width: 48rem;
+  margin: 0 auto 2rem;
+  line-height: 1.6;
+}
+
+.landing-heading {
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  margin-bottom: 0.75rem;
+}
+
+.landing-lede {
+  color: var(--sl-color-gray-2);
+  max-width: 44rem;
+  margin: 0 auto 2rem;
+  line-height: 1.6;
+}
+
+/* Copy-command bar */
+.landing-install {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.landing-install-label {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--sl-color-gray-3);
+}
+
+.copy-command {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--sl-color-gray-6, #17191e);
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 9999px;
+  padding: 0.55rem 0.6rem 0.55rem 1.2rem;
+  font-family: var(--__sl-font-mono), ui-monospace, monospace;
+  font-size: 0.95rem;
+  color: var(--sl-color-white);
+  max-width: 100%;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.02) inset,
+    0 8px 24px -12px rgba(0, 0, 0, 0.4);
+  transition:
+    border-color 150ms ease,
+    transform 150ms ease;
+}
+
+.copy-command:hover {
+  border-color: var(--sl-color-accent);
+}
+
+.copy-command-prompt {
+  color: var(--sl-color-accent);
+  font-weight: 500;
+  user-select: none;
+}
+
+.copy-command-code {
+  background: transparent;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy-command-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  border: none;
+  background: var(--sl-color-gray-5);
+  color: var(--sl-color-white);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.copy-command-btn:hover {
+  background: var(--sl-color-accent);
+  color: var(--sl-color-white);
+}
+
+.copy-command-icon-check {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  color: var(--brand-400);
+}
+
+.copy-command.is-copied .copy-command-icon-copy {
+  opacity: 0;
+}
+
+.copy-command.is-copied .copy-command-icon-check {
+  opacity: 1;
+}
+
+/* Generator carousel */
+.gen-carousel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 52rem;
+  margin: 0 auto;
+}
+
+.gen-carousel-window {
+  width: 100%;
+  background: #0d1117;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
+}
+
+.gen-carousel-chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.9rem;
+  background: #161b22;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+}
+
+.gen-carousel-dot {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.gen-carousel-dot--red {
+  background: #ff5f57;
+}
+.gen-carousel-dot--yellow {
+  background: #febc2e;
+}
+.gen-carousel-dot--green {
+  background: #28c840;
+}
+
+.gen-carousel-chrome-title {
+  margin-left: 0.75rem;
+  font-size: 0.78rem;
+  color: #8b949e;
+  font-family: var(--__sl-font-mono), ui-monospace, monospace;
+}
+
+.gen-carousel-track {
+  position: relative;
+  min-height: 270px;
+}
+
+.gen-carousel-slide {
+  position: absolute;
+  inset: 0;
+  padding: 1.25rem 1.5rem;
+  opacity: 0;
+  transform: translateY(6px);
+  transition:
+    opacity 350ms ease,
+    transform 350ms ease;
+  pointer-events: none;
+  text-align: left;
+}
+
+.gen-carousel-slide.is-active {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.gen-carousel-caption {
+  color: #8b949e;
+  font-size: 0.85rem;
+  margin: 0 0 0.75rem;
+}
+
+.gen-carousel-code .expressive-code {
+  margin: 0;
+}
+
+.gen-carousel-code .expressive-code .frame {
+  box-shadow: none;
+  border: none;
+}
+
+.gen-carousel-code .expressive-code .header {
+  display: none;
+}
+
+.gen-carousel-code .expressive-code pre {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.gen-carousel-code .expressive-code .copy {
+  top: 0;
+  right: 0;
+}
+
+.gen-carousel-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.gen-carousel-pill {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  height: 2.25rem;
+  padding: 0 1.15rem;
+  border-radius: 9999px;
+  border: 1px solid var(--sl-color-gray-5);
+  background: transparent;
+  color: var(--sl-color-gray-2);
+  cursor: pointer;
+  transition: all 150ms ease;
+  margin: 0;
+}
+
+.gen-carousel-pill:hover {
+  color: var(--sl-color-white);
+  border-color: var(--sl-color-gray-4);
+}
+
+.gen-carousel-pill.is-active {
+  background: var(--sl-color-accent-low);
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-accent-high);
+}
+
+.landing-community {
+  border-top: 1px solid var(--sl-color-gray-6);
+  border-bottom: 1px solid var(--sl-color-gray-6);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.landing-community p {
+  margin: 0.25rem 0;
+  color: var(--sl-color-gray-2);
+}
+
 div.expressive-code {
   max-height: 600px;
   overflow: auto;
@@ -278,7 +625,7 @@ p.badges > a {
 .drawer-title {
   margin: 0;
   font-size: 1.25rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .drawer-close {