From 0c28be112361452f2dfadbe517eeff920c4f4f28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Wed, 21 Oct 2026 19:07:34 +0200
Subject: [PATCH 1/2] feat(landing): center the tabs header above the tab list
 and panels

The header used to share a column with the tab list, which left a tall empty area above the code panel on desktop. It now sits centered above both columns, which are top-aligned.

Amp-Thread-ID: https://ampcode.com/threads/T-53648462-f442-44d1-9e8d-017ac90e9551
Co-authored-by: Amp <amp@ampcode.com>
---
 app/components/landing/LandingTabs.vue        | 138 +++++++++---------
 .../content/2.writing/4.landing-page.md       |   2 +-
 2 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/app/components/landing/LandingTabs.vue b/app/components/landing/LandingTabs.vue
index 02de78a..eb34ff7 100644
--- a/app/components/landing/LandingTabs.vue
+++ b/app/components/landing/LandingTabs.vue
@@ -54,83 +54,82 @@ function onKeydown(event: KeyboardEvent) {
       container: 'max-w-6xl py-16 sm:py-16 lg:py-16',
     }"
   >
-    <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-end">
+    <div
+      v-if="$slots.headline || $slots.title || $slots.description"
+      class="mx-auto max-w-2xl text-center"
+    >
+      <p
+        v-if="$slots.headline"
+        class="font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]"
+      >
+        // <slot name="headline" /> //
+      </p>
+      <h2
+        v-if="$slots.title"
+        class="mt-6 text-3xl sm:text-4xl font-medium tracking-tight leading-tight text-highlighted"
+      >
+        <slot
+          name="title"
+          unwrap="p"
+        />
+      </h2>
+      <p
+        v-if="$slots.description"
+        class="mt-4 text-base toned"
+      >
+        <slot
+          name="description"
+          unwrap="p"
+        />
+      </p>
+    </div>
+
+    <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
       <div
-        class="space-y-10"
+        role="tablist"
+        aria-orientation="vertical"
+        class="space-y-2"
         :class="reversed ? 'lg:order-last' : ''"
+        @keydown="onKeydown"
       >
-        <div>
-          <p
-            v-if="$slots.headline"
-            class="font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]"
-          >
-            // <slot name="headline" /> //
-          </p>
-          <h2
-            v-if="$slots.title"
-            class="mt-6 text-3xl sm:text-4xl font-medium tracking-tight leading-tight text-highlighted"
-          >
-            <slot
-              name="title"
-              unwrap="p"
-            />
-          </h2>
-          <p
-            v-if="$slots.description"
-            class="mt-4 text-base toned max-w-lg"
-          >
-            <slot
-              name="description"
-              unwrap="p"
-            />
-          </p>
-        </div>
-
-        <div
-          role="tablist"
-          aria-orientation="vertical"
-          class="space-y-2"
-          @keydown="onKeydown"
+        <button
+          v-for="(item, i) in items"
+          :id="tabId(i)"
+          :key="item.title"
+          ref="tabs"
+          type="button"
+          role="tab"
+          :aria-selected="activeIndex === i"
+          :aria-controls="panelId(i)"
+          :tabindex="activeIndex === i ? 0 : -1"
+          class="w-full flex gap-4 p-4 rounded-xl border text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          :class="activeIndex === i ? 'bg-elevated/50 border-muted' : 'hover:bg-elevated/50 border-transparent'"
+          @click="activeIndex = i"
         >
-          <button
-            v-for="(item, i) in items"
-            :id="tabId(i)"
-            :key="item.title"
-            ref="tabs"
-            type="button"
-            role="tab"
-            :aria-selected="activeIndex === i"
-            :aria-controls="panelId(i)"
-            :tabindex="activeIndex === i ? 0 : -1"
-            class="w-full flex gap-4 p-4 rounded-xl border text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-            :class="activeIndex === i ? 'bg-elevated/50 border-muted' : 'hover:bg-elevated/50 border-transparent'"
-            @click="activeIndex = i"
+          <span
+            v-if="item.icon"
+            class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-elevated"
           >
