push

2026-02-27 15:19:24 +01:00
parent b7f8221095
commit 253c3c1c6d
134 changed files with 11188 additions and 1871 deletions
--- a/innungsapp/apps/admin/app/page.tsx
+++ b/innungsapp/apps/admin/app/page.tsx
@@ -18,7 +18,7 @@ const FEATURES = [
  {
    num: '02',
    title: 'Push-News & Kommunikation',
-    desc: 'Statt ungeöffneter E-Mails: direkte Push-Benachrichtigungen mit extrem hoher Erreichbarkeit. Sofort, zuverlässig, DSGVO-konform.',
+    desc: 'Statt ungeöffneter E-Mails: direkte Push-Benachrichtigungen mit hoher Erreichbarkeit. Sofort, zuverlässig und datenschutzorientiert konfigurierbar.',
    tags: ['Push-Notifications', 'News-Feed', 'Direktkommunikation'],
  },
  {
@@ -36,16 +36,27 @@ const FEATURES = [
 ]

 const STATS = [
-  { num: '10 Std.', label: 'Zeitersparnis pro Woche' },
+  { num: 'Bis zu 10 Std.', label: 'Zeitersparnis je nach Prozess' },
  { num: 'Echtzeit', label: 'Kommunikation' },
-  { num: 'Cloud', label: 'Sicher & Überall' },
-  { num: '100 %', label: 'DSGVO-konform' },
+  { 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)

  useEffect(() => {
    setMounted(true);
@@ -53,8 +64,70 @@ export default function RootPage() {
    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);
@@ -78,7 +151,7 @@ export default function RootPage() {
          "price": "0",
          "priceCurrency": "EUR"
        },
-        "description": "Zettelwirtschaft war gestern. Reduzieren Sie den Verwaltungsaufwand Ihrer Innung um 10 Std/Woche. Die perfekte Handwerk Software inkl. CRM & App."
+        "description": "Cloudbasierte Verwaltungssoftware für Handwerksinnungen mit Mitgliederverwaltung, Kommunikation und Terminmanagement."
      },
      {
        "@type": "FAQPage",
@@ -96,7 +169,7 @@ export default function RootPage() {
            "name": "Ist die Plattform DSGVO-konform?",
            "acceptedAnswer": {
              "@type": "Answer",
-              "text": "Ja. 100% Hosting in Deutschland und streng nach DSGVO-Standards entwickelt."
+              "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."
            }
          },
          {
@@ -462,9 +535,90 @@ export default function RootPage() {
        .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;
@@ -498,9 +652,15 @@ export default function RootPage() {
              </button>

              <Link href="/login" className="nav-link">Login</Link>
-              <Link href="/login" className="btn-primary">
+              <a
+                href={CONTACT_WEBMAIL_HREF}
+                className="btn-primary"
+                onClick={() => handleContactCtaClick('nav')}
+                target="_blank"
+                rel="noreferrer"
+              >
                Team kontaktieren <ArrowRight size={13} />
-              </Link>
+              </a>
            </div>
          </div>
        </nav>
@@ -524,12 +684,38 @@ export default function RootPage() {
                  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' }}>
-                  <Link href="/login" className="btn-primary-lg" style={{ justifyContent: 'center' }}>
+                  <a
+                    href={CONTACT_WEBMAIL_HREF}
+                    className="btn-primary-lg"
+                    style={{ justifyContent: 'center' }}
+                    onClick={() => handleContactCtaClick('hero')}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                    Team kontaktieren <ArrowRight size={16} />
-                  </Link>
+                  </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>

@@ -558,6 +744,9 @@ export default function RootPage() {
                </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>


@@ -639,7 +828,7 @@ export default function RootPage() {
                    <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> 10 Stunden Zeitersparnis pro Woche</li>
+                    <li className="comp-item"><span className="comp-icon-green">✓</span> Bis zu 10 Stunden Zeitersparnis je nach Prozess</li>
                  </ul>
                </div>
              </div>
@@ -653,13 +842,13 @@ export default function RootPage() {
              <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 die führende cloudbasierte Verwaltungssoftware, die speziell auf die Bedürfnisse von <strong>Handwerksinnungen in Deutschland</strong> zugeschnitten ist. Mit einem tiefen Verständnis für die administrativen Herausforderungen des Handwerks bietet unsere Software eine sichere, DSGVO-konforme Umgebung zur zentralen Verwaltung von Mitgliedsdaten.
+                  <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>
-                  Im Durchschnitt reduzieren Innungen ihren administrativen Aufwand nach der Einführung um <strong>bis zu 10 Stunden pro Woche</strong>. Statt ineffizienter E-Mail-Verteiler nutzt die Plattform moderne Push-Technologie, welche für höchste Erreichbarkeit sorgt. Die Integration einer eigenen Lehrlingsbörse löst zudem aktiv das Problem des Nachwuchsmangels, indem sie Betriebe und junge Talente lokal vernetzt.
+                  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>
-                  Alle Serverstandorte befinden sich in Deutschland, wodurch höchste Datenschutzstandards garantiert werden. Egal ob Eventmanagement, Kommunikation oder Mitgliederverwaltung – die InnungsApp PRO bündelt alle essenziellen Funktionen in einer einzigen, intuitiven Oberfläche.
+                  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>
@@ -678,7 +867,7 @@ export default function RootPage() {
                },
                {
                  q: 'Ist die Plattform DSGVO-konform?',
-                  a: 'Ja, vollständig. Alle Daten werden ausschließlich auf zertifizierten Servern in Deutschland gespeichert. Wir schließen mit Ihnen einen Auftragsverarbeitungsvertrag (AVV) ab und haben die Software von Anfang an nach dem Prinzip "Privacy by Design" entwickelt. Kein Datentransfer in Drittländer.',
+                  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?',
@@ -694,7 +883,7 @@ export default function RootPage() {
                },
                {
                  q: 'Wie funktionieren Push-Benachrichtigungen?',
-                  a: 'Wenn Sie als Admin eine News veröffentlichen, erhalten alle aktiven Mitglieder sofort eine Push-Nachricht auf ihr Smartphone — auch wenn die App im Hintergrund läuft. Die Öffnungsrate liegt typischerweise bei über 80 %, verglichen mit unter 20 % bei E-Mail-Newslettern.',
+                  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' } : {}}>
@@ -725,10 +914,35 @@ export default function RootPage() {
                </h2>
              </div>
              <div className="cta-right">
-                <Link href="/login" className="btn-primary-lg">
+                <a
+                  href={CONTACT_WEBMAIL_HREF}
+                  className="btn-primary-lg"
+                  onClick={() => handleContactCtaClick('bottom')}
+                  target="_blank"
+                  rel="noreferrer"
+                >
                  Jetzt Team kontaktieren <ArrowUpRight size={18} />
-                </Link>
+                </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>
@@ -744,11 +958,40 @@ export default function RootPage() {
              © {new Date().getFullYear()} InnungsApp SaaS. Alle Rechte vorbehalten.
            </p>
            <div className="footer-links">
-              <Link href="#" className="footer-link">Impressum</Link>
-              <Link href="#" className="footer-link">Datenschutz</Link>
+              <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>
    </>
  )