122 lines
4.0 KiB
React
122 lines
4.0 KiB
React
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 SEOHead from '../components/SEOHead'
|
|
import './Home.css'
|
|
|
|
const PHOTO_BAND_IMAGES = [
|
|
'/images/workshop-1.webp',
|
|
'/images/keynote-1.webp',
|
|
'/images/workshop-2.webp',
|
|
'/images/panel-1.webp',
|
|
'/images/workshop-3.webp',
|
|
]
|
|
|
|
export default function Home() {
|
|
const { profile, testimonials, logos } = useMeta()
|
|
|
|
return (
|
|
<main>
|
|
<SEOHead url="/" />
|
|
{/* Hero */}
|
|
<section className="hero">
|
|
<div className="app-container hero-content">
|
|
<img src="/images/andre-knie.webp" 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>
|
|
)
|
|
}
|