Newer
Older
// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
// SPDX-License-Identifier: MIT
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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 Programm - Vertrauen in Open
Source Software stärken
</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">
Das Badge Programm prüft openCode
Repositories und vergibt Badges, die im{' '}
<a
target="_blank"
rel="noreferrer noopener"
href="https://opencode.de/en/software"
className="text-blue-500 underline"
>
Repositories 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"
>
</a>
<a
href="#api-small-demo"
className="text-sm/6 font-semibold text-zinc-900"
>
<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 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 className="relative aspect-square">
<Image
alt="Verlässliche Wartung Badge"
src="/assets/badges/MAINTAINED-2.svg"
fill