-            <span
-              v-if="item.icon"
-              class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-elevated"
+            <UIcon
+              :name="item.icon"
+              class="size-5 text-primary"
+            />
+          </span>
+          <div>
+            <h3 class="text-sm font-medium tracking-tight text-highlighted">
+              {{ item.title }}
+            </h3>
+            <p
+              v-if="item.description"
+              class="mt-1 text-sm leading-relaxed text-toned"
             >
-              <UIcon
-                :name="item.icon"
-                class="size-5 text-primary"
-              />
-            </span>
-            <div>
-              <h3 class="text-sm font-medium tracking-tight text-highlighted">
-                {{ item.title }}
-              </h3>
-              <p
-                v-if="item.description"
-                class="mt-1 text-sm leading-relaxed text-toned"
-              >
-                {{ item.description }}
-              </p>
-            </div>
-          </button>
-        </div>
+              {{ item.description }}
+            </p>
+          </div>
+        </button>
       </div>
 
-      <div class="relative rounded-2xl overflow-hidden">
+      <div class="relative min-w-0">
         <div
           v-for="(_, i) in items"
           v-show="activeIndex === i"
@@ -139,6 +138,7 @@ function onKeydown(event: KeyboardEvent) {
           role="tabpanel"
           :aria-labelledby="tabId(i)"
           :tabindex="0"
+          class="*:first:mt-0 *:last:mb-0"
         >
           <slot :name="`code-${i}`" />
         </div>
diff --git a/playground/content/2.writing/4.landing-page.md b/playground/content/2.writing/4.landing-page.md
index 04f7240..cc66eb4 100644
--- a/playground/content/2.writing/4.landing-page.md
+++ b/playground/content/2.writing/4.landing-page.md
@@ -113,7 +113,7 @@ Slots: `title`, `description`.
 
 ## Tabs
 
-`::landing-tabs` renders a two-column section: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic `code-0`, `code-1`, ... slots, in the same order as `items`:
+`::landing-tabs` renders a centered header (`headline`, `title`, `description`) above two columns: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic `code-0`, `code-1`, ... slots, in the same order as `items`:
 
 ````mdc
 ::landing-tabs

From 9526d6be3c2ee9b26804bd52b39f4118b74163e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Wed, 21 Oct 2026 19:27:42 +0200
Subject: [PATCH 2/2] feat(landing): add a header prop to landing-tabs

`side` keeps the current layout and stays the default, so existing sites don't change. `center` and `left` put the header above both columns and top-align the tab list and panel.

Amp-Thread-ID: https://ampcode.com/threads/T-53648462-f442-44d1-9e8d-017ac90e9551
Co-authored-by: Amp <amp@ampcode.com>
---
 app/components/landing/LandingTabs.vue        | 93 ++++++++++++-------
 .../content/2.writing/4.landing-page.md       |  3 +-
 2 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/app/components/landing/LandingTabs.vue b/app/components/landing/LandingTabs.vue
index eb34ff7..d5cc38a 100644
--- a/app/components/landing/LandingTabs.vue
+++ b/app/components/landing/LandingTabs.vue
@@ -5,12 +5,36 @@ interface Tab {
   description?: string
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   items: Tab[]
   reverse?: boolean | string
-}>()
+  /**
+   * Where the headline, title and description go: `side` stacks them above the
+   * tab list in its column; `center` and `left` put them above both columns,
+   * centered or left-aligned.
+   */
+  header?: 'side' | 'center' | 'left'
+}>(), {
+  reverse: false,
+  header: 'side',
+})
 
 const reversed = computed(() => props.reverse === true || props.reverse === 'true' || props.reverse === '')
+const stacked = computed(() => props.header !== 'side')
+
+/**
+ * One grid for every layout: the header, tab list and panel are its items. On
+ * the side layout, the panel spans both rows of the other column, and the
+ * shorter column sits at the bottom; stacked, the header spans both columns
+ * and the tab list and panel are top-aligned below it.
+ */
+const tabColumn = computed(() => reversed.value ? 'lg:col-start-2' : 'lg:col-start-1')
+const panelColumn = computed(() => reversed.value ? 'lg:col-start-1' : 'lg:col-start-2')
+const headerClass = computed(() => {
+  if (!stacked.value) return [tabColumn.value, 'lg:self-end']
+  return props.header === 'center' ? 'lg:col-span-2 mx-auto max-w-2xl text-center' : 'lg:col-span-2 max-w-2xl'
+})
+const panelClass = computed(() => [panelColumn.value, stacked.value ? 'lg:row-start-2 lg:self-start' : 'lg:row-start-1 lg:row-span-2 lg:self-end'])
 
 const activeIndex = ref(0)
 
