Hero.tsx

// 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
                                    </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>
    )
}