49 lines
3.0 KiB
React
49 lines
3.0 KiB
React
import React from 'react'
|
|
import { useContent, useMeta } from '../hooks/useContent'
|
|
import ServiceAccordion from '../components/ServiceAccordion'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function Consulting() {
|
|
const { items } = useContent('consulting', { pageSize: 10 })
|
|
const { services } = useMeta()
|
|
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Beratung" description="Beratung zu KI-Strategie, digitaler Souveränität und praktischer Transformation." url="/consulting" />
|
|
<div className="app-container">
|
|
<div className="section-header">
|
|
<h1 className="section-title"><span className="text-gradient">Leistungen</span></h1>
|
|
<p className="section-subtitle">Von der Strategie bis zur Umsetzung. Souverän, pragmatisch, evidenzbasiert.</p>
|
|
</div>
|
|
|
|
{/* Service Accordion */}
|
|
<ServiceAccordion services={services || []} />
|
|
|
|
{/* Concrete Examples */}
|
|
{items.length > 0 && (
|
|
<div style={{ marginTop: '80px' }}>
|
|
<div className="section-header">
|
|
<h2 className="section-title">Beispiele aus der <span className="text-gradient">Praxis</span></h2>
|
|
<p className="section-subtitle">Anonymisiert, aber konkret.</p>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px', maxWidth: '1000px', margin: '0 auto' }}>
|
|
{items.map(example => (
|
|
<div key={example.id || example.slug} className="glass-panel" style={{ padding: '32px', display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
|
|
{example.industry && <span style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '4px 10px', borderRadius: 'var(--radius-sm)', fontSize: '0.8rem' }}>{example.industry}</span>}
|
|
{example.organization_size && <span style={{ background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)', padding: '4px 10px', borderRadius: 'var(--radius-sm)', fontSize: '0.8rem' }}>{example.organization_size} MA</span>}
|
|
</div>
|
|
<h3 style={{ marginBottom: '12px', fontSize: '1.2rem' }}>{example.title}</h3>
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '8px' }}><strong style={{ color: 'var(--text-primary)' }}>Problem:</strong> {example.problem_domain}</p>
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '8px' }}><strong style={{ color: 'var(--text-primary)' }}>Ansatz:</strong> {example.approach}</p>
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginTop: 'auto' }}><strong style={{ color: 'var(--accent-color)' }}>Ergebnis:</strong> {example.outcomes}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|