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.“
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
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.“
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
1
Kompetenz

53
index.html
View File

@@ -3,13 +3,56 @@
<head>
<meta charset="UTF-8" />
<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" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" />
<meta name="theme-color" content="#0E2A47" media="(prefers-color-scheme: light)" />
<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>
<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>
<body>
<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 = () => {
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 = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
@@ -22,10 +31,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<div className="layout">
<header>
<div className="container">
<Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
<img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} />
<Link
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>
<nav style={{ display: 'flex', gap: '2rem' }}>
<nav style={{ display: 'flex', gap: '2rem' }} aria-label="Hauptnavigation">
<NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
Startseite
</NavLink>
@@ -43,58 +61,108 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{children}
</main>
{showScrollTop && (
<button
onClick={scrollToTop}
className="scroll-top-btn"
aria-label="Scroll to top"
>
<ArrowUp size={24} />
</button>
)}
<button
onClick={scrollToTop}
className={`scroll-top-btn ${showScrollTop ? 'visible' : ''}`}
aria-label="Nach oben scrollen"
aria-hidden={!showScrollTop}
tabIndex={showScrollTop ? 0 : -1}
>
<ArrowUp size={24} strokeWidth={2.5} />
</button>
<nav className="mobile-nav">
<NavLink to="/" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Home size={20} />
<nav className="mobile-nav" aria-label="Mobile Navigation">
<NavLink
to="/"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Startseite"
>
<Home size={22} strokeWidth={2} />
<span>Start</span>
</NavLink>
<NavLink to="/ueber-uns" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Info size={20} />
<NavLink
to="/ueber-uns"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Über uns"
>
<Info size={22} strokeWidth={2} />
<span>Über uns</span>
</NavLink>
<NavLink to="/kontakt" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Mail size={20} />
<NavLink
to="/kontakt"
className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
aria-label="Kontakt"
>
<Mail size={22} strokeWidth={2} />
<span>Kontakt</span>
</NavLink>
</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="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>
<img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '80px', marginBottom: '1.5rem', filter: 'grayscale(1)' }} />
<p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
<img
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.
</p>
</div>
<div>
<h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Navigation</h4>
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<Link to="/">Startseite</Link>
<Link to="/ueber-uns">Über uns</Link>
<Link to="/kontakt">Kontakt</Link>
<h4 style={{
fontSize: 'clamp(0.9rem, 2vw, 1rem)',
marginBottom: 'var(--spacing-md)',
fontWeight: 600
}}>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>
</div>
<div>
<h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Rechtliches</h4>
<nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<Link to="/impressum">Impressum</Link>
<Link to="/datenschutz">Datenschutz</Link>
<Link to="/agb">AGB</Link>
<h4 style={{
fontSize: 'clamp(0.9rem, 2vw, 1rem)',
marginBottom: 'var(--spacing-md)',
fontWeight: 600
}}>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>
</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>Made with precision.</div>
</div>

472
src/index.css
View File

