1118 lines
47 KiB
TypeScript
1118 lines
47 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import { Syne } from 'next/font/google'
|
||
import { ArrowRight, ArrowUpRight, Sun, Moon, Menu, X } from 'lucide-react'
|
||
|
||
const syne = Syne({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'] })
|
||
|
||
const FEATURES = [
|
||
{
|
||
num: '01',
|
||
title: 'Mitgliederverwaltung',
|
||
desc: 'Digitales CRM für alle Mitgliedsdaten. Kontakte, Statushistorie und Dokumentenablage — sicher in der Cloud, immer aktuell.',
|
||
tags: ['Cloud CRM', 'Aktenführung', 'Einladungsmanagement'],
|
||
},
|
||
{
|
||
num: '02',
|
||
title: 'Push-News & Kommunikation',
|
||
desc: 'Statt ungeöffneter E-Mails: direkte Push-Benachrichtigungen mit hoher Erreichbarkeit. Sofort, zuverlässig und datenschutzorientiert konfigurierbar.',
|
||
tags: ['Push-Notifications', 'News-Feed', 'Direktkommunikation'],
|
||
},
|
||
{
|
||
num: '03',
|
||
title: 'Event- und Terminmanagement',
|
||
desc: 'Veranstaltungen anlegen, kommunizieren und RSVPs digital einsammeln. Keine manuellen Listen, kein Nachfragen — alles läuft automatisch.',
|
||
tags: ['Terminübersicht', '1-Klick RSVP', 'Kalender-Export'],
|
||
},
|
||
{
|
||
num: '04',
|
||
title: 'Lehrlingsbörse & Stellenmarkt',
|
||
desc: 'Nachwuchs finden, bevor andere ihn sehen. Integrierter Marktplatz für Ausbildungsstellen und Fachkräfte direkt in der App.',
|
||
tags: ['Lehrlingsbörse', 'Stellenmarkt', 'Lokale Reichweite'],
|
||
},
|
||
]
|
||
|
||
const STATS = [
|
||
{ num: 'Bis zu 10 Std.', label: 'Zeitersparnis je nach Prozess' },
|
||
{ num: 'Echtzeit', label: 'Kommunikation' },
|
||
{ num: 'Cloud', label: 'Sicher konzipiert & ueberall nutzbar' },
|
||
{ num: 'AVV', label: 'Art.-28-Vertrag vor Go-Live' },
|
||
]
|
||
|
||
const CONTACT_EMAIL = 'johannestils@aol.com'
|
||
const CONTACT_SUBJECT = 'Anfrage InnungsApp PRO'
|
||
const CONTACT_WEBMAIL_HREF = `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(CONTACT_EMAIL)}&su=${encodeURIComponent(CONTACT_SUBJECT)}`
|
||
const COOKIE_CONSENT_KEY = 'innungsapp_cookie_consent'
|
||
const COOKIE_CONSENT_EVENT = 'innungsapp:cookie-consent-granted'
|
||
const COOKIE_CONSENT_TIMESTAMP_KEY = 'innungsapp_cookie_consent_timestamp'
|
||
const COOKIE_CONSENT_SOURCE_KEY = 'innungsapp_cookie_consent_source'
|
||
type CookieConsentState = 'loading' | 'pending' | 'accepted' | 'declined'
|
||
|
||
export default function RootPage() {
|
||
const [theme, setTheme] = useState('theme-light');
|
||
const [mounted, setMounted] = useState(false);
|
||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||
const [cookieConsent, setCookieConsent] = useState<CookieConsentState>('loading')
|
||
const [showMailFallback, setShowMailFallback] = useState(false)
|
||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
const savedTheme = localStorage.getItem('theme');
|
||
if (savedTheme) {
|
||
setTheme(savedTheme);
|
||
}
|
||
const savedConsent = window.localStorage.getItem(COOKIE_CONSENT_KEY)
|
||
if (savedConsent === 'accepted' || savedConsent === 'declined') {
|
||
setCookieConsent(savedConsent)
|
||
} else {
|
||
setCookieConsent('pending')
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (cookieConsent === 'accepted') {
|
||
window.posthog?.opt_in_capturing?.()
|
||
const sendPageView = () => {
|
||
window.posthog?.capture?.('landing_page_viewed', {
|
||
path: window.location.pathname,
|
||
})
|
||
}
|
||
if (window.posthog?.capture) {
|
||
sendPageView()
|
||
} else {
|
||
window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
|
||
window.setTimeout(sendPageView, 150)
|
||
}
|
||
}
|
||
if (cookieConsent === 'declined') {
|
||
window.posthog?.opt_out_capturing?.()
|
||
}
|
||
}, [cookieConsent])
|
||
|
||
const setCookieChoice = (choice: Exclude<CookieConsentState, 'pending' | 'loading'>) => {
|
||
window.localStorage.setItem(COOKIE_CONSENT_KEY, choice)
|
||
window.localStorage.setItem(COOKIE_CONSENT_TIMESTAMP_KEY, new Date().toISOString())
|
||
window.localStorage.setItem(COOKIE_CONSENT_SOURCE_KEY, 'landing_banner')
|
||
setCookieConsent(choice)
|
||
if (choice === 'accepted') {
|
||
window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
|
||
}
|
||
}
|
||
|
||
const openCookieSettings = () => {
|
||
window.localStorage.removeItem(COOKIE_CONSENT_KEY)
|
||
setCookieConsent('pending')
|
||
}
|
||
|
||
const trackLandingCta = (placement: string) => {
|
||
if (cookieConsent !== 'accepted') return
|
||
const sendCta = () => {
|
||
window.posthog?.capture?.('landing_cta_clicked', {
|
||
placement,
|
||
target: 'contact_email',
|
||
})
|
||
}
|
||
if (window.posthog?.capture) {
|
||
sendCta()
|
||
} else {
|
||
window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
|
||
window.setTimeout(sendCta, 150)
|
||
}
|
||
}
|
||
|
||
const handleContactCtaClick = (placement: string) => {
|
||
trackLandingCta(placement)
|
||
setShowMailFallback(true)
|
||
}
|
||
|
||
const toggleTheme = () => {
|
||
const newTheme = theme === 'theme-dark' ? 'theme-light' : 'theme-dark';
|
||
setTheme(newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
};
|
||
|
||
const toggleFaq = (index: number) => {
|
||
setOpenFaq(openFaq === index ? null : index);
|
||
}
|
||
|
||
const schemaOrg = {
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "SoftwareApplication",
|
||
"name": "InnungsApp PRO",
|
||
"applicationCategory": "BusinessApplication",
|
||
"operatingSystem": "Web, iOS, Android",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "EUR"
|
||
},
|
||
"description": "Cloudbasierte Verwaltungssoftware für Handwerksinnungen mit Mitgliederverwaltung, Kommunikation und Terminmanagement."
|
||
},
|
||
{
|
||
"@type": "FAQPage",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "Wie lange dauert der Wechsel zur InnungsApp PRO?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Unser Onboarding-Team unterstützt Sie beim gesamten Prozess und richtet Ihre Umgebung schnellstmöglich ein. Sie können zeitnah starten."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Ist die Plattform DSGVO-konform?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Wir arbeiten mit DSGVO-orientierten Prozessen. Vor Go-Live wird ein AV-Vertrag geschlossen; bei Datenverarbeitung in den USA nutzen wir SCC, dokumentieren TIA und setzen zusaetzliche Schutzmassnahmen ein. Die konkrete Compliance haengt von Konfiguration und Vertraegen ab."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Brauchen meine Mitglieder eine Schulung?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Nein, die App ist so intuitiv wie WhatsApp – Ihre Mitglieder können sie ohne Einarbeitung direkt nutzen."
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaOrg) }}
|
||
/>
|
||
<style>{`
|
||
.theme-light {
|
||
--bg: #FAFAFA;
|
||
--nav-bg: rgba(250, 250, 250, 0.85);
|
||
--ink: #111111;
|
||
--ink-muted: rgba(17, 17, 17, 0.6);
|
||
--ink-faint: rgba(17, 17, 17, 0.1);
|
||
--gold: #C9973A;
|
||
--gold-light: #B8862D;
|
||
--gold-faint: rgba(201, 151, 58, 0.08); /* Subtle gold background for badges/blobs */
|
||
--card-bg: rgba(255, 255, 255, 0.6);
|
||
--glass-border: rgba(17, 17, 17, 0.05);
|
||
}
|
||
|
||
.theme-dark {
|
||
--bg: #0C0B09;
|
||
--nav-bg: rgba(12, 11, 9, 0.85);
|
||
--ink: #EAE6DA;
|
||
--ink-muted: rgba(234,230,218,0.45);
|
||
--ink-faint: rgba(234,230,218,0.12);
|
||
--gold: #C9973A;
|
||
--gold-light: #DFB25C;
|
||
--gold-faint: rgba(201, 151, 58, 0.15);
|
||
--card-bg: rgba(20, 19, 17, 0.4);
|
||
--glass-border: rgba(234,230,218,0.05);
|
||
}
|
||
|
||
body { background: var(--bg); }
|
||
|
||
.page {
|
||
background: var(--bg); color: var(--ink); min-height: 100vh;
|
||
background-image:
|
||
radial-gradient(circle at 15% 50%, var(--gold-faint), transparent 25%),
|
||
radial-gradient(circle at 85% 30%, var(--gold-faint), transparent 25%);
|
||
transition: background 0.3s, color 0.3s;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Nav */
|
||
.nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
|
||
background: var(--nav-bg);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--ink-faint);
|
||
height: 64px;
|
||
display: flex; align-items: center;
|
||
}
|
||
.nav-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
.logo { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; display: flex; align-items: center; }
|
||
.logo-accent { color: var(--gold); }
|
||
.logo-pro {
|
||
font-size: 0.65rem;
|
||
background: var(--gold-faint);
|
||
color: var(--gold);
|
||
padding: 3px 6px;
|
||
border-radius: 4px;
|
||
margin-left: 8px;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
.nav-links { display: flex; align-items: center; gap: 32px; }
|
||
.nav-link {
|
||
font-size: 0.875rem; color: var(--ink-muted);
|
||
text-decoration: none; transition: color 0.15s;
|
||
font-weight: 400;
|
||
}
|
||
.nav-link:hover { color: var(--ink); }
|
||
.btn-primary {
|
||
background: var(--gold); color: var(--bg);
|
||
font-weight: 600; font-size: 0.875rem;
|
||
padding: 10px 22px;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
text-decoration: none;
|
||
transition: background 0.15s, transform 0.1s;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.btn-primary:hover { background: var(--gold-light); }
|
||
|
||
/* Hero */
|
||
.hero {
|
||
max-width: 1280px; margin: 0 auto; padding: 160px 32px 96px;
|
||
}
|
||
.eyebrow {
|
||
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
|
||
color: var(--gold); margin-bottom: 32px; font-weight: 500;
|
||
}
|
||
.hero-h1 {
|
||
font-weight: 800; font-size: clamp(1.75rem, 5vw, 7.5rem);
|
||
line-height: 0.92; letter-spacing: -0.04em;
|
||
margin: 0 0 48px; color: var(--ink);
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.hero-h1 em { color: var(--gold); font-style: normal; }
|
||
|
||
.hero-body {
|
||
display: flex; flex-direction: column; gap: 40px;
|
||
}
|
||
@media (min-width: 640px) {
|
||
.hero-body { flex-direction: row; align-items: flex-start; gap: 64px; }
|
||
}
|
||
.hero-desc {
|
||
max-width: 440px; color: var(--ink-muted);
|
||
font-size: 1.0625rem; line-height: 1.7;
|
||
font-family: 'Georgia', serif;
|
||
}
|
||
.hero-image-wrapper {
|
||
flex: 1;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 80px rgba(0,0,0,0.15);
|
||
border: 1px solid var(--glass-border);
|
||
aspect-ratio: 16/10;
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
.hero-image-wrapper img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.hero-cta { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; flex-shrink: 0; }
|
||
.btn-ghost {
|
||
border: 1px solid var(--ink-faint); color: var(--ink);
|
||
padding: 10px 22px; font-size: 0.875rem; font-weight: 500;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
text-decoration: none; transition: border-color 0.15s, background 0.15s;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.btn-ghost:hover {
|
||
border-color: var(--ink-muted);
|
||
background: var(--ink-faint);
|
||
}
|
||
|
||
/* Stats */
|
||
.stats {
|
||
margin-top: 80px;
|
||
border-top: 1px solid var(--ink-faint);
|
||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||
justify-items: center;
|
||
}
|
||
@media (min-width: 480px) { .stats { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
|
||
.stat {
|
||
padding: 28px 24px;
|
||
border-right: 1px solid var(--ink-faint);
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.stat:last-child { border-right: none; }
|
||
.stat-num {
|
||
font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem);
|
||
color: var(--gold); letter-spacing: -0.03em; line-height: 1;
|
||
margin-bottom: 6px;
|
||
}
|
||
.stat-label { font-size: 0.75rem; color: var(--ink-muted); font-family: 'Georgia', serif; }
|
||
|
||
/* Features */
|
||
.features { border-top: 1px solid var(--ink-faint); padding: 96px 0; }
|
||
.features-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
display: grid; grid-template-columns: 1fr;
|
||
gap: 64px;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.features-inner { grid-template-columns: 5fr 7fr; gap: 96px; }
|
||
}
|
||
.features-sticky { }
|
||
@media (min-width: 1024px) {
|
||
.features-sticky { position: sticky; top: 88px; }
|
||
}
|
||
.features-h2 {
|
||
font-weight: 800; font-size: clamp(1.5rem, 5vw, 4rem);
|
||
letter-spacing: -0.04em; line-height: 1.0;
|
||
margin: 24px 0 28px; color: var(--ink);
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.features-sub { color: var(--ink-muted); font-family: 'Georgia', serif; line-height: 1.65; font-size: 0.9375rem; }
|
||
|
||
.feature-list { display: flex; flex-direction: column; }
|
||
.feature-item {
|
||
padding: 36px 32px;
|
||
border: 1px solid var(--glass-border);
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-radius: 24px;
|
||
display: flex; gap: 28px; align-items: flex-start;
|
||
cursor: default;
|
||
margin-bottom: 24px;
|
||
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||
}
|
||
.feature-item:hover {
|
||
transform: translateY(-4px);
|
||
border-color: var(--ink-faint);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.05);
|
||
}
|
||
.feature-num {
|
||
font-weight: 800; font-size: 3.5rem; line-height: 1;
|
||
color: var(--ink-faint); letter-spacing: -0.04em;
|
||
flex-shrink: 0; padding-top: 2px;
|
||
transition: color 0.2s, transform 0.2s;
|
||
user-select: none;
|
||
min-width: 72px;
|
||
}
|
||
.feature-item:hover .feature-num { color: var(--gold); transform: translateX(-4px); }
|
||
.feature-title {
|
||
font-weight: 700; font-size: 1.25rem;
|
||
letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ink);
|
||
}
|
||
.feature-desc { color: var(--ink-muted); font-family: 'Georgia', serif; line-height: 1.65; font-size: 0.9375rem; margin-bottom: 16px; }
|
||
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.feature-tag {
|
||
font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
|
||
border: 1px solid var(--ink-faint);
|
||
color: var(--ink-muted);
|
||
padding: 4px 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Challenges */
|
||
.challenges-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
|
||
.challenges-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
||
.challenges-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
|
||
@media (min-width: 768px) { .challenges-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
.challenge-card {
|
||
padding: 32px;
|
||
background: var(--card-bg);
|
||
border: 1px solid rgba(255, 100, 100, 0.15); /* Subtly negative */
|
||
border-radius: 24px;
|
||
}
|
||
.challenge-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 12px; color: var(--ink); }
|
||
.challenge-desc { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; }
|
||
|
||
/* Trust & Social Proof */
|
||
.trust-banner {
|
||
padding: 64px 32px;
|
||
text-align: center;
|
||
background: var(--ink-faint);
|
||
}
|
||
.trust-text { font-size: 1.125rem; color: var(--ink); font-style: italic; max-width: 600px; margin: 0 auto 24px; font-family: 'Georgia', serif;}
|
||
.trust-author { font-size: 0.875rem; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
||
|
||
/* Comparison */
|
||
.comparison-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
|
||
.comparison-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
||
.comparison-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
|
||
@media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; } }
|
||
.comp-card { padding: 40px; border-radius: 24px; }
|
||
.comp-old { background: rgba(220, 50, 50, 0.03); border: 1px solid rgba(220, 50, 50, 0.1); }
|
||
.comp-new { background: var(--gold-faint); border: 1px solid var(--gold); }
|
||
.comp-title { font-weight: 800; font-size: 1.5rem; margin-bottom: 24px; }
|
||
.comp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
|
||
.comp-item { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--ink); }
|
||
.comp-icon-red { color: #dc3232; font-weight: bold; }
|
||
.comp-icon-green { color: var(--gold); font-weight: bold; }
|
||
|
||
/* AEO / SEO Block */
|
||
.aeo-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
|
||
.aeo-inner { max-width: 800px; margin: 0 auto; padding: 0 32px; }
|
||
.aeo-text {
|
||
color: var(--ink-muted); font-size: 1rem; line-height: 1.8; font-family: 'Georgia', serif;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.aeo-text p { margin-bottom: 24px; }
|
||
.aeo-text strong { color: var(--ink); font-weight: 600; }
|
||
|
||
/* FAQ */
|
||
.faq-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
|
||
.faq-inner { max-width: 800px; margin: 0 auto; padding: 0 32px; }
|
||
.faq-item { border-bottom: 1px solid var(--ink-faint); }
|
||
.faq-question {
|
||
width: 100%; text-align: left; padding: 24px 0;
|
||
background: none; border: none; color: var(--ink);
|
||
font-weight: 700; font-size: 1.125rem;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
cursor: pointer; font-family: inherit;
|
||
}
|
||
.faq-icon {
|
||
flex-shrink: 0; width: 24px; height: 24px;
|
||
border: 1px solid var(--ink-faint); border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1rem; font-weight: 400; color: var(--gold);
|
||
transition: background 0.15s;
|
||
}
|
||
.faq-answer {
|
||
padding-bottom: 24px; color: var(--ink-muted);
|
||
font-size: 0.9375rem; line-height: 1.6;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease;
|
||
}
|
||
|
||
|
||
/* CTA */
|
||
.cta-section { border-top: 1px solid var(--ink-faint); padding: 96px 0 120px; }
|
||
.cta-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
display: flex; flex-direction: column; gap: 48px;
|
||
align-items: flex-start;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.cta-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
|
||
}
|
||
.cta-h2 {
|
||
font-weight: 800; font-size: clamp(1.5rem, 5vw, 4.5rem);
|
||
letter-spacing: -0.04em; line-height: 1.0; color: var(--ink);
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.cta-h2 em { color: var(--gold); font-style: normal; }
|
||
.cta-right { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
|
||
.cta-note { font-size: 0.75rem; color: var(--ink-muted); text-align: center; font-family: 'Georgia', serif; }
|
||
|
||
.btn-primary-lg {
|
||
background: var(--gold); color: var(--bg);
|
||
font-weight: 700; font-size: 1rem;
|
||
padding: 14px 28px;
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
text-decoration: none;
|
||
transition: background 0.15s;
|
||
letter-spacing: -0.02em;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-primary-lg:hover { background: var(--gold-light); }
|
||
|
||
/* Footer */
|
||
.footer {
|
||
border-top: 1px solid var(--ink-faint);
|
||
padding: 36px 0;
|
||
}
|
||
.footer-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
display: flex; flex-direction: column; align-items: center; gap: 20px;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.footer-inner { flex-direction: row; justify-content: space-between; }
|
||
}
|
||
.footer-logo { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; }
|
||
.footer-copy { font-size: 0.75rem; color: var(--ink-muted); font-family: 'Georgia', serif; }
|
||
.footer-links { display: flex; gap: 24px; }
|
||
.footer-link {
|
||
font-size: 0.8125rem; color: var(--ink-muted);
|
||
text-decoration: none; transition: color 0.15s;
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
.footer-link:hover { color: var(--ink); }
|
||
|
||
.mail-fallback {
|
||
font-size: 0.75rem;
|
||
color: var(--ink-muted);
|
||
text-align: center;
|
||
font-family: 'Georgia', serif;
|
||
}
|
||
.mail-fallback-link {
|
||
color: var(--gold);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--gold);
|
||
}
|
||
.mail-fallback-row {
|
||
display: inline-flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.cookie-banner {
|
||
position: fixed;
|
||
left: 16px;
|
||
right: 16px;
|
||
bottom: 16px;
|
||
z-index: 60;
|
||
border: 1px solid var(--ink-faint);
|
||
background: var(--nav-bg);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border-radius: 18px;
|
||
padding: 16px;
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
|
||
}
|
||
.cookie-banner-inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
.cookie-banner-text {
|
||
color: var(--ink-muted);
|
||
font-size: 0.875rem;
|
||
line-height: 1.55;
|
||
max-width: 760px;
|
||
font-family: 'Georgia', serif;
|
||
}
|
||
.cookie-banner-link {
|
||
color: var(--gold);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--gold);
|
||
}
|
||
.cookie-banner-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.cookie-btn {
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
font-size: 0.8125rem;
|
||
cursor: pointer;
|
||
border: 1px solid var(--ink-faint);
|
||
background: transparent;
|
||
color: var(--ink);
|
||
}
|
||
.cookie-btn-primary {
|
||
background: var(--gold);
|
||
color: var(--bg);
|
||
border-color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Horizontal rule decoration */
|
||
.section-marker {
|
||
font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
|
||
color: var(--gold); font-weight: 500; margin-bottom: 20px;
|
||
}
|
||
|
||
/* Mobile Navigation */
|
||
.nav-mobile-toggle { display: none; }
|
||
@media (max-width: 767px) {
|
||
.nav-mobile-toggle { display: flex; align-items: center; cursor: pointer; }
|
||
.nav-menu-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--ink);
|
||
padding: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.nav-links {
|
||
display: none;
|
||
position: fixed;
|
||
top: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg);
|
||
border-bottom: 1px solid var(--ink-faint);
|
||
padding: 24px 32px;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
z-index: 40;
|
||
}
|
||
.nav-links-mobile-open { display: flex !important; }
|
||
.nav-link { display: block; }
|
||
}
|
||
|
||
/* Improved Mobile Responsiveness */
|
||
@media (max-width: 480px) {
|
||
.nav-inner { padding: 0 12px; }
|
||
.hero { padding: 100px 12px 40px; }
|
||
.hero-body { gap: 20px; }
|
||
.hero-image-wrapper { max-height: 400px; aspect-ratio: 1; }
|
||
.stat { padding: 16px 12px; }
|
||
.stat-label { font-size: 0.7rem; }
|
||
.challenges-section { padding: 40px 0; }
|
||
.challenges-inner { padding: 0 12px; }
|
||
.challenges-grid { gap: 16px; }
|
||
.challenge-card { padding: 16px; }
|
||
.challenge-title { font-size: 1rem; }
|
||
.features { padding: 40px 0; }
|
||
.features-inner { padding: 0 12px; gap: 24px; }
|
||
.feature-item { padding: 16px 12px; gap: 12px; }
|
||
.feature-num { font-size: 1.5rem; }
|
||
.feature-title { font-size: 1rem; }
|
||
.feature-desc { font-size: 0.875rem; }
|
||
.comparison-section { padding: 40px 0; }
|
||
.comparison-inner { padding: 0 12px; }
|
||
.comp-card { padding: 16px; }
|
||
.comp-title { font-size: 1.125rem; }
|
||
.cta-section { padding: 40px 0 60px; }
|
||
.cta-inner { padding: 0 12px; }
|
||
.aeo-section { padding: 40px 0; }
|
||
.aeo-inner { padding: 0 12px; }
|
||
.aeo-text { font-size: 0.9375rem; }
|
||
.faq-section { padding: 40px 0; }
|
||
.faq-inner { padding: 0 12px; }
|
||
.faq-question { font-size: 1rem; padding: 16px 0; }
|
||
.footer { padding: 20px 0; }
|
||
.footer-inner { padding: 0 12px; }
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.nav-inner { padding: 0 16px; }
|
||
.hero { padding: 120px 16px 60px; }
|
||
.hero-body { gap: 24px; }
|
||
.hero-image-wrapper { aspect-ratio: 1; }
|
||
.stats { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }
|
||
.stat { padding: 20px 16px; border-right: none; border-bottom: 1px solid var(--ink-faint); }
|
||
.stat:nth-child(2n) { border-right: 1px solid var(--ink-faint); }
|
||
.stat:nth-last-child(-n+2) { border-bottom: none; }
|
||
.challenges-section { padding: 60px 0; }
|
||
.challenges-inner { padding: 0 16px; }
|
||
.challenges-grid { gap: 20px; }
|
||
.challenge-card { padding: 20px; }
|
||
.features { padding: 60px 0; }
|
||
.features-inner { padding: 0 16px; gap: 40px; }
|
||
.feature-item { padding: 20px 16px; gap: 16px; flex-direction: column; }
|
||
.feature-num { font-size: 2rem; min-width: auto; }
|
||
.comparison-section { padding: 60px 0; }
|
||
.comparison-inner { padding: 0 16px; }
|
||
.comp-card { padding: 20px; }
|
||
.cta-section { padding: 60px 0 80px; }
|
||
.cta-inner { padding: 0 16px; }
|
||
.aeo-section { padding: 60px 0; }
|
||
.aeo-inner { padding: 0 16px; }
|
||
.faq-section { padding: 60px 0; }
|
||
.faq-inner { padding: 0 16px; }
|
||
.footer { padding: 24px 0; }
|
||
.footer-inner { padding: 0 16px; }
|
||
}
|
||
`}</style>
|
||
|
||
<div className={`page ${syne.className} ${theme}`}>
|
||
{/* Nav */}
|
||
<nav className="nav">
|
||
<div className="nav-inner">
|
||
<div className="logo">
|
||
Innungs<span className="logo-accent">App</span> <span className="logo-pro">PRO</span>
|
||
</div>
|
||
<div className="nav-mobile-toggle">
|
||
<button
|
||
className="nav-menu-btn"
|
||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||
aria-label="Navigation toggle"
|
||
>
|
||
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||
</button>
|
||
</div>
|
||
<div className={`nav-links ${mobileMenuOpen ? 'nav-links-mobile-open' : ''}`}>
|
||
<a href="#leistungen" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Leistungen</a>
|
||
|
||
<button
|
||
onClick={toggleTheme}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', color: 'var(--ink-muted)' }}
|
||
aria-label="Toggle theme"
|
||
title={theme === 'theme-dark' ? 'Light Mode' : 'Dark Mode'}
|
||
>
|
||
{theme === 'theme-dark' ? <Sun size={18} /> : <Moon size={18} />}
|
||
</button>
|
||
|
||
<Link href="/login" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Login</Link>
|
||
<a
|
||
href={CONTACT_WEBMAIL_HREF}
|
||
className="btn-primary"
|
||
onClick={() => {
|
||
handleContactCtaClick('nav')
|
||
setMobileMenuOpen(false)
|
||
}}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
Team kontaktieren <ArrowRight size={13} />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
{/* Hero */}
|
||
<section className="hero">
|
||
<div className="eyebrow">Für Handwerksinnungen in Deutschland</div>
|
||
<h1 className="hero-h1">
|
||
Weniger Verwaltung.<br />
|
||
<em>Mehr Leben.</em><br />
|
||
<span style={{ fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', fontWeight: 600, color: 'var(--ink-muted)', letterSpacing: '-0.02em', display: 'block', marginTop: '16px' }}>Die All-in-One Software für die moderne Handwerksinnung.</span>
|
||
</h1>
|
||
|
||
<div className="hero-body">
|
||
<div style={{ flex: 1 }}>
|
||
<p className="hero-desc" style={{ fontWeight: 600, color: 'var(--ink)', marginBottom: '16px' }}>
|
||
Schluss mit Zettelwirtschaft, Excel-Chaos und ungelesenen E-Mails.
|
||
</p>
|
||
<p className="hero-desc">
|
||
Ihre Mitgliederverwaltung, Push-News und Lehrstellenbörse — gebündelt in einer sicheren Cloud-Plattform, die Ihre Prozesse automatisiert und den Innungsalltag vereinfacht.
|
||
</p>
|
||
<div className="hero-cta" style={{ marginTop: '32px', maxWidth: '300px' }}>
|
||
<a
|
||
href={CONTACT_WEBMAIL_HREF}
|
||
className="btn-primary-lg"
|
||
style={{ justifyContent: 'center' }}
|
||
onClick={() => handleContactCtaClick('hero')}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
Team kontaktieren <ArrowRight size={16} />
|
||
</a>
|
||
<div style={{ fontSize: '0.75rem', color: 'var(--ink-muted)', textAlign: 'center', marginTop: '8px' }}>
|
||
Individuelle Beratung. Keine Vertragsbindung.
|
||
</div>
|
||
{showMailFallback && (
|
||
<div className="mail-fallback">
|
||
Kein Mailprogramm? Schreiben Sie direkt an{' '}
|
||
<a className="mail-fallback-link" href={`mailto:${CONTACT_EMAIL}`}>
|
||
{CONTACT_EMAIL}
|
||
</a>
|
||
.
|
||
<div className="mail-fallback-row">
|
||
<a
|
||
className="mail-fallback-link"
|
||
href={CONTACT_WEBMAIL_HREF}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
In Webmail öffnen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-image-wrapper">
|
||
<Image
|
||
src="/mobile-mockup.png"
|
||
alt="InnungsApp PRO Mobile Interface"
|
||
width={400}
|
||
height={800}
|
||
priority
|
||
style={{
|
||
width: '100%',
|
||
height: 'auto',
|
||
objectFit: 'contain'
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="stats">
|
||
{STATS.map((s) => (
|
||
<div key={s.label} className="stat">
|
||
<div className="stat-num">{s.num}</div>
|
||
<div className="stat-label">{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="hero-desc" style={{ marginTop: '16px', fontSize: '0.85rem' }}>
|
||
* Angaben zur Zeitersparnis sind Erfahrungswerte und hängen von Ausgangsprozess, Datengrundlage und Nutzungsumfang ab.
|
||
</p>
|
||
</section>
|
||
|
||
|
||
|
||
{/* Challenges / Pain Points */}
|
||
<section className="challenges-section">
|
||
<div className="challenges-inner">
|
||
<div className="section-marker">Herausforderungen</div>
|
||
<h2 className="cta-h2">Kennen Sie diese Probleme<br />im <em>Innungsalltag?</em></h2>
|
||
<div className="challenges-grid">
|
||
<div className="challenge-card">
|
||
<h3 className="challenge-title">Geringe Erreichbarkeit</h3>
|
||
<p className="challenge-desc">Wichtige E-Mails landen im Spam-Ordner oder werden überlesen. Informationen kommen bei den Mitgliedern nicht rechtzeitig an.</p>
|
||
</div>
|
||
<div className="challenge-card">
|
||
<h3 className="challenge-title">Zettelwirtschaft</h3>
|
||
<p className="challenge-desc">Mitgliedsdaten sind über verschiedene Excel-Listen, Ordner und lokale Festplatten verstreut. Die Datenpflege kostet massiv Zeit.</p>
|
||
</div>
|
||
<div className="challenge-card">
|
||
<h3 className="challenge-title">Nachwuchsmangel</h3>
|
||
<p className="challenge-desc">Es wird immer schwieriger, junge Talente für das Handwerk zu begeistern und freie Ausbildungsplätze erfolgreich zu besetzen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features */}
|
||
<section id="leistungen" className="features">
|
||
<div className="features-inner">
|
||
<div className="features-sticky">
|
||
<div className="section-marker">Leistungen</div>
|
||
<h2 className="features-h2">
|
||
Alles,<br />was Ihre<br />Innung<br />braucht.
|
||
</h2>
|
||
<p className="features-sub">
|
||
Kein Sammelsurium aus Insellösungen. Eine durchdachte Plattform für die moderne Handwerksinnung — von der Verwaltung bis zur Nachwuchsgewinnung.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="feature-list">
|
||
{FEATURES.map((f) => (
|
||
<div key={f.num} className="feature-item">
|
||
<div className="feature-num">{f.num}</div>
|
||
<div>
|
||
<h3 className="feature-title">{f.title}</h3>
|
||
<p className="feature-desc">{f.desc}</p>
|
||
<div className="feature-tags">
|
||
{f.tags.map((t) => (
|
||
<span key={t} className="feature-tag">{t}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Gegenüberstellung / Comparison */}
|
||
<section className="comparison-section">
|
||
<div className="comparison-inner">
|
||
<div className="section-marker" style={{ textAlign: 'center' }}>Der Vergleich</div>
|
||
<h2 className="cta-h2" style={{ textAlign: 'center' }}>Warum <em>InnungsApp PRO?</em></h2>
|
||
<div className="comparison-grid">
|
||
<div className="comp-card comp-old">
|
||
<h3 className="comp-title" style={{ color: '#dc3232' }}>Der alte Weg</h3>
|
||
<ul className="comp-list">
|
||
<li className="comp-item"><span className="comp-icon-red">✕</span> Verteilte Excel-Listen und Aktenordner</li>
|
||
<li className="comp-item"><span className="comp-icon-red">✕</span> Wichtige E-Mails verstauben ungelesen</li>
|
||
<li className="comp-item"><span className="comp-icon-red">✕</span> Manueller Abgleich von Zu- und Absagen</li>
|
||
<li className="comp-item"><span className="comp-icon-red">✕</span> Keine Sichtbarkeit für junge Talente</li>
|
||
<li className="comp-item"><span className="comp-icon-red">✕</span> Hoher Frust bei der Verwaltung</li>
|
||
</ul>
|
||
</div>
|
||
<div className="comp-card comp-new">
|
||
<h3 className="comp-title" style={{ color: 'var(--gold)' }}>Der InnungsApp Weg</h3>
|
||
<ul className="comp-list">
|
||
<li className="comp-item"><span className="comp-icon-green">✓</span> Digitales Cloud-CRM, überall abrufbar</li>
|
||
<li className="comp-item"><span className="comp-icon-green">✓</span> Push-Nachrichten in Echtzeit</li>
|
||
<li className="comp-item"><span className="comp-icon-green">✓</span> Automatisierte 1-Klick Event-Zusagen</li>
|
||
<li className="comp-item"><span className="comp-icon-green">✓</span> Integrierte, lokale Lehrlingsbörse</li>
|
||
<li className="comp-item"><span className="comp-icon-green">✓</span> Bis zu 10 Stunden Zeitersparnis je nach Prozess</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* AEO / GEO Content Block */}
|
||
<section className="aeo-section">
|
||
<div className="aeo-inner">
|
||
<div className="section-marker">Über unsere Plattform</div>
|
||
<h2 className="cta-h2" style={{ marginBottom: '32px', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>Die smarte Lösung für moderne Handwerksorganisationen</h2>
|
||
<div className="aeo-text">
|
||
<p>
|
||
<strong>InnungsApp PRO</strong> ist eine cloudbasierte Verwaltungssoftware, die speziell auf die Bedürfnisse von <strong>Handwerksinnungen in Deutschland</strong> zugeschnitten ist. Die Plattform bündelt Mitgliederverwaltung, Kommunikation und Eventmanagement in einer zentralen Oberfläche.
|
||
</p>
|
||
<p>
|
||
Je nach bestehender Prozesslandschaft ist eine Reduktion des administrativen Aufwands um <strong>bis zu 10 Stunden pro Woche</strong> möglich. Statt ineffizienter E-Mail-Verteiler nutzt die Plattform Push-Technologie für schnelle Zustellung und eine bessere Erreichbarkeit in der Praxis.
|
||
</p>
|
||
<p>
|
||
Teile der Infrastruktur laufen auf Servern in Texas (USA). Für Drittlandtransfers werden EU-Standardvertragsklauseln (SCC), dokumentierte Transfer Impact Assessments (TIA) und zusätzliche Schutzmaßnahmen eingesetzt. Vor Produktivbetrieb wird mit jeder Innung ein AV-Vertrag nach Art. 28 DSGVO geschlossen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Section */}
|
||
<section className="faq-section">
|
||
<div className="faq-inner">
|
||
<div className="section-marker">FAQ</div>
|
||
<h2 className="cta-h2" style={{ marginBottom: '48px' }}>Häufige <em>Fragen</em></h2>
|
||
|
||
{[
|
||
{
|
||
q: 'Wie schnell sind wir startklar?',
|
||
a: 'In der Regel innerhalb von 1–3 Werktagen. Unser Onboarding-Team importiert Ihre bestehenden Mitgliederdaten (aus Excel oder CSV), richtet Ihre Innung ein und begleitet Sie beim ersten Login. Sie müssen nichts technisch einrichten.',
|
||
},
|
||
{
|
||
q: 'Ist die Plattform DSGVO-konform?',
|
||
a: 'Wir arbeiten mit DSGVO-orientierten Prozessen. Vor Go-Live wird ein AV-Vertrag (Art. 28 DSGVO) geschlossen, TOMs sind dokumentiert, und bei Datenverarbeitung in den USA nutzen wir SCC plus Transfer-Folgenabschaetzung (TIA) und zusaetzliche Schutzmassnahmen. Die konkrete Compliance haengt von der gewaehlten Konfiguration und den vertraglichen Einstellungen der Innung ab.',
|
||
},
|
||
{
|
||
q: 'Können meine Mitglieder die App sofort benutzen?',
|
||
a: 'Ja — ohne App-Store-Konto und ohne Schulung. Mitglieder erhalten eine E-Mail-Einladung, klicken den Link und sind direkt drin. Die Oberfläche ist so einfach wie WhatsApp. Wer will, kann zusätzlich die native iOS/Android App installieren.',
|
||
},
|
||
{
|
||
q: 'Was kostet InnungsApp PRO und gibt es Vertragsbindung?',
|
||
a: 'Die Kosten richten sich nach der Größe Ihrer Innung (Anzahl Mitglieder). Es gibt keine langfristige Vertragsbindung — Sie können monatlich kündigen. Kontaktieren Sie uns für ein individuelles Angebot. Pilotinnungen profitieren von besonders günstigen Konditionen.',
|
||
},
|
||
{
|
||
q: 'Können mehrere Innungen oder ein Verband die Plattform nutzen?',
|
||
a: 'Ja. Die Plattform ist mandantenfähig — jede Innung hat ihren eigenen, vollständig getrennten Bereich. Verbände können mehrere angeschlossene Innungen zentral verwalten. Daten und Kommunikation bleiben dabei immer sauber getrennt.',
|
||
},
|
||
{
|
||
q: 'Wie funktionieren Push-Benachrichtigungen?',
|
||
a: 'Wenn Sie als Admin eine News veröffentlichen, erhalten aktive Mitglieder sofort eine Push-Nachricht auf ihr Smartphone — auch wenn die App im Hintergrund läuft. In vielen Innungen liegt die Interaktion mit Push-Nachrichten spürbar über klassischen E-Mail-Newslettern.',
|
||
},
|
||
].map((faq, i) => (
|
||
<div key={i} className="faq-item" style={i === 5 ? { borderBottom: 'none' } : {}}>
|
||
<button className="faq-question" onClick={() => toggleFaq(i)}>
|
||
<span>{faq.q}</span>
|
||
<span className="faq-icon">{openFaq === i ? '−' : '+'}</span>
|
||
</button>
|
||
<div
|
||
className="faq-answer"
|
||
style={{ display: openFaq === i ? 'block' : 'none' }}
|
||
>
|
||
{faq.a}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="cta-section">
|
||
<div className="cta-inner">
|
||
<div>
|
||
<div className="section-marker" style={{ marginBottom: '28px' }}>Bereit loszulegen?</div>
|
||
<h2 className="cta-h2">
|
||
Ihre Innung.<br />
|
||
Ihre App.<br />
|
||
<em>Ihre Zukunft.</em>
|
||
</h2>
|
||
</div>
|
||
<div className="cta-right">
|
||
<a
|
||
href={CONTACT_WEBMAIL_HREF}
|
||
className="btn-primary-lg"
|
||
onClick={() => handleContactCtaClick('bottom')}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
Jetzt Team kontaktieren <ArrowUpRight size={18} />
|
||
</a>
|
||
<p className="cta-note">Persönliche Beratung. Keine Vertragsbindung.</p>
|
||
{showMailFallback && (
|
||
<div className="mail-fallback">
|
||
Kein Mailprogramm? Schreiben Sie direkt an{' '}
|
||
<a className="mail-fallback-link" href={`mailto:${CONTACT_EMAIL}`}>
|
||
{CONTACT_EMAIL}
|
||
</a>
|
||
.
|
||
<div className="mail-fallback-row">
|
||
<a
|
||
className="mail-fallback-link"
|
||
href={CONTACT_WEBMAIL_HREF}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
In Webmail öffnen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* Footer */}
|
||
<footer className="footer">
|
||
<div className="footer-inner">
|
||
<div className="footer-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
||
Innungs<span className="logo-accent">App</span> <span className="logo-pro" style={{ fontSize: '0.6rem', padding: '1px 4px', marginLeft: '6px' }}>PRO</span>
|
||
</div>
|
||
<p className="footer-copy">
|
||
© {new Date().getFullYear()} InnungsApp SaaS. Alle Rechte vorbehalten.
|
||
</p>
|
||
<div className="footer-links">
|
||
<Link href="/impressum" className="footer-link">Impressum</Link>
|
||
<Link href="/datenschutz" className="footer-link">Datenschutz</Link>
|
||
<button type="button" onClick={openCookieSettings} className="footer-link">
|
||
Cookie-Einstellungen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
{cookieConsent === 'pending' && (
|
||
<div className="cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie Hinweis">
|
||
<div className="cookie-banner-inner">
|
||
<p className="cookie-banner-text">
|
||
Wir nutzen optionale Analyse-Cookies (PostHog), um die Landingpage zu verbessern.
|
||
PostHog startet erst nach Ihrer Zustimmung. Mehr Infos in der{' '}
|
||
<Link href="/datenschutz" className="cookie-banner-link">
|
||
Datenschutzerklärung
|
||
</Link>
|
||
.
|
||
</p>
|
||
<div className="cookie-banner-actions">
|
||
<button className="cookie-btn" onClick={() => setCookieChoice('declined')}>
|
||
Nur notwendige
|
||
</button>
|
||
<button
|
||
className="cookie-btn cookie-btn-primary"
|
||
onClick={() => setCookieChoice('accepted')}
|
||
>
|
||
Cookies akzeptieren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|