From 22bfb4ce1101f8f798a0f1238516e6f4c2e12153 Mon Sep 17 00:00:00 2001
From: sunyiteng <sooniter@gmail.com>
Date: Fri, 10 Jul 2026 14:40:12 +0800
Subject: [PATCH 1/3] feat: polish the Rspress site experience

- fix the Playground custom page layout\n- replace install snippets with PackageManagerTabs\n- align the custom theme with the original Nextra site
---
 apps/website/docs/docs/getting-started.mdx    |  20 +-
 .../docs/docs/references/wasm-typescript.mdx  |   6 +-
 apps/website/docs/docs/usage/bundling.mdx     |  20 +-
 apps/website/docs/docs/usage/cli.mdx          |  24 +-
 apps/website/docs/docs/usage/html.mdx         |  20 +-
 apps/website/docs/docs/usage/jest.mdx         |  20 +-
 apps/website/docs/docs/usage/swc-loader.mdx   |  20 +-
 apps/website/docs/playground/index.mdx        |   3 +-
 apps/website/theme/index.css                  | 694 ++++++++++++++++--
 9 files changed, 653 insertions(+), 174 deletions(-)

diff --git a/apps/website/docs/docs/getting-started.mdx b/apps/website/docs/docs/getting-started.mdx
index f8933a6b..e221408b 100644
--- a/apps/website/docs/docs/getting-started.mdx
+++ b/apps/website/docs/docs/getting-started.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # Getting Started
 
@@ -8,23 +8,7 @@ The easiest way to try SWC is using the [Playground](/playground/).
 
 Otherwise, run the following to download pre-built binaries:
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-    <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-    <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Then, you can transpile your first file and emit to `stdout`:
 
diff --git a/apps/website/docs/docs/references/wasm-typescript.mdx b/apps/website/docs/docs/references/wasm-typescript.mdx
index 84edfd13..2186a366 100644
--- a/apps/website/docs/docs/references/wasm-typescript.mdx
+++ b/apps/website/docs/docs/references/wasm-typescript.mdx
@@ -1,10 +1,10 @@
+import { PackageManagerTabs } from '@rspress/core/theme';
+
 # @swc/wasm-typescript
 
 ## Installation
 
-```bash
-npm install @swc/wasm-typescript
-```
+<PackageManagerTabs command="install @swc/wasm-typescript" />
 
 ### Usage
 
diff --git a/apps/website/docs/docs/usage/bundling.mdx b/apps/website/docs/docs/usage/bundling.mdx
index 5025b661..8e6072ee 100644
--- a/apps/website/docs/docs/usage/bundling.mdx
+++ b/apps/website/docs/docs/usage/bundling.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 import Callout from '@components/Callout';
 
 # Bundling (swcpack)
