diff --git a/src/components/landing-page-leichte-Sprache/ApiSmallDemo.tsx b/src/components/landing-page-leichte-Sprache/ApiSmallDemo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c7b546fec5ad21e94b450970412077107200ec0
--- /dev/null
+++ b/src/components/landing-page-leichte-Sprache/ApiSmallDemo.tsx
@@ -0,0 +1,82 @@
+// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
+// SPDX-License-Identifier: MIT
+
+import { useState } from 'react'
+import { SarifApiResponse } from '../../lib/apiClient'
+import CheckRepoForm from '../CheckRepoForm'
+import { Toaster } from '../ui/toaster'
+import ResultGrid from '../ResultGrid'
+
+export default function ApiSmallDemo() {
+ const [currentScan, setCurrentScan] = useState<SarifApiResponse | null>(
+ null,
+ )
+
+ const handleScanFinished = (scanReport: SarifApiResponse) => {
+ setCurrentScan(scanReport)
+ }
+ return (
+ <div className="mx-auto mt-16 max-w-7xl" id="api-small-demo">
+ <Toaster />
+ <div className="relative isolate overflow-hidden bg-blue-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
+ <h2 className="mx-auto max-w-3xl text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">
+ Testen Sie die Badge API
+ </h2>
+ <p className="mx-auto mt-6 max-w-lg text-center text-lg text-zinc-200">
+ Geben Sie die URL eines öffentlichen openCode-Repositorys
+ ein, um zu sehen, welche der offiziellen Badges vergeben
+ werden.
+ </p>
+ <div className="mx-auto mt-12 max-w-4xl">
+ <CheckRepoForm onScanFinished={handleScanFinished} />
+ </div>
+ <div className="absolute inset-0 -z-20 size-[64rem] overflow-hidden bg-gradient-to-r from-blue-800">
+ <svg
+ className="absolute opacity-20"
+ width="1096"
+ height="520"
+ viewBox="0 0 1096 520"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M-24 363.645L52.8404 363.645C89.7778 363.645 107.965 343.08 107.965 343.08L170.309 281.082C170.309 281.082 186.133 260.701 216.35 260.701L366.578 260.701C404.001 260.701 421.409 283.667 421.409 283.667L610.638 471.848C610.638 471.848 626.8 489.712 654.513 489.712L700.49 489.712C728.202 489.712 746.831 471.168 746.831 471.168L1096.42 121.584L1446 -228"
+ stroke="url(#paint0_linear_2866_45205)"
+ strokeWidth="59.3123"
+ strokeMiterlimit="10"
+ ></path>
+ <defs>
+ <linearGradient
+ id="paint0_linear_2866_45205"
+ x1="108"
+ y1="347.301"
+ x2="1040"
+ y2="347.301"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop
+ stopColor="#1544FF"
+ stopOpacity="0"
+ ></stop>
+ <stop offset="0.295" stopColor="#1544FF"></stop>
+ <stop
+ offset="0.700368"
+ stopColor="#00E6CC"
+ stopOpacity="0.5"
+ ></stop>
+ <stop
+ offset="1"
+ stopColor="#00E6CC"
+ stopOpacity="0"
+ ></stop>
+ </linearGradient>
+ </defs>
+ </svg>
+ </div>
+ </div>
+ <div>
+ <ResultGrid currentScan={currentScan} />
+ </div>
+ </div>
+ )
+}
diff --git a/src/components/landing-page-leichte-Sprache/Hero.tsx b/src/components/landing-page-leichte-Sprache/Hero.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1286ed0d22ff95d94213b760d6e0e78b1cb56850
--- /dev/null
+++ b/src/components/landing-page-leichte-Sprache/Hero.tsx
@@ -0,0 +1,147 @@
+// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
+// SPDX-License-Identifier: MIT
+
+import Image from 'next/image'
+
+export default function Hero() {
+ return (
+ <div className="bg-white">
+ <main>
+ <div className="relative isolate">
+ <svg
+ aria-hidden="true"
+ className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-zinc-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
+ >
+ <defs>
+ <pattern
+ x="50%"
+ y={-1}
+ id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
+ width={200}
+ height={200}
+ patternUnits="userSpaceOnUse"
+ >
+ <path d="M.5 200V.5H200" fill="none" />
+ </pattern>
+ </defs>
+ <svg
+ x="50%"
+ y={-1}
+ className="overflow-visible fill-zinc-50"
+ >
+ <path
+ d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+ strokeWidth={0}
+ />
+ </svg>
+ <rect
+ fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
+ width="100%"
+ height="100%"
+ strokeWidth={0}
+ />
+ </svg>
+ <div
+ aria-hidden="true"
+ className="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
+ >
+ <div
+ style={{
+ clipPath:
+ 'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
+ }}
+ className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#b3dbff] to-[#2f6eff] opacity-20"
+ />
+ </div>
+ <div className="overflow-hidden">
+ <div className="mx-auto max-w-7xl px-6 pb-32 pt-36 sm:pt-60 lg:px-8 lg:pt-32">
+ <div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
+ <div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
+ <h1 className="text-pretty text-5xl font-semibold tracking-tight text-zinc-900 sm:text-7xl">
+ Badge API - Vertrauen in Open Source
+ Software fördern (leichte Sprache)
+ </h1>
+ <p className="mt-8 text-pretty text-lg font-medium text-zinc-600 sm:max-w-md sm:text-xl/8 lg:max-w-none">
+ Die Badge-API ist ein Dienst, der
+ openCode Repositories nach bestimmten
+ Kriterien durchsucht und auf Basis der
+ Ergebnisse Badges generiert, die im{' '}
+ <a
+ target="_blank"
+ rel="noreferrer noopener"
+ href="https://opencode.de/en/software"
+ className="text-blue-500 underline"
+ >
+ openCode Software Katalog
+ </a>{' '}
+ angezeigt werden und den Status des
+ epositories in Bezug auf Sicherheit,
+ Wartung und Wiederverwendung anzeigen.
+ </p>
+ <div className="mt-10 flex items-center gap-x-6">
+ <a
+ href="/introduction"
+ className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+ >
+ Zur Dokumentation
+ </a>
+ <a
+ href="#api-small-demo"
+ className="text-sm/6 font-semibold text-zinc-900"
+ >
+ API Live Demo{' '}
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ </div>
+ <div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
+ <div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
+ <div className="relative aspect-square">
+ <Image
+ alt="Open Source badge"
+ src="/assets/badges/OSS.svg"
+ fill
+ />
+ </div>
+ </div>
+ <div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
+ <div className="aspect relative aspect-square">
+ <Image
+ alt="Krisensichere Wartung Badge"
+ src="/assets/badges/MAINTAINED-3.svg"
+ fill
+ />
+ </div>
+ <div className="relative aspect-square">
+ <Image
+ alt="Wird Aktiv genutzt Badge"
+ src="/assets/badges/REUSED-2.svg"
+ fill
+ />
+ </div>
+ </div>
+ <div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
+ <div className="relative aspect-square">
+ <Image
+ alt="Sicherheitsüberprüfung Badge"
+ src="/assets/badges/SECURITY-3.svg"
+ fill
+ />
+ </div>
+ <div className="relative aspect-square">
+ <Image
+ alt="Verlässliche Wartung Badge"
+ src="/assets/badges/MAINTAINED-2.svg"
+ fill
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </div>
+ )
+}
diff --git a/src/pages/_meta.ts b/src/pages/_meta.ts
index 832a85e04b2cd0b20eb75be740ecc9dcdf0641fc..479872f87a66d2720e461ab80e138dba02d8caac 100644
--- a/src/pages/_meta.ts
+++ b/src/pages/_meta.ts
@@ -8,6 +8,12 @@ export default {
},
display: 'hidden',
},
+ 'leichte-sprache': {
+ theme: {
+ layout: 'raw',
+ },
+ display: 'hidden',
+ },
introduction: { title: 'Introduction' },
concepts: { title: 'Concepts' },
'api-docs': { title: 'API' },
diff --git a/src/pages/leichte-sprache.mdx b/src/pages/leichte-sprache.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..96b6dad4be440fc115db34aad87812843c0c4506
--- /dev/null
+++ b/src/pages/leichte-sprache.mdx
@@ -0,0 +1,20 @@
+---
+title: Home
+---
+
+{/* Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
+SPDX-License-Identifier: MIT */}
+
+import Hero from '../components/landing-page-leichte-sprache/Hero'
+import ApiSmallDemo from '../components/landing-page-leichte-sprache/ApiSmallDemo'
+
+export default function Home() {
+ return (
+ <div className="overflow-hidden">
+ <Hero />
+ <main>
+ <ApiSmallDemo />
+ </main>
+ </div>
+ )
+}
diff --git a/theme.config.tsx b/theme.config.tsx
index a22fb42171752ae6d8abfaab833a26dde90bd35b..98ea2afe972869203473fbdde5642b96b09c2d7a 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -119,6 +119,15 @@ const config: DocsThemeConfig = {
>
Datenschutz
</Link>
+ <Link
+ className="text-blue-600 hover:text-blue-400"
+ title="Leichte Sprache"
+ href="/leichte-sprache"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Leichte Sprache
+ </Link>
<Link
className="text-blue-600 hover:text-blue-400"
title="Datenschutz"