42 lines
2.1 KiB
React
42 lines
2.1 KiB
React
import React from 'react'
|
|
import { useContent, useMeta } from '../hooks/useContent'
|
|
import SpeakingAccordion from '../components/SpeakingAccordion'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function Speaking() {
|
|
const { items: allTalks } = useContent('talks', { visibility: 'all', pageSize: 100 })
|
|
const { speaking } = useMeta()
|
|
const sections = speaking?.sections || []
|
|
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Speaking" description="Keynotes, Workshops und Panels von Dr. André Knie zu KI, Transformation und Leadership." url="/speaking" />
|
|
<div className="app-container">
|
|
<div className="section-header">
|
|
<h1 className="section-title"><span className="text-gradient">Speaking</span></h1>
|
|
<p className="section-subtitle">Keynotes, Workshops und Panels zu KI, Transformation und Leadership.</p>
|
|
</div>
|
|
|
|
{/* Speaker Bio */}
|
|
{speaking?.bio && (
|
|
<div className="glass-panel" style={{ padding: '32px', maxWidth: '900px', margin: '0 auto 48px', display: 'flex', gap: '28px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
|
|
<img src="/images/andre-knie.webp" alt="Dr. André Knie" style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover', border: '2px solid rgba(var(--accent-color-rgb), 0.3)', flexShrink: 0 }} />
|
|
<div style={{ flex: 1, minWidth: '250px' }}>
|
|
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, margin: '0 0 16px' }}>{speaking.bio}</p>
|
|
{speaking.style && (
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
|
{speaking.style.map((s, i) => (
|
|
<span key={i} style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '6px 12px', borderRadius: 'var(--radius-pill)', fontSize: '0.8rem' }}>{s}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<SpeakingAccordion sections={sections} talks={allTalks} />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|