feat: initial website implementation with all pages and components

.kilo/plans/1779906112073-kind-falcon.md

@@ -0,0 +1,119 @@
+# MapCN auf Kontaktseite integrieren (statt Google-Maps-Link)
+
+## Ziel
+
+Die Platzhalter-Box auf der Kontaktseite (`/kontakt`) soll durch eine echte, interaktive Karte mit `mapcn` ersetzt werden. Die Karte zeigt den Praxisstandort inklusive Marker und optionalem Popup.
+
+## Ist-Zustand
+
+- `src/pages/kontakt.astro` enthält aktuell nur einen statischen Map-Placeholder mit Link zu Google Maps.
+- React ist im Projekt bereits aktiviert (`@astrojs/react` in `astro.config.mjs`).
+- Shadcn-Struktur ist vorhanden (`components.json`, `src/components/ui/button.tsx`).
+- Es gibt noch keine Kartenkomponenten im Projekt.
+
+## Empfohlener Ansatz
+
+`mapcn` per shadcn-Registry hinzufügen und eine kleine, dedizierte React-Komponente für die Kontaktkarte bauen. Diese wird als Astro-Client-Island (`client:visible`) in `kontakt.astro` eingebunden.
+
+Warum dieser Ansatz:
+
+- Sauber gekapselte Kartenlogik (statt JSX direkt in `.astro`).
+- Gute Performance (Hydration erst bei Sichtbarkeit).
+- Einfache Wiederverwendung für Footer/Standortseiten später.
+
+## Umsetzungsplan
+
+### 1) MapCN-Komponente ins Projekt holen
+
+**Änderungen:** Abhängig von shadcn-Generator-Ausgabe
+
+- Command (im Implementierungsschritt):
+  - `bunx shadcn@latest add @mapcn/map` (alternativ `npx shadcn@latest add @mapcn/map`)
+- Erwartete Ergebnisse:
+  - Neue Datei `src/components/ui/map.tsx` (oder äquivalent)
+  - Neue Dependency `maplibre-gl` in `package.json`
+  - Falls vom Generator benötigt: ergänzende CSS-Regeln/Imports (z. B. MapLibre-CSS)
+
+**Prüfpunkte:**
+
+- Map-Komponente ist importierbar aus `@/components/ui/map`
+- Keine TypeScript- oder Build-Fehler nach dem Add
+
+### 2) Reusable Praxis-Map als React-Komponente erstellen
+
+**Neue Datei:** `src/components/maps/PracticeMap.tsx`
+
+Inhalt:
+
+- Import aus `@/components/ui/map`:
+  - `Map`
+  - `MapControls` (optional, aber sinnvoll)
+  - `MapMarker`, `MarkerContent`, `MarkerLabel` (für Standortpin)
+- Container mit fester Höhe und Rounded Corners passend zur bestehenden Kontaktseite
+- Initiales Viewport-Center auf Praxisadresse
+  - Empfohlene Koordinaten (OSM/Nominatim): `lon 12.3849586`, `lat 50.8203324`
+- Zoom ca. `14–15`
+- Markerlabel z. B. „Zahnarztpraxis Dr. Tittel“
+- Optional: kleines Popup mit Adresse
+
+Hinweis:
+
+- Falls die generierte `Map`-Komponente `children` voll unterstützt, Marker/Controls direkt als Children.
+- Falls nicht, Minimalvariante nur mit `Map center/zoom` und Controls weglassen.
+
+### 3) Kontaktseite umbauen
+
+**Datei:** `src/pages/kontakt.astro`
+
+Geplante Änderungen:
+
+- Import der neuen Komponente `PracticeMap`.
+- Bestehenden Placeholder-Block (Zeilenbereich um „Map placeholder“) entfernen/ersetzen.
+- Neue Einbindung:
+  - `<PracticeMap client:visible />`
+- Karte visuell im selben Card-Stil belassen:
+  - `rounded-2xl border border-border overflow-hidden`
+
+Optionaler UX-Zusatz unter der Karte:
+
+- Externer OpenStreetMap-/Google-Maps-Link als Fallback/Navigation beibehalten.
+
+### 4) (Optional, aber empfohlen) Standortdaten zentralisieren
+
+**Datei:** `src/data/site.ts`
+
+- `siteConfig` um `location` erweitern, z. B.:
+  - `latitude`
+  - `longitude`
+- `PracticeMap` nutzt diese Werte statt hardcodierter Koordinaten.
+
+Vorteil:
+
+- Keine doppelten Daten, spätere Änderungen an einer Stelle.
+
+### 5) Validierung
+
+Nach der Implementierung ausführen:
+
+- `bun run typecheck`
+- `bun run build`
+
+Manuelle Sichtprüfung:
+
+- `/kontakt` lädt ohne Console-Errors
+- Karte rendert korrekt auf Desktop und Mobile
+- Marker steht an plausibler Position (Bodelschwinghstraße 1, 08451 Crimmitschau)
+- Seite bleibt performant (Hydration nur beim Scrollen in Sichtbereich)
+
+## Risiken / Stolpersteine
+
+- `maplibre-gl` benötigt ggf. CSS-Import; ohne den wirkt die Karte/Controls fehlerhaft.
+- In Astro muss React-Komponente mit `client:*` eingebunden werden, sonst keine Interaktivität.
+- Falls CSP/Cookie-Hinweise im Projekt strikt sind, muss Text „Karte wird nach Cookie-Einwilligung geladen“ angepasst/entfernt werden, da diese Map nicht dem bisherigen Google-Maps-Flow entspricht.
+
+## Definition of Done
+
+- Kontaktseite zeigt eine funktionierende `mapcn`-Karte statt Placeholder.
+- Marker auf Praxisstandort vorhanden.
+- Projekt baut und typcheckt fehlerfrei.
+- Styling integriert sich in bestehendes Design ohne Layout-Bruch.