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

4
context/about.md
View File

@@ -6,7 +6,7 @@ Michael Bodemer
„Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“ „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“
Michael Bodemer ist unser Mann, wenn es kompliziert wird – und das ist bei Kabelnetzen oft der Fall. Mit seinem scharfen Blick und einem Händchen für praktikable Lösungen ist er eine unserer zentralen Säulen. Michael denkt nicht nur an Details, er treibt Projekte voran – sei es in der Planung, im Kundengespräch oder bei der Auswahl der besten Kabel für jedes Vorhaben. Michael Bodemer ist unser Mann, wenn es kompliziert wird – und das ist bei Kabelnetzen oft der Fall. Mit seinem scharfen Blick und einem Händchen für praktikable Lösungen ist er eine unserer zentralen Säulen. Michael denkt nicht nur an Details, er treibt Projekte voran – sei es in der Planung, im Kundengespräch oder bei der Auswahl der besten Kabel für jedes Vorhaben.
Michael's LinkedIn [Michael's LinkedIn](https://www.linkedin.com/in/michael-bodemer-33b493122/)
Verbindungen, die Geschichte schreiben Verbindungen, die Geschichte schreiben
Bei KLZ vereinen wir Tradition und Innovation zu zuverlässigen Energielösungen. Unsere Wurzeln reichen tief in die Geschichte der Kabeltechnologie zurück – mit jeder Menge praktischer Erfahrung und einem Blick für zukunftsweisende Entwicklungen. Bei KLZ vereinen wir Tradition und Innovation zu zuverlässigen Energielösungen. Unsere Wurzeln reichen tief in die Geschichte der Kabeltechnologie zurück – mit jeder Menge praktischer Erfahrung und einem Blick für zukunftsweisende Entwicklungen.
@@ -16,7 +16,7 @@ Klaus Mintel
„Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“ „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“
Klaus ist der Fels in der Brandung – selbst wenn das Kabelchaos überhandnimmt. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er dafür, dass alles glatt läuft. Er denkt nicht nur in Lösungen, sondern bringt auch Humor und den nötigen Weitblick mit, um selbst komplexe Themen locker auf den Punkt zu bringen. Klaus ist der Fels in der Brandung – selbst wenn das Kabelchaos überhandnimmt. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er dafür, dass alles glatt läuft. Er denkt nicht nur in Lösungen, sondern bringt auch Humor und den nötigen Weitblick mit, um selbst komplexe Themen locker auf den Punkt zu bringen.
Klaus' LinkedIn [Klaus' LinkedIn](https://www.linkedin.com/in/klaus-mintel-b80a8b193/)
Unser Manifest Unser Manifest
1 1
Kompetenz Kompetenz

53
index.html
View File

@@ -3,13 +3,56 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/assets/logo.png" /> <link rel="icon" type="image/png" href="/assets/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<meta name="theme-color" content="#0E2A47" /> <!-- Mobile Optimization -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <meta name="theme-color" content="#0E2A47" media="(prefers-color-scheme: light)" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <meta name="theme-color" content="#0E2A47" media="(prefers-color-scheme: dark)" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="MB Grid Solutions" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=yes" />
<meta name="format-detection" content="email=yes" />
<!-- Performance -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- SEO -->
<title>MB Grid Solutions | Energiekabelprojekte bis 110 kV</title> <title>MB Grid Solutions | Energiekabelprojekte bis 110 kV</title>
<meta name="description" content="Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung." /> <meta name="description" content="Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung." />
<meta name="keywords" content="Energiekabel, Hochspannung, 110 kV, Kabelinfrastruktur, Projektbegleitung, technische Beratung" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="MB Grid Solutions | Energiekabelprojekte bis 110 kV" />
<meta property="og:description" content="Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung." />
<meta property="og:site_name" content="MB Grid Solutions" />
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="/assets/logo.png" />
<style>
/* Critical CSS for initial render */
#root {
min-height: 100vh;
min-height: -webkit-fill-available;
}
/* Prevent FOUC */
body {
opacity: 0;
animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/media/10432-DSC07539-Large.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
public/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

BIN
public/media/drums/iStock-487538226 (1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/media/profile/klaus-mintel.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/media/profile/mb-grid-solutions-team.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/media/profile/michael-bodemer.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

140
src/components/Layout.tsx
View File

@@ -10,10 +10,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
const handleScroll = () => { const handleScroll = () => {
setShowScrollTop(window.scrollY > 400); setShowScrollTop(window.scrollY > 400);
}; };
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll); const throttledScroll = () => {
window.requestAnimationFrame(handleScroll);
};
window.addEventListener('scroll', throttledScroll, { passive: true });
return () => window.removeEventListener('scroll', throttledScroll);
}, []); }, []);
useEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);
const scrollToTop = () => { const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });
}; };
@@ -22,10 +31,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<div className="layout"> <div className="layout">
<header> <header>
<div className="container"> <div className="container">
<Link to="/" style={{ display: 'flex', alignItems: 'center' }}> <Link
<img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} /> to="/"
style={{ display: 'flex', alignItems: 'center' }}
aria-label="MB Grid Solutions - Zur Startseite"
>
<img
src="/assets/logo.png"
alt="MB Grid Solutions"
style={{ height: '80px' }}
loading="eager"
/>
</Link> </Link>
<nav style={{ display: 'flex', gap: '2rem' }}> <nav style={{ display: 'flex', gap: '2rem' }} aria-label="Hauptnavigation">
<NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}> <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
Startseite Startseite
</NavLink> </NavLink>
@@ -43,58 +61,108 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{children} {children}
</main> </main>
{showScrollTop && ( <button
<button onClick={scrollToTop}
onClick={scrollToTop} className={`scroll-top-btn ${showScrollTop ? 'visible' : ''}`}
className="scroll-top-btn" aria-label="Nach oben scrollen"
aria-label="Scroll to top" aria-hidden={!showScrollTop}
> tabIndex={showScrollTop ? 0 : -1}
<ArrowUp size={24} /> >
</button> <ArrowUp size={24} strokeWidth={2.5} />
)} </button>
<nav className="mobile-nav"> <nav className="mobile-nav" aria-label="Mobile Navigation">
<NavLink to="/" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}> <NavLink
<Home size={20} /> to="/"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Startseite"
>
<Home size={22} strokeWidth={2} />
<span>Start</span> <span>Start</span>
</NavLink> </NavLink>
<NavLink to="/ueber-uns" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}> <NavLink
<Info size={20} /> to="/ueber-uns"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Über uns"
>
<Info size={22} strokeWidth={2} />
<span>Über uns</span> <span>Über uns</span>
</NavLink> </NavLink>
<NavLink to="/kontakt" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}> <NavLink
<Mail size={20} /> to="/kontakt"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Kontakt"
>
<Mail size={22} strokeWidth={2} />
<span>Kontakt</span> <span>Kontakt</span>
</NavLink> </NavLink>
</nav> </nav>
<footer style={{ borderTop: '1px solid var(--secondary-bg)', padding: '4rem 0', marginTop: '4rem', background: 'white' }}> <footer style={{
borderTop: '1px solid var(--secondary-bg)',
padding: 'clamp(2rem, 4vw, 4rem) 0',
marginTop: 'clamp(2rem, 4vw, 4rem)',
background: 'white'
}}>
<div className="container"> <div className="container">
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', marginBottom: '3rem' }}> <div className="grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
marginBottom: 'clamp(1.5rem, 3vw, 3rem)'
}}>
<div> <div>
<img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '80px', marginBottom: '1.5rem', filter: 'grayscale(1)' }} /> <img
<p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}> src="/assets/logo.png"
alt="MB Grid Solutions"
style={{
height: 'clamp(60px, 10vw, 80px)',
marginBottom: 'var(--spacing-lg)',
filter: 'grayscale(1)'
}}
loading="lazy"
/>
<p style={{
color: 'var(--text-secondary)',
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
lineHeight: 1.6
}}>
Ihr Partner für Energiekabelprojekte bis 110 kV. Ihr Partner für Energiekabelprojekte bis 110 kV.
</p> </p>
</div> </div>
<div> <div>
<h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Navigation</h4> <h4 style={{
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> fontSize: 'clamp(0.9rem, 2vw, 1rem)',
<Link to="/">Startseite</Link> marginBottom: 'var(--spacing-md)',
<Link to="/ueber-uns">Über uns</Link> fontWeight: 600
<Link to="/kontakt">Kontakt</Link> }}>Navigation</h4>
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.625rem' }} aria-label="Footer Navigation">
<Link to="/" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Startseite</Link>
<Link to="/ueber-uns" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Über uns</Link>
<Link to="/kontakt" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Kontakt</Link>
</nav> </nav>
</div> </div>
<div> <div>
<h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Rechtliches</h4> <h4 style={{
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> fontSize: 'clamp(0.9rem, 2vw, 1rem)',
<Link to="/impressum">Impressum</Link> marginBottom: 'var(--spacing-md)',
<Link to="/datenschutz">Datenschutz</Link> fontWeight: 600
<Link to="/agb">AGB</Link> }}>Rechtliches</h4>
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.625rem' }} aria-label="Legal Navigation">
<Link to="/impressum" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Impressum</Link>
<Link to="/datenschutz" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Datenschutz</Link>
<Link to="/agb" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>AGB</Link>
</nav> </nav>
</div> </div>
</div> </div>
<div style={{ borderTop: '1px solid var(--secondary-bg)', paddingTop: '2rem', display: 'flex', justifyContent: 'space-between', color: 'var(--text-secondary)', fontSize: '0.85rem' }}> <div style={{
borderTop: '1px solid var(--secondary-bg)',
paddingTop: 'var(--spacing-xl)',
display: 'flex',
justifyContent: 'space-between',
color: 'var(--text-secondary)',
fontSize: 'clamp(0.75rem, 2vw, 0.85rem)',
gap: 'var(--spacing-md)',
flexWrap: 'wrap'
}}>
<div>&copy; {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.</div> <div>&copy; {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.</div>
<div>Made with precision.</div> <div>Made with precision.</div>
</div> </div>

472
src/index.css
View File

@@ -5,18 +5,29 @@
--text-secondary: #6B7280; --text-secondary: #6B7280;
--text-primary: #1F2933; --text-primary: #1F2933;
--accent-green: #2FA66A; --accent-green: #2FA66A;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--transition-fast: 0.2s ease; --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--header-height: 80px; --header-height: 80px;
--bottom-nav-height: 0px; --bottom-nav-height: 0px;
--safe-area-bottom: env(safe-area-inset-bottom); --safe-area-bottom: env(safe-area-inset-bottom);
--safe-area-top: env(safe-area-inset-top);
--safe-area-left: env(safe-area-inset-left);
--safe-area-right: env(safe-area-inset-right);
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(47, 166, 106, 0.1);
touch-action: manipulation; touch-action: manipulation;
} }
@@ -24,6 +35,9 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
body { body {
@@ -35,54 +49,88 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1;
font-kerning: normal;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--primary-color); color: var(--primary-color);
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.15;
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
letter-spacing: -0.02em; letter-spacing: -0.02em;
text-wrap: balance;
}
h1 {
font-size: clamp(2rem, 8vw, 3.5rem);
hyphens: auto;
font-weight: 800;
letter-spacing: -0.03em;
} }
h1 { font-size: clamp(2rem, 8vw, 3.5rem); hyphens: auto; }
h1.no-underline::after, h1.no-underline::after,
h2.no-underline::after { h2.no-underline::after,
.no-underline::after {
display: none !important; display: none !important;
} }
h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); position: relative; display: block; margin-bottom: 2rem; }
h2 {
font-size: clamp(1.5rem, 6vw, 2.5rem);
position: relative;
display: block;
margin-bottom: var(--spacing-xl);
font-weight: 700;
}
h2:not(.no-underline)::after { h2:not(.no-underline)::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -10px; bottom: -12px;
left: 0; left: 0;
width: 40px; width: 48px;
height: 3px; height: 4px;
background: var(--accent-green); background: var(--accent-green);
border-radius: 2px;
} }
h3 { font-size: 1.4rem; letter-spacing: -0.01em; } h3 {
font-size: clamp(1.2rem, 4vw, 1.4rem);
letter-spacing: -0.01em;
font-weight: 600;
}
h4 {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.005em;
}
a { a {
color: var(--primary-color); color: var(--primary-color);
text-decoration: none; text-decoration: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
-webkit-touch-callout: default;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem; padding: 0 var(--spacing-lg);
padding-left: max(var(--spacing-lg), var(--safe-area-left));
padding-right: max(var(--spacing-lg), var(--safe-area-right));
} }
section { section {
padding: 6rem 0; padding: clamp(3rem, 8vw, 6rem) 0;
} }
.grid { .grid {
display: grid; display: grid;
gap: 2.5rem; gap: var(--spacing-xl);
} }
.cta-button { .cta-button {
@@ -100,12 +148,22 @@ section {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
font-size: 0.8rem; font-size: 0.8rem;
border-radius: 4px; border-radius: 8px;
min-height: 48px;
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
} }
.cta-button:hover { .cta-button:hover {
background-color: var(--text-primary); background-color: var(--text-primary);
color: white; color: white;
transform: translateY(-1px);
}
.cta-button:active {
transform: translateY(0);
} }
input, textarea { input, textarea {
@@ -114,27 +172,38 @@ input, textarea {
border: 1px solid var(--secondary-bg); border: 1px solid var(--secondary-bg);
background: white; background: white;
font-family: inherit; font-family: inherit;
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
transition: all var(--transition-fast); transition: all var(--transition-fast);
border-radius: 4px; border-radius: 12px;
font-size: 16px; font-size: 16px;
-webkit-appearance: none;
appearance: none;
min-height: 48px;
} }
input:focus, textarea:focus { input:focus, textarea:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(47, 166, 106, 0.1);
}
textarea {
resize: vertical;
min-height: 120px;
} }
.card { .card {
background: white; background: white;
padding: 2.5rem; padding: var(--spacing-xl);
border: 1px solid var(--secondary-bg); border: 1px solid var(--secondary-bg);
transition: all var(--transition-fast); transition: all var(--transition-smooth);
border-radius: 8px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
} }
.card:hover { .card:hover {
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
} }
.img-placeholder { .img-placeholder {
@@ -152,6 +221,10 @@ input:focus, textarea:focus {
border: 1px solid var(--secondary-bg); border: 1px solid var(--secondary-bg);
border-radius: 8px; border-radius: 8px;
content-visibility: auto; content-visibility: auto;
padding: var(--spacing-md);
text-align: center;
word-break: break-word;
overflow: hidden;
} }
.nav-link { .nav-link {
@@ -182,8 +255,10 @@ header {
top: 0; top: 0;
z-index: 100; z-index: 100;
background: rgba(248, 249, 250, 0.95); background: rgba(248, 249, 250, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--secondary-bg); border-bottom: 1px solid var(--secondary-bg);
padding-top: var(--safe-area-top);
} }
header .container { header .container {
@@ -201,8 +276,8 @@ header .container {
position: fixed; position: fixed;
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px); bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px);
right: 20px; right: 20px;
width: 50px; width: 56px;
height: 50px; height: 56px;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
border: none; border: none;
@@ -212,40 +287,67 @@ header .container {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
z-index: 900; z-index: 900;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 8px 24px rgba(14, 42, 71, 0.2);
transition: all 0.3s ease; transition: all var(--transition-smooth);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
} }
.scroll-top-btn:hover { .scroll-top-btn:hover {
transform: translateY(-5px); transform: translateY(-4px);
background: var(--accent-green); background: var(--accent-green);
box-shadow: 0 12px 32px rgba(47, 166, 106, 0.3);
}
.scroll-top-btn:active {
transform: translateY(-2px);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.scroll-top-btn { .scroll-top-btn {
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px); bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
right: 15px; right: 16px;
width: 44px; width: 48px;
height: 44px; height: 48px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
:root { :root {
--header-height: 60px; --header-height: 64px;
--bottom-nav-height: 70px; --bottom-nav-height: 72px;
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.25rem;
--spacing-xl: 2rem;
--spacing-2xl: 2.5rem;
--spacing-3xl: 3rem;
} }
section { section {
padding: 3rem 0; padding: clamp(2.5rem, 6vw, 3.5rem) 0;
} }
.grid { .grid {
gap: 1.5rem; gap: var(--spacing-lg);
}
.container {
padding: 0 var(--spacing-md);
padding-left: max(var(--spacing-md), var(--safe-area-left));
padding-right: max(var(--spacing-md), var(--safe-area-right));
} }
header .container { header .container {
padding: 0 1rem; padding: 0 var(--spacing-md);
justify-content: center; justify-content: center;
} }
@@ -254,7 +356,7 @@ header .container {
} }
header img { header img {
height: 40px !important; height: 52px !important;
} }
.mobile-nav { .mobile-nav {
@@ -264,33 +366,39 @@ header .container {
left: 0; left: 0;
width: 100%; width: 100%;
height: calc(var(--bottom-nav-height) + var(--safe-area-bottom)); height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
background: rgba(255, 255, 255, 0.94); background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(20px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(24px);
border-top: 1px solid rgba(0,0,0,0.05); border-top: 0.5px solid rgba(0, 0, 0, 0.08);
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: flex-start;
z-index: 1000; z-index: 1000;
padding-bottom: var(--safe-area-bottom); padding-top: 8px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.03); padding-bottom: max(8px, var(--safe-area-bottom));
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04);
} }
.mobile-nav-link { .mobile-nav-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
gap: 6px; gap: 4px;
color: #9ca3af; color: #9ca3af;
font-size: 0.6rem; font-size: 0.625rem;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.05em;
flex: 1; flex: 1;
height: 100%; padding: 8px 4px;
min-width: 44px; min-width: 64px;
min-height: 44px; min-height: 56px;
transition: color 0.2s ease; transition: all var(--transition-fast);
position: relative;
}
.mobile-nav-link svg {
transition: all var(--transition-fast);
} }
.mobile-nav-link.active { .mobile-nav-link.active {
@@ -299,26 +407,34 @@ header .container {
.mobile-nav-link.active svg { .mobile-nav-link.active svg {
color: var(--accent-green); color: var(--accent-green);
transform: scale(1.1);
}
.mobile-nav-link:active {
transform: scale(0.95);
} }
main { main {
padding-bottom: var(--bottom-nav-height); padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
} }
.cta-button { .cta-button {
width: 100%; width: 100%;
padding: 1.1rem; padding: 1.125rem 1.5rem;
font-size: 0.9rem; font-size: 0.875rem;
border-radius: 12px; border-radius: 14px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 12px rgba(14, 42, 71, 0.12);
font-weight: 700;
letter-spacing: 0.08em;
} }
.cta-button:active { .cta-button:active {
transform: scale(0.98); transform: scale(0.97);
} }
.hero { .hero {
padding: 2rem 0 !important; padding: 0 !important;
min-height: auto !important;
} }
.hero-bg { .hero-bg {
@@ -327,26 +443,27 @@ header .container {
.hero-grid { .hero-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 2rem !important; gap: 0 !important;
} }
.hero-content { .hero-content {
background: #f1f5f9; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
padding: 2rem 1.5rem; padding: var(--spacing-2xl) var(--spacing-lg);
border-radius: 12px;
text-align: center; text-align: center;
order: 2;
} }
.hero-content h1 { .hero-content h1 {
font-size: clamp(2rem, 10vw, 2.8rem); font-size: clamp(1.875rem, 9vw, 2.5rem);
line-height: 1.1; line-height: 1.15;
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
letter-spacing: -0.03em;
} }
.hero-content p { .hero-content p {
font-size: 1.15rem !important; font-size: 1.0625rem !important;
line-height: 1.5; line-height: 1.6;
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
color: #4b5563; color: #4b5563;
} }
@@ -354,31 +471,42 @@ header .container {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: var(--spacing-md) !important;
} }
.hero-actions .secondary-link { .hero-actions .secondary-link {
padding: 1rem; padding: var(--spacing-md);
width: 100%; width: 100%;
justify-content: center; justify-content: center;
min-height: 48px;
display: flex;
align-items: center;
} }
.hero-img { .hero-img {
display: none; display: block !important;
width: 100vw !important;
margin-left: calc(-1 * var(--spacing-md)) !important;
margin-right: calc(-1 * var(--spacing-md)) !important;
border-radius: 0 !important;
order: 1;
height: 50vh !important;
max-height: 400px !important;
} }
.section-header { .section-header {
text-align: center; text-align: center;
margin-bottom: 4rem !important; margin-bottom: var(--spacing-3xl) !important;
padding: 0 1rem; padding: 0 var(--spacing-sm);
} }
.section-header h2 { .section-header h2 {
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
} }
.section-header p { .section-header p {
font-size: 1.1rem; font-size: 1.0625rem;
line-height: 1.6; line-height: 1.65;
margin: 0 auto; margin: 0 auto;
} }
@@ -392,48 +520,64 @@ header .container {
} }
.portfolio-card { .portfolio-card {
padding: 2rem 1.5rem; padding: var(--spacing-xl) var(--spacing-lg);
text-align: center; text-align: center;
} }
.split-grid { .split-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 2rem !important; gap: 0 !important;
} }
.split-img { .split-img {
height: 250px !important; width: 100vw !important;
margin-left: calc(-1 * var(--spacing-md)) !important;
margin-right: calc(-1 * var(--spacing-md)) !important;
height: 50vh !important;
max-height: 350px !important;
border-radius: 0 !important;
order: 1;
} }
.split-content { .split-content {
text-align: center; text-align: center;
padding: 0 1rem; padding: var(--spacing-2xl) var(--spacing-md);
order: 2;
} }
.split-content h2 { .split-content h2 {
font-size: 1.8rem; font-size: clamp(1.5rem, 7vw, 1.875rem);
} }
.split-content p { .split-content p {
font-size: 1.1rem; font-size: 1.0625rem;
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
line-height: 1.65;
} }
.target-grid { .target-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
text-align: left; text-align: left;
max-width: 300px; max-width: 100%;
margin: 0 auto; margin: 0;
gap: 1rem !important; gap: var(--spacing-sm) !important;
} }
.target-item { .target-item {
padding: 1rem; padding: var(--spacing-md) var(--spacing-lg);
background: white; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(0,0,0,0.05); border: 1px solid rgba(47, 166, 106, 0.15);
border-left: 3px solid var(--accent-green);
border-radius: 12px; border-radius: 12px;
width: 100%; width: 100%;
box-shadow: 0 2px 4px rgba(0,0,0,0.02); box-shadow: 0 2px 8px rgba(0,0,0,0.03);
transition: all var(--transition-smooth);
}
.target-item:active {
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(47, 166, 106, 0.15);
border-left-width: 4px;
} }
.spec-grid { .spec-grid {
@@ -441,47 +585,58 @@ header .container {
} }
.spec-card { .spec-card {
padding: 2.5rem 1.5rem !important; padding: var(--spacing-2xl) var(--spacing-lg) !important;
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
background: rgba(255,255,255,0.03) !important; background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important;
} }
.principles-grid { .principles-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: var(--spacing-lg) !important;
} }
.principle-item { .principle-item {
text-align: center; text-align: left;
border-left: none !important; border-left: 4px solid var(--accent-green) !important;
border-top: 4px solid var(--accent-green); border-top: none !important;
padding: 2.5rem 1.5rem 1.5rem 1.5rem !important; padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--spacing-lg) !important;
background: white; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 0 0 20px 20px; border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.03); box-shadow: 0 2px 12px rgba(0,0,0,0.04);
transition: all var(--transition-smooth);
}
.principle-item:active {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
} }
.cta-section { .cta-section {
padding: 4rem 0 !important; padding: var(--spacing-3xl) 0 !important;
} }
.cta-section h2 { .cta-section h2 {
font-size: clamp(1.5rem, 8vw, 2rem) !important; font-size: clamp(1.5rem, 8vw, 2rem) !important;
line-height: 1.2;
} }
.cta-section p { .cta-section p {
font-size: 1.1rem !important; font-size: 1.0625rem !important;
line-height: 1.65;
} }
footer { footer {
text-align: center; text-align: center;
padding-bottom: 2rem !important; padding: var(--spacing-lg) 0 var(--spacing-xs) 0 !important;
margin-top: var(--spacing-lg) !important;
} }
footer .grid { footer .grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 3rem !important; gap: var(--spacing-md) !important;
margin-bottom: var(--spacing-sm) !important;
} }
footer .grid div { footer .grid div {
@@ -490,40 +645,76 @@ header .container {
align-items: center; align-items: center;
} }
footer .grid div h4 {
font-size: 0.875rem !important;
margin-bottom: 0.5rem !important;
}
footer .grid div nav {
gap: 0.375rem !important;
}
footer .grid div nav a {
font-size: 0.8125rem !important;
}
footer .grid div img {
height: 56px !important;
margin-bottom: var(--spacing-sm) !important;
}
footer .grid div p {
font-size: 0.8125rem !important;
}
footer .container > div:last-child { footer .container > div:last-child {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.375rem;
text-align: center; text-align: center;
padding-top: var(--spacing-sm) !important;
font-size: 0.75rem !important;
} }
.card { .card {
padding: 2rem 1.5rem; padding: var(--spacing-xl) var(--spacing-lg);
border-radius: 16px; border-radius: 18px;
border: 1px solid rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
} }
.portfolio-card { .portfolio-card {
padding: 2.5rem 1.5rem; padding: var(--spacing-2xl) var(--spacing-lg);
text-align: center; text-align: center;
} }
.about-hero-grid { .about-hero-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 3rem !important; gap: 0 !important;
text-align: center; text-align: center;
} }
.about-hero-grid > div:first-child {
order: 2;
padding: var(--spacing-2xl) var(--spacing-md);
}
.about-hero-grid h1 { .about-hero-grid h1 {
font-size: 2.5rem; font-size: clamp(2rem, 9vw, 2.5rem);
} }
.about-hero-grid p { .about-hero-grid p {
font-size: 1.1rem; font-size: 1.0625rem;
line-height: 1.65;
} }
.about-hero-img { .about-hero-img {
height: 300px !important; width: 100vw !important;
margin-left: calc(-1 * var(--spacing-md)) !important;
margin-right: calc(-1 * var(--spacing-md)) !important;
height: 50vh !important;
max-height: 400px !important;
border-radius: 0 !important;
order: 1;
} }
.team-grid { .team-grid {
@@ -534,27 +725,28 @@ header .container {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 1rem !important; gap: var(--spacing-md) !important;
} }
.manifest-grid { .manifest-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 2rem !important; gap: var(--spacing-lg) !important;
} }
.manifest-item { .manifest-item {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 2rem 1.5rem; padding: var(--spacing-xl) var(--spacing-lg);
background: white; background: white;
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04);
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
} }
.contact-grid { .contact-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 3rem !important; gap: var(--spacing-2xl) !important;
} }
.contact-form-grid { .contact-form-grid {
@@ -566,36 +758,52 @@ header .container {
align-items: center; align-items: center;
text-align: center; text-align: center;
background: white; background: white;
padding: 2rem 1.5rem; padding: var(--spacing-xl) var(--spacing-lg);
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 4px 12px rgba(0,0,0,0.02); box-shadow: 0 4px 16px rgba(0,0,0,0.03);
transition: all var(--transition-fast);
}
.contact-info-item:active {
transform: scale(0.98);
} }
.badge { .badge {
font-size: 0.7rem; font-size: 0.6875rem;
letter-spacing: 0.1em; letter-spacing: 0.08em;
font-weight: 700;
} }
h3 { h3 {
font-size: 1.25rem; font-size: clamp(1.125rem, 4vw, 1.25rem);
} }
.legal-content { .legal-content {
padding: 1.5rem; padding: var(--spacing-lg);
background: white; background: white;
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 4px 12px rgba(0,0,0,0.02); box-shadow: 0 4px 16px rgba(0,0,0,0.03);
} }
.legal-content h2 { .legal-content h2 {
font-size: 1.4rem; font-size: clamp(1.25rem, 5vw, 1.5rem);
margin-top: 2rem; margin-top: var(--spacing-xl);
} }
.legal-content p { .legal-content p {
font-size: 1rem; font-size: 1rem;
line-height: 1.7; line-height: 1.75;
}
.legal-content ul, .legal-content ol {
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.legal-content li {
margin-bottom: var(--spacing-xs);
line-height: 1.75;
} }
} }