@@ -55,41 +79,45 @@ function onKeydown(event: KeyboardEvent) {
     }"
   >
     <div
-      v-if="$slots.headline || $slots.title || $slots.description"
-      class="mx-auto max-w-2xl text-center"
+      class="grid lg:grid-cols-2 gap-x-12 lg:gap-x-16 gap-y-10"
+      :class="stacked ? 'lg:gap-y-16' : 'lg:grid-rows-[1fr_auto]'"
     >
-      <p
-        v-if="$slots.headline"
-        class="font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]"
-      >
-        // <slot name="headline" /> //
-      </p>
-      <h2
-        v-if="$slots.title"
-        class="mt-6 text-3xl sm:text-4xl font-medium tracking-tight leading-tight text-highlighted"
-      >
-        <slot
-          name="title"
-          unwrap="p"
-        />
-      </h2>
-      <p
-        v-if="$slots.description"
-        class="mt-4 text-base toned"
+      <div
+        v-if="$slots.headline || $slots.title || $slots.description"
+        :class="headerClass"
       >
-        <slot
-          name="description"
-          unwrap="p"
-        />
-      </p>
-    </div>
+        <p
+          v-if="$slots.headline"
+          class="font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]"
+        >
+          // <slot name="headline" /> //
+        </p>
+        <h2
+          v-if="$slots.title"
+          class="mt-6 text-3xl sm:text-4xl font-medium tracking-tight leading-tight text-highlighted"
+        >
+          <slot
+            name="title"
+            unwrap="p"
+          />
+        </h2>
+        <p
+          v-if="$slots.description"
+          class="mt-4 text-base toned"
+          :class="stacked ? '' : 'max-w-lg'"
+        >
+          <slot
+            name="description"
+            unwrap="p"
+          />
+        </p>
+      </div>
 
-    <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
       <div
         role="tablist"
         aria-orientation="vertical"
         class="space-y-2"
-        :class="reversed ? 'lg:order-last' : ''"
+        :class="[tabColumn, stacked && 'lg:self-start']"
         @keydown="onKeydown"
       >
         <button
@@ -129,7 +157,10 @@ function onKeydown(event: KeyboardEvent) {
         </button>
       </div>
 
-      <div class="relative min-w-0">
+      <div
+        class="relative min-w-0"
+        :class="panelClass"
+      >
         <div
           v-for="(_, i) in items"
           v-show="activeIndex === i"
diff --git a/playground/content/2.writing/4.landing-page.md b/playground/content/2.writing/4.landing-page.md
index cc66eb4..9b5aa48 100644
--- a/playground/content/2.writing/4.landing-page.md
+++ b/playground/content/2.writing/4.landing-page.md
@@ -113,7 +113,7 @@ Slots: `title`, `description`.
 
 ## Tabs
 
-`::landing-tabs` renders a centered header (`headline`, `title`, `description`) above two columns: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic `code-0`, `code-1`, ... slots, in the same order as `items`:
+`::landing-tabs` renders a two-column section: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic `code-0`, `code-1`, ... slots, in the same order as `items`:
 
 ````mdc
 ::landing-tabs
@@ -148,6 +148,7 @@ git push
 | --- | --- | --- |
 | `items` | `{ icon?, title, description? }[]` (required) | One entry per tab. |
 | `reverse` | `boolean` | Flips the column order. |
+| `header` | `'side' \| 'center' \| 'left'` | Where the `headline`, `title` and `description` go. `side` (default) stacks them above the tab list in its column. `center` and `left` put them above both columns, centered or left-aligned, and top-align the tab list and panel; use one when panels are shorter than the header and tab list. |
 
 Slots: `headline`, `title`, `description`, `code-0` … `code-n`.