diff --git a/public/landing.css b/public/landing.css new file mode 100644 index 0000000..80ed49c --- /dev/null +++ b/public/landing.css @@ -0,0 +1,745 @@ +/* ===================================================================== + Mitmachkarte — Promotional Landing Page Styles + Civic Tech Product Page for Municipalities and Planning Offices + ===================================================================== */ + +/* Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap'); + +/* ================================================================= + Tokens + ================================================================= */ +:root { + --lp-navy: #00376D; + --lp-navy-deep: #001F3F; + --lp-navy-light: #E8EFF6; + --lp-sky: #4A90D9; + --lp-amber: #E8A838; + --lp-amber-hover: #D4962E; + --lp-green: #28a745; + --lp-white: #FFFFFF; + --lp-offwhite: #F8F9FB; + --lp-text: #1A1A2E; + --lp-text-muted: #5A6A7A; + --lp-border: #E0E5EB; + + --lp-font-display: 'Plus Jakarta Sans', sans-serif; + --lp-font-body: 'Inter', sans-serif; + + --lp-max-width: 1140px; + --lp-section-padding: 100px 0; + --lp-radius: 12px; + --lp-radius-lg: 20px; + + --lp-shadow: 0 4px 20px rgba(0, 55, 109, 0.08); + --lp-shadow-lg: 0 12px 40px rgba(0, 55, 109, 0.12); +} + +/* ================================================================= + Reset + ================================================================= */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html { scroll-behavior: smooth; } + +body.landing-page { + font-family: var(--lp-font-body); + font-size: 16px; + color: var(--lp-text); + background: var(--lp-white); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +a { text-decoration: none; color: inherit; } +img { max-width: 100%; height: auto; } + + +/* ================================================================= + Navigation + ================================================================= */ +.lp-nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(12px); + border-bottom: 1px solid var(--lp-border); + transition: box-shadow 0.3s ease; +} + +.lp-nav.scrolled { + box-shadow: var(--lp-shadow); +} + +.lp-nav-inner { + max-width: var(--lp-max-width); + margin: 0 auto; + padding: 0 24px; + height: 72px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.lp-nav-brand { + display: flex; + align-items: center; + gap: 10px; + font-family: var(--lp-font-display); + font-weight: 800; + font-size: 1.3rem; + color: var(--lp-navy); +} + +.lp-nav-brand i { font-size: 1.5rem; } + +.lp-nav-links { + display: flex; + align-items: center; + gap: 32px; + list-style: none; +} + +.lp-nav-links a { + font-size: 0.9rem; + font-weight: 500; + color: var(--lp-text-muted); + transition: color 0.2s; +} + +.lp-nav-links a:hover { color: var(--lp-navy); } + +.lp-nav-cta { + background: var(--lp-navy); + color: var(--lp-white) !important; + padding: 10px 24px; + border-radius: 8px; + font-weight: 600; + transition: background 0.2s, transform 0.2s; +} + +.lp-nav-cta:hover { + background: var(--lp-navy-deep); + transform: translateY(-1px); +} + +.lp-nav-toggle { + display: none; + border: none; + background: none; + font-size: 1.5rem; + color: var(--lp-navy); + cursor: pointer; +} + + +/* ================================================================= + Hero + ================================================================= */ +.lp-hero { + padding: 160px 24px 100px; + background: linear-gradient(170deg, var(--lp-white) 0%, var(--lp-navy-light) 100%); + position: relative; + overflow: hidden; +} + +.lp-hero-inner { + max-width: var(--lp-max-width); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.lp-hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: var(--lp-white); + border: 1px solid var(--lp-border); + border-radius: 100px; + padding: 6px 16px; + font-size: 0.82rem; + font-weight: 600; + color: var(--lp-navy); + margin-bottom: 24px; +} + +.lp-hero-badge .badge-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--lp-green); + animation: pulse-dot 2s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.3); } +} + +.lp-hero h1 { + font-family: var(--lp-font-display); + font-size: 3.2rem; + font-weight: 800; + line-height: 1.15; + color: var(--lp-navy-deep); + margin-bottom: 20px; + letter-spacing: -0.02em; +} + +.lp-hero h1 span { + color: var(--lp-sky); +} + +.lp-hero-subtitle { + font-size: 1.15rem; + color: var(--lp-text-muted); + line-height: 1.7; + margin-bottom: 36px; + max-width: 520px; +} + +.lp-hero-actions { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.lp-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 28px; + border-radius: 10px; + font-family: var(--lp-font-display); + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + border: none; + transition: all 0.2s; +} + +.lp-btn-primary { + background: var(--lp-amber); + color: var(--lp-navy-deep); + box-shadow: 0 4px 14px rgba(232, 168, 56, 0.3); +} + +.lp-btn-primary:hover { + background: var(--lp-amber-hover); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(232, 168, 56, 0.4); +} + +.lp-btn-outline { + background: transparent; + color: var(--lp-navy); + border: 2px solid var(--lp-navy); +} + +.lp-btn-outline:hover { + background: var(--lp-navy); + color: var(--lp-white); +} + +/* Hero Map Preview */ +.lp-hero-visual { + position: relative; + border-radius: var(--lp-radius-lg); + overflow: hidden; + box-shadow: var(--lp-shadow-lg); + border: 1px solid var(--lp-border); + aspect-ratio: 4/3; + background: var(--lp-offwhite); +} + +.lp-hero-visual iframe { + width: 100%; + height: 100%; + border: none; +} + +.lp-hero-visual-overlay { + position: absolute; + bottom: 0; left: 0; right: 0; + padding: 16px 20px; + background: linear-gradient(transparent, rgba(0, 31, 63, 0.85)); + color: white; + font-size: 0.85rem; + font-weight: 500; + display: flex; + justify-content: space-between; + align-items: center; + pointer-events: none; +} + +.lp-hero-visual-overlay .lp-btn { + pointer-events: all; + padding: 8px 18px; + font-size: 0.82rem; +} + + +/* ================================================================= + Trust Bar + ================================================================= */ +.lp-trust { + padding: 48px 24px; + background: var(--lp-white); + border-bottom: 1px solid var(--lp-border); +} + +.lp-trust-inner { + max-width: var(--lp-max-width); + margin: 0 auto; + text-align: center; +} + +.lp-trust-label { + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--lp-text-muted); + margin-bottom: 24px; +} + +.lp-trust-logos { + display: flex; + justify-content: center; + align-items: center; + gap: 48px; + flex-wrap: wrap; + opacity: 0.5; +} + +.lp-trust-logos span { + font-family: var(--lp-font-display); + font-size: 1.1rem; + font-weight: 700; + color: var(--lp-text-muted); +} + + +/* ================================================================= + Section Base + ================================================================= */ +.lp-section { + padding: var(--lp-section-padding); + padding-left: 24px; + padding-right: 24px; +} + +.lp-section-inner { + max-width: var(--lp-max-width); + margin: 0 auto; +} + +.lp-section-header { + text-align: center; + margin-bottom: 64px; +} + +.lp-section-eyebrow { + font-family: var(--lp-font-display); + font-size: 0.82rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--lp-sky); + margin-bottom: 12px; +} + +.lp-section-title { + font-family: var(--lp-font-display); + font-size: 2.4rem; + font-weight: 800; + color: var(--lp-navy-deep); + line-height: 1.2; + letter-spacing: -0.02em; + margin-bottom: 16px; +} + +.lp-section-subtitle { + font-size: 1.1rem; + color: var(--lp-text-muted); + max-width: 600px; + margin: 0 auto; + line-height: 1.7; +} + + +/* ================================================================= + Features Grid + ================================================================= */ +.lp-section-alt { background: var(--lp-offwhite); } + +.lp-features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; +} + +.lp-feature-card { + background: var(--lp-white); + border: 1px solid var(--lp-border); + border-radius: var(--lp-radius); + padding: 36px 28px; + transition: box-shadow 0.3s, transform 0.3s; +} + +.lp-feature-card:hover { + box-shadow: var(--lp-shadow-lg); + transform: translateY(-4px); +} + +.lp-feature-icon { + width: 52px; + height: 52px; + border-radius: 12px; + background: var(--lp-navy-light); + color: var(--lp-navy); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; + margin-bottom: 20px; +} + +.lp-feature-card h3 { + font-family: var(--lp-font-display); + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 10px; + color: var(--lp-navy-deep); +} + +.lp-feature-card p { + font-size: 0.92rem; + color: var(--lp-text-muted); + line-height: 1.6; +} + + +/* ================================================================= + Modules / Roadmap + ================================================================= */ +.lp-modules { + display: flex; + flex-direction: column; + gap: 24px; +} + +.lp-module-card { + display: grid; + grid-template-columns: 80px 1fr auto; + gap: 24px; + align-items: start; + background: var(--lp-white); + border: 1px solid var(--lp-border); + border-radius: var(--lp-radius); + padding: 32px; + transition: border-color 0.3s; +} + +.lp-module-card:hover { border-color: var(--lp-sky); } + +.lp-module-icon { + width: 64px; + height: 64px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + flex-shrink: 0; +} + +.lp-module-icon.core { background: #E3F2FD; color: #1565C0; } +.lp-module-icon.social { background: #E8F5E9; color: #2E7D32; } +.lp-module-icon.survey { background: #FFF3E0; color: #E65100; } +.lp-module-icon.twin { background: #F3E5F5; color: #7B1FA2; } +.lp-module-icon.open { background: #E0F7FA; color: #00838F; } +.lp-module-icon.access { background: #FCE4EC; color: #C62828; } + +.lp-module-content h3 { + font-family: var(--lp-font-display); + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 6px; + color: var(--lp-navy-deep); +} + +.lp-module-content p { + font-size: 0.92rem; + color: var(--lp-text-muted); + line-height: 1.6; +} + +.lp-module-badge { + padding: 4px 14px; + border-radius: 100px; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + white-space: nowrap; + flex-shrink: 0; +} + +.lp-module-badge.live { background: #E8F5E9; color: #2E7D32; } +.lp-module-badge.dev { background: #FFF3E0; color: #E65100; } +.lp-module-badge.planned { background: #F3E5F5; color: #7B1FA2; } + + +/* ================================================================= + Stats Bar + ================================================================= */ +.lp-stats { + padding: 64px 24px; + background: var(--lp-navy-deep); + color: white; +} + +.lp-stats-inner { + max-width: var(--lp-max-width); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; + text-align: center; +} + +.lp-stat-number { + font-family: var(--lp-font-display); + font-size: 2.8rem; + font-weight: 800; + color: var(--lp-amber); + line-height: 1; + margin-bottom: 8px; +} + +.lp-stat-label { + font-size: 0.9rem; + opacity: 0.7; +} + + +/* ================================================================= + Demo Section + ================================================================= */ +.lp-demo-container { + max-width: 900px; + margin: 0 auto; + border-radius: var(--lp-radius-lg); + overflow: hidden; + box-shadow: var(--lp-shadow-lg); + border: 1px solid var(--lp-border); + aspect-ratio: 16/10; + background: var(--lp-offwhite); +} + +.lp-demo-container iframe { + width: 100%; + height: 100%; + border: none; +} + + +/* ================================================================= + Team + ================================================================= */ +.lp-team-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 32px; +} + +.lp-team-card { + text-align: center; + padding: 32px 24px; +} + +.lp-team-avatar { + width: 100px; + height: 100px; + border-radius: 50%; + background: var(--lp-navy-light); + margin: 0 auto 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: var(--lp-navy); +} + +.lp-team-card h3 { + font-family: var(--lp-font-display); + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 4px; +} + +.lp-team-role { + font-size: 0.88rem; + color: var(--lp-sky); + font-weight: 600; + margin-bottom: 10px; +} + +.lp-team-card p { + font-size: 0.88rem; + color: var(--lp-text-muted); + line-height: 1.5; +} + + +/* ================================================================= + Contact / CTA + ================================================================= */ +.lp-cta-section { + padding: 100px 24px; + background: linear-gradient(170deg, var(--lp-navy) 0%, var(--lp-navy-deep) 100%); + color: white; + text-align: center; +} + +.lp-cta-section .lp-section-eyebrow { color: var(--lp-amber); } + +.lp-cta-section .lp-section-title { + color: white; + max-width: 700px; + margin: 0 auto 16px; +} + +.lp-cta-section .lp-section-subtitle { + color: rgba(255, 255, 255, 0.7); + margin-bottom: 40px; +} + +.lp-contact-grid { + max-width: 800px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + text-align: left; +} + +.lp-contact-info h3 { + font-family: var(--lp-font-display); + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 16px; +} + +.lp-contact-item { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + font-size: 0.95rem; + opacity: 0.85; +} + +.lp-contact-item i { + width: 20px; + text-align: center; + color: var(--lp-amber); +} + +.lp-contact-form { + display: flex; + flex-direction: column; + gap: 12px; +} + +.lp-contact-form input, +.lp-contact-form textarea { + padding: 14px 16px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px; + background: rgba(255, 255, 255, 0.08); + color: white; + font-family: var(--lp-font-body); + font-size: 0.95rem; + outline: none; + transition: border-color 0.2s; +} + +.lp-contact-form input::placeholder, +.lp-contact-form textarea::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.lp-contact-form input:focus, +.lp-contact-form textarea:focus { + border-color: var(--lp-amber); +} + +.lp-contact-form textarea { resize: vertical; min-height: 100px; } + +.lp-contact-form .lp-btn { width: 100%; justify-content: center; } + + +/* ================================================================= + Footer + ================================================================= */ +.lp-footer { + padding: 48px 24px; + background: var(--lp-navy-deep); + border-top: 1px solid rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.5); +} + +.lp-footer-inner { + max-width: var(--lp-max-width); + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; +} + +.lp-footer-links { + display: flex; + gap: 24px; +} + +.lp-footer-links a { + color: rgba(255, 255, 255, 0.5); + transition: color 0.2s; +} + +.lp-footer-links a:hover { color: white; } + + +/* ================================================================= + Responsive + ================================================================= */ +@media (max-width: 900px) { + .lp-hero-inner { grid-template-columns: 1fr; gap: 40px; } + .lp-hero h1 { font-size: 2.4rem; } + .lp-features-grid { grid-template-columns: 1fr; } + .lp-module-card { grid-template-columns: 56px 1fr; } + .lp-module-badge { display: none; } + .lp-stats-inner { grid-template-columns: repeat(2, 1fr); } + .lp-team-grid { grid-template-columns: 1fr; } + .lp-contact-grid { grid-template-columns: 1fr; } + .lp-section-title { font-size: 1.8rem; } + .lp-nav-links { display: none; } + .lp-nav-toggle { display: block; } + .lp-footer-inner { flex-direction: column; gap: 16px; text-align: center; } +} + +@media (max-width: 600px) { + .lp-hero { padding: 120px 16px 60px; } + .lp-hero h1 { font-size: 2rem; } + .lp-hero-subtitle { font-size: 1rem; } + .lp-section { padding: 60px 16px; } + .lp-stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; } + .lp-stat-number { font-size: 2rem; } +} \ No newline at end of file diff --git a/public/landing.php b/public/landing.php new file mode 100644 index 0000000..d73e1f1 --- /dev/null +++ b/public/landing.php @@ -0,0 +1,437 @@ + + +
+ + ++ Die Mitmachkarte gibt Ihrer Kommune ein WebGIS-Portal, auf dem Bürgerinnen und Bürger + Hinweise, Vorschläge und Ideen räumlich verorten — und die Verwaltung sie direkt bearbeiten kann. +
+ + ++ Von der Bürger-Eingabe bis zur Verwaltungs-Auswertung — in einem Portal, räumlich verortet. +
+Bürger zeichnen Punkte, Linien und Flächen direkt auf der Karte — intuitiv wie Google Maps, präzise wie ein GIS.
+Alle Beiträge durchlaufen eine Moderation. Freigeben, ablehnen, bearbeiten — mit Kartenvorschau und Kommentarübersicht.
+Like/Dislike und Kommentarfunktion für jeden Beitrag. Die Verwaltung sieht, was die Bürgerschaft bewegt.
+Frei definierbare Kategorien mit Icons und Farben. Filter in Sidebar und auf der Karte, Sortierung nach Datum, Likes oder Kategorie.
+Bürger können Fotos zu ihren Beiträgen hochladen — direkt vom Smartphone, sichtbar im Popup auf der Karte.
+Logo, Farben und Name Ihrer Kommune — automatisch aus der Datenbank geladen. Jede Mitmachkarte sieht aus wie Ihre eigene.
+Responsive Design für Smartphone, Tablet und Desktop. Bürgerbeteiligung funktioniert auch unterwegs — am Ort des Geschehens.
+Ein geführtes Tutorial erklärt die Kernfunktionen Schritt für Schritt. Keine Schulung nötig — auch für weniger technikaffine Bürger.
+Die Verwaltung veröffentlicht Neuigkeiten direkt in der Sidebar — informiert über Fortschritte, Termine und Beschlüsse.
++ Die Mitmachkarte ist modular aufgebaut. Starten Sie mit dem Kernmodul und aktivieren Sie weitere Module nach Bedarf. +
+Räumliche Beiträge, Moderation, Bewertung, Kommentare, Kategorien, Neuigkeiten, Foto-Upload. Das vollständige Beteiligungsportal.
+Verwandelt die Mitmachkarte in ein lokales Netzwerk: Aufgaben der Stadtverwaltung, gegenseitige Nachbarschaftshilfe, Rangliste für engagierte Bürger und Veranstaltungskalender.
+Planungsbüros erstellen kartenbasierte Umfragen: "Wo fühlen Sie sich unsicher?", "Zeichnen Sie Ihren täglichen Weg ein." Auswertung als Report mit räumlicher Analyse.
+Echtzeit-Daten auf der Karte: Wetterstationen, Luftqualität, Pegelstände, Verkehrsaufkommen, Energieverbrauch. Routenplanung für Bauhof-Teams und Live-Standorte von Einsatzfahrzeugen.
+Bebauungspläne, Baumkataster, Spielplätze, Radwege als durchsuchbare Layer. Die Mitmachkarte wird zum zentralen Geo-Hub Ihrer Kommune.
+Bürger melden Barrieren und barrierefreie Orte auf der Karte. Integration mit Rollstuhl-Routing für eine inklusivere Kommune.
++ Die Demoversion zeigt alle Kernfunktionen am Beispiel der Stadt Lohne (Oldenburg). + Zeichnen Sie einen Beitrag, bewerten Sie, kommentieren Sie. +
++ Geoinformatik, Stadtplanung und Webentwicklung — aus einer Hand. +
+Full-Stack WebGIS-Entwicklung, PALM-4U Stadtklimasimulationen, QGIS-Tooling. Verbindet Geodaten mit Bürgerbeteiligung.
+Kurzbeschreibung der Rolle und Expertise im Team.
+Kurzbeschreibung der Rolle und Expertise im Team.
++ Kostenlose Demo, unverbindliches Erstgespräch, oder direkt ein Pilotprojekt — wir freuen uns auf Ihre Nachricht. +
+