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

init

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 12:10:24 +01:00
parent 0cc0db81ba
commit e92b8e14f3
21 changed files with 5790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/Home.tsx Normal file
View File

@@ -0,0 +1,145 @@
import { Link } from 'react-router-dom';
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 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 }} />
<div className="container" style={{ position: 'relative', zIndex: 1 }}>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div>
<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 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" 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" style={{ height: '400px', marginBottom: 0, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}>
[ High-Voltage Infrastructure ]
</div>
</div>
</div>
</section>
<section style={{ background: '#f8fafc' }}>
<div className="container">
<div style={{ marginBottom: '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>
</div>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2.5rem' }}>
{[
{ 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.' }
].map((item, i) => (
<div key={i} className="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>
))}
</div>
</div>
</section>
<section style={{ background: 'white' }}>
<div className="container">
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div className="img-placeholder" style={{ height: '400px', marginBottom: 0 }}>
[ Technical Drawing / CAD ]
</div>
<div>
<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" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
{[
'Energieversorger',
'Ingenieurbüros',
'Tiefbauunternehmen',
'Industrie',
'Projektierer EE',
'Planungsbüros'
].map((item, i) => (
<div key={i} 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)' }} />
{item}
</div>
))}
</div>
</div>
</div>
</div>
</section>
<section style={{ background: '#0f172a', color: 'white' }}>
<div className="container">
<div style={{ marginBottom: '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" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
{[
{ 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
key={i}
style={{ background: 'rgba(255,255,255,0.05)', padding: '2.5rem', border: '1px solid rgba(255,255,255,0.1)' }}
>
<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>
</div>
))}
</div>
</div>
</section>
<section style={{ background: 'white' }}>
<div className="container">
<div style={{ marginBottom: '5rem' }}>
<span className="badge">Werte</span>
<h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2>
</div>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
{[
{ 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} 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>
))}
</div>
</div>
</section>
<section style={{ background: 'var(--primary-color)', padding: '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' }}>
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p>
<Link to="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>
Jetzt Kontakt aufnehmen <ArrowRight size={18} />
</Link>
</div>
</section>
</div>
);
export default Home;