@@ -5,18 +5,29 @@
--text-secondary: #6B7280;
--text-primary: #1F2933;
--accent-green: #2FA66A;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--transition-fast: 0.2s ease;
--font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--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;
--bottom-nav-height: 0px;
--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;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(47, 166, 106, 0.1);
touch-action: manipulation;
}
@@ -24,6 +35,9 @@ html {
scroll-behavior: smooth;
overflow-x: hidden;
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
@@ -35,54 +49,88 @@ body {
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
width: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1;
font-kerning: normal;
}
h1, h2, h3, h4, h5, h6 {
color: var(--primary-color);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
line-height: 1.15;
margin-bottom: var(--spacing-lg);
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,
h2.no-underline::after {
h2.no-underline::after,
.no-underline::after {
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 {
content: '';
position: absolute;
bottom: -10px;
bottom: -12px;
left: 0;
width: 40px;
height: 3px;
width: 48px;
height: 4px;
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 {
color: var(--primary-color);
text-decoration: none;
transition: all var(--transition-fast);
-webkit-touch-callout: default;
}
.container {
max-width: 1200px;
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 {
padding: 6rem 0;
padding: clamp(3rem, 8vw, 6rem) 0;
}
.grid {
display: grid;
gap: 2.5rem;
gap: var(--spacing-xl);
}
.cta-button {
@@ -100,12 +148,22 @@ section {
text-transform: uppercase;
letter-spacing: 0.1em;
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 {
background-color: var(--text-primary);
color: white;
transform: translateY(-1px);
}
.cta-button:active {
transform: translateY(0);
}
input, textarea {
@@ -114,27 +172,38 @@ input, textarea {
border: 1px solid var(--secondary-bg);
background: white;
font-family: inherit;
margin-bottom: 1.5rem;
margin-bottom: var(--spacing-lg);
transition: all var(--transition-fast);
border-radius: 4px;
border-radius: 12px;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
min-height: 48px;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(47, 166, 106, 0.1);
}
textarea {
resize: vertical;
min-height: 120px;
}
.card {
background: white;
padding: 2.5rem;
padding: var(--spacing-xl);
border: 1px solid var(--secondary-bg);
transition: all var(--transition-fast);
border-radius: 8px;
transition: all var(--transition-smooth);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.card:hover {
border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.img-placeholder {
@@ -152,6 +221,10 @@ input:focus, textarea:focus {
border: 1px solid var(--secondary-bg);
border-radius: 8px;
content-visibility: auto;
padding: var(--spacing-md);
text-align: center;
word-break: break-word;
overflow: hidden;
}
.nav-link {
@@ -182,8 +255,10 @@ header {
top: 0;
z-index: 100;
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);
padding-top: var(--safe-area-top);
}
header .container {
@@ -201,8 +276,8 @@ header .container {
position: fixed;
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px);
right: 20px;
width: 50px;
height: 50px;
width: 56px;
height: 56px;
background: var(--primary-color);
color: white;
border: none;
@@ -212,40 +287,67 @@ header .container {
justify-content: center;
cursor: pointer;
z-index: 900;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(14, 42, 71, 0.2);
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 {
transform: translateY(-5px);
transform: translateY(-4px);
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) {
.scroll-top-btn {
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px);
right: 15px;
width: 44px;
height: 44px;
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
right: 16px;
width: 48px;
height: 48px;
}
}
@media (max-width: 768px) {
:root {
--header-height: 60px;
--bottom-nav-height: 70px;
--header-height: 64px;
--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 {
padding: 3rem 0;
padding: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.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 {
padding: 0 1rem;
padding: 0 var(--spacing-md);
justify-content: center;
}
@@ -254,7 +356,7 @@ header .container {
}
header img {
height: 40px !important;
height: 52px !important;
}
.mobile-nav {
@@ -264,33 +366,39 @@ header .container {
left: 0;
width: 100%;
height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(0,0,0,0.05);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
justify-content: space-around;
align-items: center;
align-items: flex-start;
z-index: 1000;
padding-bottom: var(--safe-area-bottom);
box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
padding-top: 8px;
padding-bottom: max(8px, var(--safe-area-bottom));
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04);
}
.mobile-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
justify-content: flex-start;
gap: 4px;
color: #9ca3af;
font-size: 0.6rem;
font-weight: 700;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
letter-spacing: 0.05em;
flex: 1;
height: 100%;
min-width: 44px;
min-height: 44px;
transition: color 0.2s ease;
padding: 8px 4px;
min-width: 64px;
min-height: 56px;
transition: all var(--transition-fast);
position: relative;
}
.mobile-nav-link svg {
transition: all var(--transition-fast);
}
.mobile-nav-link.active {
@@ -299,26 +407,34 @@ header .container {
.mobile-nav-link.active svg {
color: var(--accent-green);
transform: scale(1.1);
}
.mobile-nav-link:active {
transform: scale(0.95);
}
main {
padding-bottom: var(--bottom-nav-height);
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
}
.cta-button {
width: 100%;
padding: 1.1rem;
font-size: 0.9rem;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 1.125rem 1.5rem;
font-size: 0.875rem;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(14, 42, 71, 0.12);
font-weight: 700;
letter-spacing: 0.08em;
}
.cta-button:active {
transform: scale(0.98);
transform: scale(0.97);
}
.hero {
padding: 2rem 0 !important;
padding: 0 !important;
min-height: auto !important;
}
.hero-bg {
@@ -327,26 +443,27 @@ header .container {
.hero-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
gap: 0 !important;
}
.hero-content {
background: #f1f5f9;
padding: 2rem 1.5rem;
border-radius: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
padding: var(--spacing-2xl) var(--spacing-lg);
text-align: center;
order: 2;
}
.hero-content h1 {
font-size: clamp(2rem, 10vw, 2.8rem);
line-height: 1.1;
margin-bottom: 1rem;
font-size: clamp(1.875rem, 9vw, 2.5rem);
line-height: 1.15;
margin-bottom: var(--spacing-md);
letter-spacing: -0.03em;
}
.hero-content p {
font-size: 1.15rem !important;
line-height: 1.5;
margin-bottom: 2rem;
font-size: 1.0625rem !important;
line-height: 1.6;
margin-bottom: var(--spacing-xl);
color: #4b5563;
}
@@ -354,31 +471,42 @@ header .container {
justify-content: center;
flex-direction: column;
width: 100%;
gap: var(--spacing-md) !important;
}
.hero-actions .secondary-link {
padding: 1rem;
padding: var(--spacing-md);
width: 100%;
justify-content: center;
min-height: 48px;
display: flex;
align-items: center;
}
.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 {
text-align: center;
margin-bottom: 4rem !important;
padding: 0 1rem;
margin-bottom: var(--spacing-3xl) !important;
padding: 0 var(--spacing-sm);
}
.section-header h2 {
margin-bottom: 1.5rem;
margin-bottom: var(--spacing-lg);
}
.section-header p {
font-size: 1.1rem;
line-height: 1.6;
font-size: 1.0625rem;
line-height: 1.65;
margin: 0 auto;
}
@@ -392,48 +520,64 @@ header .container {
}
.portfolio-card {
padding: 2rem 1.5rem;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
}
.split-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
gap: 0 !important;
}
.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 {
text-align: center;
padding: 0 1rem;
padding: var(--spacing-2xl) var(--spacing-md);
order: 2;
}
.split-content h2 {
font-size: 1.8rem;
font-size: clamp(1.5rem, 7vw, 1.875rem);
}
.split-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
font-size: 1.0625rem;
margin-bottom: var(--spacing-xl);
line-height: 1.65;
}
.target-grid {
grid-template-columns: 1fr !important;
text-align: left;
max-width: 300px;
margin: 0 auto;
gap: 1rem !important;
max-width: 100%;
margin: 0;
gap: var(--spacing-sm) !important;
}
.target-item {
padding: 1rem;
background: white;
border: 1px solid rgba(0,0,0,0.05);
padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(47, 166, 106, 0.15);
border-left: 3px solid var(--accent-green);
border-radius: 12px;
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 {
@@ -441,47 +585,58 @@ header .container {
}
.spec-card {
padding: 2.5rem 1.5rem !important;
padding: var(--spacing-2xl) var(--spacing-lg) !important;
text-align: center;
border-radius: 20px;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
}
.principles-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-lg) !important;
}
.principle-item {
text-align: center;
border-left: none !important;
border-top: 4px solid var(--accent-green);
padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
background: white;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
text-align: left;
border-left: 4px solid var(--accent-green) !important;
border-top: none !important;
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--spacing-lg) !important;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
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 {
padding: 4rem 0 !important;
padding: var(--spacing-3xl) 0 !important;
}
.cta-section h2 {
font-size: clamp(1.5rem, 8vw, 2rem) !important;
line-height: 1.2;
}
.cta-section p {
font-size: 1.1rem !important;
font-size: 1.0625rem !important;
line-height: 1.65;
}
footer {
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 {
grid-template-columns: 1fr !important;
gap: 3rem !important;
gap: var(--spacing-md) !important;
margin-bottom: var(--spacing-sm) !important;
}
footer .grid div {
@@ -490,40 +645,76 @@ header .container {
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 {
flex-direction: column;
gap: 1rem;
gap: 0.375rem;
text-align: center;
padding-top: var(--spacing-sm) !important;
font-size: 0.75rem !important;
}
.card {
padding: 2rem 1.5rem;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
padding: var(--spacing-xl) var(--spacing-lg);
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.portfolio-card {
padding: 2.5rem 1.5rem;
padding: var(--spacing-2xl) var(--spacing-lg);
text-align: center;
}
.about-hero-grid {
grid-template-columns: 1fr !important;
gap: 3rem !important;
gap: 0 !important;
text-align: center;
}
.about-hero-grid > div:first-child {
order: 2;
padding: var(--spacing-2xl) var(--spacing-md);
}
.about-hero-grid h1 {
font-size: 2.5rem;
font-size: clamp(2rem, 9vw, 2.5rem);
}
.about-hero-grid p {
font-size: 1.1rem;
font-size: 1.0625rem;
line-height: 1.65;
}
.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 {
@@ -534,27 +725,28 @@ header .container {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem !important;
gap: var(--spacing-md) !important;
}
.manifest-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
gap: var(--spacing-lg) !important;
}
.manifest-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
padding: var(--spacing-xl) var(--spacing-lg);
background: white;
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 {
grid-template-columns: 1fr !important;
gap: 3rem !important;
gap: var(--spacing-2xl) !important;
}
.contact-form-grid {
@@ -566,36 +758,52 @@ header .container {
align-items: center;
text-align: center;
background: white;
padding: 2rem 1.5rem;
padding: var(--spacing-xl) var(--spacing-lg);
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
border: 1px solid rgba(0,0,0,0.06);
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 {
font-size: 0.7rem;
letter-spacing: 0.1em;
font-size: 0.6875rem;
letter-spacing: 0.08em;
font-weight: 700;
}
h3 {
font-size: 1.25rem;
font-size: clamp(1.125rem, 4vw, 1.25rem);
}
.legal-content {
padding: 1.5rem;
padding: var(--spacing-lg);
background: white;
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.legal-content h2 {
font-size: 1.4rem;
margin-top: 2rem;
font-size: clamp(1.25rem, 5vw, 1.5rem);
margin-top: var(--spacing-xl);
}
.legal-content p {
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 } from 'lucide-react';
import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck, Linkedin } from 'lucide-react';
const About = () => (
<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="grid about-hero-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div>
<h1 className="no-underline">Über uns</h1>
<p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}>
Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
</p>
<p style={{ marginBottom: '1.5rem' }}>
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>
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 className="img-placeholder about-hero-img" style={{ height: '500px', marginBottom: 0 }}>
[ Engineering Excellence Visualization ]
</div>
<div className="about-hero-content" style={{ maxWidth: '700px' }}>
<h1 className="no-underline">Über uns</h1>
<p style={{
fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
color: 'var(--text-secondary)',
marginBottom: 'var(--spacing-xl)',
lineHeight: 1.6
}}>
Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
</p>
<p style={{
marginBottom: 'var(--spacing-lg)',
lineHeight: 1.7,
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
}}>
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>
</section>
<section>
<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>
<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 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="team-card-header" style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
<div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
<div className="team-card-header" style={{
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>
<h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3>
<p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Technische Leitung</p>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
<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>
<p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
„Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“
<p style={{
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 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.
</p>
</div>
<div className="card">
<div className="team-card-header" style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
<div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
<div className="team-card-header" style={{
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>
<h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3>
<p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Projektmanagement</p>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
<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>
<p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
„Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“
<p style={{
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 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.
</p>
</div>
@@ -69,51 +183,182 @@ const About = () => (
<section style={{ background: 'white' }}>
<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>
<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 className="grid manifest-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
<div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div>
<div className="grid manifest-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
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>
<h4 style={{ marginBottom: '0.5rem' }}>1. Kompetenz</h4>
<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>
<h4 style={{
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 className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Clock size={32} strokeWidth={2} />
</div>
<div>
<h4 style={{ marginBottom: '0.5rem' }}>2. Verfügbarkeit</h4>
<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>
<h4 style={{
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 className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Lightbulb size={32} strokeWidth={2} />
</div>
<div>
<h4 style={{ marginBottom: '0.5rem' }}>3. Lösungen</h4>
<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>
<h4 style={{
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 className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<Truck size={32} strokeWidth={2} />
</div>
<div>
<h4 style={{ marginBottom: '0.5rem' }}>4. Logistik & Überwachung</h4>
<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>
<h4 style={{
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 className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<MessageSquare size={32} strokeWidth={2} />
</div>
<div>
<h4 style={{ marginBottom: '0.5rem' }}>5. Offenheit</h4>
<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>
<h4 style={{
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 className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div>
<div className="manifest-item" style={{
display: 'flex',
gap: 'var(--spacing-lg)'
}}>
<div style={{
color: 'var(--accent-green)',
flexShrink: 0
}}>
<ShieldCheck size={32} strokeWidth={2} />
</div>
<div>
<h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4>
<p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.</p>
<h4 style={{
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>
@@ -122,10 +367,44 @@ const About = () => (
<section>
<div className="container">
<div className="card" style={{ background: 'var(--primary-color)', color: 'white', textAlign: 'center', padding: '4rem' }}>
<h2 style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem' }}>Bereit für Ihr nächstes Projekt?</h2>
<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>
<a href="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>Jetzt Kontakt aufnehmen</a>
<div className="card" style={{
background: 'var(--primary-color)',
color: 'white',
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>
</section>

327
src/pages/Contact.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
const Contact = () => {
@@ -35,36 +34,134 @@ const Contact = () => {
return (
<div className="container">
<section>
<div className="grid contact-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
>
<div className="grid contact-grid" style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
gap: 'clamp(2rem, 6vw, 4rem)'
}}>
<div>
<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.
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<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)' }}><Mail size={24} /></div>
<div>
<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>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: 'var(--spacing-xl)'
}}>
<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 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>
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Telefon</h4>
<a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a>
<h4 style={{
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 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>
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Anschrift</h4>
<p style={{ fontSize: '1.1rem', fontWeight: 500, color: 'var(--primary-color)' }}>
<h4 style={{
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 />
Raiffeisenstraße 22<br />
73630 Remshalden
@@ -72,54 +169,180 @@ const Contact = () => {
</div>
</div>
</div>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="card"
>
<div className="card">
{submitted ? (
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}><CheckCircle size={64} /></div>
<h3>Nachricht gesendet</h3>
<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={{
textAlign: 'center',
padding: 'clamp(2rem, 6vw, 3rem) 0'
}}>
<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>
) : (
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
<div className="grid contact-form-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<form onSubmit={handleSubmit} style={{
display: 'flex',
flexDirection: 'column'
}}>
<div className="grid contact-form-grid" style={{
gridTemplateColumns: '1fr 1fr',
gap: 'var(--spacing-md)'
}}>
<div>
<label htmlFor="name" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Name *</label>
<input type="text" id="name" name="name" required minLength={2} maxLength={100} placeholder="Ihr Name" />
<label
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>
<label htmlFor="company" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Firma</label>
<input type="text" id="company" name="company" placeholder="Ihr Unternehmen" />
<label
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>
<label htmlFor="email" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>E-Mail *</label>
<input type="email" id="email" name="email" required placeholder="ihre@email.de" />
<label
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>
<textarea id="message" name="message" required minLength={20} maxLength={4000} rows={6} placeholder="Wie können wir Ihnen helfen?"></textarea>
<label
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>
<input type="text" id="website" name="website" tabIndex={-1} autoComplete="off" />
<input
type="text"
id="website"
name="website"
tabIndex={-1}
autoComplete="off"
/>
</div>
<button type="submit" disabled={loading} className="cta-button" style={{ alignSelf: 'flex-start' }}>
{loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} />
<button
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>
<p style={{ fontSize: '0.75rem', marginTop: '1.5rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer <Link to="/datenschutz" style={{ textDecoration: 'underline' }}>Datenschutzerklärung</Link> einverstanden.
<p style={{
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>
</form>
)}
</motion.div>
</div>
</div>
</section>
</div>

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>