sumup · matoous · Aug 14, 2026 · Aug 14, 2026 · Aug 14, 2026
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>