@@ -18,23 +18,7 @@ View a [basic example of bundling](https://github.com/swc-project/pkgs/tree/main
 
 ## Usage
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Create a `spack.config.js` file and run:
 
diff --git a/apps/website/docs/docs/usage/cli.mdx b/apps/website/docs/docs/usage/cli.mdx
index 53bf20cf..0ad89b42 100644
--- a/apps/website/docs/docs/usage/cli.mdx
+++ b/apps/website/docs/docs/usage/cli.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # @swc/cli
 
@@ -6,23 +6,7 @@ import { Tab, Tabs } from '@rspress/core/theme';
 
 Run the following to download pre-built binaries:
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Then, you can transpile your files:
 
@@ -116,9 +100,7 @@ npx swc src --only **/*.js
 
 To automatically recompile files on changes, install `chokidar`:
 
-```sh
-npm i -D chokidar
-```
+<PackageManagerTabs command="install -D chokidar" />
 
 Then, add the `-w` flag:
 
diff --git a/apps/website/docs/docs/usage/html.mdx b/apps/website/docs/docs/usage/html.mdx
index 6fcaba7f..b432cebd 100644
--- a/apps/website/docs/docs/usage/html.mdx
+++ b/apps/website/docs/docs/usage/html.mdx
@@ -2,28 +2,12 @@
 title: "@swc/html"
 ---
 
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 import TypeDeclarations from '@components/TypeDeclarations';
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/html
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/html
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/html
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/html" />
 
 ## Usage
 
diff --git a/apps/website/docs/docs/usage/jest.mdx b/apps/website/docs/docs/usage/jest.mdx
index 832bcec3..f120c565 100644
--- a/apps/website/docs/docs/usage/jest.mdx
+++ b/apps/website/docs/docs/usage/jest.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # @swc/jest
 
@@ -6,23 +6,7 @@ To make your Jest tests run faster, you can swap out the default JavaScript-base
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D jest @swc/core @swc/jest" />
 
 ## Usage
 
diff --git a/apps/website/docs/docs/usage/swc-loader.mdx b/apps/website/docs/docs/usage/swc-loader.mdx
index 6169e234..b2d7a6c3 100644
--- a/apps/website/docs/docs/usage/swc-loader.mdx
+++ b/apps/website/docs/docs/usage/swc-loader.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # swc-loader
 
@@ -8,23 +8,7 @@ For Rspack users, you can use Rspack's [builtin:swc-loader](https://rspack.rs/gu
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/core swc-loader
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/core swc-loader
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/core swc-loader
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/core swc-loader" />
 
 ## Usage
 
diff --git a/apps/website/docs/playground/index.mdx b/apps/website/docs/playground/index.mdx
index 7d398b7c..c83021d4 100644
--- a/apps/website/docs/playground/index.mdx
+++ b/apps/website/docs/playground/index.mdx
@@ -1,7 +1,6 @@
 ---
 title: SWC Playground
-sidebar: false
-outline: false
+pageType: custom
 ---
 
 <iframe
diff --git a/apps/website/theme/index.css b/apps/website/theme/index.css
index dd486045..e0b02c0e 100644
--- a/apps/website/theme/index.css
+++ b/apps/website/theme/index.css
@@ -1,73 +1,559 @@
-/* Theme alignment with the original Nextra-based swc.rs site. */
+/*
+ * Generated by Agent.
+ * Customized with the rspress-custom-theme skill:
+ * https://github.com/rstackjs/agent-skills/blob/main/skills/rspress-custom-theme/SKILL.md
+ * Theme alignment with the original Nextra-based swc.rs site.
+ */
 
 :root {
-  --rp-font-family-base: ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --rp-c-bg: #fafafa;
-  --rp-c-bg-alt: #fafafa;
-  --rp-c-bg-soft: #f3f4f6;
-  --rp-c-bg-mute: #e5e7eb;
-  --rp-c-brand: hsl(212, 100%, 45%);
-  --rp-c-brand-light: hsl(212, 100%, 50%);
-  --rp-c-brand-lighter: hsl(212, 100%, 66%);
-  --rp-c-brand-dark: hsl(212, 100%, 39%);
-  --rp-c-brand-darker: hsl(212, 100%, 32%);
-  --rp-c-brand-tint: hsla(212, 100%, 45%, 0.1);
-  --rp-c-link: var(--rp-c-brand);
+  --rp-c-brand: #0875e1;
+  --rp-c-brand-light: #268cf0;
+  --rp-c-brand-lighter: #d8eaff;
+  --rp-c-brand-dark: #0068d1;
+  --rp-c-brand-darker: #0055ad;
+  --rp-c-brand-tint: rgba(8, 117, 225, 0.1);
+
+  --rp-c-bg: #ffffff;
+  --rp-c-bg-soft: #f7f8fa;
+  --rp-c-bg-mute: #f0f3f6;
+  --rp-c-divider: rgba(15, 23, 42, 0.18);
+  --rp-c-divider-light: rgba(15, 23, 42, 0.1);
+  --rp-c-text-0: #0f172a;
+  --rp-c-text-1: #1e293b;
+  --rp-c-text-2: #5b677a;
+  --rp-c-text-code: #3b5875;
+  --rp-c-text-code-bg: rgba(71, 85, 105, 0.08);
+  --rp-c-text-code-border: rgba(71, 85, 105, 0.08);
+
+  --rp-nav-height: 72px;
+  --rp-sidebar-width: 280px;
+  --rp-outline-width: 280px;
+  --rp-content-max-width: 1200px;
+  --rp-content-padding-x: 64px;
+  --rp-content-padding-y: 56px;
+
+  --rp-radius: 10px;
+  --rp-radius-small: 6px;
+  --rp-code-font-size: 0.925rem;
+  --rp-code-title-bg: transparent;
+  --rp-code-block-bg: #ffffff;
+  --rp-code-block-border: 1px solid #d8dee9;
+  --rp-code-block-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+
+  --rp-home-hero-secondary-color: #f6b73c;
+  --rp-home-hero-title-color: transparent;
+  --rp-home-hero-title-bg: #f26b21;
+  --rp-home-background-bg: radial-gradient(
+      circle at 15% 0%,
+      rgba(255, 196, 77, 0.2),
+      transparent 32rem
+    ),
+    radial-gradient(
+      circle at 88% 6%,
+      rgba(242, 107, 33, 0.1),
+      transparent 28rem
+    ),
+    #ffffff;
+  --rp-home-feature-bg: rgba(255, 255, 255, 0.82);
 }
 
 .dark {
-  --rp-c-bg: #111;
-  --rp-c-bg-alt: #111;
-  --rp-c-bg-soft: #262626;
-  --rp-c-bg-mute: #404040;
-  --rp-c-brand: hsl(204, 100%, 55%);
-  --rp-c-brand-light: hsl(204, 100%, 60%);
-  --rp-c-brand-lighter: hsl(204, 100%, 76%);
-  --rp-c-brand-dark: hsl(204, 100%, 49%);
-  --rp-c-brand-darker: hsl(204, 100%, 42%);
-  --rp-c-brand-tint: hsla(204, 100%, 55%, 0.12);
-  --rp-c-link: var(--rp-c-brand);
+  --rp-c-brand: #60a5fa;
+  --rp-c-brand-light: #7db7fb;
+  --rp-c-brand-lighter: #9ac8fc;
+  --rp-c-brand-dark: #3b91f3;
+  --rp-c-brand-darker: #2581eb;
+  --rp-c-brand-tint: rgba(96, 165, 250, 0.12);
+
+  --rp-c-bg: #111318;
+  --rp-c-bg-soft: #191c23;
+  --rp-c-bg-mute: #222630;
+  --rp-c-divider: rgba(226, 232, 240, 0.2);
+  --rp-c-divider-light: rgba(226, 232, 240, 0.1);
+  --rp-c-text-0: #f8fafc;
+  --rp-c-text-1: #e5eaf1;
+  --rp-c-text-2: #a7b0c0;
+  --rp-c-text-code: #c7d8ec;
+  --rp-c-text-code-bg: rgba(148, 163, 184, 0.12);
+  --rp-c-text-code-border: rgba(148, 163, 184, 0.08);
+  --rp-code-block-bg: #15181e;
+  --rp-code-block-border: 1px solid rgba(226, 232, 240, 0.12);
+
+  --rp-home-hero-secondary-color: #ffc44d;
+  --rp-home-hero-title-bg: #ff9b42;
+  --rp-home-background-bg: radial-gradient(
+      circle at 15% 0%,
+      rgba(255, 196, 77, 0.12),
+      transparent 32rem
+    ),
+    radial-gradient(
+      circle at 88% 6%,
+      rgba(242, 107, 33, 0.1),
+      transparent 28rem
+    ),
+    #111318;
+  --rp-home-feature-bg: rgba(25, 28, 35, 0.84);
 }
 
-::selection {
-  background: hsla(212, 100%, 45%, 0.3);
+html {
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
-.dark ::selection {
-  background: hsla(204, 100%, 55%, 0.3);
+body {
+  letter-spacing: -0.006em;
 }
 
-.swc-nav-title__logo {
-  display: block;
-  width: 50px;
-  height: auto;
+/* Header */
+.rp-nav {
+  border-bottom-color: var(--rp-c-divider-light);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
 }
 
-.swc-nav-title__name {
-  margin: 0 0.5rem;
-  font-weight: 800;
-  user-select: none;
+.rp-nav__title__link {
+  font-size: 1.25rem;
+  font-weight: 750;
+  letter-spacing: -0.025em;
 }
 
-.swc-nav-title__tagline {
-  color: #4b5563;
-  font-weight: 400;
+.rp-nav__title__logo {
+  margin-right: 0.5rem;
+}
+
+.rp-nav__title__logo-image {
+  width: auto;
+  height: 32px;
+}
+
+.rp-nav__title__link::after {
+  content: "Speedy Web Compiler";
+  margin-left: 0.65rem;
+  color: var(--rp-c-text-2);
+  font-size: 0.95rem;
+  font-weight: 450;
+  letter-spacing: -0.01em;
   white-space: nowrap;
 }
 
-.dark .swc-nav-title__tagline {
-  color: #9ca3af;
+.rp-nav__right {
+  gap: 24px;
 }
 
-.swc-footer {
-  display: flex;
-  justify-content: flex-start;
+.rp-nav-menu {
+  order: 1;
+}
+
+.rp-search-button {
+  order: 2;
+  min-width: 280px;
+  height: 42px;
+  border: 0;
+  background: var(--rp-c-bg-soft);
+  box-shadow: inset 0 0 0 1px var(--rp-c-divider-light);
+}
+
+.rp-search-button:hover {
+  border: 0;
+  box-shadow: inset 0 0 0 1px var(--rp-c-brand);
+}
+
+.rp-nav__others {
+  order: 3;
+}
+
+.rp-nav-hamburger__md {
+  order: 4;
+}
+
+.rp-nav-menu__item__container {
+  color: var(--rp-c-text-2);
+  font-size: 0.95rem;
+  font-weight: 550;
+}
+
+.rp-nav-menu__item:hover .rp-nav-menu__item__container,
+.rp-nav-menu__item--active .rp-nav-menu__item__container {
+  font-size: 0.95rem;
+}
+
+.rp-nav-menu__item--active .rp-nav-menu__item__container {
+  font-weight: 650;
+}
+
+/* Home */
+.rp-home-hero {
+  align-items: center;
+  max-width: 1200px;
+  margin: 4.75rem auto 3.75rem;
+  padding: 2rem 40px;
+}
+
+.rp-home-hero__container {
+  gap: 28px;
+}
+
+.rp-home-hero__content {
+  max-width: 760px;
+}
+
+.rp-home-hero__title,
+.rp-home-hero__subtitle {
+  color: var(--rp-c-text-0);
+  font-weight: 780;
+  line-height: 1.08;
+  letter-spacing: -0.05em;
+}
+
+.rp-home-hero__title {
+  font-size: clamp(4.5rem, 7vw, 6.5rem);
+}
+
+.rp-home-hero__title-brand {
+  width: auto;
+}
+
+.rp-home-hero__subtitle {
+  max-width: 760px;
+  margin-top: 0.25rem;
+  font-size: clamp(2.6rem, 4.2vw, 4rem);
+}
+
+.rp-home-hero__tagline {
+  max-width: 720px;
+  color: var(--rp-c-text-2);
+  font-size: 1.15rem;
+  line-height: 1.75;
+}
+
+.rp-home-hero__actions {
+  gap: 0.75rem;
+}
+
+.rp-home-hero .rp-button {
+  min-width: 0;
+  height: 46px;
+  padding: 0 1.25rem;
+  border-radius: 9px;
+  font-size: 0.95rem;
+}
+
+.rp-home-hero .rp-button--brand {
+  background: #f26b21;
+  box-shadow: 0 8px 24px rgba(242, 107, 33, 0.2);
+}
+
+.rp-home-hero .rp-button--brand:hover {
+  background: #dc5b14;
+  box-shadow: 0 10px 28px rgba(242, 107, 33, 0.28);
+  opacity: 1;
+  transform: translateY(-1px);
+}
+
+.rp-home-hero .rp-button--alt {
+  border-color: var(--rp-c-divider-light);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.rp-home-hero__image {
+  position: relative;
+  flex: 0 1 340px;
+  justify-content: center;
+  max-width: 340px;
+  padding: 2rem;
+}
+
+.rp-home-hero__image::before {
+  position: absolute;
+  z-index: -1;
+  width: 280px;
+  height: 280px;
+  border: 1px solid rgba(242, 107, 33, 0.14);
+  border-radius: 50%;
+  background: rgba(255, 196, 77, 0.12);
+  box-shadow: 0 0 0 32px rgba(255, 196, 77, 0.05),
+    0 24px 80px rgba(242, 107, 33, 0.12);
+  content: "";
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+}
+
+.rp-home-hero__image-img {
   width: 100%;
-  max-width: 90rem;
+  filter: drop-shadow(0 18px 30px rgba(242, 107, 33, 0.12));
+}
+
+.rp-home-feature {
+  --rp-home-feature-gap: 18px;
+  max-width: 1200px;
+  margin-bottom: 4rem;
+  padding: 0 40px;
+}
+
+.rp-home-feature__card {
+  padding: 1.5rem;
+  border-color: var(--rp-c-divider-light);
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.035);
+  backdrop-filter: blur(12px);
+}
+
+.rp-home-feature__card:hover {
+  border-color: rgba(242, 107, 33, 0.45);
+  color: inherit;
+  box-shadow: 0 12px 34px rgba(242, 107, 33, 0.09);
+  transform: translateY(-2px);
+}
+
+.rp-home-feature__icon {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 0;
+  border-radius: 10px;
+  background: rgba(255, 196, 77, 0.14);
+  font-size: 1.35rem;
+}
+
+.rp-home-feature__title {
+  color: var(--rp-c-text-0);
+  font-size: 1rem;
+}
+
+.rp-home-feature__detail {
+  font-size: 0.9rem;
+  font-weight: 430;
+  line-height: 1.65;
+}
+
+.rp-home-content {
+  max-width: 1120px;
   margin: 0 auto;
-  padding: 3rem 1.5rem;
-  color: #4b5563;
+  padding: 0 40px 5rem;
+}
+
+/* Sidebar */
+.rp-doc-layout__sidebar {
+  padding: 20px 12px 48px;
+  border-right-color: var(--rp-c-divider-light);
+}
+
+.rp-sidebar-item {
+  margin-top: 1px;
+  padding: 6px 10px;
+  color: var(--rp-c-text-2);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  line-height: 20px;
+}
+
+.rp-sidebar-item:hover,
+.rp-sidebar-item--pending {
+  color: var(--rp-c-text-1);
+  background: color-mix(in srgb, var(--rp-c-bg-mute) 64%, transparent);
+}
+
+.rp-sidebar-group {
+  margin-top: 9px;
+  color: var(--rp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.rp-sidebar-item--active {
+  background: var(--rp-c-brand-tint);
+  color: var(--rp-c-brand-dark);
+  font-weight: 600;
+}
+
+.dark .rp-sidebar-item--active {
+  color: var(--rp-c-brand-light);
+}
+
+.rp-sidebar-item--group-item {
+  margin-top: 0;
+  padding: 5px 10px 5px 20px;
+}
+
+.rp-sidebar-item--group-item::before {
+  display: none;
+}
+
+.rp-sidebar-item--group-item.rp-sidebar-item--active
+  .rp-sidebar-item__left::before {
+  display: none;
+}
+
+/* Main document typography */
+.rp-doc-layout__doc-container {
+  min-width: 0;
+}
+
+.rp-doc {
+  color: var(--rp-c-text-1);
+  font-size: 1.04rem;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h1) {
+  margin-bottom: 2.75rem;
+  color: var(--rp-c-text-0);
+  font-size: clamp(2.35rem, 3vw, 2.85rem);
+  font-weight: 760;
+  line-height: 1.12;
+  letter-spacing: -0.04em;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2) {
+  margin-top: 3.25rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.65rem;
+  border-bottom: 1px solid var(--rp-c-divider-light);
+  color: var(--rp-c-text-0);
+  font-size: 1.85rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.03em;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2:first-of-type)::before {
+  display: none;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h3) {
+  color: var(--rp-c-text-0);
+  font-size: 1.45rem;
+  font-weight: 680;
+  letter-spacing: -0.02em;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(p):not(:where(li p)),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(ul, ol) {
+  line-height: 1.85;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(a.rp-link):not(
+    :where(.rp-header-anchor)
+  ) {
+  text-underline-offset: 3px;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(a.rp-link):not(
+    :where(.rp-header-anchor)
+  ):hover {
+  border-bottom: 0;
+  text-decoration: underline;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(:not(pre) > code) {
+  border-radius: 5px;
+  padding: 0.12em 0.35em;
+}
+
+/* Code blocks and package-manager tabs */
+.rp-codeblock {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.rp-codeblock pre {
+  line-height: 1.75;
+}
+
+.rp-tabs {
+  contain: content;
+  overflow: visible;
+  margin: 1.75rem 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.rp-tabs__label {
+  gap: 0.25rem;
+  padding: 0;
+  border-bottom: 0;
+  background: transparent;
+}
+
+.rp-tabs__label__item {
+  margin: 0;
+  padding: 0.55rem 0.75rem;
+  border-radius: 7px;
+  font-size: 0.95rem;
+  font-weight: 520;
+}
+
+.rp-tabs__label__item--not-selected:hover {
+  color: var(--rp-c-text-0);
+  background: var(--rp-c-bg-soft);
+}
+
+.rp-tabs__label__item--selected,
+.dark .rp-tabs__label__item--selected {
+  color: var(--rp-c-brand);
+  background: var(--rp-c-brand-tint);
+  box-shadow: none;
+  font-weight: 650;
+}
+
+.rp-tabs__content__item {
+  padding: 1rem 0 0;
+}
+
+.rp-tabs__content__item > .rp-codeblock:only-child,
+.rp-tabs__content__item > .rp-tabs:only-child {
+  margin: 0;
+  border: var(--rp-code-block-border);
+  border-radius: 8px;
+  box-shadow: var(--rp-code-block-shadow);
+}
+
+/* On-page outline */
+.rp-doc-layout__outline {
+  box-shadow: none;
+}
+
+.rp-outline {
+  border-left-color: var(--rp-c-divider-light);
+}
+
+.rp-outline__title {
+  color: var(--rp-c-text-2);
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.rp-outline .rp-toc-item {
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+.rp-outline .rp-toc-item__text,
+.rp-outline .rp-toc-item__text code {
+  color: var(--rp-c-text-2);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+.rp-outline .rp-toc-item--active .rp-toc-item__text,
+.rp-outline .rp-toc-item--active .rp-toc-item__text code {
+  color: var(--rp-c-link);
+  font-weight: 500;
+}
+
+/* "Powered by Vercel" footer, shown on every page like the Nextra footer. */
+.swc-footer {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+  border-top: 1px solid var(--rp-c-divider-light);
 }
 
 .swc-footer a {
@@ -75,26 +561,118 @@
   align-items: center;
   gap: 0.35rem;
   font-weight: 600;
-  color: inherit;
+  color: var(--rp-c-text-1);
   text-decoration: none;
 }
 
-.dark .swc-footer {
-  color: #9ca3af;
-}
+@media (width <= 1279px) {
+  :root {
+    --rp-content-padding-x: 40px;
+    --rp-content-padding-y: 48px;
+  }
+
+  .rp-search-button {
+    min-width: 190px;
+  }
 
-@media (width < 1024px) {
-  .swc-nav-title__tagline {
+  .rp-nav__title__link::after {
     display: none;
   }
 }
 
-@media (width < 768px) {
-  .swc-nav-title__name {
-    display: none;
+@media (width <= 1000px) {
+  .rp-home-hero {
+    gap: 1rem;
+    margin: 2.5rem auto 3rem;
+    padding: 1.5rem 32px;
+  }
+
+  .rp-home-hero__image {
+    flex-basis: auto;
+    width: 220px;
+    padding: 1.5rem;
+  }
+
+  .rp-home-hero__image::before {
+    width: 190px;
+    height: 190px;
   }
 
-  .swc-footer {
+  .rp-home-hero__content,
+  .rp-home-hero__subtitle,
+  .rp-home-hero__tagline {
+    max-width: 680px;
+  }
+
+  .rp-home-feature {
+    padding: 0 32px;
+  }
+}
+
+@media (width <= 768px) {
+  :root {
+    --rp-nav-height: 64px;
+    --rp-content-padding-x: 22px;
+    --rp-content-padding-y: 36px;
+  }
+
+  .rp-nav__title__logo-image {
+    height: 28px;
+  }
+
+  .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h1) {
+    margin-bottom: 2rem;
+    font-size: 2.2rem;
+  }
+
+  .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2) {
+    margin-top: 2.5rem;
+    font-size: 1.6rem;
+  }
+
+  .rp-tabs__label {
+    gap: 0;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  .rp-tabs__label__item {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .rp-home-hero {
+    margin-top: 1.5rem;
+    padding-right: 22px;
+    padding-left: 22px;
+  }
+
+  .rp-home-hero__title {
+    font-size: 3.6rem;
+  }
+
+  .rp-home-hero__subtitle {
+    font-size: 2.35rem;
+  }
+
+  .rp-home-hero__tagline {
+    font-size: 1rem;
+    line-height: 1.65;
+  }
+
+  .rp-home-hero__actions {
+    flex-flow: row wrap;
     justify-content: center;
+    width: 100%;
+  }
+
+  .rp-home-feature {
+    padding: 0 22px;
+  }
+
+  .rp-home-content {
+    padding-right: 22px;
+    padding-left: 22px;
   }
 }

From c023145973453e2383bad87b78c24fc778007cdc Mon Sep 17 00:00:00 2001
From: sunyiteng <sooniter@gmail.com>
Date: Fri, 10 Jul 2026 15:06:09 +0800
Subject: [PATCH 2/3] feat(website): additional theme polish and enable llms

---
 apps/website/rspress.config.ts    |  1 +
 apps/website/src/styles/index.css |  4 ++
 apps/website/theme/index.css      | 96 +++++++++++++++++++++++--------
 3 files changed, 78 insertions(+), 23 deletions(-)

diff --git a/apps/website/rspress.config.ts b/apps/website/rspress.config.ts
index 9ed8bf33..eb55db60 100644
--- a/apps/website/rspress.config.ts
+++ b/apps/website/rspress.config.ts
@@ -86,6 +86,7 @@ export default defineConfig({
   route: {
     cleanUrls: true,
   },
+  llms: true,
   builderConfig: {
     resolve: {
       alias: {
diff --git a/apps/website/src/styles/index.css b/apps/website/src/styles/index.css
index b451b840..c7706eb8 100644
--- a/apps/website/src/styles/index.css
+++ b/apps/website/src/styles/index.css
@@ -51,6 +51,10 @@
   min-width: 0;
 }
 
+.swc-callout .rp-codeblock {
+  --rp-code-title-bg: var(--rp-c-bg-soft);
+}
+
 /* MDX children come wrapped in <p>/<ul> with doc-theme margins; strip the
    outer ones so content aligns with the emoji instead of sagging below it. */
 .swc-callout__content > *:first-child {
diff --git a/apps/website/theme/index.css b/apps/website/theme/index.css
index e0b02c0e..c1411bfd 100644
--- a/apps/website/theme/index.css
+++ b/apps/website/theme/index.css
@@ -13,7 +13,7 @@
   --rp-c-brand-darker: #0055ad;
   --rp-c-brand-tint: rgba(8, 117, 225, 0.1);
 
-  --rp-c-bg: #ffffff;
+  --rp-c-bg: #fbfbfc;
   --rp-c-bg-soft: #f7f8fa;
   --rp-c-bg-mute: #f0f3f6;
   --rp-c-divider: rgba(15, 23, 42, 0.18);
@@ -26,7 +26,7 @@
   --rp-c-text-code-border: rgba(71, 85, 105, 0.08);
 
   --rp-nav-height: 72px;
-  --rp-sidebar-width: 280px;
+  --rp-sidebar-width: 264px;
   --rp-outline-width: 280px;
   --rp-content-max-width: 1200px;
   --rp-content-padding-x: 64px;
@@ -53,7 +53,7 @@
       rgba(242, 107, 33, 0.1),
       transparent 28rem
     ),
-    #ffffff;
+    #fbfbfc;
   --rp-home-feature-bg: rgba(255, 255, 255, 0.82);
 }
 
@@ -335,45 +335,65 @@ body {
 
 /* Sidebar */
 .rp-doc-layout__sidebar {
-  padding: 20px 12px 48px;
+  --swc-sidebar-heading: #667085;
+  --swc-sidebar-icon: #98a2b3;
+  --swc-sidebar-text: #747b88;
+
+  padding: 22px 14px 48px;
   border-right-color: var(--rp-c-divider-light);
 }
 
+.dark .rp-doc-layout__sidebar {
+  --swc-sidebar-heading: #d0d5dd;
+  --swc-sidebar-icon: #667085;
+  --swc-sidebar-text: #98a2b3;
+}
+
 .rp-sidebar-item {
-  margin-top: 1px;
-  padding: 6px 10px;
-  color: var(--rp-c-text-2);
-  border-radius: 8px;
-  font-size: 0.875rem;
+  margin-top: 2px;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 5px;
+  color: var(--swc-sidebar-text);
+  border-radius: 6px;
+  font-size: 0.84375rem;
+  font-weight: 400;
   line-height: 20px;
 }
 
 .rp-sidebar-item:hover,
 .rp-sidebar-item--pending {
-  color: var(--rp-c-text-1);
-  background: color-mix(in srgb, var(--rp-c-bg-mute) 64%, transparent);
+  color: var(--swc-sidebar-heading);
+  background: color-mix(in srgb, var(--rp-c-bg-mute) 52%, transparent);
 }
 
 .rp-sidebar-group {
-  margin-top: 9px;
-  color: var(--rp-c-text-1);
+  margin-top: 16px;
+  margin-bottom: 4px;
+  color: var(--swc-sidebar-heading);
+  font-weight: 600;
+  letter-spacing: 0.005em;
+}
+
+.rp-sidebar-item[data-depth="0"] {
   font-size: 0.875rem;
-  font-weight: 500;
 }
 
-.rp-sidebar-item--active {
-  background: var(--rp-c-brand-tint);
-  color: var(--rp-c-brand-dark);
-  font-weight: 600;
+.rp-sidebar-group .rp-sidebar-item__right {
+  color: var(--swc-sidebar-icon);
+  opacity: 0.72;
 }
 
-.dark .rp-sidebar-item--active {
-  color: var(--rp-c-brand-light);
+.rp-sidebar-group .rp-sidebar-item__right svg {
+  width: 14px;
+  height: 14px;
 }
 
 .rp-sidebar-item--group-item {
-  margin-top: 0;
-  padding: 5px 10px 5px 20px;
+  margin-top: 1px;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 5px;
 }
 
 .rp-sidebar-item--group-item::before {
@@ -382,7 +402,37 @@ body {
 
 .rp-sidebar-item--group-item.rp-sidebar-item--active
   .rp-sidebar-item__left::before {
-  display: none;
+  left: 10px;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--rp-c-brand);
+  inset-block: 50% auto;
+  transform: translateY(-50%);
+}
+
+.rp-sidebar-item--active,
+.rp-sidebar-item--active:hover {
+  color: var(--rp-c-brand-dark);
+  background: transparent;
+  font-weight: 600;
+}
+
+.dark .rp-sidebar-item--active,
+.dark .rp-sidebar-item--active:hover {
+  color: var(--rp-c-brand-light);
+}
+
+.rp-sidebar-item--active:not(.rp-sidebar-item--group-item)::before {
+  position: absolute;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--rp-c-brand);
+  content: "";
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  transform: translateY(-50%);
 }
 
 /* Main document typography */

From 03ca7545f5af1e81fad7a866def944d795216e91 Mon Sep 17 00:00:00 2001
From: sunyiteng <sooniter@gmail.com>
Date: Fri, 10 Jul 2026 15:58:33 +0800
Subject: [PATCH 3/3] feat(website): customize the Rspress theme and home page

---
 apps/website/docs/_nav.json       |   5 +
 apps/website/src/styles/index.css |   4 +
 apps/website/theme/index.css      | 308 ++++--------------------------
 3 files changed, 50 insertions(+), 267 deletions(-)

diff --git a/apps/website/docs/_nav.json b/apps/website/docs/_nav.json
index d406a451..05fd4e03 100644
--- a/apps/website/docs/_nav.json
+++ b/apps/website/docs/_nav.json
@@ -8,5 +8,10 @@
     "text": "Playground",
     "link": "/playground/",
     "activeMatch": "^/playground/"
+  },
+  {
+    "text": "Blog",
+    "link": "/blog/perf-swc-vs-babel",
+    "activeMatch": "^/blog/"
   }
 ]
diff --git a/apps/website/src/styles/index.css b/apps/website/src/styles/index.css
index c7706eb8..7f572da9 100644
--- a/apps/website/src/styles/index.css
+++ b/apps/website/src/styles/index.css
@@ -76,6 +76,10 @@
   color: oklch(0.372 0.044 257.287);
 }
 
+.swc-home > .rp-llms-container {
+  display: none;
+}
+
 .dark .swc-home {
   color: oklch(0.929 0.013 255.508);
 }
diff --git a/apps/website/theme/index.css b/apps/website/theme/index.css
index c1411bfd..d8c19b69 100644
--- a/apps/website/theme/index.css
+++ b/apps/website/theme/index.css
@@ -39,22 +39,6 @@
   --rp-code-block-bg: #ffffff;
   --rp-code-block-border: 1px solid #d8dee9;
   --rp-code-block-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
-
-  --rp-home-hero-secondary-color: #f6b73c;
-  --rp-home-hero-title-color: transparent;
-  --rp-home-hero-title-bg: #f26b21;
-  --rp-home-background-bg: radial-gradient(
-      circle at 15% 0%,
-      rgba(255, 196, 77, 0.2),
-      transparent 32rem
-    ),
-    radial-gradient(
-      circle at 88% 6%,
-      rgba(242, 107, 33, 0.1),
-      transparent 28rem
-    ),
-    #fbfbfc;
-  --rp-home-feature-bg: rgba(255, 255, 255, 0.82);
 }
 
 .dark {
@@ -78,21 +62,6 @@
   --rp-c-text-code-border: rgba(148, 163, 184, 0.08);
   --rp-code-block-bg: #15181e;
   --rp-code-block-border: 1px solid rgba(226, 232, 240, 0.12);
-
-  --rp-home-hero-secondary-color: #ffc44d;
-  --rp-home-hero-title-bg: #ff9b42;
-  --rp-home-background-bg: radial-gradient(
-      circle at 15% 0%,
-      rgba(255, 196, 77, 0.12),
-      transparent 32rem
-    ),
-    radial-gradient(
-      circle at 88% 6%,
-      rgba(242, 107, 33, 0.1),
-      transparent 28rem
-    ),
-    #111318;
-  --rp-home-feature-bg: rgba(25, 28, 35, 0.84);
 }
 
 html {
@@ -108,36 +77,35 @@ body {
 }
 
 /* Header */
-.rp-nav {
-  border-bottom-color: var(--rp-c-divider-light);
-  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
-}
-
 .rp-nav__title__link {
   font-size: 1.25rem;
   font-weight: 750;
   letter-spacing: -0.025em;
 }
 
-.rp-nav__title__logo {
-  margin-right: 0.5rem;
+.swc-nav-title__logo {
+  display: block;
+  width: 50px;
+  height: auto;
 }
 
-.rp-nav__title__logo-image {
-  width: auto;
-  height: 32px;
+.swc-nav-title__name {
+  margin: 0 0.5rem;
+  font-weight: 800;
+  user-select: none;
 }
 
-.rp-nav__title__link::after {
-  content: "Speedy Web Compiler";
-  margin-left: 0.65rem;
+.swc-nav-title__tagline {
   color: var(--rp-c-text-2);
   font-size: 0.95rem;
-  font-weight: 450;
-  letter-spacing: -0.01em;
+  font-weight: 400;
   white-space: nowrap;
 }
 
+.dark .swc-nav-title__tagline {
+  color: #9ca3af;
+}
+
 .rp-nav__right {
   gap: 24px;
 }
@@ -183,161 +151,11 @@ body {
   font-weight: 650;
 }
 
-/* Home */
-.rp-home-hero {
-  align-items: center;
-  max-width: 1200px;
-  margin: 4.75rem auto 3.75rem;
-  padding: 2rem 40px;
-}
-
-.rp-home-hero__container {
-  gap: 28px;
-}
-
-.rp-home-hero__content {
-  max-width: 760px;
-}
-
-.rp-home-hero__title,
-.rp-home-hero__subtitle {
-  color: var(--rp-c-text-0);
-  font-weight: 780;
-  line-height: 1.08;
-  letter-spacing: -0.05em;
-}
-
-.rp-home-hero__title {
-  font-size: clamp(4.5rem, 7vw, 6.5rem);
-}
-
-.rp-home-hero__title-brand {
-  width: auto;
-}
-
-.rp-home-hero__subtitle {
-  max-width: 760px;
-  margin-top: 0.25rem;
-  font-size: clamp(2.6rem, 4.2vw, 4rem);
-}
-
-.rp-home-hero__tagline {
-  max-width: 720px;
-  color: var(--rp-c-text-2);
-  font-size: 1.15rem;
-  line-height: 1.75;
-}
-
-.rp-home-hero__actions {
-  gap: 0.75rem;
-}
-
-.rp-home-hero .rp-button {
-  min-width: 0;
-  height: 46px;
-  padding: 0 1.25rem;
-  border-radius: 9px;
-  font-size: 0.95rem;
-}
-
-.rp-home-hero .rp-button--brand {
-  background: #f26b21;
-  box-shadow: 0 8px 24px rgba(242, 107, 33, 0.2);
-}
-
-.rp-home-hero .rp-button--brand:hover {
-  background: #dc5b14;
-  box-shadow: 0 10px 28px rgba(242, 107, 33, 0.28);
-  opacity: 1;
-  transform: translateY(-1px);
-}
-
-.rp-home-hero .rp-button--alt {
-  border-color: var(--rp-c-divider-light);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
-}
-
-.rp-home-hero__image {
-  position: relative;
-  flex: 0 1 340px;
-  justify-content: center;
-  max-width: 340px;
-  padding: 2rem;
-}
-
-.rp-home-hero__image::before {
-  position: absolute;
-  z-index: -1;
-  width: 280px;
-  height: 280px;
-  border: 1px solid rgba(242, 107, 33, 0.14);
-  border-radius: 50%;
-  background: rgba(255, 196, 77, 0.12);
-  box-shadow: 0 0 0 32px rgba(255, 196, 77, 0.05),
-    0 24px 80px rgba(242, 107, 33, 0.12);
-  content: "";
-  inset: 50% auto auto 50%;
-  transform: translate(-50%, -50%);
-}
-
-.rp-home-hero__image-img {
-  width: 100%;
-  filter: drop-shadow(0 18px 30px rgba(242, 107, 33, 0.12));
-}
-
-.rp-home-feature {
-  --rp-home-feature-gap: 18px;
-  max-width: 1200px;
-  margin-bottom: 4rem;
-  padding: 0 40px;
-}
-
-.rp-home-feature__card {
-  padding: 1.5rem;
-  border-color: var(--rp-c-divider-light);
-  border-radius: 16px;
-  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.035);
-  backdrop-filter: blur(12px);
-}
-
-.rp-home-feature__card:hover {
-  border-color: rgba(242, 107, 33, 0.45);
-  color: inherit;
-  box-shadow: 0 12px 34px rgba(242, 107, 33, 0.09);
-  transform: translateY(-2px);
-}
-
-.rp-home-feature__icon {
-  min-width: 2.75rem;
-  min-height: 2.75rem;
-  border: 0;
-  border-radius: 10px;
-  background: rgba(255, 196, 77, 0.14);
-  font-size: 1.35rem;
-}
-
-.rp-home-feature__title {
-  color: var(--rp-c-text-0);
-  font-size: 1rem;
-}
-
-.rp-home-feature__detail {
-  font-size: 0.9rem;
-  font-weight: 430;
-  line-height: 1.65;
-}
-
-.rp-home-content {
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 40px 5rem;
-}
-
 /* Sidebar */
 .rp-doc-layout__sidebar {
-  --swc-sidebar-heading: #667085;
+  --swc-sidebar-heading: #475467;
   --swc-sidebar-icon: #98a2b3;
-  --swc-sidebar-text: #747b88;
+  --swc-sidebar-text: #667085;
 
   padding: 22px 14px 48px;
   border-right-color: var(--rp-c-divider-light);
@@ -363,8 +181,11 @@ body {
 
 .rp-sidebar-item:hover,
 .rp-sidebar-item--pending {
-  color: var(--swc-sidebar-heading);
-  background: color-mix(in srgb, var(--rp-c-bg-mute) 52%, transparent);
+  background: transparent;
+}
+
+.rp-sidebar-item:hover {
+  color: var(--swc-sidebar-text);
 }
 
 .rp-sidebar-group {
@@ -375,6 +196,15 @@ body {
   letter-spacing: 0.005em;
 }
 
+.rp-sidebar-group:hover {
+  color: var(--swc-sidebar-heading);
+}
+
+.rp-doc-layout__sidebar .rp-sidebar-item .rp-doc {
+  color: inherit;
+  font-size: inherit;
+}
+
 .rp-sidebar-item[data-depth="0"] {
   font-size: 0.875rem;
 }
@@ -413,7 +243,7 @@ body {
 
 .rp-sidebar-item--active,
 .rp-sidebar-item--active:hover {
-  color: var(--rp-c-brand-dark);
+  color: var(--rp-c-brand);
   background: transparent;
   font-weight: 600;
 }
@@ -503,6 +333,13 @@ body {
   padding: 0.12em 0.35em;
 }
 
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(table),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(thead),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(tbody),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(tbody tr):hover {
+  background: var(--rp-code-block-bg);
+}
+
 /* Code blocks and package-manager tabs */
 .rp-codeblock {
   overflow: hidden;
@@ -625,40 +462,11 @@ body {
     min-width: 190px;
   }
 
-  .rp-nav__title__link::after {
+  .swc-nav-title__tagline {
     display: none;
   }
 }
 
-@media (width <= 1000px) {
-  .rp-home-hero {
-    gap: 1rem;
-    margin: 2.5rem auto 3rem;
-    padding: 1.5rem 32px;
-  }
-
-  .rp-home-hero__image {
-    flex-basis: auto;
-    width: 220px;
-    padding: 1.5rem;
-  }
-
-  .rp-home-hero__image::before {
-    width: 190px;
-    height: 190px;
-  }
-
-  .rp-home-hero__content,
-  .rp-home-hero__subtitle,
-  .rp-home-hero__tagline {
-    max-width: 680px;
-  }
-
-  .rp-home-feature {
-    padding: 0 32px;
-  }
-}
-
 @media (width <= 768px) {
   :root {
     --rp-nav-height: 64px;
@@ -666,8 +474,8 @@ body {
     --rp-content-padding-y: 36px;
   }
 
-  .rp-nav__title__logo-image {
-    height: 28px;
+  .swc-nav-title__name {
+    display: none;
   }
 
   .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h1) {
@@ -691,38 +499,4 @@ body {
     padding-left: 0.5rem;
     font-size: 0.875rem;
   }
-
-  .rp-home-hero {
-    margin-top: 1.5rem;
-    padding-right: 22px;
-    padding-left: 22px;
-  }
-
-  .rp-home-hero__title {
-    font-size: 3.6rem;
-  }
-
-  .rp-home-hero__subtitle {
-    font-size: 2.35rem;
-  }
-
-  .rp-home-hero__tagline {
-    font-size: 1rem;
-    line-height: 1.65;
-  }
-
-  .rp-home-hero__actions {
-    flex-flow: row wrap;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .rp-home-feature {
-    padding: 0 22px;
-  }
-
-  .rp-home-content {
-    padding-right: 22px;
-    padding-left: 22px;
-  }
 }