feat: new landing page

astro.config.ts

@@ -238,6 +238,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/**",
@@ -267,8 +269,8 @@ export default defineConfig({
           label: "Get Started",
           items: [
             {
-              label: "Home",
-              link: "/",
+              label: "Overview",
+              link: "/docs/",
             },
           ],
         },

src/components/ApiDocs/TopSections.astro

@@ -1,12 +1,13 @@
 ---
+import Button from "@components/Button";
 import MarkdownContent from "@components/MarkdownContent.astro";
 import { CodeBlock, MultiCode } from "@components/Code";
 import Markdown from "@components/Markdown.astro";
 import type { ApiTopSection } from "@lib/openapi/routes";
 import { doc, resolveSchema } from "@lib/openapi";
 import type { OpenAPIV3_1 } from "openapi-types";
 import { ArrowSlanted } from "@sumup-oss/icons";
-import { Anchor, Body, Button, Card } from "@sumup-oss/circuit-ui";
+import { Anchor, Body, Card } from "@sumup-oss/circuit-ui";
 import { getJavaSdkVersion } from "@lib/sdks/javaSdkVersion";
 import Table from "@components/content/Table";
 import Example from "./Example.astro";
@@ -44,18 +45,16 @@ const sectionAttrs = (id: ApiTopSection) =>
           target="_blank"
           rel="noreferrer noopener"
           icon={ArrowSlanted}
-        >
-          View YAML spec
-        </Button>
+          label="View YAML spec"
+        />
         <Button
           size="s"
           href="https://raw.githubusercontent.com/sumup/sumup-openapi/refs/heads/main/openapi.json"
           target="_blank"
           rel="noreferrer noopener"
           icon={ArrowSlanted}
-        >
-          View JSON spec
-        </Button>
+          label="View JSON spec"
+        />
       </div>
     </div>
     {

src/components/Button.tsx

@@ -0,0 +1,17 @@
+import {
+  Button as CircuitButton,
+  I18nProvider,
+  type ButtonProps,
+} from "@sumup-oss/circuit-ui";
+
+// Astro renders each React component as a separate root, so buttons used in
+// Astro templates need their own Circuit UI internationalization context.
+type Props = Omit<ButtonProps, "children"> & { label: string };
+
+export default function Button({ label, ...props }: Props) {
+  return (
+    <I18nProvider locale="en-US">
+      <CircuitButton {...props}>{label}</CircuitButton>
+    </I18nProvider>
+  );
+}

src/components/ContactForm.tsx

@@ -2,6 +2,7 @@ import {
   Anchor,
   Body,
   ButtonGroup,
+  I18nProvider,
   ToastProvider,
   useNotificationToast,
   type SelectOption,
@@ -273,9 +274,11 @@ const Contact: FC<ContactParams> = ({ status }) => {
 
 export default function ContactForm(params: ContactParams) {
   return (
-    <ToastProvider>
-      <Contact {...params} />
-    </ToastProvider>
+    <I18nProvider locale="en-US">
+      <ToastProvider>
+        <Contact {...params} />
+      </ToastProvider>
+    </I18nProvider>
   );
 }
 

src/components/Hamburger.tsx

@@ -0,0 +1,14 @@
+import {
+  Hamburger as CircuitHamburger,
+  I18nProvider,
+  type HamburgerProps,
+} from "@sumup-oss/circuit-ui";
+
+// Keep the provider in the same React root as the hydrated Astro component.
+export default function Hamburger(props: HamburgerProps) {
+  return (
+    <I18nProvider locale="en-US">
+      <CircuitHamburger {...props} />
+    </I18nProvider>
+  );
+}

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>

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>

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>