FeaturedApiModules.tsx

import { IconSend, IconRoute, IconSteeringWheel } from '@tabler/icons'

const featuredModules = [
  {
    name: 'Submission-API',
    href: 'https://docs.fitko.de/fit-connect/docs/apis/submission-api',
    description:
    'Über den FIT-Connect Zustelldienst können Anträge für Verwaltungsleistungen maschinenlesbar an die fachlich zuständige Behörde übermittelt werden. Der Zustelldienst stellt hierfür die Submission API bereit. Sendende Systeme können sich über eine erfolgreiche Zustellung über ein Ereignisprotokoll informieren.',
    icon: IconSend,
  },
  {
    name: 'Routing-API',
    href: 'https://docs.fitko.de/fit-connect/docs/apis/routing-api',
    description:
    'Um einen Antrag maschinenlesbar an die fachlich zuständige Stelle sicher zu übermitteln und die technischen Parameter der empfangenden Behörde zu ermitteln, kann über die Routing API die zuständigen Stelle und die Adresse des zuständigen Zustelldienstes ermittelt werden. Die Ermittlung dieser technischen Parameter erfolgt über eine Anfrage an den FIT-Connect Routingdienst.',
    icon: IconRoute,
  },
  {
    name: 'Standards und Schnittstellen',
    href: 'https://docs.fitko.de/standards-und-schnittstellen/',
    description:
      'Im Rahmen der Umsetzung des Portalverbunds wurden die Kommunikationsbeziehungen zwischen den verschiedenen Basisdiensten wie Servicekonten, Postfächern und ePayment-Lösungen analysiert und in einer Übersicht der eingesetzten Standards und Schnittstellen dokumentiert.',
    icon: IconSteeringWheel,
  },
]

export default () => {
  return (
    <div className="bg-white">
      {/* Header */}
      <div className="relative pb-32 bg-gray-800">
        <div className="absolute inset-0 bg-yellow-400">
          <div className="w-screen h-full bg-banner-texture bg-repeat-x" />
          <div
            className="absolute inset-0 bg-gray-200 mix-blend-multiply"
            aria-hidden="true"
          />
        </div>
        <div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
          <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
            Föderale API Module
          </h1>
          <p className="mt-6 max-w-3xl text-xl text-gray-800">
            FIT-Connect schafft eine einheitliche Schnittstelle zur Anbindung von Online-Antragsdiensten an die zuständigen Fachverfahren zur Antragsbearbeitung auf allen föderalen Ebenen. Um die Aufwände zur Realisierung von Online-Antragsdiensten signifikant zu reduzieren, unterstützt FIT-Connect bei allen nötigen Schritten zur Übermittlung von Antragsdaten und setzt auf leichtgewichtige und international etablierte Standards.
          </p>
        </div>
      </div>

      {/* Overlapping cards */}
      <section
        className="-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8"
        aria-labelledby="contact-heading"
      >
        <h2 className="sr-only" id="contact-heading">
          Contact us
        </h2>
        <div className="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
          {featuredModules.map((link) => (
            <div
              key={link.name}
              className="flex flex-col bg-white rounded-2xl shadow-xl"
            >
              <div className="flex-1 relative pt-16 px-6 pb-8 md:px-8">
                <div className="absolute top-0 p-5 inline-block bg-yellow-400 rounded-xl shadow-lg transform -translate-y-1/2">
                  <link.icon
                    className="h-6 w-6 text-white"
                    aria-hidden="true"
                  />
                </div>
                <h3 className="text-xl font-medium text-gray-900">
                  {link.name}
                </h3>
                <p className="mt-4 text-base text-gray-500">
                  {link.description}
                </p>
              </div>
              <div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
                <a
                  href={link.href}
                  className="text-base font-medium text-yellow-400 hover:text-yellow-600"
                >
                  Mehr erfahren<span aria-hidden="true"> &rarr;</span>
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  )
}