diff --git a/astro.config.ts b/astro.config.ts
index 625e9d8e..55001042 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -232,6 +232,8 @@ export default defineConfig({
                   "/api/**",
                   // Custom Astro page outside docs content collection.
                   "/contact",
+                  // Custom documentation hub outside docs content collection.
+                  "/docs",
                   // Custom help hub with dynamic sections rendered from Astro pages.
                   "/help",
                   "/help/**",
@@ -261,8 +263,8 @@ export default defineConfig({
           label: "Get Started",
           items: [
             {
-              label: "Home",
-              link: "/",
+              label: "Overview",
+              link: "/docs/",
             },
           ],
         },
diff --git a/ec.config.mjs b/ec.config.mjs
index cffc1459..6b91cae9 100644
--- a/ec.config.mjs
+++ b/ec.config.mjs
@@ -11,7 +11,7 @@ export default defineEcConfig({
     borderRadius: "0",
     borderWidth: "0",
     codeFontFamily: "var(--cui-font-stack-mono)",
-    codeBackground: "var(--cui-bg-subtle)",
+    codeBackground: "#fff",
     gutterBorderWidth: "0",
     frames: {
       editorTabBarBorderBottomColor: "var(--cui-border-subtle)",
diff --git a/public/img/landing/sumup-sky-v01.webp b/public/img/landing/sumup-sky-v01.webp
new file mode 100644
index 00000000..02bceb38
Binary files /dev/null and b/public/img/landing/sumup-sky-v01.webp differ
diff --git a/src/components/ApiDocs/EndpointList.tsx b/src/components/ApiDocs/EndpointList.tsx
index 11bd83b8..0168d004 100644
--- a/src/components/ApiDocs/EndpointList.tsx
+++ b/src/components/ApiDocs/EndpointList.tsx
@@ -5,7 +5,6 @@ import styles from "./EndpointList.module.css";
 
 interface Props {
   operations: OperationObject[];
-  selectedOperationSlug?: string;
   tagSlug: string;
 }
 
@@ -22,11 +21,7 @@ const EndpointDetails = ({ operation }: { operation: OperationObject }) => {
   );
 };
 
-export default function EndpointList({
-  operations,
-  selectedOperationSlug,
-  tagSlug,
-}: Props) {
+export default function EndpointList({ operations, tagSlug }: Props) {
   return (
     <ListItemGroup
       label="Endpoints"
@@ -39,7 +34,6 @@ export default function EndpointList({
         details: <EndpointDetails operation={operation} />,
         href: `/api/${tagSlug}/${operation.slug}/`,
         variant: "navigation",
-        selected: selectedOperationSlug === operation.slug,
       }))}
     />
   );
diff --git a/src/components/ApiDocs/TagSection.astro b/src/components/ApiDocs/TagSection.astro
index 00de07c1..c1b56988 100644
--- a/src/components/ApiDocs/TagSection.astro
+++ b/src/components/ApiDocs/TagSection.astro
@@ -84,11 +84,7 @@ const coreObjectSections = coreObjects.map((schema, index) => {
     </div>
     {
       operations.length > 0 && (
-        <EndpointList
-          operations={operations}
-          selectedOperationSlug={targetOp}
-          tagSlug={slug}
-        />
+        <EndpointList operations={operations} tagSlug={slug} />
       )
     }
   </LRGrid>
diff --git a/src/components/Code/CodeBlock.astro b/src/components/Code/CodeBlock.astro
index d46c40da..6ef45220 100644
--- a/src/components/Code/CodeBlock.astro
+++ b/src/components/Code/CodeBlock.astro
@@ -72,7 +72,7 @@ const {
     align-self: start;
     border: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
     border-radius: var(--cui-border-radius-byte);
-    background-color: var(--cui-bg-subtle);
+    background-color: #fff;
   }
 
   .header {
@@ -82,7 +82,7 @@ const {
     padding: var(--cui-spacings-bit) var(--cui-spacings-byte)
       var(--cui-spacings-bit) var(--cui-spacings-kilo);
     border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
-    background: var(--cui-bg-subtle);
+    background: #fff;
   }
 
   .options {
diff --git a/src/components/Landing/Brands.astro b/src/components/Landing/Brands.astro
index e06041e1..8c37e55e 100644
--- a/src/components/Landing/Brands.astro
+++ b/src/components/Landing/Brands.astro
@@ -1,28 +1,96 @@
 ---
-import LogoSlider from "@components/LogoSlider.astro";
-
 const brands = [
-  { title: "Airpos", src: "/img/logos/airpos.svg" },
-  { title: "Booking.com", src: "/img/logos/booking.com.svg" },
-  { title: "Bookingkit", src: "/img/logos/bookingkit.svg" },
-  { title: "DHL", src: "/img/logos/dhl.svg" },
-  { title: "Decathlon", src: "/img/logos/decathlon.svg" },
-  { title: "Dominos", src: "/img/logos/dominos.svg" },
-  { title: "Flixbus", src: "/img/logos/flixbus.svg" },
-  { title: "Lightspeed", src: "/img/logos/lightspeed.svg" },
-  { title: "Loyverse", src: "/img/logos/loyverse.svg" },
-  { title: "Taxicaller", src: "/img/logos/taxicaller.svg" },
-  { title: "Transdev", src: "/img/logos/transdev.svg" },
-  { title: "Treatwell", src: "/img/logos/treatwell.svg" },
-  { title: "ready2order", src: "/img/logos/ready2order.svg" },
+  {
+    name: "Booking.com",
+    src: "/img/logos/booking.com.svg",
+    width: 119,
+    height: 21,
+  },
+  {
+    name: "Decathlon",
+    src: "/img/logos/decathlon.svg",
+    width: 1000,
+    height: 249,
+  },
+  { name: "DHL", src: "/img/logos/dhl.svg", width: 100, height: 15 },
+  {
+    name: "Domino's",
+    src: "/img/logos/dominos.svg",
+    width: 667,
+    height: 148,
+  },
+  {
+    name: "FlixBus",
+    src: "/img/logos/flixbus.svg",
+    width: 596,
+    height: 106,
+  },
+  {
+    name: "Treatwell",
+    src: "/img/logos/treatwell.svg",
+    width: 185,
+    height: 35,
+  },
 ];
-
-const splitIndex = Math.ceil(brands.length / 2 + 1);
-const firstRow = brands.slice(0, splitIndex);
-const secondRow = brands.slice(splitIndex);
 ---
 
-<div>
-  <LogoSlider logos={firstRow} />
-  <LogoSlider logos={secondRow} />
-</div>
+<ul class="brand-grid" aria-label="Companies building with SumUp">
+  {
+    brands.map(({ name, src, width, height }) => (
+      <li>
+        <img
+          src={src}
+          alt={name}
+          width={width}
+          height={height}
+          loading="lazy"
+          decoding="async"
+        />
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  .brand-grid {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: var(--cui-spacings-giga);
+    align-items: center;
+    list-style: none;
+  }
+
+  .brand-grid li {
+    display: flex;
+    min-width: 0;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .brand-grid img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 1.75rem;
+    filter: grayscale(1) brightness(0);
+    opacity: 0.52;
+  }
+
+  :global(html[data-theme="dark"]) .brand-grid img {
+    filter: grayscale(1) brightness(0) invert(1);
+  }
+
+  @media (max-width: 64rem) {
+    .brand-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      row-gap: var(--cui-spacings-giga);
+    }
+  }
+
+  @media (max-width: 46rem) {
+    .brand-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+</style>
diff --git a/src/components/Landing/DocsBrands.astro b/src/components/Landing/DocsBrands.astro
new file mode 100644
index 00000000..e06041e1
--- /dev/null
+++ b/src/components/Landing/DocsBrands.astro
@@ -0,0 +1,28 @@
+---
+import LogoSlider from "@components/LogoSlider.astro";
+
+const brands = [
+  { title: "Airpos", src: "/img/logos/airpos.svg" },
+  { title: "Booking.com", src: "/img/logos/booking.com.svg" },
+  { title: "Bookingkit", src: "/img/logos/bookingkit.svg" },
+  { title: "DHL", src: "/img/logos/dhl.svg" },
+  { title: "Decathlon", src: "/img/logos/decathlon.svg" },
+  { title: "Dominos", src: "/img/logos/dominos.svg" },
+  { title: "Flixbus", src: "/img/logos/flixbus.svg" },
+  { title: "Lightspeed", src: "/img/logos/lightspeed.svg" },
+  { title: "Loyverse", src: "/img/logos/loyverse.svg" },
+  { title: "Taxicaller", src: "/img/logos/taxicaller.svg" },
+  { title: "Transdev", src: "/img/logos/transdev.svg" },
+  { title: "Treatwell", src: "/img/logos/treatwell.svg" },
+  { title: "ready2order", src: "/img/logos/ready2order.svg" },
+];
+
+const splitIndex = Math.ceil(brands.length / 2 + 1);
+const firstRow = brands.slice(0, splitIndex);
+const secondRow = brands.slice(splitIndex);
+---
+
+<div>
+  <LogoSlider logos={firstRow} />
+  <LogoSlider logos={secondRow} />
+</div>
diff --git a/src/components/Landing/LinkButton.astro b/src/components/Landing/LinkButton.astro
new file mode 100644
index 00000000..46998bc7
--- /dev/null
+++ b/src/components/Landing/LinkButton.astro
@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
+  href: string;
+  variant?: "primary" | "secondary" | "minimal";
+  icon?: string;
+}
+
+const {
+  href,
+  variant = "primary",
+  icon,
+  class: className,
+  ...attributes
+} = Astro.props;
+const external = /^https?:\/\//.test(href);
+---
+
+<a
+  href={href}
+  class:list={["link-button", variant, className]}
+  target={external ? "_blank" : attributes.target}
+  rel={external ? "noopener noreferrer" : attributes.rel}
+  {...attributes}
+>
+  <slot />
+  {icon === "external" && <span aria-hidden="true">↗</span>}
+</a>
+
+<style>
+  .link-button {
+    display: inline-flex;
+    min-height: 2.75rem;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    padding: 0 var(--cui-spacings-mega);
+    border: 1px solid transparent;
+    border-radius: var(--cui-border-radius-byte);
+    font-weight: var(--cui-font-weight-semibold);
+    text-decoration: none;
+  }
+
+  .primary {
+    color: var(--cui-fg-on-strong);
+    background: var(--cui-bg-strong);
+  }
+
+  .primary:hover {
+    color: var(--cui-fg-on-strong-hovered);
+    background: var(--cui-bg-strong-hovered);
+  }
+
+  .secondary {
+    color: var(--cui-fg-normal);
+    background: var(--cui-bg-normal);
+    border-color: var(--cui-border-normal);
+  }
+
+  .secondary:hover,
+  .minimal:hover {
+    background: var(--cui-bg-subtle-hovered);
+  }
+
+  .minimal {
+    color: var(--cui-fg-normal);
+    background: transparent;
+  }
+</style>
diff --git a/src/components/Landing/PaymentScenes.astro b/src/components/Landing/PaymentScenes.astro
new file mode 100644
index 00000000..bfbb6a0d
--- /dev/null
+++ b/src/components/Landing/PaymentScenes.astro
@@ -0,0 +1,472 @@
+---
+import { CardIn, Code, Globe, Nfc } from "@sumup-oss/icons";
+---
+
+<div class="payment-scenes" aria-hidden="true">
+  <div class="checkout-cluster">
+    <div class="glass-surface checkout-scene">
+      <div class="scene-toolbar">
+        <span class="window-controls">
+          <span></span><span></span><span></span>
+        </span>
+        <span>checkout.sumup.com</span>
+      </div>
+      <div class="checkout-content">
+        <div class="scene-kicker">
+          <Globe />
+          <span>Online checkout</span>
+        </div>
+        <div class="checkout-total">
+          <span>Order total</span>
+          <strong>€24.00</strong>
+        </div>
+        <div class="card-field">
+          <span class="mini-card"><span></span></span>
+          <span>•••• 4242</span>
+          <span>12/28</span>
+        </div>
+        <div class="pay-button">Pay €24.00</div>
+      </div>
+    </div>
+    <div class="glass-surface floating-label online-status">
+      <Globe />
+      <span>Online</span>
+    </div>
+  </div>
+
+  <div class="glass-surface integration-scene">
+    <div class="integration-toolbar">
+      <Code />
+      <span>Your integration</span>
+    </div>
+    <pre
+      class="integration-code"><code><span class="code-punctuation">&#123;</span>
+  <span class="code-property">"amount"</span><span class="code-punctuation">:</span> <span class="code-number">2400</span><span class="code-punctuation">,</span>
+  <span class="code-property">"currency"</span><span class="code-punctuation">:</span> <span class="code-string">"EUR"</span>
+<span class="code-punctuation">&#125;</span></code></pre>
+  </div>
+
+  <div class="terminal-scene">
+    <div class="glass-surface reader-glass">
+      <div class="solo-screen">
+        <div class="solo-system-status">
+          <span class="signal-bars"><i></i><i></i><i></i></span>
+          <span>100%</span>
+          <span class="battery-level"></span>
+        </div>
+        <div class="solo-payment-state">
+          <span>Please tap</span>
+          <strong>€24.00</strong>
+          <Nfc />
+        </div>
+        <div class="solo-navigation">
+          <span class="active"></span><span></span><span></span><span></span>
+        </div>
+      </div>
+    </div>
+    <div class="glass-surface floating-label reader-status">
+      <CardIn />
+      <span>In person</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .payment-scenes {
+    position: relative;
+    z-index: 1;
+    isolation: isolate;
+    width: 100%;
+    min-width: 0;
+    height: 26rem;
+  }
+
+  .payment-scenes::before {
+    position: absolute;
+    inset: 7% 8% 9% 10%;
+    z-index: 0;
+    background: rgb(251 251 249 / 4%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 22%);
+    border-radius: 2rem;
+    box-shadow: inset 0 1px 0 rgb(251 251 249 / 18%);
+    content: "";
+    transform: rotate(2deg);
+  }
+
+  .glass-surface {
+    -webkit-backdrop-filter: blur(1rem) saturate(125%);
+    backdrop-filter: blur(1rem) saturate(125%);
+    background: rgb(30 28 28 / 18%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 58%);
+    box-shadow:
+      inset 0 1px 0 rgb(251 251 249 / 24%),
+      0 1.5rem 3rem rgb(30 28 28 / 20%);
+  }
+
+  .checkout-cluster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 76%;
+  }
+
+  .checkout-scene {
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    color: #fbfbf9;
+    border-radius: 1.25rem;
+    transform: rotate(-1deg);
+  }
+
+  .scene-toolbar {
+    display: flex;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    padding: var(--cui-spacings-kilo);
+    color: rgb(251 251 249 / 76%);
+    background: rgb(251 251 249 / 7%);
+    border-bottom: var(--cui-border-width-kilo) solid rgb(251 251 249 / 34%);
+    font-size: var(--cui-body-s-font-size);
+  }
+
+  .window-controls {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .window-controls span {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: rgb(251 251 249 / 12%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 72%);
+    border-radius: 50%;
+  }
+
+  .checkout-content {
+    display: grid;
+    gap: var(--cui-spacings-mega);
+    padding: var(--cui-spacings-mega);
+  }
+
+  .scene-kicker {
+    display: flex;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    color: rgb(251 251 249 / 78%);
+    font-size: var(--cui-body-s-font-size);
+    font-weight: var(--cui-font-weight-semibold);
+  }
+
+  .scene-kicker :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .checkout-total {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    color: rgb(251 251 249 / 74%);
+  }
+
+  .checkout-total strong {
+    color: #fbfbf9;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: var(--cui-headline-m-font-size);
+    line-height: 1;
+  }
+
+  .card-field {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: var(--cui-spacings-kilo);
+    align-items: center;
+    padding: var(--cui-spacings-kilo);
+    color: rgb(251 251 249 / 78%);
+    background: rgb(251 251 249 / 8%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 32%);
+    border-radius: var(--cui-border-radius-byte);
+    font-size: var(--cui-body-s-font-size);
+  }
+
+  .mini-card {
+    display: inline-flex;
+    width: 2rem;
+    height: 1.35rem;
+    align-items: center;
+    padding-left: 0.35rem;
+    background: rgb(251 251 249 / 12%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 36%);
+    border-radius: 0.2rem;
+  }
+
+  .mini-card span {
+    width: 0.65rem;
+    height: 0.5rem;
+    background: rgb(251 251 249 / 70%);
+    border-radius: 0.1rem;
+  }
+
+  .pay-button {
+    padding: var(--cui-spacings-kilo);
+    color: #1e1c1c;
+    background: rgb(251 251 249 / 92%);
+    border-radius: var(--cui-border-radius-byte);
+    font-weight: var(--cui-font-weight-bold);
+    text-align: center;
+  }
+
+  .integration-scene {
+    position: absolute;
+    bottom: 0.25rem;
+    left: 0;
+    z-index: 2;
+    width: 50%;
+    overflow: hidden;
+    color: #fbfbf9;
+    border-radius: 1rem;
+    transform: rotate(1deg);
+  }
+
+  .integration-toolbar {
+    display: flex;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    padding: var(--cui-spacings-byte) var(--cui-spacings-kilo);
+    color: rgb(251 251 249 / 84%);
+    background: rgb(251 251 249 / 7%);
+    border-bottom: var(--cui-border-width-kilo) solid rgb(251 251 249 / 28%);
+    font-size: 0.6875rem;
+    font-weight: var(--cui-font-weight-semibold);
+  }
+
+  .integration-toolbar :global(svg) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .integration-code {
+    margin: 0;
+    padding: var(--cui-spacings-kilo) var(--cui-spacings-mega);
+    background: transparent;
+    font-family: var(--cui-font-stack-mono);
+    font-size: 0.75rem;
+    line-height: 1.45;
+  }
+
+  .code-property {
+    color: rgb(251 251 249 / 90%);
+  }
+
+  .code-number {
+    color: #fbfbf9;
+  }
+
+  .code-string {
+    color: rgb(251 251 249 / 76%);
+  }
+
+  .code-punctuation {
+    color: rgb(251 251 249 / 72%);
+  }
+
+  .terminal-scene {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 48%;
+    aspect-ratio: 1;
+  }
+
+  .reader-glass {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    padding: 0.8rem;
+    background: rgb(251 251 249 / 11%);
+    border-width: 0.125rem;
+    border-radius: 1.5rem;
+    transform: rotate(1.75deg);
+  }
+
+  .solo-screen {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    height: 100%;
+    padding: 0.55rem;
+    color: #fbfbf9;
+    background: rgb(30 28 28 / 10%);
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 76%);
+    border-radius: 0.9rem;
+    box-shadow: inset 0 1px 0 rgb(251 251 249 / 16%);
+  }
+
+  .solo-system-status {
+    display: flex;
+    gap: 0.25rem;
+    align-items: end;
+    justify-content: end;
+    color: rgb(251 251 249 / 74%);
+    font-size: 0.4375rem;
+    line-height: 1;
+  }
+
+  .signal-bars {
+    display: flex;
+    gap: 0.1rem;
+    align-items: end;
+    height: 0.45rem;
+  }
+
+  .signal-bars i {
+    display: block;
+    width: 0.1rem;
+    background: currentColor;
+    border-radius: 999rem;
+  }
+
+  .signal-bars i:nth-child(1) {
+    height: 35%;
+  }
+
+  .signal-bars i:nth-child(2) {
+    height: 65%;
+  }
+
+  .signal-bars i:nth-child(3) {
+    height: 100%;
+  }
+
+  .battery-level {
+    position: relative;
+    width: 0.65rem;
+    height: 0.35rem;
+    border: var(--cui-border-width-kilo) solid currentColor;
+    border-radius: 0.08rem;
+  }
+
+  .battery-level::before {
+    position: absolute;
+    inset: 0.07rem;
+    background: currentColor;
+    border-radius: 0.03rem;
+    content: "";
+  }
+
+  .battery-level::after {
+    position: absolute;
+    top: 0.07rem;
+    right: -0.13rem;
+    width: 0.07rem;
+    height: 0.13rem;
+    background: currentColor;
+    border-radius: 0 0.03rem 0.03rem 0;
+    content: "";
+  }
+
+  .solo-payment-state {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .solo-payment-state > span {
+    color: rgb(251 251 249 / 78%);
+    font-size: 0.5625rem;
+    font-weight: var(--cui-font-weight-semibold);
+  }
+
+  .solo-payment-state strong {
+    margin-top: 0.2rem;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: 1rem;
+  }
+
+  .solo-payment-state :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: 0.55rem;
+  }
+
+  .solo-navigation {
+    display: flex;
+    gap: 0.8rem;
+    justify-content: center;
+  }
+
+  .solo-navigation span {
+    width: 0.25rem;
+    height: 0.25rem;
+    border: var(--cui-border-width-kilo) solid rgb(251 251 249 / 76%);
+    border-radius: 50%;
+  }
+
+  .solo-navigation .active {
+    background: #fbfbf9;
+  }
+
+  .floating-label {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    padding: var(--cui-spacings-byte) var(--cui-spacings-kilo);
+    color: #fbfbf9;
+    border-radius: 999rem;
+    font-size: 0.6875rem;
+    font-weight: var(--cui-font-weight-semibold);
+    white-space: nowrap;
+  }
+
+  .reader-status {
+    right: 0;
+    bottom: 0;
+    transform: translate(18%, 40%);
+  }
+
+  .online-status {
+    top: 0;
+    right: 0;
+    transform: translate(18%, -40%);
+  }
+
+  .floating-label :global(svg) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @media (max-width: 46rem) {
+    .payment-scenes {
+      height: 27rem;
+    }
+
+    .checkout-cluster {
+      width: 94%;
+    }
+
+    .checkout-content {
+      gap: var(--cui-spacings-kilo);
+      padding: var(--cui-spacings-kilo);
+    }
+
+    .checkout-total strong {
+      font-size: var(--cui-headline-s-font-size);
+    }
+
+    .terminal-scene {
+      width: 56%;
+    }
+
+    .integration-code {
+      padding: var(--cui-spacings-byte) var(--cui-spacings-kilo);
+      font-size: 0.625rem;
+    }
+  }
+</style>
diff --git a/src/overrides/Hero.astro b/src/overrides/Hero.astro
index 4077434a..e73d414c 100644
--- a/src/overrides/Hero.astro
+++ b/src/overrides/Hero.astro
@@ -4,28 +4,35 @@ import { Display, Body } from "@sumup-oss/circuit-ui";
 const {
   data: { title },
 } = Astro.locals.starlightRoute.entry;
+
+const { custom } = Astro.locals.starlightRoute;
+const hideForLandingPage = custom && Astro.url.pathname === "/";
 ---
 
-<div class="hero">
-  <Display
-    as="h1"
-    size="m"
-    weight="black"
-    id={"_top"}
-    className="title"
-    data-page-title
-  >
-    {title}
-  </Display>
-  <Body
-    size="l"
-    style={{ marginTop: "var(--cui-spacings-kilo)" }}
-    color="subtle"
-    className="subtitle"
-  >
-    Docs, guides, and resources to help you accept payments with SumUp.
-  </Body>
-</div>
+{
+  !hideForLandingPage && (
+    <div class="hero">
+      <Display
+        as="h1"
+        size="m"
+        weight="black"
+        id={"_top"}
+        className="title"
+        data-page-title
+      >
+        {title}
+      </Display>
+      <Body
+        size="l"
+        style={{ marginTop: "var(--cui-spacings-kilo)" }}
+        color="subtle"
+        className="subtitle"
+      >
+        Docs, guides, and resources to help you accept payments with SumUp.
+      </Body>
+    </div>
+  )
+}
 
 <style>
   .hero {
diff --git a/src/overrides/SocialIcons.astro b/src/overrides/SocialIcons.astro
index 5610a925..870a79e0 100644
--- a/src/overrides/SocialIcons.astro
+++ b/src/overrides/SocialIcons.astro
@@ -6,18 +6,14 @@ import { ArrowSlanted } from "@sumup-oss/icons";
 // such that we can structure the portal around main sections.
 const currentPath = Astro.url.pathname;
 const isActive = (href: string) => currentPath.startsWith(href);
+const isHomeActive = currentPath === "/";
+const isDocsActive =
+  !isHomeActive && !isActive("/api") && !isActive("/changelog");
 ---
 
 <div class="nav">
-  <a
-    href="/"
-    class:list={[
-      "link",
-      !isActive("/api") && !isActive("/changelog") && "active",
-    ]}
-  >
-    Docs
-  </a>
+  <a href="/" class:list={["link", isHomeActive && "active"]}>Home</a>
+  <a href="/docs/" class:list={["link", isDocsActive && "active"]}> Docs </a>
   <a href="/api/" class:list={["link", isActive("/api") && "active"]}>API</a>
   <a
     href="/changelog/"
diff --git a/src/pages/docs.astro b/src/pages/docs.astro
new file mode 100644
index 00000000..55dba310
--- /dev/null
+++ b/src/pages/docs.astro
@@ -0,0 +1,303 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+import Brands from "@components/Landing/DocsBrands.astro";
+import { Headline, ListItem } from "@sumup-oss/circuit-ui";
+import {
+  Globe,
+  Apps,
+  CardIn,
+  VirtualTerminal,
+  Code,
+  Customise,
+  File,
+  InterestOnBalance,
+  Key,
+  NoCosts,
+  Play,
+  SecurePayments,
+  Sparkles,
+} from "@sumup-oss/icons";
+
+const props = {
+  frontmatter: {
+    title: "SumUp Developer Portal",
+    description:
+      "Welcome to SumUp portal for developers. We’ve got everything you need to build your own payment acceptance solutions for your business.",
+    tableOfContents: false,
+    hero: {
+      title: "SumUp developer platform",
+    },
+  },
+  custom: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+  <main>
+    <section>
+      <section>
+        <Headline as="h2" className="header">Accept Online Payments</Headline>
+        <div class="button-links">
+          <ListItem
+            href="/online-payments/"
+            variant="navigation"
+            label="Accept Your First Online Payment"
+            details="Create and verify a checkout with a sandbox merchant account."
+            leadingComponent={Play}
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={Customise}
+            href="/online-payments/checkouts/"
+            label="Choose a Checkout Experience"
+            details="Compare hosted, embedded, web, and mobile checkout options."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={Globe}
+            href="/online-payments/payment-methods/"
+            label="Offer More Payment Methods"
+            details="Discover the methods available to a merchant and checkout."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={SecurePayments}
+            href="/online-payments/testing/"
+            label="Test Your Integration"
+            details="Exercise successful, failed, and 3D Secure payment flows."
+          />
+        </div>
+      </section>
+      <section>
+        <Headline as="h2" className="header">Accept In-Person Payments</Headline
+        >
+        <div class="button-links">
+          <ListItem
+            variant="navigation"
+            leadingComponent={CardIn}
+            href="/terminal-payments/"
+            label="Choose an In-Person Integration"
+            details="Compare mobile SDKs, the Cloud API, and legacy app handoff."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={Play}
+            href="/terminal-payments/quickstart/"
+            label="Accept Your First In-Person Payment"
+            details="Prepare a merchant account, device, and integration for testing."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={Code}
+            href="/terminal-payments/sdks/"
+            label="Build a Native Mobile Flow"
+            details="Accept payments in Android and iOS apps with SumUp SDKs."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={VirtualTerminal}
+            href="/terminal-payments/cloud-api/"
+            label="Connect a Standalone Reader"
+            details="Control a supported reader from a server or any platform."
+          />
+        </div>
+      </section>
+      <section>
+        <Headline as="h2" className="header">Build and Operate</Headline>
+        <div class="button-links">
+          <ListItem
+            variant="navigation"
+            href="/tools/authorization/"
+            leadingComponent={Key}
+            label="Set Up Authorization"
+            details="Choose and protect the credentials for your integration."
+          />
+          <ListItem
+            variant="navigation"
+            leadingComponent={Apps}
+            href="/tools/sdks/"
+            label="Call APIs with a Server SDK"
+            details="Use an official client across online and in-person integrations."
+          />
+          <ListItem
+            variant="navigation"
+            href="/api/"
+            leadingComponent={File}
+            label="Use the API Reference"
+            details="Look up endpoints, request fields, responses, and errors."
+          />
+          <ListItem
+            variant="navigation"
+            href="/tools/llms/"
+            leadingComponent={Sparkles}
+            label="Build with AI"
+            details="Give coding assistants current SumUp documentation and tools."
+          />
+        </div>
+      </section>
+    </section>
+    <section class="antifraud">
+      <div class="content">
+        <h2>Our Anti-fraud Protection</h2>
+        <div class="callouts">
+          <div>
+            <SecurePayments aria-hidden="true" className="icon" />
+            <p>
+              We’re committed to protecting you from fraud, chargebacks and
+              headaches
+            </p>
+          </div>
+          <div>
+            <InterestOnBalance aria-hidden="true" className="icon" />
+            <p>
+              We use advanced artificial intelligence to constantly monitor
+              transactions for unusual activity
+            </p>
+          </div>
+          <div>
+            <NoCosts aria-hidden="true" className="icon" />
+            <p>
+              All of our anti-fraud protection is included at no additional cost
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="brands">
+      <h2>Brands That Build With SumUp</h2>
+      <Brands />
+    </section>
+  </main>
+</StarlightPage>
+
+<style>
+  :root {
+    --sl-content-width: 68rem !important;
+  }
+</style>
+
+<style lang="scss">
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: var(--cui-spacings-mega);
+
+    li {
+      margin-bottom: 10px;
+    }
+  }
+
+  section {
+    margin: var(--cui-spacings-exa) 0;
+
+    a {
+      color: var(--cui-fg-accent);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    @media screen and (min-width: 941px) {
+      &:nth-child(even) {
+        .image {
+          grid-area: right;
+        }
+
+        .text {
+          grid-area: left;
+        }
+      }
+    }
+  }
+
+  h3 {
+    margin-bottom: var(--cui-spacings-giga);
+  }
+
+  section :global(h2) {
+    margin-bottom: var(--cui-spacings-giga) !important;
+  }
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: var(--cui-spacings-mega);
+  }
+
+  .callouts {
+    margin: var(--cui-spacings-zetta) 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: var(--cui-spacings-giga);
+
+    & > div {
+      margin-bottom: var(--cui-spacings-mega);
+    }
+
+    @media screen and (max-width: 940px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .antifraud img {
+    width: 56px;
+    margin-bottom: var(--cui-spacings-kilo);
+  }
+
+  .antifraud .callouts {
+    text-align: center;
+  }
+
+  .links {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: var(--cui-spacings-giga);
+    ul {
+      li {
+        margin-bottom: var(--cui-spacings-bit);
+      }
+    }
+    & > div {
+      margin-bottom: var(--cui-spacings-giga);
+    }
+    @media screen and (max-width: 940px) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media screen and (max-width: 600px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .brands {
+    overflow: hidden;
+    padding: var(--cui-spacings-zetta) 0;
+  }
+
+  .card-grid {
+    display: grid;
+    gap: 1rem;
+
+    & > :global(*) {
+      margin-top: 0 !important;
+    }
+
+    @media (min-width: 50rem) {
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 1.5rem;
+    }
+  }
+
+  .button-links {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--cui-spacings-kilo);
+  }
+
+  @media (max-width: 1279px) {
+    .button-links {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b774a17e..89851321 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,303 +1,1005 @@
 ---
+import { getCollection } from "astro:content";
+
+import Brands from "@components/Landing/Brands.astro";
+import PaymentScenes from "@components/Landing/PaymentScenes.astro";
+import LinkButton from "@components/Landing/LinkButton.astro";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import type { StarlightPageProps } from "@astrojs/starlight/props";
-import Brands from "@components/Landing/Brands.astro";
-import { Headline, ListItem } from "@sumup-oss/circuit-ui";
 import {
-  Globe,
   Apps,
   CardIn,
-  VirtualTerminal,
-  Code,
+  Code as CodeIcon,
   Customise,
   File,
-  InterestOnBalance,
+  Globe,
+  History,
   Key,
-  NoCosts,
   Play,
   SecurePayments,
   Sparkles,
+  VirtualTerminal,
 } from "@sumup-oss/icons";
 
+const latestUpdates = (await getCollection("changelog"))
+  .sort(
+    (a, b) => b.data.publishedDate.valueOf() - a.data.publishedDate.valueOf(),
+  )
+  .slice(0, 3);
+
+const dateFormatter = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+});
+
+const products = [
+  {
+    variant: "online",
+    icon: Globe,
+    title: "Online payments",
+    description:
+      "Accept cards and local payment methods with hosted, embedded, or mobile checkout experiences.",
+    links: [
+      {
+        icon: Customise,
+        label: "Compare checkouts",
+        href: "/online-payments/checkouts/",
+      },
+      {
+        icon: Globe,
+        label: "Browse payment methods",
+        href: "/online-payments/payment-methods/",
+      },
+      {
+        icon: SecurePayments,
+        label: "Test payment flows",
+        href: "/online-payments/testing/",
+      },
+    ],
+    cta: { label: "Start online", href: "/online-payments/" },
+  },
+  {
+    variant: "terminal",
+    icon: CardIn,
+    title: "In-person payments",
+    description:
+      "Add card-present payments to mobile apps, kiosks, and point-of-sale systems with SumUp readers.",
+    links: [
+      {
+        icon: CodeIcon,
+        label: "Explore mobile SDKs",
+        href: "/terminal-payments/sdks/",
+      },
+      {
+        icon: VirtualTerminal,
+        label: "Use the Cloud API",
+        href: "/terminal-payments/cloud-api/",
+      },
+      {
+        icon: Play,
+        label: "Run your first payment",
+        href: "/terminal-payments/quickstart/",
+      },
+    ],
+    cta: { label: "Explore in-person", href: "/terminal-payments/" },
+  },
+];
+
+const quickstartSteps = [
+  {
+    title: "Create a sandbox",
+    description: "Get a test merchant account in Developer Settings.",
+    label: "Open Developer Settings",
+    href: "https://me.sumup.com/settings/developer?tab=sandboxes",
+  },
+  {
+    title: "Get credentials",
+    description: "Choose an API key or OAuth flow for your integration.",
+    label: "Set up authorization",
+    href: "/tools/authorization/",
+  },
+  {
+    title: "Create a checkout",
+    description: "Send an API request and open the hosted payment page.",
+    label: "Follow the guide",
+    href: "/online-payments/checkouts/hosted-checkout/",
+  },
+];
+
+const toolkitItems = [
+  {
+    icon: File,
+    title: "API reference",
+    description: "Endpoints, schemas, responses, and errors",
+    href: "/api/",
+  },
+  {
+    icon: Apps,
+    title: "Server SDKs",
+    description: "Official libraries for popular languages",
+    href: "/tools/sdks/",
+  },
+  {
+    icon: Key,
+    title: "Authorization",
+    description: "API keys, OAuth, and affiliate keys",
+    href: "/tools/authorization/",
+  },
+  {
+    icon: SecurePayments,
+    title: "Testing",
+    description: "Sandbox accounts, test cards, and 3DS",
+    href: "/online-payments/testing/",
+  },
+  {
+    icon: Sparkles,
+    title: "Build with AI",
+    description: "Docs context and tools for coding agents",
+    href: "/tools/llms/",
+  },
+  {
+    icon: History,
+    title: "Changelog",
+    description: "Recent platform and SDK updates",
+    href: "/changelog/",
+  },
+];
+
+const productionLinks = [
+  {
+    icon: SecurePayments,
+    title: "Test safely",
+    description: "Success, failure, and 3D Secure scenarios",
+    href: "/online-payments/testing/",
+  },
+  {
+    icon: Key,
+    title: "Protect credentials",
+    description: "Keep secret keys on your server",
+    href: "/tools/authorization/api-keys/",
+  },
+  {
+    icon: Apps,
+    title: "Handle updates",
+    description: "Confirm asynchronous payment states",
+    href: "/online-payments/webhooks/",
+  },
+];
+
 const props = {
   frontmatter: {
     title: "SumUp Developer Portal",
     description:
-      "Welcome to SumUp portal for developers. We’ve got everything you need to build your own payment acceptance solutions for your business.",
+      "APIs, SDKs, and prebuilt experiences for accepting payments online and in person with SumUp.",
     tableOfContents: false,
     hero: {
-      title: "SumUp developer platform",
+      title: "Build payments with SumUp",
     },
   },
+  hasSidebar: false,
   custom: true,
 } as StarlightPageProps;
 ---
 
 <StarlightPage {...props}>
-  <main>
-    <section>
-      <section>
-        <Headline as="h2" className="header">Accept Online Payments</Headline>
-        <div class="button-links">
-          <ListItem
-            href="/online-payments/"
-            variant="navigation"
-            label="Accept Your First Online Payment"
-            details="Create and verify a checkout with a sandbox merchant account."
-            leadingComponent={Play}
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={Customise}
-            href="/online-payments/checkouts/"
-            label="Choose a Checkout Experience"
-            details="Compare hosted, embedded, web, and mobile checkout options."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={Globe}
-            href="/online-payments/payment-methods/"
-            label="Offer More Payment Methods"
-            details="Discover the methods available to a merchant and checkout."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={SecurePayments}
-            href="/online-payments/testing/"
-            label="Test Your Integration"
-            details="Exercise successful, failed, and 3D Secure payment flows."
-          />
+  <div class="landing-page">
+    <div class="hero-band">
+      <header class="hero" aria-labelledby="hero-title">
+        <div class="hero-copy">
+          <h1 id="hero-title" data-pagefind-meta="title">
+            Build payments with SumUp
+          </h1>
+          <p class="hero-description">
+            APIs, SDKs, and prebuilt experiences for accepting payments online
+            and in person.
+          </p>
+          <div class="hero-actions">
+            <LinkButton href="/online-payments/">Start online</LinkButton>
+            <LinkButton href="/terminal-payments/" variant="secondary">
+              Explore in-person
+            </LinkButton>
+          </div>
+          <a class="text-link" href="/api/">
+            Browse the API reference <span aria-hidden="true">→</span>
+          </a>
         </div>
-      </section>
-      <section>
-        <Headline as="h2" className="header">Accept In-Person Payments</Headline
-        >
-        <div class="button-links">
-          <ListItem
-            variant="navigation"
-            leadingComponent={CardIn}
-            href="/terminal-payments/"
-            label="Choose an In-Person Integration"
-            details="Compare mobile SDKs, the Cloud API, and legacy app handoff."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={Play}
-            href="/terminal-payments/quickstart/"
-            label="Accept Your First In-Person Payment"
-            details="Prepare a merchant account, device, and integration for testing."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={Code}
-            href="/terminal-payments/sdks/"
-            label="Build a Native Mobile Flow"
-            details="Accept payments in Android and iOS apps with SumUp SDKs."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={VirtualTerminal}
-            href="/terminal-payments/cloud-api/"
-            label="Connect a Standalone Reader"
-            details="Control a supported reader from a server or any platform."
+
+        <div class="hero-visual">
+          <!-- Brand Resources and Assets: Sky graphic / Static v.01 -->
+          <img
+            class="hero-sky"
+            src="/img/landing/sumup-sky-v01.webp"
+            alt=""
+            width="960"
+            height="640"
+            fetchpriority="high"
+            decoding="async"
           />
+
+          <PaymentScenes />
         </div>
-      </section>
-      <section>
-        <Headline as="h2" className="header">Build and Operate</Headline>
-        <div class="button-links">
-          <ListItem
-            variant="navigation"
-            href="/tools/authorization/"
-            leadingComponent={Key}
-            label="Set Up Authorization"
-            details="Choose and protect the credentials for your integration."
-          />
-          <ListItem
-            variant="navigation"
-            leadingComponent={Apps}
-            href="/tools/sdks/"
-            label="Call APIs with a Server SDK"
-            details="Use an official client across online and in-person integrations."
-          />
-          <ListItem
-            variant="navigation"
-            href="/api/"
-            leadingComponent={File}
-            label="Use the API Reference"
-            details="Look up endpoints, request fields, responses, and errors."
-          />
-          <ListItem
-            variant="navigation"
-            href="/tools/llms/"
-            leadingComponent={Sparkles}
-            label="Build with AI"
-            details="Give coding assistants current SumUp documentation and tools."
-          />
+      </header>
+    </div>
+
+    <div class="content-shell">
+      <section class="section" aria-labelledby="choose-path">
+        <div class="section-heading">
+          <h2 id="choose-path">One platform, wherever customers pay</h2>
+          <p>
+            Start with a prebuilt experience or use the APIs and SDKs to shape
+            the flow around your product.
+          </p>
+        </div>
+
+        <div class="product-grid">
+          {
+            products.map(
+              ({ variant, icon: Icon, title, description, links, cta }) => (
+                <article class="product-card">
+                  <div class="product-card-header">
+                    <span class:list={["icon-shell", `${variant}-icon`]}>
+                      <Icon aria-hidden="true" />
+                    </span>
+                    <h3>{title}</h3>
+                  </div>
+                  <p>{description}</p>
+                  <ul>
+                    {links.map(({ icon: LinkIcon, label, href }) => (
+                      <li>
+                        <LinkIcon aria-hidden="true" />
+                        <a href={href}>{label}</a>
+                      </li>
+                    ))}
+                  </ul>
+                  <a class="card-cta" href={cta.href}>
+                    {cta.label} <span aria-hidden="true">→</span>
+                  </a>
+                </article>
+              ),
+            )
+          }
         </div>
       </section>
-    </section>
-    <section class="antifraud">
-      <div class="content">
-        <h2>Our Anti-fraud Protection</h2>
-        <div class="callouts">
-          <div>
-            <SecurePayments aria-hidden="true" className="icon" />
-            <p>
-              We’re committed to protecting you from fraud, chargebacks and
-              headaches
-            </p>
-          </div>
-          <div>
-            <InterestOnBalance aria-hidden="true" className="icon" />
-            <p>
-              We use advanced artificial intelligence to constantly monitor
-              transactions for unusual activity
+
+      <section class="section journey-section" aria-label="Integration journey">
+        <div class="journey-grid">
+          <article class="journey-panel" aria-labelledby="first-payment">
+            <h3 id="first-payment">From sandbox to first payment</h3>
+            <p class="journey-description">
+              Build and test a complete checkout without moving real money.
             </p>
-          </div>
-          <div>
-            <NoCosts aria-hidden="true" className="icon" />
-            <p>
-              All of our anti-fraud protection is included at no additional cost
+
+            <ol class="steps">
+              {
+                quickstartSteps.map(
+                  ({ title, description, label, href }, index) => (
+                    <li>
+                      <span class="step-number">{index + 1}</span>
+                      <div>
+                        <h4>{title}</h4>
+                        <p>{description}</p>
+                        <a href={href}>
+                          {label}{" "}
+                          <span aria-hidden="true">
+                            {href.startsWith("http") ? "↗" : "→"}
+                          </span>
+                        </a>
+                      </div>
+                    </li>
+                  ),
+                )
+              }
+            </ol>
+          </article>
+
+          <article class="journey-panel" aria-labelledby="production-heading">
+            <h3 id="production-heading">Ship a payment flow you can trust</h3>
+            <p class="journey-description">
+              Test difficult paths, protect credentials, and verify payment
+              updates before you go live.
             </p>
+
+            <div class="production-links">
+              {
+                productionLinks.map(
+                  ({ icon: Icon, title, description, href }) => (
+                    <a href={href}>
+                      <Icon aria-hidden="true" />
+                      <span>
+                        <strong>{title}</strong>
+                        <small>{description}</small>
+                      </span>
+                      <span aria-hidden="true">→</span>
+                    </a>
+                  ),
+                )
+              }
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <section class="section" aria-labelledby="toolkit-heading">
+        <div class="section-heading">
+          <h2 id="toolkit-heading">Everything you need to keep moving</h2>
+          <p>
+            Go from endpoint details to production-ready integration guidance
+            without losing your place.
+          </p>
+        </div>
+
+        <div class="tool-grid">
+          {
+            toolkitItems.map(({ icon: Icon, title, description, href }) => (
+              <a class="tool-card" href={href}>
+                <span class="tool-icon">
+                  <Icon aria-hidden="true" />
+                </span>
+                <span>
+                  <strong>{title}</strong>
+                  <small>{description}</small>
+                </span>
+                <span class="tool-arrow" aria-hidden="true">
+                  →
+                </span>
+              </a>
+            ))
+          }
+        </div>
+      </section>
+
+      <section class="section" aria-labelledby="updates-heading">
+        <div class="updates-header">
+          <div class="section-heading">
+            <h2 id="updates-heading">Latest developer updates</h2>
           </div>
+          <a class="text-link" href="/changelog/">
+            View all updates <span aria-hidden="true">→</span>
+          </a>
         </div>
-      </div>
-    </section>
-    <section class="brands">
-      <h2>Brands That Build With SumUp</h2>
-      <Brands />
-    </section>
-  </main>
+        <div class="update-grid">
+          {
+            latestUpdates.map(({ id, data }) => (
+              <article class="update-card">
+                <div class="update-meta">
+                  <time datetime={data.publishedDate.toISOString()}>
+                    {dateFormatter.format(data.publishedDate)}
+                  </time>
+                  {data.tags[0] && <span>{data.tags[0]}</span>}
+                </div>
+                <h3>
+                  <a href={`/changelog/${id}/`}>{data.title}</a>
+                </h3>
+                <a class="update-link" href={`/changelog/${id}/`}>
+                  Read update <span aria-hidden="true">→</span>
+                </a>
+              </article>
+            ))
+          }
+        </div>
+      </section>
+
+      <section
+        class="section proof"
+        aria-label="Built into products used around the world"
+      >
+        <Brands />
+      </section>
+    </div>
+  </div>
 </StarlightPage>
 
 <style>
-  :root {
-    --sl-content-width: 68rem !important;
+  :global(:root) {
+    --sl-content-width: 100% !important;
   }
-</style>
 
-<style lang="scss">
-  ul {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: var(--cui-spacings-mega);
+  .landing-page {
+    margin-top: -1.5rem;
+    margin-right: calc(-1 * var(--sl-content-pad-x));
+    margin-left: calc(-1 * var(--sl-content-pad-x));
+  }
 
-    li {
-      margin-bottom: 10px;
-    }
+  .hero-band {
+    width: 100%;
+    background: var(--cui-bg-subtle);
   }
 
-  section {
-    margin: var(--cui-spacings-exa) 0;
+  .hero {
+    width: min(calc(100% - 2rem), 68rem);
+    margin-right: auto;
+    margin-left: auto;
+  }
 
-    a {
-      color: var(--cui-fg-accent);
+  .hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.95fr);
+    gap: clamp(2rem, 6vw, 5rem);
+    align-items: center;
+    min-height: 37rem;
+    padding-block: clamp(2rem, 5vw, 4rem);
+  }
 
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+  .hero-copy,
+  .hero-visual {
+    position: relative;
+    z-index: 1;
+    min-width: 0;
+  }
 
-    @media screen and (min-width: 941px) {
-      &:nth-child(even) {
-        .image {
-          grid-area: right;
-        }
+  .hero h1 {
+    max-width: 11ch;
+    margin: 0;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: clamp(3.25rem, 4.75vw, 4.25rem);
+    letter-spacing: -0.045em;
+    line-height: 0.96;
+    text-wrap: balance;
+  }
 
-        .text {
-          grid-area: left;
-        }
-      }
-    }
+  .hero-description {
+    max-width: 31rem;
+    margin: var(--cui-spacings-giga) 0 0;
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-l-font-size);
+    line-height: var(--cui-body-l-line-height);
+  }
+
+  .hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cui-spacings-kilo);
+    margin-top: var(--cui-spacings-giga);
+  }
+
+  .text-link,
+  .card-cta,
+  .steps a,
+  .update-link {
+    display: inline-flex;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    color: var(--cui-fg-normal);
+    font-weight: var(--cui-font-weight-semibold);
+    text-decoration: none;
+  }
+
+  .hero-copy > .text-link {
+    margin-top: var(--cui-spacings-mega);
+  }
+
+  .text-link:hover,
+  .card-cta:hover,
+  .steps a:hover,
+  .update-link:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .hero-visual {
+    display: flex;
+    min-height: 30rem;
+    align-items: center;
+    overflow: hidden;
+    padding: clamp(1rem, 3vw, 2rem);
+    border-radius: 1.5rem;
+  }
+
+  .hero-sky {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
+
+  .content-shell {
+    width: min(calc(100% - 2rem), 68rem);
+    margin-right: auto;
+    margin-left: auto;
+    padding-block: clamp(3rem, 6vw, 5rem);
+    display: flex;
+    flex-direction: column;
+    gap: clamp(4rem, 8vw, 6rem);
   }
 
-  h3 {
+  .section {
+    width: 100%;
+  }
+
+  .section-heading {
+    max-width: 40rem;
     margin-bottom: var(--cui-spacings-giga);
   }
 
-  section :global(h2) {
-    margin-bottom: var(--cui-spacings-giga) !important;
+  .section-heading h2 {
+    margin: 0;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: clamp(2rem, 4vw, var(--cui-headline-l-font-size));
+    letter-spacing: -0.025em;
+    line-height: 1.05;
+    text-wrap: balance;
   }
 
-  .icon {
-    width: 48px;
-    height: 48px;
-    margin-bottom: var(--cui-spacings-mega);
+  .section-heading > p:last-child {
+    margin: var(--cui-spacings-mega) 0 0;
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-l-font-size);
+    line-height: var(--cui-body-l-line-height);
   }
 
-  .callouts {
-    margin: var(--cui-spacings-zetta) 0;
+  .product-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: var(--cui-spacings-giga);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--cui-spacings-giga);
+  }
 
-    & > div {
-      margin-bottom: var(--cui-spacings-mega);
-    }
+  .product-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 27rem;
+    overflow: hidden;
+    padding: clamp(1.5rem, 4vw, 2.5rem);
+    background: var(--cui-bg-subtle);
+    border: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
+    border-radius: var(--cui-border-radius-mega);
+  }
 
-    @media screen and (max-width: 940px) {
-      grid-template-columns: 1fr;
-    }
+  .product-card-header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    gap: var(--cui-spacings-kilo);
+    align-items: center;
+  }
+
+  .icon-shell {
+    display: inline-flex;
+    width: 3.5rem;
+    height: 3.5rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--cui-fg-normal);
+    border-radius: 1rem;
+  }
+
+  .online-icon {
+    background: var(--cui-bg-highlight);
+  }
+
+  .terminal-icon {
+    background: var(--cui-bg-success);
+  }
+
+  .icon-shell :global(svg) {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .product-card h3 {
+    margin: 0;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: var(--cui-headline-m-font-size);
+    line-height: var(--cui-headline-m-line-height);
+  }
+
+  .product-card > p {
+    position: relative;
+    z-index: 1;
+    max-width: 34rem;
+    margin: var(--cui-spacings-mega) 0 0;
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-l-font-size);
+    line-height: var(--cui-body-l-line-height);
+  }
+
+  .product-card ul {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: var(--cui-spacings-kilo);
+    margin: var(--cui-spacings-giga) 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .product-card li {
+    display: flex;
+    gap: var(--cui-spacings-kilo);
+    align-items: center;
+  }
+
+  .product-card li :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex: 0 0 auto;
+    color: var(--cui-fg-subtle);
+  }
+
+  .product-card li a {
+    color: var(--cui-fg-normal);
+    font-weight: var(--cui-font-weight-semibold);
+    text-decoration: none;
+  }
+
+  .product-card li a:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .card-cta {
+    position: relative;
+    z-index: 1;
+    margin-top: auto;
+    font-size: var(--cui-body-l-font-size);
+  }
+
+  .steps {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin: var(--cui-spacings-giga) 0 0;
+    padding: 0;
+    list-style: none;
   }
 
-  .antifraud img {
-    width: 56px;
-    margin-bottom: var(--cui-spacings-kilo);
+  .steps::before {
+    position: absolute;
+    top: 1.5rem;
+    right: 16.67%;
+    left: 16.67%;
+    height: var(--cui-border-width-kilo);
+    background: var(--cui-border-normal);
+    content: "";
   }
 
-  .antifraud .callouts {
+  .steps li {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    padding: 0 clamp(1rem, 3vw, 2rem);
     text-align: center;
   }
 
-  .links {
+  .step-number {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    width: 3rem;
+    height: 3rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--cui-fg-on-strong);
+    background: var(--cui-bg-strong);
+    border: 0.375rem solid var(--cui-bg-normal);
+    border-radius: 50%;
+    font-weight: var(--cui-font-weight-bold);
+  }
+
+  .steps h4 {
+    margin: var(--cui-spacings-mega) 0 0;
+    font-size: var(--cui-headline-s-font-size);
+    line-height: var(--cui-headline-s-line-height);
+  }
+
+  .steps p {
+    margin: var(--cui-spacings-byte) 0 var(--cui-spacings-mega);
+    color: var(--cui-fg-subtle);
+  }
+
+  .journey-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: var(--cui-spacings-giga);
-    ul {
-      li {
-        margin-bottom: var(--cui-spacings-bit);
-      }
-    }
-    & > div {
-      margin-bottom: var(--cui-spacings-giga);
-    }
-    @media screen and (max-width: 940px) {
-      grid-template-columns: 1fr 1fr;
-    }
-    @media screen and (max-width: 600px) {
-      grid-template-columns: 1fr;
-    }
+    gap: clamp(3rem, 6vw, 4.5rem);
   }
 
-  .brands {
-    overflow: hidden;
-    padding: var(--cui-spacings-zetta) 0;
+  .journey-panel {
+    min-width: 0;
+  }
+
+  .journey-panel > h3 {
+    max-width: 18ch;
+    margin: 0;
+    font-family: "SumUp Black", "SumUp Black fallback", sans-serif;
+    font-size: var(--cui-headline-m-font-size);
+    line-height: var(--cui-headline-m-line-height);
+    text-wrap: balance;
+  }
+
+  .journey-description {
+    max-width: 30rem;
+    margin: var(--cui-spacings-kilo) 0 0;
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-l-font-size);
+    line-height: var(--cui-body-l-line-height);
   }
 
-  .card-grid {
+  .tool-grid {
     display: grid;
-    gap: 1rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--cui-spacings-kilo);
+  }
 
-    & > :global(*) {
-      margin-top: 0 !important;
-    }
+  .tool-card {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: var(--cui-spacings-kilo);
+    align-items: center;
+    min-height: 7rem;
+    padding: var(--cui-spacings-mega);
+    color: var(--cui-fg-normal);
+    background: var(--cui-bg-subtle);
+    border: var(--cui-border-width-kilo) solid transparent;
+    border-radius: var(--cui-border-radius-mega);
+    text-decoration: none;
+  }
 
-    @media (min-width: 50rem) {
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 1.5rem;
-    }
+  .tool-card:hover {
+    background: var(--cui-bg-subtle-hovered);
+    border-color: var(--cui-border-strong);
+  }
+
+  .tool-icon {
+    display: inline-flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    background: var(--cui-bg-subtle);
+    border-radius: var(--cui-border-radius-byte);
+  }
+
+  .tool-icon :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .tool-card strong,
+  .tool-card small {
+    display: block;
+  }
+
+  .tool-card small {
+    margin-top: var(--cui-spacings-bit);
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-s-font-size);
+    line-height: var(--cui-body-s-line-height);
+  }
+
+  .tool-arrow {
+    color: var(--cui-fg-subtle);
+  }
+
+  .production-links {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--cui-spacings-kilo);
+    margin-top: var(--cui-spacings-giga);
+  }
+
+  .production-links a {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: var(--cui-spacings-kilo);
+    align-items: center;
+    min-height: 8rem;
+    padding: var(--cui-spacings-mega);
+    color: var(--cui-fg-normal);
+    background: var(--cui-bg-normal);
+    border: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
+    border-radius: var(--cui-border-radius-byte);
+    text-decoration: none;
+  }
+
+  .production-links a:hover {
+    background: var(--cui-bg-normal-hovered);
+    border-color: var(--cui-border-strong);
+  }
+
+  .production-links :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .production-links strong,
+  .production-links small {
+    display: block;
+  }
+
+  .production-links small {
+    margin-top: var(--cui-spacings-bit);
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-s-font-size);
+    line-height: var(--cui-body-s-line-height);
+  }
+
+  .proof {
+    padding-block: var(--cui-spacings-giga);
+  }
+
+  .updates-header {
+    display: flex;
+    gap: var(--cui-spacings-giga);
+    align-items: end;
+    justify-content: space-between;
+  }
+
+  .updates-header .section-heading {
+    margin-bottom: 0;
   }
 
-  .button-links {
+  .update-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--cui-spacings-kilo);
+    margin-top: var(--cui-spacings-giga);
+  }
+
+  .update-card {
+    display: flex;
+    min-height: 13rem;
+    flex-direction: column;
+    padding: var(--cui-spacings-mega);
+    background: var(--cui-bg-subtle);
+    border: var(--cui-border-width-kilo) solid transparent;
+    border-radius: var(--cui-border-radius-mega);
+  }
+
+  .update-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cui-spacings-byte);
+    align-items: center;
+    color: var(--cui-fg-subtle);
+    font-size: var(--cui-body-s-font-size);
+    line-height: var(--cui-body-s-line-height);
+  }
+
+  .update-meta span::before {
+    margin-right: var(--cui-spacings-byte);
+    content: "·";
+  }
+
+  .update-card h3 {
+    margin: var(--cui-spacings-mega) 0;
+    font-size: var(--cui-headline-s-font-size);
+    line-height: var(--cui-headline-s-line-height);
+  }
+
+  .update-card h3 a {
+    color: var(--cui-fg-normal);
+    text-decoration: none;
+  }
+
+  .update-card h3 a:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .update-link {
+    margin-top: auto;
   }
 
-  @media (max-width: 1279px) {
-    .button-links {
+  @media (max-width: 64rem) {
+    .hero {
       grid-template-columns: 1fr;
     }
+
+    .hero {
+      min-height: auto;
+    }
+
+    .hero-copy {
+      max-width: 42rem;
+    }
+
+    .hero h1 {
+      max-width: 12ch;
+    }
+
+    .hero-visual {
+      width: min(100%, 40rem);
+    }
+
+    .tool-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 46rem) {
+    .hero {
+      padding-block: var(--cui-spacings-giga);
+    }
+
+    .hero h1 {
+      font-size: clamp(3rem, 14vw, 4rem);
+    }
+
+    .hero-description {
+      font-size: var(--cui-body-m-font-size);
+      line-height: var(--cui-body-m-line-height);
+    }
+
+    .hero-actions {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .hero-actions :global(.link-button) {
+      justify-content: center;
+    }
+
+    .hero-visual {
+      min-height: 29rem;
+      padding: var(--cui-spacings-kilo);
+      border-radius: var(--cui-border-radius-mega);
+    }
+
+    .product-grid,
+    .steps,
+    .production-links,
+    .tool-grid,
+    .update-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .product-card {
+      min-height: auto;
+    }
+
+    .product-card-header {
+      gap: var(--cui-spacings-byte);
+    }
+
+    .product-card h3 {
+      font-size: var(--cui-headline-s-font-size);
+      line-height: var(--cui-headline-s-line-height);
+    }
+
+    .card-cta {
+      margin-top: var(--cui-spacings-mega);
+    }
+
+    .production-links a {
+      padding: var(--cui-spacings-kilo);
+    }
+
+    .steps li,
+    .production-links a {
+      min-height: auto;
+    }
+
+    .steps {
+      gap: var(--cui-spacings-giga);
+    }
+
+    .steps::before {
+      top: 1.5rem;
+      bottom: 1.5rem;
+      left: 1.5rem;
+      width: var(--cui-border-width-kilo);
+      height: auto;
+    }
+
+    .steps li {
+      grid-template-columns: 3rem minmax(0, 1fr);
+      gap: var(--cui-spacings-mega);
+      align-items: start;
+      justify-items: start;
+      padding: 0;
+      text-align: left;
+    }
+
+    .steps h4 {
+      margin-top: 0;
+    }
+
+    .updates-header {
+      align-items: start;
+      flex-direction: column;
+    }
   }
 </style>