mmintel/mb-grid-solutions.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 13:58:01 +01:00
parent 9968feefb3
commit e573dfd9cc
13 changed files with 1348 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
src/pages/Home.tsx
View File

@@ -3,27 +3,61 @@ import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
const Home = () => (
<div className="home-page">
<section className="hero" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', background: 'white', position: 'relative', overflow: 'hidden', padding: '4rem 0' }}>
<div className="hero-bg" style={{ position: 'absolute', top: 0, right: 0, width: '50%', height: '100%', background: '#f1f5f9', clipPath: 'polygon(20% 0, 100% 0, 100% 100%, 0% 100%)', zIndex: 0 }} />
<section
className="hero"
style={{
minHeight: 'clamp(70vh, 80vh, 90vh)',
display: 'flex',
alignItems: 'center',
background: 'linear-gradient(to right, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.7) 100%), url("/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp")',
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative',
overflow: 'hidden',
padding: 'clamp(2rem, 6vw, 4rem) 0'
}}
>
<div className="container" style={{ position: 'relative', zIndex: 1 }}>
<div className="grid hero-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div className="hero-content">
<span className="badge">Engineering Excellence</span>
<h1 style={{ marginBottom: '1.5rem' }}>Spezialisierter Partner für Energiekabelprojekte</h1>
<p style={{ fontSize: '1.2rem', marginBottom: '2.5rem', color: 'var(--text-secondary)', lineHeight: 1.5, maxWidth: '600px' }}>
Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
</p>
<div className="hero-actions" style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
<Link to="/kontakt" className="cta-button">
Projekt anfragen <ArrowRight size={18} />
</Link>
<Link to="/ueber-uns" className="secondary-link" style={{ fontWeight: 700, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
Mehr erfahren <ArrowRight size={16} />
</Link>
</div>
</div>
<div className="img-placeholder hero-img" style={{ height: '400px', marginBottom: 0, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}>
[ High-Voltage Infrastructure ]
<div className="hero-content" style={{ maxWidth: '700px' }}>
<span className="badge">Engineering Excellence</span>
<h1 style={{ marginBottom: 'var(--spacing-lg)' }}>
Spezialisierter Partner für Energiekabelprojekte
</h1>
<p style={{
fontSize: 'clamp(1.0625rem, 2.5vw, 1.2rem)',
marginBottom: 'var(--spacing-2xl)',
color: 'var(--text-secondary)',
lineHeight: 1.6,
maxWidth: '600px'
}}>
Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
</p>
<div className="hero-actions" style={{
display: 'flex',
gap: 'var(--spacing-lg)',
alignItems: 'center',
flexWrap: 'wrap'
}}>
<Link to="/kontakt" className="cta-button" aria-label="Projekt anfragen">
Projekt anfragen <ArrowRight size={18} strokeWidth={2.5} />
</Link>
<Link
to="/ueber-uns"
className="secondary-link"
style={{
fontWeight: 700,
fontSize: '0.8rem',
textTransform: 'uppercase',
letterSpacing: '0.1em',
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
transition: 'all var(--transition-fast)'
}}
aria-label="Mehr über uns erfahren"
>
Mehr erfahren <ArrowRight size={16} strokeWidth={2.5} />
</Link>
</div>
</div>
</div>
@@ -31,21 +65,42 @@ const Home = () => (
<section style={{ background: '#f8fafc' }}>
<div className="container">
<div className="section-header" style={{ marginBottom: '5rem' }}>
<div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
<span className="badge">Portfolio</span>
<h2 style={{ border: 'none', padding: 0 }}>Unsere Leistungen</h2>
<p style={{ color: 'var(--text-secondary)', maxWidth: '600px' }}>Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.</p>
<p style={{
color: 'var(--text-secondary)',
maxWidth: '600px',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
lineHeight: 1.65
}}>
Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.
</p>
</div>
<div className="grid portfolio-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2.5rem' }}>
<div className="grid portfolio-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: 'var(--spacing-xl)'
}}>
{[
{ icon: <Zap size={32} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' },
{ icon: <Shield size={32} />, title: 'Projektbegleitung', desc: 'Professionelle Überwachung und Qualitätssicherung während der gesamten Ausführung.' },
{ icon: <BarChart3 size={32} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
{ icon: <Zap size={32} strokeWidth={2} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' },
{ icon: <Shield size={32} strokeWidth={2} />, title: 'Projektbegleitung', desc: 'Professionelle Überwachung und Qualitätssicherung während der gesamten Ausführung.' },
{ icon: <BarChart3 size={32} strokeWidth={2} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
].map((item, i) => (
<div key={i} className="card portfolio-card">
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}>{item.icon}</div>
<h3 style={{ marginBottom: '1rem' }}>{item.title}</h3>
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>{item.desc}</p>
<div style={{
color: 'var(--accent-green)',
marginBottom: 'var(--spacing-lg)'
}}>
{item.icon}
</div>
<h3 style={{ marginBottom: 'var(--spacing-md)' }}>{item.title}</h3>
<p style={{
color: 'var(--text-secondary)',
lineHeight: 1.7,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
}}>
{item.desc}
</p>
</div>
))}
</div>
@@ -54,15 +109,39 @@ const Home = () => (
<section style={{ background: 'white' }}>
<div className="container">
<div className="grid split-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div className="img-placeholder split-img" style={{ height: '400px', marginBottom: 0 }}>
[ Technical Drawing / CAD ]
</div>
<div className="grid split-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
alignItems: 'center',
gap: 'clamp(2rem, 6vw, 4rem)'
}}>
<img
src="/media/10432-DSC07539-Large.webp"
alt="Technical Engineering and Cable Infrastructure"
className="split-img"
style={{
width: '100%',
height: 'clamp(280px, 50vw, 400px)',
objectFit: 'cover',
marginBottom: 0,
borderRadius: '12px'
}}
loading="lazy"
/>
<div className="split-content">
<span className="badge">Expertise</span>
<h2>Anwendungen & Zielgruppen</h2>
<p style={{ marginBottom: '2.5rem', color: 'var(--text-secondary)', fontSize: '1.1rem' }}>Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.</p>
<div className="grid target-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
<p style={{
marginBottom: 'var(--spacing-2xl)',
color: 'var(--text-secondary)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
lineHeight: 1.65
}}>
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
</p>
<div className="grid target-grid" style={{
gridTemplateColumns: '1fr 1fr',
gap: 'var(--spacing-md)'
}}>
{[
'Energieversorger',
'Ingenieurbüros',
@@ -71,8 +150,19 @@ const Home = () => (
'Projektierer EE',
'Planungsbüros'
].map((item, i) => (
<div key={i} className="target-item" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 600, color: 'var(--primary-color)' }}>
<CheckCircle2 size={18} style={{ color: 'var(--accent-green)' }} />
<div
key={i}
className="target-item"
style={{
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
fontSize: 'clamp(0.875rem, 2vw, 0.95rem)',
fontWeight: 600,
color: 'var(--primary-color)'
}}
>
<CheckCircle2 size={18} strokeWidth={2.5} style={{ color: 'var(--accent-green)', flexShrink: 0 }} />
{item}
</div>
))}
@@ -82,26 +172,63 @@ const Home = () => (
</div>
</section>
<section style={{ background: '#0f172a', color: 'white' }}>
<section style={{
background: 'linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url("/media/drums/iStock-487538226 (1).jpg")',
backgroundSize: 'cover',
backgroundPosition: 'center',
color: 'white',
padding: 'clamp(4rem, 10vw, 6rem) 0'
}}>
<div className="container">
<div className="section-header" style={{ marginBottom: '5rem' }}>
<div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
<span className="badge" style={{ color: 'white', opacity: 0.6 }}>Expertise</span>
<h2 style={{ color: 'white', border: 'none', padding: 0 }}>Technische Spezifikationen</h2>
</div>
<div className="grid spec-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
<div className="grid spec-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: 'var(--spacing-xl)'
}}>
{[
{ label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y, NA2XS(FL)2Y, NA2X(F)KLD2Y', desc: 'Umfassende Expertise in der Spezifikation gängiger Hochspannungskabel.' },
{ label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für die 110-kV-Ebene und komplexe Mittelspannung.' },
{ label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Millikenleiter', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
].map((item, i) => (
<div
<div
key={i}
className="spec-card"
style={{ background: 'rgba(255,255,255,0.05)', padding: '2.5rem', border: '1px solid rgba(255,255,255,0.1)' }}
style={{
background: 'rgba(255,255,255,0.05)',
padding: 'var(--spacing-2xl)',
border: '1px solid rgba(255,255,255,0.1)',
borderRadius: '16px'
}}
>
<h4 style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--accent-green)', marginBottom: '1rem', letterSpacing: '0.2em' }}>{item.label}</h4>
<p style={{ fontWeight: 700, fontSize: '1.15rem', marginBottom: '1rem', color: 'white' }}>{item.value}</p>
<p style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6 }}>{item.desc}</p>
<h4 style={{
fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
textTransform: 'uppercase',
color: 'var(--accent-green)',
marginBottom: 'var(--spacing-md)',
letterSpacing: '0.2em',
fontWeight: 700
}}>
{item.label}
</h4>
<p style={{
fontWeight: 700,
fontSize: 'clamp(1rem, 2.5vw, 1.15rem)',
marginBottom: 'var(--spacing-md)',
color: 'white',
lineHeight: 1.4
}}>
{item.value}
</p>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'rgba(255,255,255,0.6)',
lineHeight: 1.7
}}>
{item.desc}
</p>
</div>
))}
</div>
@@ -110,33 +237,84 @@ const Home = () => (
<section style={{ background: 'white' }}>
<div className="container">
<div className="section-header" style={{ marginBottom: '5rem' }}>
<div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
<span className="badge">Werte</span>
<h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2>
</div>
<div className="grid principles-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
<div className="grid principles-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
gap: 'var(--spacing-2xl)'
}}>
{[
{ title: 'Exzellenz', desc: 'Höchste technische Präzision in jedem Detail. Wir suchen die optimale Lösung jenseits des Standards.' },
{ title: 'Nachhaltigkeit', desc: 'Zukunftssichere Lösungen für die Infrastruktur. Wir denken in Lebenszyklen und Zuverlässigkeit.' },
{ title: 'Transparenz', desc: 'Ehrliche Beratung auf Augenhöhe. Wir kommunizieren klar und herstellerneutral.' }
].map((item, i) => (
<div key={i} className="principle-item" style={{ borderLeft: '3px solid var(--accent-green)', paddingLeft: '2rem' }}>
<h3 style={{ marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '1.1rem' }}>{item.title}</h3>
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, fontSize: '1rem' }}>{item.desc}</p>
<div
key={i}
className="principle-item"
style={{
borderLeft: '4px solid var(--accent-green)',
paddingLeft: 'var(--spacing-xl)'
}}
>
<h3 style={{
marginBottom: 'var(--spacing-md)',
textTransform: 'uppercase',
letterSpacing: '0.1em',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
}}>
{item.title}
</h3>
<p style={{
color: 'var(--text-secondary)',
lineHeight: 1.75,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
}}>
{item.desc}
</p>
</div>
))}
</div>
</div>
</section>
<section className="cta-section" style={{ background: 'var(--primary-color)', padding: '6rem 0', position: 'relative', overflow: 'hidden' }}>
<section
className="cta-section"
style={{
background: 'var(--primary-color)',
padding: 'clamp(3rem, 8vw, 6rem) 0',
position: 'relative',
overflow: 'hidden'
}}
>
<div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
<h2 className="no-underline" style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem', fontSize: 'clamp(1.8rem, 5vw, 2.5rem)' }}>Bereit für Ihr nächstes Projekt?</h2>
<p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: '3rem', fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 3rem' }}>
<h2
className="no-underline"
style={{
color: 'white',
border: 'none',
padding: 0,
marginBottom: 'var(--spacing-lg)',
fontSize: 'clamp(1.5rem, 6vw, 2.5rem)',
lineHeight: 1.2,
position: 'relative'
}}
>
Bereit für Ihr nächstes Projekt?
</h2>
<p style={{
color: 'rgba(255,255,255,0.85)',
marginBottom: 'var(--spacing-2xl)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
maxWidth: '700px',
margin: '0 auto var(--spacing-2xl)',
lineHeight: 1.65
}}>
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p>
<Link to="/kontakt" className="cta-button">
Jetzt Kontakt aufnehmen <ArrowRight size={18} />
<Link to="/kontakt" className="cta-button" aria-label="Jetzt Kontakt aufnehmen">
Jetzt Kontakt aufnehmen <ArrowRight size={18} strokeWidth={2.5} />
</Link>
</div>
</section>