Footer.tsx

/* Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
SPDX-License-Identifier: MIT */

const navigation = {
    officialBadges: [
        {
            name: 'Maintained Badge',
            href: '/concepts/official-badges/active-maintained-badge',
            external: false,
        },
        {
            name: 'Reuse Badge',
            href: '/concepts/official-badges/reuse-badge',
            external: false,
        },
        {
            name: 'Open Source Badge',
            href: '/concepts/official-badges/open-source-badge',
            external: false,
        },
        {
            name: 'Security Badge',
            href: '/concepts/official-badges/security-badge',
            external: false,
        },
    ],
    community: [
        {
            name: 'Project on openCode',
            href: 'https://gitlab.opencode.de/open-code/badgebackend',
            external: true,
        },
        {
            name: 'Contribute',
            href: 'https://gitlab.opencode.de/open-code/badgebackend/badge-api/-/blob/main/CONTRIBUTING.md',
            external: true,
        },
        {
            name: 'Open issue',
            href: 'https://gitlab.opencode.de/open-code/badgebackend/badge-api/-/issues/new',
            external: true,
        },
    ],
    legal: [
        {
            name: 'Imprint',
            href: 'https://opencode.de/de/impressum',
            external: true,
        },
        {
            name: 'Privacy policy',
            href: 'https://opencode.de/de/datenschutz',
            external: true,
        },
        {
            name: 'License',
            href: 'https://gitlab.opencode.de/open-code/badgebackend/badge-api/-/blob/main/LICENSE',
            external: true,
        },
    ],
    accessibility: [
        {
            name: 'Declaration on Accessibility',
            href: '/declaration-on-accessibility',
            external: false,
        },
        {
            name: 'Barriere melden',
            href: 'mailto:info@opencode.de',
            external: false,
        },
    ],
}

export default function Footer() {
    return (
        <div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8">
            <div className="xl:grid xl:grid-cols-3 xl:gap-8">
                <div className="space-y-8">
                    <a
                        href="https://opencode.de/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <img
                            alt="openCode Logo"
                            src="/assets/opencode-logo.svg"
                            className="h-8"
                        />
                    </a>
                    <p className="text-balance text-sm/6 text-gray-600">
                        The Badge Programm is an{' '}
                        <a
                            href="https://opencode.de/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-500 hover:text-blue-600"
                        >
                            openCode
                        </a>{' '}
                        service by{' '}
                        <a
                            href="https://zendis.de/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-500 hover:text-blue-600"
                        >
                            ZenDiS
                        </a>{' '}
                        maintained by{' '}
                        <a
                            href="https://l3montree.com"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-500 hover:text-blue-600"
                        >
                            L3montree
                        </a>
                        .
                    </p>
                    <div className="flex items-center gap-x-8">
                        <a
                            href="https://zendis.de/"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <img
                                alt="Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) Logo"
                                src="/assets/zendis.png"
                                className="h-9"
                            />
                        </a>
                        <a
                            href="https://l3montree.com"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <img
                                alt="L3montree Cybersecurity Logo"
                                src="/assets/l3montree-logo.svg"
                                className="h-7"
                            />
                        </a>
                    </div>
                </div>
                <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
                    <div className="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 className="text-sm/6 font-semibold text-gray-900">
                                Official Badges
                            </h3>
                            <ul role="list" className="mt-6 space-y-4">
                                {navigation.officialBadges.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            target={
                                                item.external
                                                    ? '_blank'
                                                    : '_self'
                                            }
                                            rel="noopener noreferrer"
                                            className="text-sm/6 text-gray-600 hover:text-gray-900"
                                        >
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="mt-10 md:mt-0">
                            <h3 className="text-sm/6 font-semibold text-gray-900">
                                Community
                            </h3>
                            <ul role="list" className="mt-6 space-y-4">
                                {navigation.community.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            target={
                                                item.external
                                                    ? '_blank'
                                                    : '_self'
                                            }
                                            rel="noopener noreferrer"
                                            className="text-sm/6 text-gray-600 hover:text-gray-900"
                                        >
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                    <div className="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 className="text-sm/6 font-semibold text-gray-900">
                                Legal
                            </h3>
                            <ul role="list" className="mt-6 space-y-4">
                                {navigation.legal.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            target={
                                                item.external
                                                    ? '_blank'
                                                    : '_self'
                                            }
                                            rel="noopener noreferrer"
                                            className="text-sm/6 text-gray-600 hover:text-gray-900"
                                        >
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="mt-10 md:mt-0">
                            <h3 className="text-sm/6 font-semibold text-gray-900">
                                Accessibility
                            </h3>
                            <ul role="list" className="mt-6 space-y-4">
                                {navigation.accessibility.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            target={
                                                item.external
                                                    ? '_blank'
                                                    : '_self'
                                            }
                                            rel="noopener noreferrer"
                                            className="text-sm/6 text-gray-600 hover:text-gray-900"
                                        >
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
                <p className="text-sm/6 text-gray-600">
                    © {new Date().getFullYear()} Zentrum für Digitale
                    Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH
                </p>
            </div>
        </div>
    )
}