feat(cms): add storage based website content management

app/kontakt/page.tsx

@@ -1,21 +1,40 @@
-import type { Metadata } from "next";
 import PageHero from "@/components/PageHero";
 import ContactForm from "@/components/ContactForm";
-import { createMetadata } from "../seo";
+import { getContent } from "@/lib/content/service";
+import { createContentMetadata } from "../seo";
 
-export const metadata: Metadata = createMetadata("Kontakt", "Kontakt zu Funktechnik Schubert aufnehmen.", "/kontakt");
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+  const content = await getContent("contact");
+  return createContentMetadata(content.seo);
+}
+
+export default async function ContactPage() {
+  const content = await getContent("contact");
+  const contactDetails = [
+    content.phone && `Telefon: ${content.phone}`,
+    content.email && `E-Mail: ${content.email}`,
+    content.address && `Adresse: ${content.address}`,
+    content.openingHours && `Öffnungszeiten: ${content.openingHours}`,
+  ].filter(Boolean);
 
-export default function ContactPage() {
   return (
     <>
-      <PageHero eyebrow="Kontakt" title="Kontakt aufnehmen">
-        Beschreiben Sie kurz Ihr Anliegen. Für Reparaturen nutzen Sie idealerweise die strukturierte Reparaturannahme.
+      <PageHero eyebrow={content.eyebrow} title={content.title}>
+        {content.subtitle}
       </PageHero>
       <section className="section">
         <div className="container split">
           <div>
-            <h2>Direkt und technisch</h2>
-            <p className="lead">Je genauer Gerät, Anliegen und gewünschte Unterstützung beschrieben werden, desto gezielter kann die Rückmeldung erfolgen.</p>
+            <h2>{content.cta.text}</h2>
+            <p className="lead">{content.heroText}</p>
+            {contactDetails.length > 0 && (
+              <ul className="list">
+                {contactDetails.map((detail) => <li key={detail}>{detail}</li>)}
+              </ul>
+            )}
+            {content.googleMapsLink && <p><a className="button light" href={content.googleMapsLink}>Karte öffnen</a></p>}
           </div>
           <div className="panel">
             <ContactForm />