413
src/pages/About.tsx
View File

@@ -1,65 +1,179 @@
import { motion } from 'framer-motion'; import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck, Linkedin } from 'lucide-react';
import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck } from 'lucide-react';
const About = () => ( const About = () => (
<div> <div>
<section style={{ background: 'white' }}> <section style={{
background: 'linear-gradient(to right, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.7) 100%), url("/media/profile/mb-grid-solutions-team.webp")',
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: 'clamp(60vh, 70vh, 80vh)',
display: 'flex',
alignItems: 'center'
}}>
<div className="container"> <div className="container">
<div className="grid about-hero-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}> <div className="about-hero-content" style={{ maxWidth: '700px' }}>
<div> <h1 className="no-underline">Über uns</h1>
<h1 className="no-underline">Über uns</h1> <p style={{
<p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}> fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten. color: 'var(--text-secondary)',
</p> marginBottom: 'var(--spacing-xl)',
<p style={{ marginBottom: '1.5rem' }}> lineHeight: 1.6
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse, der mit jahrzehntelanger Erfahrung und einem klaren Blick für zukunftsweisende Entwicklungen komplexe Projekte sicher zum Ziel führt. }}>
</p> Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
<p> </p>
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV und darüber hinaus zu realisieren. <p style={{
</p> marginBottom: 'var(--spacing-lg)',
</div> lineHeight: 1.7,
<div className="img-placeholder about-hero-img" style={{ height: '500px', marginBottom: 0 }}> fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
[ Engineering Excellence Visualization ] }}>
</div> MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse, der mit jahrzehntelanger Erfahrung und einem klaren Blick für zukunftsweisende Entwicklungen komplexe Projekte sicher zum Ziel führt.
</p>
<p style={{
lineHeight: 1.7,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
}}>
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV und darüber hinaus zu realisieren.
</p>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<div className="container"> <div className="container">
<div style={{ textAlign: 'center', marginBottom: '4rem' }}> <div style={{
textAlign: 'center',
marginBottom: 'clamp(3rem, 6vw, 4rem)'
}}>
<h2 className="no-underline">Die Köpfe hinter MB Grid Solution</h2> <h2 className="no-underline">Die Köpfe hinter MB Grid Solution</h2>
<p style={{ color: 'var(--text-secondary)' }}>Expertise, die Energie zum Laufen bringt.</p> <p style={{
color: 'var(--text-secondary)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
}}>
Expertise, die Energie zum Laufen bringt.
</p>
</div> </div>
<div className="grid team-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}> <div className="grid team-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
gap: 'var(--spacing-xl)'
}}>
<div className="card"> <div className="card">
<div className="team-card-header" style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}> <div className="team-card-header" style={{
<div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div> display: 'flex',
gap: 'var(--spacing-xl)',
marginBottom: 'var(--spacing-lg)'
}}>
<img
src="/media/profile/michael-bodemer.webp"
alt="Michael Bodemer - Geschäftsführung"
style={{
width: '120px',
height: '120px',
objectFit: 'cover',
flexShrink: 0,
borderRadius: '12px'
}}
loading="lazy"
/>
<div> <div>
<h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3> <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
<p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Technische Leitung</p> <h3 style={{ marginBottom: 0 }}>Michael Bodemer</h3>
<a
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
target="_blank"
rel="noopener noreferrer"
style={{ color: '#0077b5', display: 'flex' }}
aria-label="Michael Bodemer auf LinkedIn"
>
<Linkedin size={20} />
</a>
</div>
<p style={{
color: 'var(--accent-green)',
fontWeight: 600,
fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
textTransform: 'uppercase',
letterSpacing: '0.05em'
}}>
Geschäftsführung
</p>
</div> </div>
</div> </div>
<p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}> <p style={{
„Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“ fontStyle: 'italic',
marginBottom: 'var(--spacing-lg)',
color: 'var(--primary-color)',
fontWeight: 500,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
lineHeight: 1.6
}}>
„Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren."
</p> </p>
<p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}> <p style={{
fontSize: 'clamp(0.9375rem, 2vw, 0.95rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Michael Bodemer ist der Experte für komplexe Kabelnetze. Mit seinem scharfen Blick für praktikable Lösungen treibt er Projekte in der Planung und technischen Umsetzung voran. Er stellt sicher, dass für jedes Vorhaben die optimalen Komponenten ausgewählt werden. Michael Bodemer ist der Experte für komplexe Kabelnetze. Mit seinem scharfen Blick für praktikable Lösungen treibt er Projekte in der Planung und technischen Umsetzung voran. Er stellt sicher, dass für jedes Vorhaben die optimalen Komponenten ausgewählt werden.
</p> </p>
</div> </div>
<div className="card"> <div className="card">
<div className="team-card-header" style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}> <div className="team-card-header" style={{
<div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div> display: 'flex',
gap: 'var(--spacing-xl)',
marginBottom: 'var(--spacing-lg)'
}}>
<img
src="/media/profile/klaus-mintel.webp"
alt="Klaus Mintel - Geschäftsführung"
style={{
width: '120px',
height: '120px',
objectFit: 'cover',
flexShrink: 0,
borderRadius: '12px'
}}
loading="lazy"
/>
<div> <div>
<h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3> <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
<p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Projektmanagement</p> <h3 style={{ marginBottom: 0 }}>Klaus Mintel</h3>
<a
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
target="_blank"
rel="noopener noreferrer"
style={{ color: '#0077b5', display: 'flex' }}
aria-label="Klaus Mintel auf LinkedIn"
>
<Linkedin size={20} />
</a>
</div>
<p style={{
color: 'var(--accent-green)',
fontWeight: 600,
fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
textTransform: 'uppercase',
letterSpacing: '0.05em'
}}>
Geschäftsführung
</p>
</div> </div>
</div> </div>
<p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}> <p style={{
„Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“ fontStyle: 'italic',
marginBottom: 'var(--spacing-lg)',
color: 'var(--primary-color)',
fontWeight: 500,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
lineHeight: 1.6
}}>
„Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen."
</p> </p>
<p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}> <p style={{
fontSize: 'clamp(0.9375rem, 2vw, 0.95rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Klaus Mintel bewahrt auch bei komplexesten Anforderungen den Weitblick. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er für reibungslose Abläufe. Er bringt technische Themen präzise auf den Punkt und sichert den Projekterfolg. Klaus Mintel bewahrt auch bei komplexesten Anforderungen den Weitblick. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er für reibungslose Abläufe. Er bringt technische Themen präzise auf den Punkt und sichert den Projekterfolg.
</p> </p>
</div> </div>
@@ -69,51 +183,182 @@ const About = () => (
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <div className="container">
<div style={{ textAlign: 'center', marginBottom: '5rem' }}> <div style={{
textAlign: 'center',
marginBottom: 'clamp(3rem, 8vw, 5rem)'
}}>
<h2 className="no-underline">Unser Manifest</h2> <h2 className="no-underline">Unser Manifest</h2>
<p style={{ color: 'var(--text-secondary)' }}>Werte, die unsere tägliche Arbeit leiten.</p> <p style={{
color: 'var(--text-secondary)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
}}>
Werte, die unsere tägliche Arbeit leiten.
</p>
</div> </div>
<div className="grid manifest-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}> <div className="grid manifest-grid" style={{
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div> gap: 'var(--spacing-2xl)'
}}>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Award size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>1. Kompetenz</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
1. Kompetenz
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
</p>
</div> </div>
</div> </div>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div> display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Clock size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>2. Verfügbarkeit</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
2. Verfügbarkeit
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.
</p>
</div> </div>
</div> </div>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div> display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Lightbulb size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>3. Lösungen</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
3. Lösungen
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.
</p>
</div> </div>
</div> </div>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div> display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Truck size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>4. Logistik & Überwachung</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
4. Logistik & Überwachung
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
</p>
</div> </div>
</div> </div>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div> display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<MessageSquare size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>5. Offenheit</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
5. Offenheit
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.
</p>
</div> </div>
</div> </div>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div> display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<ShieldCheck size={32} strokeWidth={2} />
</div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4> <h4 style={{
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.</p> marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 600
}}>
6. Zuverlässigkeit
</h4>
<p style={{
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
color: 'var(--text-secondary)',
lineHeight: 1.7
}}>
Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -122,10 +367,44 @@ const About = () => (
<section> <section>
<div className="container"> <div className="container">
<div className="card" style={{ background: 'var(--primary-color)', color: 'white', textAlign: 'center', padding: '4rem' }}> <div className="card" style={{
<h2 style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem' }}>Bereit für Ihr nächstes Projekt?</h2> background: 'var(--primary-color)',
<p style={{ marginBottom: '2.5rem', opacity: 0.9, fontSize: '1.1rem' }}>Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.</p> color: 'white',
<a href="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>Jetzt Kontakt aufnehmen</a> textAlign: 'center',
padding: 'clamp(3rem, 6vw, 4rem)'
}}>
<h2
className="no-underline"
style={{
color: 'white',
border: 'none',
padding: 0,
marginBottom: 'var(--spacing-lg)',
fontSize: 'clamp(1.5rem, 6vw, 2rem)',
position: 'relative'
}}
>
Bereit für Ihr nächstes Projekt?
</h2>
<p style={{
marginBottom: 'var(--spacing-2xl)',
opacity: 0.9,
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
lineHeight: 1.65
}}>
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p>
<a
href="/kontakt"
className="cta-button"
style={{
background: 'white',
color: 'var(--primary-color)'
}}
aria-label="Jetzt Kontakt aufnehmen"
>
Jetzt Kontakt aufnehmen
</a>
</div> </div>
</div> </div>
</section> </section>

327
src/pages/Contact.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react'; import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
const Contact = () => { const Contact = () => {
@@ -35,36 +34,134 @@ const Contact = () => {
return ( return (
<div className="container"> <div className="container">
<section> <section>
<div className="grid contact-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}> <div className="grid contact-grid" style={{
<motion.div gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
initial={{ opacity: 0, y: 20 }} gap: 'clamp(2rem, 6vw, 4rem)'
animate={{ opacity: 1, y: 0 }} }}>
> <div>
<h1>Kontakt</h1> <h1>Kontakt</h1>
<p style={{ fontSize: '1.1rem', color: 'var(--text-secondary)', marginBottom: '3rem' }}> <p style={{
fontSize: 'clamp(1.0625rem, 2.5vw, 1.1rem)',
color: 'var(--text-secondary)',
marginBottom: 'var(--spacing-2xl)',
lineHeight: 1.65
}}>
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht. Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
</p> </p>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}> <div style={{
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}> display: 'flex',
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Mail size={24} /></div> flexDirection: 'column',
<div> gap: 'var(--spacing-xl)'
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>E-Mail</h4> }}>
<a href="mailto:info@mb-grid-solutions.com" style={{ fontSize: '1.1rem', fontWeight: 500 }}>info@mb-grid-solutions.com</a> <a
href="mailto:info@mb-grid-solutions.com"
className="contact-info-item"
style={{
display: 'flex',
gap: 'var(--spacing-lg)',
alignItems: 'flex-start',
textDecoration: 'none'
}}
aria-label="E-Mail an info@mb-grid-solutions.com senden"
>
<div style={{
color: 'var(--accent-green)',
background: 'white',
padding: 'var(--spacing-md)',
border: '1px solid var(--secondary-bg)',
borderRadius: '12px',
flexShrink: 0
}}>
<Mail size={24} strokeWidth={2} />
</div> </div>
</div>
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Phone size={24} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Telefon</h4> <h4 style={{
<a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a> marginBottom: '0.25rem',
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
fontWeight: 600
}}>
E-Mail
</h4>
<span style={{
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 500,
color: 'var(--primary-color)'
}}>
info@mb-grid-solutions.com
</span>
</div>
</a>
<a
href="tel:+49123456789"
className="contact-info-item"
style={{
display: 'flex',
gap: 'var(--spacing-lg)',
alignItems: 'flex-start',
textDecoration: 'none'
}}
aria-label="Anrufen unter +49 (0) 123 456789"
>
<div style={{
color: 'var(--accent-green)',
background: 'white',
padding: 'var(--spacing-md)',
border: '1px solid var(--secondary-bg)',
borderRadius: '12px',
flexShrink: 0
}}>
<Phone size={24} strokeWidth={2} />
</div> </div>
</div>
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><MapPin size={24} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Anschrift</h4> <h4 style={{
<p style={{ fontSize: '1.1rem', fontWeight: 500, color: 'var(--primary-color)' }}> marginBottom: '0.25rem',
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
fontWeight: 600
}}>
Telefon
</h4>
<span style={{
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 500,
color: 'var(--primary-color)'
}}>
+49 (0) 123 456789
</span>
</div>
</a>
<div
className="contact-info-item"
style={{
display: 'flex',
gap: 'var(--spacing-lg)',
alignItems: 'flex-start'
}}
>
<div style={{
color: 'var(--accent-green)',
background: 'white',
padding: 'var(--spacing-md)',
border: '1px solid var(--secondary-bg)',
borderRadius: '12px',
flexShrink: 0
}}>
<MapPin size={24} strokeWidth={2} />
</div>
<div>
<h4 style={{
marginBottom: '0.25rem',
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
fontWeight: 600
}}>
Anschrift
</h4>
<p style={{
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
fontWeight: 500,
color: 'var(--primary-color)',
lineHeight: 1.6
}}>
MB Grid Solutions GmbH<br /> MB Grid Solutions GmbH<br />
Raiffeisenstraße 22<br /> Raiffeisenstraße 22<br />
73630 Remshalden 73630 Remshalden
@@ -72,54 +169,180 @@ const Contact = () => {
</div> </div>
</div> </div>
</div> </div>
</motion.div> </div>
<motion.div <div className="card">
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="card"
>
{submitted ? ( {submitted ? (
<div style={{ textAlign: 'center', padding: '3rem 0' }}> <div style={{
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}><CheckCircle size={64} /></div> textAlign: 'center',
<h3>Nachricht gesendet</h3> padding: 'clamp(2rem, 6vw, 3rem) 0'
<p style={{ color: 'var(--text-secondary)' }}>Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.</p> }}>
<button onClick={() => setSubmitted(false)} className="cta-button" style={{ marginTop: '2rem' }}>Weitere Nachricht</button> <div style={{
color: 'var(--accent-green)',
marginBottom: 'var(--spacing-lg)',
display: 'flex',
justifyContent: 'center'
}}>
<CheckCircle size={64} strokeWidth={2} />
</div>
<h3 style={{
fontSize: 'clamp(1.25rem, 4vw, 1.5rem)',
marginBottom: 'var(--spacing-md)'
}}>
Nachricht gesendet
</h3>
<p style={{
color: 'var(--text-secondary)',
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
lineHeight: 1.65,
marginBottom: 'var(--spacing-xl)'
}}>
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
</p>
<button
onClick={() => setSubmitted(false)}
className="cta-button"
aria-label="Weitere Nachricht senden"
>
Weitere Nachricht
</button>
</div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}> <form onSubmit={handleSubmit} style={{
<div className="grid contact-form-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1rem' }}> display: 'flex',
flexDirection: 'column'
}}>
<div className="grid contact-form-grid" style={{
gridTemplateColumns: '1fr 1fr',
gap: 'var(--spacing-md)'
}}>
<div> <div>
<label htmlFor="name" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Name *</label> <label
<input type="text" id="name" name="name" required minLength={2} maxLength={100} placeholder="Ihr Name" /> htmlFor="name"
style={{
display: 'block',
marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
fontWeight: 600
}}
>
Name *
</label>
<input
type="text"
id="name"
name="name"
required
minLength={2}
maxLength={100}
placeholder="Ihr Name"
aria-required="true"
/>
</div> </div>
<div> <div>
<label htmlFor="company" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Firma</label> <label
<input type="text" id="company" name="company" placeholder="Ihr Unternehmen" /> htmlFor="company"
style={{
display: 'block',
marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
fontWeight: 600
}}
>
Firma
</label>
<input
type="text"
id="company"
name="company"
placeholder="Ihr Unternehmen"
/>
</div> </div>
</div> </div>
<label htmlFor="email" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>E-Mail *</label> <label
<input type="email" id="email" name="email" required placeholder="ihre@email.de" /> htmlFor="email"
style={{
display: 'block',
marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
fontWeight: 600
}}
>
E-Mail *
</label>
<input
type="email"
id="email"
name="email"
required
placeholder="ihre@email.de"
aria-required="true"
/>
<label htmlFor="message" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Nachricht *</label> <label
<textarea id="message" name="message" required minLength={20} maxLength={4000} rows={6} placeholder="Wie können wir Ihnen helfen?"></textarea> htmlFor="message"
style={{
display: 'block',
marginBottom: 'var(--spacing-xs)',
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
fontWeight: 600
}}
>
Nachricht *
</label>
<textarea
id="message"
name="message"
required
minLength={20}
maxLength={4000}
rows={6}
placeholder="Wie können wir Ihnen helfen?"
aria-required="true"
></textarea>
<div className="visually-hidden"> <div className="visually-hidden" style={{ display: 'none' }}>
<label htmlFor="website">Website (bitte leer lassen)</label> <label htmlFor="website">Website (bitte leer lassen)</label>
<input type="text" id="website" name="website" tabIndex={-1} autoComplete="off" /> <input
type="text"
id="website"
name="website"
tabIndex={-1}
autoComplete="off"
/>
</div> </div>
<button type="submit" disabled={loading} className="cta-button" style={{ alignSelf: 'flex-start' }}> <button
{loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} /> type="submit"
disabled={loading}
className="cta-button"
style={{ alignSelf: 'flex-start' }}
aria-label={loading ? 'Nachricht wird gesendet' : 'Nachricht senden'}
>
{loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
</button> </button>
<p style={{ fontSize: '0.75rem', marginTop: '1.5rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}> <p style={{
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer <Link to="/datenschutz" style={{ textDecoration: 'underline' }}>Datenschutzerklärung</Link> einverstanden. fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
marginTop: 'var(--spacing-lg)',
color: 'var(--text-secondary)',
lineHeight: 1.5
}}>
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
<Link
to="/datenschutz"
style={{
textDecoration: 'underline',
fontWeight: 500
}}
>
Datenschutzerklärung
</Link>{' '}
einverstanden.
</p> </p>
</form> </form>
)} )}
</motion.div> </div>
</div> </div>
</section> </section>
</div> </div>

286
src/pages/Home.tsx
View File

@@ -3,27 +3,61 @@ import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
const Home = () => ( const Home = () => (
<div className="home-page"> <div className="home-page">
<section className="hero" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', background: 'white', position: 'relative', overflow: 'hidden', padding: '4rem 0' }}> <section
<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 }} /> 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="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" style={{ maxWidth: '700px' }}>
<div className="hero-content"> <span className="badge">Engineering Excellence</span>
<span className="badge">Engineering Excellence</span> <h1 style={{ marginBottom: 'var(--spacing-lg)' }}>
<h1 style={{ marginBottom: '1.5rem' }}>Spezialisierter Partner für Energiekabelprojekte</h1> Spezialisierter Partner für Energiekabelprojekte
<p style={{ fontSize: '1.2rem', marginBottom: '2.5rem', color: 'var(--text-secondary)', lineHeight: 1.5, maxWidth: '600px' }}> </h1>
Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV. <p style={{
</p> fontSize: 'clamp(1.0625rem, 2.5vw, 1.2rem)',
<div className="hero-actions" style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}> marginBottom: 'var(--spacing-2xl)',
<Link to="/kontakt" className="cta-button"> color: 'var(--text-secondary)',
Projekt anfragen <ArrowRight size={18} /> lineHeight: 1.6,
</Link> maxWidth: '600px'
<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} /> Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
</Link> </p>
</div> <div className="hero-actions" style={{
</div> display: 'flex',
<div className="img-placeholder hero-img" style={{ height: '400px', marginBottom: 0, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}> gap: 'var(--spacing-lg)',
[ High-Voltage Infrastructure ] 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> </div>
</div> </div>
@@ -31,21 +65,42 @@ const Home = () => (
<section style={{ background: '#f8fafc' }}> <section style={{ background: '#f8fafc' }}>
<div className="container"> <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> <span className="badge">Portfolio</span>
<h2 style={{ border: 'none', padding: 0 }}>Unsere Leistungen</h2> <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>
<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: <Zap size={32} strokeWidth={2} />, 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: <Shield size={32} strokeWidth={2} />, 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: <BarChart3 size={32} strokeWidth={2} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="card portfolio-card"> <div key={i} className="card portfolio-card">
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}>{item.icon}</div> <div style={{
<h3 style={{ marginBottom: '1rem' }}>{item.title}</h3> color: 'var(--accent-green)',
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>{item.desc}</p> 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>
))} ))}
</div> </div>
@@ -54,15 +109,39 @@ const Home = () => (
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <div className="container">
<div className="grid split-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}> <div className="grid split-grid" style={{
<div className="img-placeholder split-img" style={{ height: '400px', marginBottom: 0 }}> gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
[ Technical Drawing / CAD ] alignItems: 'center',
</div> 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"> <div className="split-content">
<span className="badge">Expertise</span> <span className="badge">Expertise</span>
<h2>Anwendungen & Zielgruppen</h2> <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> <p style={{
<div className="grid target-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}> 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', 'Energieversorger',
'Ingenieurbüros', 'Ingenieurbüros',
@@ -71,8 +150,19 @@ const Home = () => (
'Projektierer EE', 'Projektierer EE',
'Planungsbüros' 'Planungsbüros'
].map((item, i) => ( ].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)' }}> <div
<CheckCircle2 size={18} style={{ color: 'var(--accent-green)' }} /> 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} {item}
</div> </div>
))} ))}
@@ -82,13 +172,22 @@ const Home = () => (
</div> </div>
</section> </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="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> <span className="badge" style={{ color: 'white', opacity: 0.6 }}>Expertise</span>
<h2 style={{ color: 'white', border: 'none', padding: 0 }}>Technische Spezifikationen</h2> <h2 style={{ color: 'white', border: 'none', padding: 0 }}>Technische Spezifikationen</h2>
</div> </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: '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: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für die 110-kV-Ebene und komplexe Mittelspannung.' },
@@ -97,11 +196,39 @@ const Home = () => (
<div <div
key={i} key={i}
className="spec-card" 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> <h4 style={{
<p style={{ fontWeight: 700, fontSize: '1.15rem', marginBottom: '1rem', color: 'white' }}>{item.value}</p> fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
<p style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6 }}>{item.desc}</p> 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>
))} ))}
</div> </div>
@@ -110,33 +237,84 @@ const Home = () => (
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <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> <span className="badge">Werte</span>
<h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2> <h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2>
</div> </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: '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: '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.' } { title: 'Transparenz', desc: 'Ehrliche Beratung auf Augenhöhe. Wir kommunizieren klar und herstellerneutral.' }
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="principle-item" style={{ borderLeft: '3px solid var(--accent-green)', paddingLeft: '2rem' }}> <div
<h3 style={{ marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '1.1rem' }}>{item.title}</h3> key={i}
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, fontSize: '1rem' }}>{item.desc}</p> 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> </div>
</div> </div>
</section> </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' }}> <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> <h2
<p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: '3rem', fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 3rem' }}> 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. Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p> </p>
<Link to="/kontakt" className="cta-button"> <Link to="/kontakt" className="cta-button" aria-label="Jetzt Kontakt aufnehmen">
Jetzt Kontakt aufnehmen <ArrowRight size={18} /> Jetzt Kontakt aufnehmen <ArrowRight size={18} strokeWidth={2.5} />
</Link> </Link>
</div> </div>
</section> </section>