feat(privat/CV): sync to latest upstream (cv-upstream/main, 30f9608b)

2026-07-07 15:20:55 +02:00
parent 8ac664d33d
commit a4efabbc60
417 changed files with 48564 additions and 712 deletions
@@ -0,0 +1,119 @@
+import React from 'react'
+import { useMeta } from '../hooks/useContent'
+import LogoMarquee from '../components/LogoMarquee'
+import TestimonialSlider from '../components/TestimonialSlider'
+import UpcomingEvents from '../components/UpcomingEvents'
+import StatsCube from '../components/StatsCube'
+import DotCloudIcon from '../components/DotCloudIcon'
+import PhotoBand from '../components/PhotoBand'
+import './Home.css'
+
+const PHOTO_BAND_IMAGES = [
+  '/images/workshop-1.jpg',
+  '/images/keynote-1.jpg',
+  '/images/workshop-2.jpg',
+  '/images/panel-1.jpg',
+  '/images/workshop-3.jpg',
+]
+
+export default function Home() {
+  const { profile, testimonials, logos } = useMeta()
+
+  return (
+    <main>
+      {/* Hero */}
+      <section className="hero">
+        <div className="app-container hero-content">
+          <img src="/images/andre-knie.png" alt="Dr. André Knie" className="hero-photo" />
+          <h1>
+            {profile?.name || 'Dr. André Knie'}
+          </h1>
+          <p className="hero-roles">
+            {profile?.roles?.join(' · ')}
+          </p>
+          <p className="hero-subtext">
+            {profile?.summary}
+          </p>
+          <div className="hero-actions">
+            <a href="/speaking" className="primary-button">Speaking anfragen</a>
+            <a href="/kontakt" className="secondary-button">Kontakt</a>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Cube */}
+      <StatsCube />
+
+      {/* Photo Band — full width, no text, just scrolling images */}
+      <PhotoBand images={PHOTO_BAND_IMAGES} />
+
+      {/* Positioning — Mein Ansatz */}
+      <section className="positioning-section">
+        <div className="app-container">
+          <div className="section-header">
+            <h2 className="section-title">Mein <span className="text-gradient">Ansatz</span></h2>
+          </div>
+          <div className="positioning-grid">
+            <div className="positioning-card glass-panel">
+              <DotCloudIcon shape="germany" size={120} />
+              <h3>Souveränität</h3>
+              <p>{profile?.positioning?.sovereignty}</p>
+            </div>
+            <div className="positioning-card glass-panel">
+              <DotCloudIcon shape="shield" size={120} />
+              <h3>Sicher von KI profitieren</h3>
+              <p>{profile?.positioning?.data_sovereignty}</p>
+            </div>
+            <div className="positioning-card glass-panel">
+              <DotCloudIcon shape="tools" size={120} />
+              <h3>Praxis</h3>
+              <p>{profile?.positioning?.practical}</p>
+            </div>
+            <div className="positioning-card glass-panel">
+              <DotCloudIcon shape="person" size={120} />
+              <h3>Mensch im Zentrum</h3>
+              <p>KI ist kein Selbstzweck, sondern unterstützt Menschen.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Audiences */}
+      {profile?.audiences && (
+        <section className="audiences-section">
+          <div className="app-container">
+            <div className="section-header">
+              <h2 className="section-title">Für wen ich <span className="text-gradient">arbeite</span></h2>
+            </div>
+            <div className="audiences-grid">
+              {profile.audiences.map((aud) => (
+                <div className="audience-card glass-panel" key={aud.id}>
+                  <h3>{aud.label}</h3>
+                  <p>{aud.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Logo Marquee — Kunden & Partner */}
+      <LogoMarquee
+        title="Kunden &"
+        titleAccent="Partner"
+        variant="light"
+        logos={logos?.light || []}
+      />
+      <LogoMarquee
+        variant="dark"
+        logos={logos?.dark || []}
+      />
+
+      {/* Testimonials */}
+      <TestimonialSlider testimonials={testimonials || []} />
+
+      {/* Upcoming Events */}
+      <UpcomingEvents />
+    </main>
+  )
+}