kita-planer/src/app/impressum/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, Building2, Mail, MapPin, ShieldCheck } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export const metadata: Metadata = {
  title: "Impressum | Kita-Planer",
  description: "Impressum und Anbieterkennzeichnung von Kita-Planer.",
};

const contactItems = [
  {
    icon: Building2,
    label: "Anbieter",
    value: "[Name des Unternehmens / Vereins / der verantwortlichen Person]",
  },
  {
    icon: MapPin,
    label: "Adresse",
    value: "[Straße Hausnummer], [PLZ Ort], [Land]",
  },
  {
    icon: Mail,
    label: "Kontakt",
    value: "[E-Mail-Adresse] · [Telefonnummer optional]",
  },
];

export default function ImpressumPage() {
  return (
    <main className="min-h-screen bg-[#f8faf8] text-slate-950">
      <div className="mx-auto w-full max-w-5xl px-5 py-8 sm:px-6 lg:py-12">
        <Button asChild variant="ghost" className="-ml-3 mb-8">
          <Link href="/">
            <ArrowLeft className="h-4 w-4" />
            Zur Startseite
          </Link>
        </Button>

        <section className="mb-10 rounded-lg bg-slate-950 px-6 py-10 text-white sm:px-10">
          <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-300/12 text-emerald-200 ring-1 ring-emerald-300/20">
            <ShieldCheck className="h-6 w-6" />
          </div>
          <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-200">
            Rechtliche Angaben
          </p>
          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
            Impressum
          </h1>
          <p className="mt-5 max-w-2xl text-sm leading-6 text-slate-300">
            Diese Seite enthält Platzhalter und sollte vor Veröffentlichung mit
            den korrekten Anbieterangaben ersetzt und rechtlich geprüft werden.
          </p>
        </section>

        <div className="grid gap-5 md:grid-cols-3">
          {contactItems.map((item) => {
            const Icon = item.icon;

            return (
              <Card key={item.label} className="border-slate-200 bg-white">
                <CardContent className="p-5">
                  <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">
                    {item.label}
                  </h2>
                  <p className="mt-2 text-sm leading-6 text-slate-800">
                    {item.value}
                  </p>
                </CardContent>
              </Card>
            );
          })}
        </div>

        <section className="mt-10 space-y-8 rounded-lg border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Angaben gemäß § 5 TMG
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Torben Indorf
              <br />
              Sommerstraße 2a
              <br />
              28215 Bremen
              <br />
              Deutschland
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">Kontakt</h2>
            <p className="mt-3 leading-7 text-slate-700">
              E-Mail: [E-Mail-Adresse]
              <br />
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Registereintrag
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Registergericht: -
              <br />
              Registernummer: -
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Umsatzsteuer-ID
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Umsatzsteuer-Identifikationsnummer gemäß § 27a
              Umsatzsteuergesetz: -
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Verantwortlich für den Inhalt
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Torben Indorf
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Haftung für Inhalte
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten
              nach den allgemeinen Gesetzen verantwortlich. Für fremde Inhalte
              übernehmen wir keine Gewähr, sofern keine gesetzliche Pflicht zur
              Prüfung oder Entfernung besteht.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              Haftung für Links
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Diese Anwendung kann Links zu externen Webseiten enthalten. Auf
              deren Inhalte haben wir keinen Einfluss. Für die Inhalte
              verlinkter Seiten ist stets der jeweilige Anbieter verantwortlich.
            </p>
          </div>
        </section>
      </div>
    </main>
  );
}