From ce5df0157701fefb81dafd66539b92fe81722fa4 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 13:33:58 +0200
Subject: [PATCH 01/16] docs(site): redesign homepage around user journeys

---
 website/.vitepress/components/HomePage.vue | 534 ++++++++++++++++++++-
 website/src/index.md                       |  33 +-
 2 files changed, 533 insertions(+), 34 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 3c700ac820..e3952c1a11 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -1,22 +1,532 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { VPHomeSponsors } from 'vitepress/theme';
 import { sponsors } from '../sponsors';
 import AdoptersCarousel from './AdoptersCarousel.vue';
+
+const installCommand =
+  'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin';
+const copyState = ref<'idle' | 'copied' | 'failed'>('idle');
+let copyResetTimer: number | undefined;
+
+const copyLabel = computed(() => {
+  if (copyState.value === 'copied') return 'Copied';
+  if (copyState.value === 'failed') return 'Copy failed';
+  return 'Copy';
+});
+
+const copyAnnouncement = computed(() => {
+  if (copyState.value === 'copied') {
+    return 'Install command copied to clipboard';
+  }
+  if (copyState.value === 'failed') {
+    return 'The install command could not be copied';
+  }
+  return '';
+});
+
+function resetCopyState() {
+  window.clearTimeout(copyResetTimer);
+  copyResetTimer = window.setTimeout(() => {
+    copyState.value = 'idle';
+  }, 2000);
+}
+
+async function copyInstallCommand() {
+  try {
+    await navigator.clipboard.writeText(installCommand);
+    copyState.value = 'copied';
+    track('home-install-copy');
+  } catch {
+    copyState.value = 'failed';
+  }
+  resetCopyState();
+}
+
+function track(event: string) {
+  const analytics = (
+    window as Window & { umami?: { track: (name: string) => void } }
+  ).umami;
+  analytics?.track(event);
+}
 </script>
 
 <template>
-  <div class="content">
-    <div class="content-container">
-      <main class="main">
-        <AdoptersCarousel />
-        <VPHomeSponsors
-          v-if="sponsors"
-          message="Task is free and open source, made possible by wonderful sponsors."
-          :data="sponsors"
-        />
-      </main>
+  <main class="home-content">
+    <section class="quick-start" aria-labelledby="quick-start-title">
+      <div class="section-heading">
+        <p class="eyebrow">// FROM ZERO TO YOUR FIRST TASK</p>
+        <h2 id="quick-start-title">A useful Taskfile in a few minutes</h2>
+        <p>
+          Install one binary, add readable project commands, and give everyone
+          the same entry point—locally and in CI.
+        </p>
+      </div>
+
+      <div class="install-command">
+        <span aria-hidden="true" class="prompt">$</span>
+        <code>{{ installCommand }}</code>
+        <button
+          type="button"
+          :aria-label="`${copyLabel} install command`"
+          @click="copyInstallCommand"
+        >
+          {{ copyLabel }}
+        </button>
+        <span class="visually-hidden" aria-live="polite">
+          {{ copyAnnouncement }}
+        </span>
+      </div>
+      <p class="install-note">
+        Prefer a package manager? Task is also available through Homebrew,
+        WinGet, Scoop, npm, apt, dnf, apk, and more.
+        <a href="/docs/installation" data-umami-event="home-install-options"
+          >See every installation method</a
+        >.
+      </p>
+
+      <div class="example" aria-label="Taskfile and terminal example">
+        <div class="code-panel">
+          <div class="panel-title">
+            <span class="status-dot" aria-hidden="true"></span>
+            Taskfile.yml
+          </div>
+          <pre
+            v-pre
+          ><code><span class="syntax-key">version</span>: <span class="syntax-string">'3'</span>
+
+<span class="syntax-key">vars</span>:
+  <span class="syntax-key">GREETING</span>: <span class="syntax-string">Hello</span>
+
+<span class="syntax-key">tasks</span>:
+  <span class="syntax-key">test</span>:
+    <span class="syntax-key">desc</span>: <span class="syntax-string">Run the test suite</span>
+    <span class="syntax-key">sources</span>: [<span class="syntax-string">'**/*.go'</span>]
+    <span class="syntax-key">cmds</span>:
+      - go test ./...
+
+  <span class="syntax-key">build</span>:
+    <span class="syntax-key">desc</span>: <span class="syntax-string">Build the application</span>
+    <span class="syntax-key">deps</span>: [test]
+    <span class="syntax-key">sources</span>: [<span class="syntax-string">'**/*.go'</span>]
+    <span class="syntax-key">generates</span>: [bin/app]
+    <span class="syntax-key">cmds</span>:
+      - mkdir -p bin
+      - echo <span class="syntax-string">"{{.GREETING}} from Task"</span>
+      - go build -o bin/app ./cmd/app</code></pre>
+        </div>
+
+        <div class="code-panel terminal-panel">
+          <div class="panel-title">
+            <span class="status-dot" aria-hidden="true"></span>
+            Terminal
+          </div>
+          <pre><code><span class="terminal-prompt">$</span> task --list
+task: Available tasks for this project:
+* build:  Build the application
+* test:   Run the test suite
+
+<span class="terminal-prompt">$</span> task build
+task: [test] go test ./...
+ok      example/app
+task: [build] mkdir -p bin
+task: [build] echo "Hello from Task"
+Hello from Task
+task: [build] go build -o bin/app ./cmd/app
+
+<span class="terminal-prompt">$</span> task build
+task: Task "test" is up to date
+task: Task "build" is up to date</code></pre>
+        </div>
+      </div>
+
+      <div class="example-actions">
+        <a
+          class="primary-link"
+          href="/docs/getting-started"
+          data-umami-event="home-example-get-started"
+          >Build your first Taskfile <span aria-hidden="true">→</span></a
+        >
+        <a href="/docs/guide" data-umami-event="home-example-guide">
+          Explore the guide
+        </a>
+      </div>
+    </section>
+
+    <section class="choose-path" aria-labelledby="choose-path-title">
+      <div class="section-heading">
+        <p class="eyebrow">// FIND THE RIGHT ANSWER</p>
+        <h2 id="choose-path-title">Start broad or jump straight to syntax</h2>
+        <p>
+          The documentation has separate entry points for learning, exact
+          lookup, and machine-readable access.
+        </p>
+      </div>
+
+      <div class="path-grid">
+        <article>
+          <span class="path-number">01</span>
+          <h3>I'm new to Task</h3>
+          <p>
+            Install Task, create a small Taskfile, then grow it one workflow at
+            a time with focused examples.
+          </p>
+          <ul>
+            <li><a href="/docs/installation">Install Task</a></li>
+            <li>
+              <a href="/docs/getting-started">Create your first Taskfile</a>
+            </li>
+            <li><a href="/docs/guide">Read the guide</a></li>
+          </ul>
+        </article>
+
+        <article>
+          <span class="path-number">02</span>
+          <h3>I need exact syntax</h3>
+          <p>
+            Look up a Taskfile field, CLI flag, environment variable, or
+            template function without reading a long tutorial.
+          </p>
+          <ul>
+            <li><a href="/docs/reference/schema">Taskfile schema</a></li>
+            <li><a href="/docs/reference/cli">CLI flags</a></li>
+            <li><a href="/docs/reference/templating">Template functions</a></li>
+          </ul>
+        </article>
+
+        <article>
+          <span class="path-number">03</span>
+          <h3>I'm browsing with an agent</h3>
+          <p>
+            Discover the documentation from a compact map, retrieve it as one
+            text bundle, or jump directly to the Taskfile schema.
+          </p>
+          <ul>
+            <li><a href="/llms.txt">LLM documentation map</a></li>
+            <li><a href="/llms-full.txt">Full documentation bundle</a></li>
+            <li><a href="/docs/reference/schema">Taskfile schema</a></li>
+          </ul>
+        </article>
+      </div>
+    </section>
+
+    <AdoptersCarousel />
+
+    <div class="sponsors">
+      <VPHomeSponsors
+        v-if="sponsors"
+        message="Task is free and open source, made possible by wonderful sponsors."
+        :data="sponsors"
+      />
     </div>
