From 6b4879abe8a22da38a6ecbfdd4e77c5db12d4dd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= <matousdzivjak@gmail.com>
Date: Fri, 14 Aug 2026 13:56:39 +0200
Subject: [PATCH 1/3] fix: background color of code blocks

---
 ec.config.mjs                       | 2 +-
 src/components/Code/CodeBlock.astro | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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/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 {

From 5b29f1373ea1bc22755c2aaac93fa3256bb8dd46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= <matousdzivjak@gmail.com>
Date: Fri, 14 Aug 2026 13:58:59 +0200
Subject: [PATCH 2/3] chore: don't highlight current tag endpoint

---
 src/components/ApiDocs/EndpointList.tsx | 8 +-------
 src/components/ApiDocs/TagSection.astro | 6 +-----
 2 files changed, 2 insertions(+), 12 deletions(-)

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>

From 628e01fc5a1b9350370713d48570ff575e5cc983 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= <matousdzivjak@gmail.com>
Date: Fri, 14 Aug 2026 14:30:04 +0200
Subject: [PATCH 3/3] feat: new landing page

---
 astro.config.ts                            |    6 +-
 public/img/landing/sumup-sky-v01.webp      |  Bin 0 -> 15564 bytes
 src/components/Landing/Brands.astro        |  114 +-
 src/components/Landing/DocsBrands.astro    |   28 +
 src/components/Landing/LinkButton.astro    |   69 ++
 src/components/Landing/PaymentScenes.astro |  472 ++++++++
 src/overrides/Hero.astro                   |   47 +-
 src/overrides/SocialIcons.astro            |   14 +-
 src/pages/docs.astro                       |  303 ++++++
 src/pages/index.astro                      | 1138 ++++++++++++++++----
 10 files changed, 1919 insertions(+), 272 deletions(-)
 create mode 100644 public/img/landing/sumup-sky-v01.webp
 create mode 100644 src/components/Landing/DocsBrands.astro
 create mode 100644 src/components/Landing/LinkButton.astro
 create mode 100644 src/components/Landing/PaymentScenes.astro
 create mode 100644 src/pages/docs.astro

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/public/img/landing/sumup-sky-v01.webp b/public/img/landing/sumup-sky-v01.webp
new file mode 100644
index 0000000000000000000000000000000000000000..02bceb3887b81cf46b0b46797547fd6aaf03cea8
GIT binary patch
literal 15564
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
a2(@ew148Nuf=wZbEa>+|Qs$zP0002s9BEhp

literal 0
HcmV?d00001

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>