diff --git a/astro.config.ts b/astro.config.ts index cc182f3a..196a296f 100644 --- a/astro.config.ts +++ b/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/", }, ], }, 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/TopSections.astro b/src/components/ApiDocs/TopSections.astro index 8f7f0820..5877d656 100644 --- a/src/components/ApiDocs/TopSections.astro +++ b/src/components/ApiDocs/TopSections.astro @@ -1,4 +1,5 @@ --- +import Button from "@components/Button"; import MarkdownContent from "@components/MarkdownContent.astro"; import { CodeBlock, MultiCode } from "@components/Code"; import Markdown from "@components/Markdown.astro"; @@ -6,7 +7,7 @@ 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 - + label="View YAML spec" + /> + label="View JSON spec" + /> { diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 00000000..92fc4ce5 --- /dev/null +++ b/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 & { label: string }; + +export default function Button({ label, ...props }: Props) { + return ( + + {label} + + ); +} diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index 75aef5f4..8489d4ac 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -2,6 +2,7 @@ import { Anchor, Body, ButtonGroup, + I18nProvider, ToastProvider, useNotificationToast, type SelectOption, @@ -273,9 +274,11 @@ const Contact: FC = ({ status }) => { export default function ContactForm(params: ContactParams) { return ( - - - + + + + + ); } diff --git a/src/components/Hamburger.tsx b/src/components/Hamburger.tsx new file mode 100644 index 00000000..fce583af --- /dev/null +++ b/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 ( + + + + ); +} 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); --- -
- - -
+ + + 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); +--- + +
+ + +
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); +--- + + + + {icon === "external" && } + + + 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"; +--- + + + + diff --git a/src/components/RssIcon.tsx b/src/components/RssIcon.tsx new file mode 100644 index 00000000..0b493459 --- /dev/null +++ b/src/components/RssIcon.tsx @@ -0,0 +1,18 @@ +import type { IconProps } from "@sumup-oss/icons"; + +export default function RssIcon({ size = "16", ...props }: IconProps) { + return ( + + ); +} diff --git a/src/components/content/SearchableTable.tsx b/src/components/content/SearchableTable.tsx index faa33806..320c7427 100644 --- a/src/components/content/SearchableTable.tsx +++ b/src/components/content/SearchableTable.tsx @@ -1,4 +1,4 @@ -import { SearchInput } from "@sumup-oss/circuit-ui"; +import { I18nProvider, SearchInput } from "@sumup-oss/circuit-ui"; import { useMemo, useRef, useState } from "react"; import styles from "./SearchableTable.module.css"; @@ -44,23 +44,25 @@ const SearchableTable = ({ }, [columns, normalizedQuery, rows]); return ( -
- setSearchQuery(event.target.value)} - placeholder={searchPlaceholder} - hideLabel - /> + +
+ setSearchQuery(event.target.value)} + placeholder={searchPlaceholder} + hideLabel + /> - - +
+ + ); }; 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 === "/"; --- -
- - {title} - - - Docs, guides, and resources to help you accept payments with SumUp. - -
+{ + !hideForLandingPage && ( +
+ + {title} + + + Docs, guides, and resources to help you accept payments with SumUp. + +
+ ) +} diff --git a/src/pages/changelog/tags/[tag].astro b/src/pages/changelog/tags/[tag].astro index 11c3a97e..56efeaf1 100644 --- a/src/pages/changelog/tags/[tag].astro +++ b/src/pages/changelog/tags/[tag].astro @@ -1,7 +1,9 @@ --- +import Button from "@components/Button"; +import RssIcon from "@components/RssIcon"; import { getCollection, render } from "astro:content"; import slugify from "@sindresorhus/slugify"; -import { Status, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui"; +import { Status, Body, Anchor, Headline } from "@sumup-oss/circuit-ui"; import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"; import MarkdownContent from "@components/MarkdownContent.astro"; import type { StarlightPageProps } from "@astrojs/starlight/props"; @@ -79,35 +81,12 @@ const props = {
- +
{ diff --git a/src/pages/docs.astro b/src/pages/docs.astro new file mode 100644 index 00000000..66ce2379 --- /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; +--- + + +
+
+
+ Accept Online Payments +
+ + + + +
+
+
+ Accept In-Person Payments +
+ + + + +
+
+
+ Build and Operate +
+ + + + +
+
+
+
+
+

Our Anti-fraud Protection

+
+
+
+
+
+
+
+
+
+
+
+

Brands That Build With SumUp

+ +
+
+ + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 29c7ae3a..0843c538 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: "SDKs and CLI", + description: "Official client libraries and command-line tools", + 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; --- -
-
-
- Accept Online Payments -
- - - - +
+
+
+
+

+ Build payments with SumUp +

+

+ APIs, SDKs, and prebuilt experiences for accepting payments online + and in person. +

+
+ Start online + + Explore in-person + +
+ + Browse the API reference +
-
-
- Accept In-Person Payments -
- - - - + + + +
-
-
- Build and Operate -
- - - - + +
+ +
+
+
+

One platform, wherever customers pay

+

+ Start with a prebuilt experience or use the APIs and SDKs to shape + the flow around your product. +

+
+ +
+ { + products.map( + ({ variant, icon: Icon, title, description, links, cta }) => ( + + ), + ) + }
-
-
-
-

Our Anti-fraud Protection

-
-
-
-
-
-
-
-

Brands That Build With SumUp

- -
-
+
+ { + latestUpdates.map(({ id, data }) => ( + + )) + } +
+ + +
+ +
+ + -