-  </div>
+  </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+.home-content {
+  border-top: 1px solid var(--vp-c-divider);
+  margin-top: 4rem;
+}
+
+.quick-start,
+.choose-path {
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 6rem 24px 0;
+}
+
+.section-heading {
+  max-width: 720px;
+  margin-bottom: 2rem;
+}
+
+.section-heading .eyebrow {
+  margin: 0 0 0.75rem;
+  color: var(--vp-c-brand-1);
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.section-heading h2 {
+  margin: 0;
+  border: 0;
+  color: var(--vp-c-text-1);
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  letter-spacing: -0.035em;
+  line-height: 1.15;
+}
+
+.section-heading > p:last-child {
+  max-width: 640px;
+  margin: 1rem 0 0;
+  color: var(--vp-c-text-2);
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+.install-command {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  max-width: 940px;
+  padding: 0.65rem 0.75rem 0.65rem 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-code-block-bg);
+  color: var(--vp-code-block-color);
+}
+
+.install-command .prompt,
+.terminal-prompt {
+  color: var(--vp-c-brand-1);
+  font-weight: 700;
+}
+
+.install-command code {
+  overflow-x: auto;
+  padding: 0;
+  background: none;
+  color: inherit;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.install-command button {
+  min-width: 4.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.45rem 0.7rem;
+}
+
+.install-command button:hover,
+.install-command button:focus-visible {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+
+.install-note {
+  margin: 0.75rem 0 2rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+}
+
+.install-note a,
+.example-actions a,
+.path-grid a {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.install-note a:hover,
+.example-actions a:hover,
+.path-grid a:hover {
+  text-decoration: underline;
+}
+
+.example {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  background: var(--vp-code-block-bg);
+  box-shadow: var(--vp-shadow-3);
+}
+
+.code-panel + .code-panel {
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.code-panel {
+  min-width: 0;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  height: 44px;
+  padding: 0 1.25rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vp-c-brand-1);
+  box-shadow: 0 0 0 4px var(--vp-c-brand-soft);
+}
+
+.code-panel pre {
+  min-height: 420px;
+  margin: 0;
+  overflow: auto;
+  padding: 1.5rem;
+  background: transparent;
+  color: var(--vp-code-block-color);
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.82rem;
+  line-height: 1.65;
+}
+
+.syntax-key {
+  color: var(--vp-c-brand-1);
+}
+
+.syntax-string {
+  color: var(--vp-c-yellow-1);
+}
+
+.terminal-panel pre {
+  color: var(--vp-c-text-2);
+}
+
+.example-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem;
+  margin-top: 1.5rem;
+}
+
+.example-actions .primary-link {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  border-radius: 8px;
+  background: var(--vp-c-brand-3);
+  color: var(--vp-button-brand-text);
+  padding: 0.7rem 1rem;
+}
+
+.example-actions .primary-link:hover {
+  background: var(--vp-button-brand-hover-bg);
+  text-decoration: none;
+}
+
+.choose-path {
+  padding-top: 7rem;
+}
+
+.path-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.path-grid article {
+  position: relative;
+  min-width: 0;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 14px;
+  background: var(--vp-c-bg-soft);
+}
+
+.path-number {
+  color: var(--vp-c-brand-1);
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.path-grid h3 {
+  margin: 0.85rem 0 0;
+  color: var(--vp-c-text-1);
+  font-size: 1.1rem;
+}
+
+.path-grid p {
+  min-height: 5.1rem;
+  margin: 0.75rem 0 1rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.path-grid ul {
+  display: grid;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 1rem 0 0;
+  border-top: 1px solid var(--vp-c-divider);
+  list-style: none;
+}
+
+.path-grid li::before {
+  content: '→';
+  margin-right: 0.5rem;
+  color: var(--vp-c-text-3);
+}
+
+.sponsors {
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+@media (max-width: 800px) {
+  .quick-start,
+  .choose-path {
+    padding-top: 4.5rem;
+  }
+
+  .example,
+  .path-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .code-panel + .code-panel {
+    border-top: 1px solid var(--vp-c-divider);
+    border-left: 0;
+  }
+
+  .code-panel pre {
+    min-height: auto;
+  }
+
+  .path-grid p {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .home-content {
+    margin-top: 2.5rem;
+  }
+
+  .quick-start,
+  .choose-path {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .install-command {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .install-command button {
+    grid-column: 1 / -1;
+  }
+
+  .code-panel pre {
+    padding: 1rem;
+    font-size: 0.74rem;
+  }
+}
+</style>
diff --git a/website/src/index.md b/website/src/index.md
index e051f286d1..fc37776421 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -4,6 +4,7 @@ description:
   Task is a fast, cross-platform task runner and build tool that uses a simple
   YAML Taskfile.
 layout: home
+titleTemplate: false
 hero:
   name: Task
   text: The Modern Task Runner
@@ -15,38 +16,26 @@ hero:
     alt: Task logo
   actions:
     - theme: brand
-      text: Install
-      link: /docs/installation
-    - theme: alt
       text: Get Started
       link: /docs/getting-started
     - theme: alt
-      text: Guide
-      link: /docs/guide
+      text: Browse the Reference
+      link: /docs/reference/schema
 
 features:
-  - title: 30-Second Setup
+  - title: Readable by design
     details:
-      Single binary download, zero dependencies. Works with Homebrew, Snapcraft,
-      Scoop and more.
-    icon: 🚀
+      Describe commands, dependencies, and inputs in YAML that the whole team
+      can understand.
+    icon: 📖
 
-  - title: Truly cross-platform
+  - title: One workflow everywhere
     icon: 🖥️
     details:
-      Run the same Taskfile on Linux, macOS and Windows. No extra setup. Task
-      handles platform quirks so you don’t have to.
+      Run the same Taskfile on Linux, macOS, Windows, locally, and in CI.
 
-  - title: Smart Caching
+  - title: Only run what changed
     icon: 🎯
     details:
-      Skip unnecessary rebuilds by tracking file changes (timestamp or
-      content-based).
-
-  - title: Ideal for code generation & scaffolding
-    icon: ⚡
-    details:
-      Use Task to wire up codegen tools, formatters, linters, or anything
-      repetitive. Chain commands, set dependencies, and keep your workflow
-      clean.
+      Track sources and generated files to skip work that is already up to date.
 ---

From e209766d52b94b283e6643a54c59e672f77d4d31 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 13:34:11 +0200
Subject: [PATCH 02/16] docs(site): make homepage responsive and accessible

---
 website/.vitepress/components/HomePage.vue |  8 ++++-
 website/.vitepress/theme/custom.css        | 39 ++++++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index e3952c1a11..0339bcdac4 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -25,6 +25,12 @@ const copyAnnouncement = computed(() => {
   return '';
 });
 
+const copyAriaLabel = computed(() => {
+  if (copyState.value === 'copied') return 'Install command copied';
+  if (copyState.value === 'failed') return 'Copy install command again';
+  return 'Copy install command';
+});
+
 function resetCopyState() {
   window.clearTimeout(copyResetTimer);
   copyResetTimer = window.setTimeout(() => {
@@ -68,7 +74,7 @@ function track(event: string) {
         <code>{{ installCommand }}</code>
         <button
           type="button"
-          :aria-label="`${copyLabel} install command`"
+          :aria-label="copyAriaLabel"
           @click="copyInstallCommand"
         >
           {{ copyLabel }}
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 0c7456e0f9..795907739b 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -141,9 +141,8 @@ img[src*='custom-icon-badges.demolab.com'] {
   }
 }
 
-
 .VPTeamPage > .VPTeamPageTitle {
-  padding-top: 0
+  padding-top: 0;
 }
 
 /* VitePress greys out sponsor logos by default. Show them in their brand
@@ -169,3 +168,39 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
 .dark .vp-sponsor-grid-item.has-dark-logo:hover .logo-light {
   display: block;
 }
+
+@media (max-width: 639px) {
+  .VPHomeHero {
+    overflow: hidden;
+  }
+
+  .VPHomeHero .main,
+  .VPHomeHero .heading,
+  .VPHomeHero .text,
+  .VPHomeHero .tagline {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .VPHomeHero .text {
+    width: 100%;
+    overflow-wrap: anywhere;
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .VPHomeHero .actions {
+    align-items: stretch;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .VPHomeHero .action {
+    min-width: min(100%, 15rem);
+  }
+
+  .VPHomeHero .VPButton {
+    justify-content: center;
+    width: 100%;
+  }
+}

From c8e814333ce494b620c9486f98556c5e34a72cd4 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:22:50 +0200
Subject: [PATCH 03/16] refactor(site): render the homepage example with shiki

The Taskfile and terminal panels were hand-marked HTML with their own
.syntax-* classes, so the sample missed the site's code theme and could
drift from what Task actually prints. Move both to files under
.vitepress/snippets and highlight the YAML at build time through a
VitePress data loader, using the same Shiki themes as fenced code blocks.

The terminal transcript is now the verbatim output of running the sample
Taskfile: the previous one had the wrong column padding for `task --list`.
---
 website/.vitepress/components/HomePage.vue    | 71 +++++--------------
 .../.vitepress/components/homeExample.data.ts | 67 +++++++++++++++++
 .../.vitepress/snippets/homepage-taskfile.yml | 21 ++++++
 .../.vitepress/snippets/homepage-terminal.txt | 16 +++++
 website/package.json                          |  3 +-
 website/pnpm-lock.yaml                        |  3 +
 6 files changed, 128 insertions(+), 53 deletions(-)
 create mode 100644 website/.vitepress/components/homeExample.data.ts
 create mode 100644 website/.vitepress/snippets/homepage-taskfile.yml
 create mode 100644 website/.vitepress/snippets/homepage-terminal.txt

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 0339bcdac4..9c2d993a7a 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { VPHomeSponsors } from 'vitepress/theme';
 import { sponsors } from '../sponsors';
 import AdoptersCarousel from './AdoptersCarousel.vue';
+import { data as example } from './homeExample.data';
 
 const installCommand =
   'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin';
@@ -97,29 +98,7 @@ function track(event: string) {
             <span class="status-dot" aria-hidden="true"></span>
             Taskfile.yml
           </div>
-          <pre
-            v-pre
-          ><code><span class="syntax-key">version</span>: <span class="syntax-string">'3'</span>
-
-<span class="syntax-key">vars</span>:
-  <span class="syntax-key">GREETING</span>: <span class="syntax-string">Hello</span>
-
-<span class="syntax-key">tasks</span>:
-  <span class="syntax-key">test</span>:
-    <span class="syntax-key">desc</span>: <span class="syntax-string">Run the test suite</span>
-    <span class="syntax-key">sources</span>: [<span class="syntax-string">'**/*.go'</span>]
-    <span class="syntax-key">cmds</span>:
-      - go test ./...
-
-  <span class="syntax-key">build</span>:
-    <span class="syntax-key">desc</span>: <span class="syntax-string">Build the application</span>
-    <span class="syntax-key">deps</span>: [test]
-    <span class="syntax-key">sources</span>: [<span class="syntax-string">'**/*.go'</span>]
-    <span class="syntax-key">generates</span>: [bin/app]
-    <span class="syntax-key">cmds</span>:
-      - mkdir -p bin
-      - echo <span class="syntax-string">"{{.GREETING}} from Task"</span>
-      - go build -o bin/app ./cmd/app</code></pre>
+          <div class="code-body" v-html="example.taskfile"></div>
         </div>
 
         <div class="code-panel terminal-panel">
@@ -127,22 +106,9 @@ function track(event: string) {
             <span class="status-dot" aria-hidden="true"></span>
             Terminal
           </div>
-          <pre><code><span class="terminal-prompt">$</span> task --list
-task: Available tasks for this project:
-* build:  Build the application
-* test:   Run the test suite
-
-<span class="terminal-prompt">$</span> task build
-task: [test] go test ./...
-ok      example/app
-task: [build] mkdir -p bin
-task: [build] echo "Hello from Task"
-Hello from Task
-task: [build] go build -o bin/app ./cmd/app
-
-<span class="terminal-prompt">$</span> task build
-task: Task "test" is up to date
-task: Task "build" is up to date</code></pre>
+          <div class="code-body">
+            <pre><code v-html="example.terminal"></code></pre>
+          </div>
         </div>
       </div>
 
@@ -286,7 +252,7 @@ task: Task "build" is up to date</code></pre>
 }
 
 .install-command .prompt,
-.terminal-prompt {
+.example :deep(.terminal-prompt) {
   color: var(--vp-c-brand-1);
   font-weight: 700;
 }
@@ -354,6 +320,14 @@ task: Task "build" is up to date</code></pre>
 }
 
 .code-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.code-body {
+  display: flex;
+  flex: 1;
   min-width: 0;
 }
 
@@ -378,8 +352,9 @@ task: Task "build" is up to date</code></pre>
   box-shadow: 0 0 0 4px var(--vp-c-brand-soft);
 }
 
-.code-panel pre {
+.code-panel :deep(pre) {
   min-height: 420px;
+  min-width: 0;
   margin: 0;
   overflow: auto;
   padding: 1.5rem;
@@ -390,15 +365,7 @@ task: Task "build" is up to date</code></pre>
   line-height: 1.65;
 }
 
-.syntax-key {
-  color: var(--vp-c-brand-1);
-}
-
-.syntax-string {
-  color: var(--vp-c-yellow-1);
-}
-
-.terminal-panel pre {
+.terminal-panel :deep(pre) {
   color: var(--vp-c-text-2);
 }
 
@@ -502,7 +469,7 @@ task: Task "build" is up to date</code></pre>
     border-left: 0;
   }
 
-  .code-panel pre {
+  .code-panel :deep(pre) {
     min-height: auto;
   }
 
@@ -530,7 +497,7 @@ task: Task "build" is up to date</code></pre>
     grid-column: 1 / -1;
   }
 
-  .code-panel pre {
+  .code-panel :deep(pre) {
     padding: 1rem;
     font-size: 0.74rem;
   }
diff --git a/website/.vitepress/components/homeExample.data.ts b/website/.vitepress/components/homeExample.data.ts
new file mode 100644
index 0000000000..03b14713c3
--- /dev/null
+++ b/website/.vitepress/components/homeExample.data.ts
@@ -0,0 +1,67 @@
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { defineLoader } from 'vitepress';
+import { codeToHtml } from 'shiki';
+
+// Same themes VitePress uses for fenced code blocks, so the homepage sample
+// picks up the site's own light/dark code colours through `.vp-code`.
+const THEMES = { light: 'github-light', dark: 'github-dark' } as const;
+
+const taskfilePath = fileURLToPath(
+  new URL('../snippets/homepage-taskfile.yml', import.meta.url)
+);
+const terminalPath = fileURLToPath(
+  new URL('../snippets/homepage-terminal.txt', import.meta.url)
+);
+
+export interface HomeExample {
+  taskfile: string;
+  terminal: string;
+}
+
+declare const data: HomeExample;
+export { data };
+
+export default defineLoader({
+  watch: [
+    '../snippets/homepage-taskfile.yml',
+    '../snippets/homepage-terminal.txt'
+  ],
+  async load(): Promise<HomeExample> {
+    const taskfile = fs.readFileSync(taskfilePath, 'utf-8').trimEnd();
+    return {
+      taskfile: await codeToHtml(taskfile, {
+        lang: 'yaml',
+        themes: THEMES,
+        defaultColor: false,
+        transformers: [
+          {
+            pre(node) {
+              this.addClassToHast(node, 'vp-code');
+            }
+          }
+        ]
+      }),
+      terminal: renderTerminal(fs.readFileSync(terminalPath, 'utf-8'))
+    };
+  }
+});
+
+function renderTerminal(source: string): string {
+  return source
+    .trimEnd()
+    .split('\n')
+    .map((line) =>
+      line.startsWith('$ ')
+        ? `<span class="terminal-prompt">$</span>${escapeHtml(line.slice(1))}`
+        : escapeHtml(line)
+    )
+    .join('\n');
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
diff --git a/website/.vitepress/snippets/homepage-taskfile.yml b/website/.vitepress/snippets/homepage-taskfile.yml
new file mode 100644
index 0000000000..2e3c9a7e4d
--- /dev/null
+++ b/website/.vitepress/snippets/homepage-taskfile.yml
@@ -0,0 +1,21 @@
+version: '3'
+
+vars:
+  GREETING: Hello
+
+tasks:
+  test:
+    desc: Run the test suite
+    sources: ['**/*.go']
+    cmds:
+      - go test ./...
+
+  build:
+    desc: Build the application
+    deps: [test]
+    sources: ['**/*.go']
+    generates: [bin/app]
+    cmds:
+      - mkdir -p bin
+      - echo "{{.GREETING}} from Task"
+      - go build -o bin/app ./cmd/app
diff --git a/website/.vitepress/snippets/homepage-terminal.txt b/website/.vitepress/snippets/homepage-terminal.txt
new file mode 100644
index 0000000000..7aec0c004a
--- /dev/null
+++ b/website/.vitepress/snippets/homepage-terminal.txt
@@ -0,0 +1,16 @@
+$ task --list
+task: Available tasks for this project:
+* build:       Build the application
+* test:        Run the test suite
+
+$ task build
+task: [test] go test ./...
+ok      example/app     0.2s
+task: [build] mkdir -p bin
+task: [build] echo "Hello from Task"
+Hello from Task
+task: [build] go build -o bin/app ./cmd/app
+
+$ task build
+task: Task "test" is up to date
+task: Task "build" is up to date
diff --git a/website/package.json b/website/package.json
index a8be0fbe9f..51ff6f18de 100644
--- a/website/package.json
+++ b/website/package.json
@@ -18,10 +18,11 @@
     "gray-matter": "^4.0.3",
     "netlify-cli": "^27.0.0",
     "prettier": "^3.6.2",
+    "shiki": "^2.5.0",
     "vitepress": "^1.6.3",
     "vitepress-plugin-group-icons": "^1.6.1",
-    "vitepress-plugin-tabs": "^0.9.0",
     "vitepress-plugin-llms": "^1.9.1",
+    "vitepress-plugin-tabs": "^0.9.0",
     "vue": "^3.5.18"
   },
   "packageManager": "pnpm@11.22.0+sha512.1ff870c4c6133dfd88fb2afc46dd13d47f09c9794b438c6fdb47ca98caf3bc16381ee0be93a091b8e3824cf01f889f46d7d9e20910fb0be1ab0fb5baa80dd621"
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 94599d49b0..5a86df4004 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       prettier:
         specifier: ^3.6.2
         version: 3.9.6
+      shiki:
+        specifier: ^2.5.0
+        version: 2.5.0
       vitepress:
         specifier: ^1.6.3
         version: 1.6.4(@algolia/client-search@5.35.0)(@types/node@24.13.3)(jwt-decode@4.0.0)(postcss@8.5.26)(search-insights@2.17.3)(typescript@5.9.3)

From a0b39ca549d0f420b4f20144907b1309b62685da Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:22:59 +0200
Subject: [PATCH 04/16] fix(site): align the homepage panels and cards without
 fixed heights

The two code panels and the three journey cards were lined up with
min-height: 420px and min-height: 5.1rem, which break as soon as a
paragraph gains a line. Let the grid stretch the panels and push each
card's link list down with margin-top: auto instead.
---
 website/.vitepress/components/HomePage.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 9c2d993a7a..18a5fe9453 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -353,7 +353,7 @@ function track(event: string) {
 }
 
 .code-panel :deep(pre) {
-  min-height: 420px;
+  flex: 1;
   min-width: 0;
   margin: 0;
   overflow: auto;
@@ -404,6 +404,8 @@ function track(event: string) {
 
 .path-grid article {
   position: relative;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   padding: 1.5rem;
   border: 1px solid var(--vp-c-divider);
@@ -425,7 +427,6 @@ function track(event: string) {
 }
 
 .path-grid p {
-  min-height: 5.1rem;
   margin: 0.75rem 0 1rem;
   color: var(--vp-c-text-2);
   font-size: 0.9rem;
@@ -435,7 +436,7 @@ function track(event: string) {
 .path-grid ul {
   display: grid;
   gap: 0.55rem;
-  margin: 0;
+  margin: auto 0 0;
   padding: 1rem 0 0;
   border-top: 1px solid var(--vp-c-divider);
   list-style: none;
@@ -468,14 +469,6 @@ function track(event: string) {
     border-top: 1px solid var(--vp-c-divider);
     border-left: 0;
   }
-
-  .code-panel :deep(pre) {
-    min-height: auto;
-  }
-
-  .path-grid p {
-    min-height: 0;
-  }
 }
 
 @media (max-width: 560px) {

From 9e9c5dc7673c77a3fe5059e931226551ea59397c Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:23:07 +0200
Subject: [PATCH 05/16] fix(site): track the install copy button with
 data-umami-event

Every other homepage link is tracked declaratively; the copy button
called window.umami directly, and only on success, so failed copies never
showed up in the stats.
---
 website/.vitepress/components/HomePage.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 18a5fe9453..1ae27851e4 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -43,19 +43,11 @@ async function copyInstallCommand() {
   try {
     await navigator.clipboard.writeText(installCommand);
     copyState.value = 'copied';
-    track('home-install-copy');
   } catch {
     copyState.value = 'failed';
   }
   resetCopyState();
 }
-
-function track(event: string) {
-  const analytics = (
-    window as Window & { umami?: { track: (name: string) => void } }
-  ).umami;
-  analytics?.track(event);
-}
 </script>
 
 <template>
@@ -76,6 +68,7 @@ function track(event: string) {
         <button
           type="button"
           :aria-label="copyAriaLabel"
+          data-umami-event="home-install-copy"
           @click="copyInstallCommand"
         >
           {{ copyLabel }}

From d23d646a628df3ab93ec5473ea36ef8460fdc701 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:23:07 +0200
Subject: [PATCH 06/16] style(site): format the homepage front matter with
 prettier

---
 website/src/index.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/index.md b/website/src/index.md
index fc37776421..491beb2b2c 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -31,8 +31,7 @@ features:
 
   - title: One workflow everywhere
     icon: 🖥️
-    details:
-      Run the same Taskfile on Linux, macOS, Windows, locally, and in CI.
+    details: Run the same Taskfile on Linux, macOS, Windows, locally, and in CI.
 
   - title: Only run what changed
     icon: 🎯

From c72eebf34122aad4bdfb182f486b05fb6afde6dc Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:25:24 +0200
Subject: [PATCH 07/16] fix(site): clean up the copy timer and handle a refused
 clipboard

The 2s reset timer outlived the component on SPA navigation, and a
clipboard call rejected by the browser left the user with nothing to act
on. Clear the timer on unmount and select the command text on failure so
a manual copy is one keystroke away.
---
 website/.vitepress/components/HomePage.vue | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 1ae27851e4..195b34c397 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onUnmounted, ref } from 'vue';
 import { VPHomeSponsors } from 'vitepress/theme';
 import { sponsors } from '../sponsors';
 import AdoptersCarousel from './AdoptersCarousel.vue';
@@ -8,6 +8,7 @@ import { data as example } from './homeExample.data';
 const installCommand =
   'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin';
 const copyState = ref<'idle' | 'copied' | 'failed'>('idle');
+const commandEl = ref<HTMLElement>();
 let copyResetTimer: number | undefined;
 
 const copyLabel = computed(() => {
@@ -21,7 +22,7 @@ const copyAnnouncement = computed(() => {
     return 'Install command copied to clipboard';
   }
   if (copyState.value === 'failed') {
-    return 'The install command could not be copied';
+    return 'The install command could not be copied, so it has been selected';
   }
   return '';
 });
@@ -45,9 +46,25 @@ async function copyInstallCommand() {
     copyState.value = 'copied';
   } catch {
     copyState.value = 'failed';
+    selectInstallCommand();
   }
   resetCopyState();
 }
+
+// Without the clipboard API — insecure context, denied permission — the least
+// we can do is select the command so a manual copy is one keystroke away.
+function selectInstallCommand() {
+  const node = commandEl.value;
+  if (!node) return;
+
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+onUnmounted(() => window.clearTimeout(copyResetTimer));
 </script>
 
 <template>
@@ -64,7 +81,7 @@ async function copyInstallCommand() {
 
       <div class="install-command">
         <span aria-hidden="true" class="prompt">$</span>
-        <code>{{ installCommand }}</code>
+        <code ref="commandEl">{{ installCommand }}</code>
         <button
           type="button"
           :aria-label="copyAriaLabel"

From b1bd8ffd00cc82c95bce0e5d66d6b1a9bb65187f Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:25:39 +0200
Subject: [PATCH 08/16] fix(site): hide the decorative slashes in the section
 eyebrows from screen readers

---
 website/.vitepress/components/HomePage.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 195b34c397..30377cf82e 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -71,7 +71,9 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
   <main class="home-content">
     <section class="quick-start" aria-labelledby="quick-start-title">
       <div class="section-heading">
-        <p class="eyebrow">// FROM ZERO TO YOUR FIRST TASK</p>
+        <p class="eyebrow">
+          <span aria-hidden="true">//</span> FROM ZERO TO YOUR FIRST TASK
+        </p>
         <h2 id="quick-start-title">A useful Taskfile in a few minutes</h2>
         <p>
           Install one binary, add readable project commands, and give everyone
@@ -137,7 +139,9 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
 
     <section class="choose-path" aria-labelledby="choose-path-title">
       <div class="section-heading">
-        <p class="eyebrow">// FIND THE RIGHT ANSWER</p>
+        <p class="eyebrow">
+          <span aria-hidden="true">//</span> FIND THE RIGHT ANSWER
+        </p>
         <h2 id="choose-path-title">Start broad or jump straight to syntax</h2>
         <p>
           The documentation has separate entry points for learning, exact

From bffed9d566f5f5c4787ed39746d497e8a1bb0c85 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:25:45 +0200
Subject: [PATCH 09/16] style(site): line the homepage breakpoints up with the
 VitePress scale

The homepage used 800px and 560px while the theme and custom.css work off
640/768/960. Move to 959px and 639px, which also stacks the two code
panels before they get too narrow to read.
---
 website/.vitepress/components/HomePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 30377cf82e..802209cd67 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -468,7 +468,7 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
   padding: 0 24px;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 959px) {
   .quick-start,
   .choose-path {
     padding-top: 4.5rem;
@@ -485,7 +485,7 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
   }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .home-content {
     margin-top: 2.5rem;
   }

From 13fcb2c3ba00bf7764d6e7dca8b759a2a8a50d62 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 14:56:59 +0200
Subject: [PATCH 10/16] docs(site): offer platform-specific install commands

---
 website/.vitepress/components/HomePage.vue | 104 +++++++++++++++++++--
 1 file changed, 94 insertions(+), 10 deletions(-)

diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 802209cd67..832631e470 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -5,8 +5,17 @@ import { sponsors } from '../sponsors';
 import AdoptersCarousel from './AdoptersCarousel.vue';
 import { data as example } from './homeExample.data';
 
-const installCommand =
-  'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin';
+const installCommands = {
+  unix: 'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin',
+  windows: 'winget install Task.Task'
+} as const;
+type InstallPlatform = keyof typeof installCommands;
+
+const installPlatform = ref<InstallPlatform>('unix');
+const installCommand = computed(() => installCommands[installPlatform.value]);
+const installPlatformLabel = computed(() =>
+  installPlatform.value === 'windows' ? 'Windows' : 'macOS and Linux'
+);
 const copyState = ref<'idle' | 'copied' | 'failed'>('idle');
 const commandEl = ref<HTMLElement>();
 let copyResetTimer: number | undefined;
@@ -19,7 +28,7 @@ const copyLabel = computed(() => {
 
 const copyAnnouncement = computed(() => {
   if (copyState.value === 'copied') {
-    return 'Install command copied to clipboard';
+    return `${installPlatformLabel.value} install command copied to clipboard`;
   }
   if (copyState.value === 'failed') {
     return 'The install command could not be copied, so it has been selected';
@@ -28,11 +37,25 @@ const copyAnnouncement = computed(() => {
 });
 
 const copyAriaLabel = computed(() => {
-  if (copyState.value === 'copied') return 'Install command copied';
-  if (copyState.value === 'failed') return 'Copy install command again';
-  return 'Copy install command';
+  if (copyState.value === 'copied') {
+    return `${installPlatformLabel.value} install command copied`;
+  }
+  if (copyState.value === 'failed') {
+    return `Copy ${installPlatformLabel.value} install command again`;
+  }
+  return `Copy ${installPlatformLabel.value} install command`;
 });
 
+function selectInstallPlatform(platform: InstallPlatform) {
+  if (installPlatform.value === platform) return;
+
+  window.clearTimeout(copyResetTimer);
+  copyResetTimer = undefined;
+  copyState.value = 'idle';
+  installPlatform.value = platform;
+  window.getSelection()?.removeAllRanges();
+}
+
 function resetCopyState() {
   window.clearTimeout(copyResetTimer);
   copyResetTimer = window.setTimeout(() => {
@@ -42,7 +65,7 @@ function resetCopyState() {
 
 async function copyInstallCommand() {
   try {
-    await navigator.clipboard.writeText(installCommand);
+    await navigator.clipboard.writeText(installCommand.value);
     copyState.value = 'copied';
   } catch {
     copyState.value = 'failed';
@@ -81,9 +104,36 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
         </p>
       </div>
 
+      <div
+        class="install-platforms"
+        role="group"
+        aria-label="Choose an operating system"
+      >
+        <span>Install on:</span>
+        <button
+          type="button"
+          :aria-pressed="installPlatform === 'unix'"
+          @click="selectInstallPlatform('unix')"
+        >
+          macOS / Linux
+        </button>
+        <button
+          type="button"
+          :aria-pressed="installPlatform === 'windows'"
+          @click="selectInstallPlatform('windows')"
+        >
+          Windows
+        </button>
+      </div>
+
       <div class="install-command">
         <span aria-hidden="true" class="prompt">$</span>
-        <code ref="commandEl">{{ installCommand }}</code>
+        <code
+          ref="commandEl"
+          aria-live="polite"
+          :aria-label="`${installPlatformLabel} install command`"
+          >{{ installCommand }}</code
+        >
         <button
           type="button"
           :aria-label="copyAriaLabel"
@@ -97,8 +147,8 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
         </span>
       </div>
       <p class="install-note">
-        Prefer a package manager? Task is also available through Homebrew,
-        WinGet, Scoop, npm, apt, dnf, apk, and more.
+        Need another installation method? Task is also available through
+        Homebrew, Scoop, npm, apt, dnf, apk, and more.
         <a href="/docs/installation" data-umami-event="home-install-options"
           >See every installation method</a
         >.
@@ -252,6 +302,40 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
   line-height: 1.7;
 }
 
+.install-platforms {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  max-width: 940px;
+  margin-bottom: 0.6rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.install-platforms button {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  font: inherit;
+  padding: 0.35rem 0.65rem;
+}
+
+.install-platforms button[aria-pressed='true'] {
+  border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.install-platforms button:hover,
+.install-platforms button:focus-visible {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+
 .install-command {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;

From 24ff92f16cda02c7a44b725c630f1a21fd528e9f Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 15:02:00 +0200
Subject: [PATCH 11/16] feat(site): fetch the GitHub star count at build time

Read stargazers_count once per build and expose it both raw and rounded.
Deploy previews build from shared, unauthenticated IPs, so GitHub's rate
limit is a routine answer rather than an incident: any failure falls back
to a constant instead of breaking the build.
---
 website/.vitepress/githubStars.data.ts | 64 ++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 website/.vitepress/githubStars.data.ts

diff --git a/website/.vitepress/githubStars.data.ts b/website/.vitepress/githubStars.data.ts
new file mode 100644
index 0000000000..ac567da4cd
--- /dev/null
+++ b/website/.vitepress/githubStars.data.ts
@@ -0,0 +1,64 @@
+import { defineLoader } from 'vitepress';
+
+const REPO = 'go-task/task';
+
+// Deploy previews build from shared, unauthenticated Netlify IPs, so a 403 from
+// GitHub's 60 requests/hour limit is routine. Falling back keeps the build green
+// with a number that is only ever too low.
+const FALLBACK_STARS = 16000;
+
+export interface GithubStars {
+  count: number;
+  label: string;
+}
+
+declare const data: GithubStars;
+export { data };
+
+export default defineLoader({
+  async load(): Promise<GithubStars> {
+    const count = await fetchStarCount();
+    return { count, label: formatCount(count) };
+  }
+});
+
+async function fetchStarCount(): Promise<number> {
+  const headers: Record<string, string> = {
+    Accept: 'application/vnd.github+json'
+  };
+  if (process.env.GITHUB_TOKEN) {
+    headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
+  }
+
+  try {
+    const response = await fetch(`https://api.github.com/repos/${REPO}`, {
+      headers,
+      signal: AbortSignal.timeout(5000)
+    });
+    if (!response.ok) {
+      throw new Error(`GitHub answered ${response.status}`);
+    }
+
+    const { stargazers_count } = await response.json();
+    if (typeof stargazers_count !== 'number') {
+      throw new Error('no stargazers_count in the response');
+    }
+    return stargazers_count;
+  } catch (error) {
+    console.warn(
+      `Could not read the star count for ${REPO} (${error}), falling back to ${FALLBACK_STARS}.`
+    );
+    return FALLBACK_STARS;
+  }
+}
+
+// Rounding is deliberate: a count that never shows its last digits cannot look
+// stale between two deployments.
+function formatCount(count: number): string {
+  return new Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1
+  })
+    .format(count)
+    .replace('K', 'k');
+}

From 93958b0a479f216876d4b671a5b13c98791a5a0f Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 15:02:00 +0200
Subject: [PATCH 12/16] feat(site): show the GitHub star count in the hero
 actions

The first sign of traction on the homepage was the adopters carousel, two
sections down. Add a third hero button next to the two calls to action.

VitePress renders home-hero-actions-after outside its own .actions row, so
the hero buttons move from the front matter into HeroActions.vue, which is
the only way to line the count up with them. That row's layout rules are
scoped to VPHero, so custom.css mirrors them.
---
 website/.vitepress/components/HeroActions.vue | 32 +++++++++++++++++
 website/.vitepress/theme/custom.css           | 34 +++++++++++++++++--
 website/.vitepress/theme/index.ts             |  7 +++-
 website/src/index.md                          |  9 ++---
 4 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 website/.vitepress/components/HeroActions.vue

diff --git a/website/.vitepress/components/HeroActions.vue b/website/.vitepress/components/HeroActions.vue
new file mode 100644
index 0000000000..02ca51d5ca
--- /dev/null
+++ b/website/.vitepress/components/HeroActions.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { VPButton } from 'vitepress/theme';
+import { data as stars } from '../githubStars.data';
+
+// VitePress renders the `home-hero-actions-after` slot outside its own
+// `.actions` row, so the hero CTAs live here rather than in the front matter:
+// it is the only way to line the star count up with the other two buttons.
+</script>
+
+<template>
+  <div class="hero-actions">
+    <div class="hero-action">
+      <VPButton theme="brand" text="Get Started" href="/docs/getting-started" />
+    </div>
+    <div class="hero-action">
+      <VPButton
+        theme="alt"
+        text="Browse the Reference"
+        href="/docs/reference/schema"
+      />
+    </div>
+    <div class="hero-action">
+      <VPButton
+        theme="alt"
+        :text="`★ ${stars.label}`"
+        :aria-label="`Task on GitHub, ${stars.count} stars`"
+        href="https://github.com/go-task/task"
+        data-umami-event="home-hero-github"
+      />
+    </div>
+  </div>
+</template>
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 795907739b..57017abff5 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -169,6 +169,36 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
   display: block;
 }
 
+/* Mirrors the .actions/.action rules of VitePress' VPHero.vue, which are scoped
+   to that component and so do not reach the row in HeroActions.vue. */
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+  padding-top: 24px;
+}
+
+.hero-action {
+  flex-shrink: 0;
+  padding: 6px;
+}
+
+.VPHero.has-image .hero-actions {
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .hero-actions {
+    padding-top: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .hero-actions {
+    justify-content: flex-start;
+  }
+}
+
 @media (max-width: 639px) {
   .VPHomeHero {
     overflow: hidden;
@@ -189,13 +219,13 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
     line-height: 36px;
   }
 
-  .VPHomeHero .actions {
+  .VPHomeHero .hero-actions {
     align-items: stretch;
     margin-right: 0;
     margin-left: 0;
   }
 
-  .VPHomeHero .action {
+  .VPHomeHero .hero-action {
     min-width: min(100%, 15rem);
   }
 
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
index 495bf7dc67..9670930bd4 100644
--- a/website/.vitepress/theme/index.ts
+++ b/website/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import type { Theme } from 'vitepress';
 import './custom.css';
 import HomePage from '../components/HomePage.vue';
+import HeroActions from '../components/HeroActions.vue';
 import AuthorCard from '../components/AuthorCard.vue';
 import BlogPost from '../components/BlogPost.vue';
 import Version from '../components/Version.vue';
@@ -15,6 +16,7 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
+      'home-hero-actions-after': () => h(HeroActions),
       'home-features-after': () => h(HomePage)
     });
   },
@@ -23,7 +25,10 @@ export default {
     app.component('BlogPost', BlogPost);
     app.component('Version', Version);
     app.component('Adopters', Adopters);
-    app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons);
+    app.component(
+      'CopyOrDownloadAsMarkdownButtons',
+      CopyOrDownloadAsMarkdownButtons
+    );
     enhanceAppWithTabs(app);
   }
 } satisfies Theme;
diff --git a/website/src/index.md b/website/src/index.md
index 491beb2b2c..70a900e57e 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -5,6 +5,8 @@ description:
   YAML Taskfile.
 layout: home
 titleTemplate: false
+# The hero buttons live in .vitepress/components/HeroActions.vue, which
+# renders them next to the GitHub star count.
 hero:
   name: Task
   text: The Modern Task Runner
@@ -14,13 +16,6 @@ hero:
   image:
     src: /img/logo.svg
     alt: Task logo
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /docs/getting-started
-    - theme: alt
-      text: Browse the Reference
-      link: /docs/reference/schema
 
 features:
   - title: Readable by design

From d2fa4cf51e4333d7a91663d8f677fc33ba8b2277 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 15:09:58 +0200
Subject: [PATCH 13/16] fix(site): move the star count out of the hero button
 row

As a third pill next to the two calls to action it read as a truncated
button: same shape and weight as the CTAs for something that is a
statistic, not an action, and a bare star glyph that says nothing about
GitHub.

Render it below the buttons instead, as a muted line with the GitHub mark
the navbar already uses. The hero buttons go back to the front matter and
custom.css drops the VPHero rules it had to mirror.
---
 website/.vitepress/components/HeroActions.vue | 32 ----------------
 website/.vitepress/components/HeroStars.vue   | 37 +++++++++++++++++++
 website/.vitepress/theme/custom.css           | 34 +----------------
 website/.vitepress/theme/index.ts             |  4 +-
 website/src/index.md                          |  9 ++++-
 5 files changed, 48 insertions(+), 68 deletions(-)
 delete mode 100644 website/.vitepress/components/HeroActions.vue
 create mode 100644 website/.vitepress/components/HeroStars.vue

diff --git a/website/.vitepress/components/HeroActions.vue b/website/.vitepress/components/HeroActions.vue
deleted file mode 100644
index 02ca51d5ca..0000000000
--- a/website/.vitepress/components/HeroActions.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { VPButton } from 'vitepress/theme';
-import { data as stars } from '../githubStars.data';
-
-// VitePress renders the `home-hero-actions-after` slot outside its own
-// `.actions` row, so the hero CTAs live here rather than in the front matter:
-// it is the only way to line the star count up with the other two buttons.
-</script>
-
-<template>
-  <div class="hero-actions">
-    <div class="hero-action">
-      <VPButton theme="brand" text="Get Started" href="/docs/getting-started" />
-    </div>
-    <div class="hero-action">
-      <VPButton
-        theme="alt"
-        text="Browse the Reference"
-        href="/docs/reference/schema"
-      />
-    </div>
-    <div class="hero-action">
-      <VPButton
-        theme="alt"
-        :text="`★ ${stars.label}`"
-        :aria-label="`Task on GitHub, ${stars.count} stars`"
-        href="https://github.com/go-task/task"
-        data-umami-event="home-hero-github"
-      />
-    </div>
-  </div>
-</template>
diff --git a/website/.vitepress/components/HeroStars.vue b/website/.vitepress/components/HeroStars.vue
new file mode 100644
index 0000000000..28f78dc70c
--- /dev/null
+++ b/website/.vitepress/components/HeroStars.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { data as stars } from '../githubStars.data';
+</script>
+
+<template>
+  <a
+    class="hero-stars"
+    href="https://github.com/go-task/task"
+    target="_blank"
+    rel="noreferrer"
+    data-umami-event="home-hero-github"
+  >
+    <span class="vpi-social-github" aria-hidden="true"></span>
+    {{ stars.label }} stars on GitHub
+  </a>
+</template>
+
+<style scoped>
+/* inline-flex so the hero container's own text-align keeps this in step with
+   the buttons: centred below 960px, left-aligned above. */
+.hero-stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-top: 20px;
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.25s;
+}
+
+.hero-stars:hover,
+.hero-stars:focus-visible {
+  color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 57017abff5..795907739b 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -169,36 +169,6 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
   display: block;
 }
 
-/* Mirrors the .actions/.action rules of VitePress' VPHero.vue, which are scoped
-   to that component and so do not reach the row in HeroActions.vue. */
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -6px;
-  padding-top: 24px;
-}
-
-.hero-action {
-  flex-shrink: 0;
-  padding: 6px;
-}
-
-.VPHero.has-image .hero-actions {
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .hero-actions {
-    padding-top: 32px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPHero.has-image .hero-actions {
-    justify-content: flex-start;
-  }
-}
-
 @media (max-width: 639px) {
   .VPHomeHero {
     overflow: hidden;
@@ -219,13 +189,13 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
     line-height: 36px;
   }
 
-  .VPHomeHero .hero-actions {
+  .VPHomeHero .actions {
     align-items: stretch;
     margin-right: 0;
     margin-left: 0;
   }
 
-  .VPHomeHero .hero-action {
+  .VPHomeHero .action {
     min-width: min(100%, 15rem);
   }
 
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
index 9670930bd4..4e3a524ada 100644
--- a/website/.vitepress/theme/index.ts
+++ b/website/.vitepress/theme/index.ts
@@ -2,7 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import type { Theme } from 'vitepress';
 import './custom.css';
 import HomePage from '../components/HomePage.vue';
-import HeroActions from '../components/HeroActions.vue';
+import HeroStars from '../components/HeroStars.vue';
 import AuthorCard from '../components/AuthorCard.vue';
 import BlogPost from '../components/BlogPost.vue';
 import Version from '../components/Version.vue';
@@ -16,7 +16,7 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'home-hero-actions-after': () => h(HeroActions),
+      'home-hero-actions-after': () => h(HeroStars),
       'home-features-after': () => h(HomePage)
     });
   },
diff --git a/website/src/index.md b/website/src/index.md
index 70a900e57e..491beb2b2c 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -5,8 +5,6 @@ description:
   YAML Taskfile.
 layout: home
 titleTemplate: false
-# The hero buttons live in .vitepress/components/HeroActions.vue, which
-# renders them next to the GitHub star count.
 hero:
   name: Task
   text: The Modern Task Runner
@@ -16,6 +14,13 @@ hero:
   image:
     src: /img/logo.svg
     alt: Task logo
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /docs/getting-started
+    - theme: alt
+      text: Browse the Reference
+      link: /docs/reference/schema
 
 features:
   - title: Readable by design

From e811ff162855823d2f15e0148dc3bf768091fc2b Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 15:28:45 +0200
Subject: [PATCH 14/16] docs(site): add a Remote Taskfiles feature card

Remote Taskfiles are the one thing Make, just and npm scripts cannot do,
and the homepage did not mention them anywhere. The wording stays on
including a Taskfile rather than running one, so it does not read as an
invitation to execute an arbitrary URL.
---
 website/src/index.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/website/src/index.md b/website/src/index.md
index 491beb2b2c..6d755c6d8d 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -37,4 +37,10 @@ features:
     icon: 🎯
     details:
       Track sources and generated files to skip work that is already up to date.
+
+  - title: One Taskfile, every repo
+    icon: 🔗
+    details:
+      Include Taskfiles straight from a URL or a Git repo, so shared workflows
+      live in one place instead of being copy-pasted.
 ---

From 3ed8606914e029afcd2fc6441704377c0d77a79e Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 16:08:28 +0200
Subject: [PATCH 15/16] docs(site): link the Remote Taskfiles feature

---
 website/src/index.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/src/index.md b/website/src/index.md
index 6d755c6d8d..7ec1f85648 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -43,4 +43,6 @@ features:
     details:
       Include Taskfiles straight from a URL or a Git repo, so shared workflows
       live in one place instead of being copy-pasted.
+    link: /docs/remote-taskfiles
+    linkText: Explore Remote Taskfiles
 ---

From 3fee488b221de6795c15046992970191c9ecd5f3 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 16:08:41 +0200
Subject: [PATCH 16/16] docs(site): move social proof below homepage features

---
 .../components/AdoptersCarousel.vue           | 96 ++++++++++++-------
 website/.vitepress/components/HeroStars.vue   | 37 -------
 website/.vitepress/components/HomePage.vue    |  8 +-
 website/.vitepress/theme/index.ts             |  2 -
 4 files changed, 67 insertions(+), 76 deletions(-)
 delete mode 100644 website/.vitepress/components/HeroStars.vue

diff --git a/website/.vitepress/components/AdoptersCarousel.vue b/website/.vitepress/components/AdoptersCarousel.vue
index 073f95b35b..42ad65b3e7 100644
--- a/website/.vitepress/components/AdoptersCarousel.vue
+++ b/website/.vitepress/components/AdoptersCarousel.vue
@@ -1,25 +1,34 @@
 <script setup lang="ts">
 import { adopters } from '../adopters';
+import { data as stars } from '../githubStars.data';
 
 const loop = [...adopters, ...adopters];
 </script>
 
 <template>
   <section class="adopters-carousel" aria-labelledby="adopters-heading">
-    <h2 id="adopters-heading" class="label">
-      <span class="slashes">//</span>
-      Trusted by open source projects
-    </h2>
-    <p class="subline">
-      Adopted by <strong>Docker</strong>, <strong>Vercel</strong>,
-      <strong>HashiCorp</strong>, <strong>Microsoft</strong>,
-      <strong>Google Cloud</strong>, <strong>AWS</strong>,
-      <strong>Anthropic</strong> and more.
-      <a class="see-all" href="/adopters">
-        See all adopters
-        <span class="see-all-arrow" aria-hidden="true">&rarr;</span>
-      </a>
-    </p>
+    <div class="heading">
+      <h2 id="adopters-heading" class="label">
+        <span class="slashes" aria-hidden="true">//</span>
+        Trusted across open source
+      </h2>
+      <div class="heading-links">
+        <a
+          class="github-stars"
+          href="https://github.com/go-task/task"
+          target="_blank"
+          rel="noreferrer"
+          data-umami-event="home-adopters-github"
+        >
+          <span class="vpi-social-github" aria-hidden="true"></span>
+          {{ stars.label }} stars
+        </a>
+        <a class="see-all" href="/adopters">
+          See all adopters
+          <span class="see-all-arrow" aria-hidden="true">&rarr;</span>
+        </a>
+      </div>
+    </div>
 
     <div class="viewport">
       <div class="track">
@@ -51,11 +60,25 @@ const loop = [...adopters, ...adopters];
 
 <style scoped>
 .adopters-carousel {
-  max-width: 1248px;
-  margin: 5rem auto 2rem;
+  max-width: 1152px;
+  margin: 3rem auto 0;
   padding: 0 24px;
 }
 
+.heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 1rem;
+}
+
+.heading-links {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .label {
   font-family: var(--vp-font-family-mono);
   font-size: 0.8rem;
@@ -63,8 +86,7 @@ const loop = [...adopters, ...adopters];
   letter-spacing: 0.04em;
   color: var(--vp-c-text-2);
   text-transform: uppercase;
-  text-align: center;
-  margin: 0 0 0.75rem;
+  margin: 0;
 }
 
 .slashes {
@@ -72,29 +94,26 @@ const loop = [...adopters, ...adopters];
   margin-right: 0.4em;
 }
 
-.subline {
-  text-align: center;
-  font-size: 0.95rem;
-  color: var(--vp-c-text-2);
-  max-width: 640px;
-  margin: 0 auto 2rem;
-  line-height: 1.5;
-}
-
-.subline strong {
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-}
-
+.github-stars,
 .see-all {
-  display: inline-block;
-  margin-left: 0.4em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   color: var(--vp-c-brand-1);
+  font-size: 0.85rem;
   font-weight: 500;
   white-space: nowrap;
   text-decoration: none !important;
 }
 
+.github-stars {
+  color: var(--vp-c-text-2);
+}
+
+.github-stars:hover {
+  color: var(--vp-c-brand-1);
+}
+
 .see-all:hover {
   text-decoration: underline !important;
 }
@@ -209,7 +228,14 @@ const loop = [...adopters, ...adopters];
 
 @media (max-width: 640px) {
   .adopters-carousel {
-    margin-top: 3.5rem;
+    margin-top: 2.5rem;
+    padding: 0 16px;
+  }
+
+  .heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.65rem;
   }
 }
 
diff --git a/website/.vitepress/components/HeroStars.vue b/website/.vitepress/components/HeroStars.vue
deleted file mode 100644
index 28f78dc70c..0000000000
--- a/website/.vitepress/components/HeroStars.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { data as stars } from '../githubStars.data';
-</script>
-
-<template>
-  <a
-    class="hero-stars"
-    href="https://github.com/go-task/task"
-    target="_blank"
-    rel="noreferrer"
-    data-umami-event="home-hero-github"
-  >
-    <span class="vpi-social-github" aria-hidden="true"></span>
-    {{ stars.label }} stars on GitHub
-  </a>
-</template>
-
-<style scoped>
-/* inline-flex so the hero container's own text-align keeps this in step with
-   the buttons: centred below 960px, left-aligned above. */
-.hero-stars {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-top: 20px;
-  color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.25s;
-}
-
-.hero-stars:hover,
-.hero-stars:focus-visible {
-  color: var(--vp-c-brand-1);
-}
-</style>
diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue
index 832631e470..24020e1c8a 100644
--- a/website/.vitepress/components/HomePage.vue
+++ b/website/.vitepress/components/HomePage.vue
@@ -92,6 +92,8 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
 
 <template>
   <main class="home-content">
+    <AdoptersCarousel />
+
     <section class="quick-start" aria-labelledby="quick-start-title">
       <div class="section-heading">
         <p class="eyebrow">
@@ -246,8 +248,6 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
       </div>
     </section>
 
-    <AdoptersCarousel />
-
     <div class="sponsors">
       <VPHomeSponsors
         v-if="sponsors"
@@ -271,6 +271,10 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));
   padding: 6rem 24px 0;
 }
 
+.quick-start {
+  padding-top: 4.5rem;
+}
+
 .section-heading {
   max-width: 720px;
   margin-bottom: 2rem;
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
index 4e3a524ada..91c9d08592 100644
--- a/website/.vitepress/theme/index.ts
+++ b/website/.vitepress/theme/index.ts
@@ -2,7 +2,6 @@ import DefaultTheme from 'vitepress/theme';
 import type { Theme } from 'vitepress';
 import './custom.css';
 import HomePage from '../components/HomePage.vue';
-import HeroStars from '../components/HeroStars.vue';
 import AuthorCard from '../components/AuthorCard.vue';
 import BlogPost from '../components/BlogPost.vue';
 import Version from '../components/Version.vue';
@@ -16,7 +15,6 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'home-hero-actions-after': () => h(HeroStars),
       'home-features-after': () => h(HomePage)
     });
   },