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

mobile

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 12:30:13 +01:00
parent e92b8e14f3
commit 9968feefb3
9 changed files with 497 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -3,7 +3,11 @@
<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" /> <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">
<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." />
</head> </head>

68
src/components/Layout.tsx
View File

@@ -1,25 +1,40 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link, useLocation, NavLink } from 'react-router-dom';
import { Home, Info, Mail, ArrowUp } from 'lucide-react';
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {
const location = useLocation();
const [showScrollTop, setShowScrollTop] = useState(false);
useEffect(() => {
const handleScroll = () => {
setShowScrollTop(window.scrollY > 400);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return ( return (
<div className="layout"> <div className="layout">
<header style={{ <header>
position: 'sticky', <div className="container">
top: 0,
zIndex: 100,
background: 'rgba(248, 249, 250, 0.95)',
backdropFilter: 'blur(10px)',
borderBottom: '1px solid var(--secondary-bg)'
}}>
<div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Link to="/" style={{ display: 'flex', alignItems: 'center' }}> <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
<img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} /> <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} />
</Link> </Link>
<nav style={{ display: 'flex', gap: '2rem' }}> <nav style={{ display: 'flex', gap: '2rem' }}>
<Link to="/" className="nav-link">Startseite</Link> <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
<Link to="/ueber-uns" className="nav-link">Über uns</Link> Startseite
<Link to="/kontakt" className="nav-link">Kontakt</Link> </NavLink>
<NavLink to="/ueber-uns" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
Über uns
</NavLink>
<NavLink to="/kontakt" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
Kontakt
</NavLink>
</nav> </nav>
</div> </div>
</header> </header>
@@ -28,6 +43,31 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{children} {children}
</main> </main>
{showScrollTop && (
<button
onClick={scrollToTop}
className="scroll-top-btn"
aria-label="Scroll to top"
>
<ArrowUp size={24} />
</button>
)}
<nav className="mobile-nav">
<NavLink to="/" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Home size={20} />
<span>Start</span>
</NavLink>
<NavLink to="/ueber-uns" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Info size={20} />
<span>Über uns</span>
</NavLink>
<NavLink to="/kontakt" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
<Mail size={20} />
<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: '4rem 0', marginTop: '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: '3rem' }}>

431
src/index.css
View File

@@ -7,9 +7,9 @@
--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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--transition-fast: 0.2s ease; --transition-fast: 0.2s ease;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--header-height: 80px; --header-height: 80px;
--bottom-nav-height: 0px;
--safe-area-bottom: env(safe-area-inset-bottom);
} }
* { * {
@@ -17,10 +17,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
touch-action: manipulation;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-x: hidden;
width: 100%;
} }
body { body {
@@ -31,22 +34,24 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden; overflow-x: hidden;
width: 100%;
text-rendering: optimizeLegibility;
} }
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.1; line-height: 1.2;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
letter-spacing: -0.03em; letter-spacing: -0.02em;
} }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); hyphens: auto; } 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 {
display: none !important; display: none !important;
} }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); position: relative; display: block; margin-bottom: 2rem; } h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); position: relative; display: block; margin-bottom: 2rem; }
h2:not(.no-underline)::after { h2:not(.no-underline)::after {
content: ''; content: '';
position: absolute; position: absolute;
@@ -112,7 +117,7 @@ input, textarea {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
transition: all var(--transition-fast); transition: all var(--transition-fast);
border-radius: 4px; border-radius: 4px;
font-size: 16px; /* Prevent zoom on iOS */ font-size: 16px;
} }
input:focus, textarea:focus { input:focus, textarea:focus {
@@ -146,6 +151,7 @@ input:focus, textarea:focus {
margin-bottom: 2rem; margin-bottom: 2rem;
border: 1px solid var(--secondary-bg); border: 1px solid var(--secondary-bg);
border-radius: 8px; border-radius: 8px;
content-visibility: auto;
} }
.nav-link { .nav-link {
@@ -171,17 +177,67 @@ input:focus, textarea:focus {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(248, 249, 250, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--secondary-bg);
}
header .container { header .container {
height: var(--header-height); height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-nav {
display: none;
}
.scroll-top-btn {
position: fixed;
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px);
right: 20px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 900;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.scroll-top-btn:hover {
transform: translateY(-5px);
background: var(--accent-green);
}
@media (max-width: 768px) {
.scroll-top-btn {
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px);
right: 15px;
width: 44px;
height: 44px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
:root { :root {
--header-height: 64px; --header-height: 60px;
--bottom-nav-height: 70px;
} }
section { section {
padding: 4rem 0; padding: 3rem 0;
} }
.grid { .grid {
@@ -189,70 +245,357 @@ header .container {
} }
header .container { header .container {
height: var(--header-height);
padding: 0 1rem; padding: 0 1rem;
justify-content: center;
}
header nav {
display: none !important;
} }
header img { header img {
height: 40px !important; height: 40px !important;
} }
nav { .mobile-nav {
display: flex;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: white; height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
border-top: 1px solid var(--secondary-bg); background: rgba(255, 255, 255, 0.94);
padding: 0.75rem 1rem; backdrop-filter: blur(20px);
justify-content: space-around !important; -webkit-backdrop-filter: blur(20px);
gap: 0 !important; border-top: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 -2px 10px rgba(0,0,0,0.05); justify-content: space-around;
align-items: center;
z-index: 1000; z-index: 1000;
padding-bottom: var(--safe-area-bottom);
box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
} }
.nav-link { .mobile-nav-link {
font-size: 0.7rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 4px; justify-content: center;
gap: 6px;
color: #9ca3af;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
flex: 1;
height: 100%;
min-width: 44px;
min-height: 44px;
transition: color 0.2s ease;
} }
.nav-link::after { .mobile-nav-link.active {
display: none; color: var(--primary-color);
}
.mobile-nav-link.active svg {
color: var(--accent-green);
} }
main { main {
padding-bottom: 80px; /* Space for bottom nav */ padding-bottom: var(--bottom-nav-height);
}
.hero {
padding: 2rem 0 !important;
min-height: auto !important;
}
.hero .grid {
grid-template-columns: 1fr !important;
}
.hero div:first-child {
width: 100% !important;
clip-path: none !important;
background: #f1f5f9 !important;
padding: 2rem 1rem !important;
border-radius: 12px;
}
.hero .img-placeholder {
display: none;
} }
.cta-button { .cta-button {
width: 100%; 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);
}
.cta-button:active {
transform: scale(0.98);
}
.hero {
padding: 2rem 0 !important;
}
.hero-bg {
display: none;
}
.hero-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.hero-content {
background: #f1f5f9;
padding: 2rem 1.5rem;
border-radius: 12px;
text-align: center;
}
.hero-content h1 {
font-size: clamp(2rem, 10vw, 2.8rem);
line-height: 1.1;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.15rem !important;
line-height: 1.5;
margin-bottom: 2rem;
color: #4b5563;
}
.hero-actions {
justify-content: center;
flex-direction: column;
width: 100%;
}
.hero-actions .secondary-link {
padding: 1rem;
width: 100%;
justify-content: center;
}
.hero-img {
display: none;
}
.section-header {
text-align: center;
margin-bottom: 4rem !important;
padding: 0 1rem;
}
.section-header h2 {
margin-bottom: 1.5rem;
}
.section-header p {
font-size: 1.1rem;
line-height: 1.6;
margin: 0 auto;
}
.section-header h2::after {
left: 50%;
transform: translateX(-50%);
}
.portfolio-grid {
grid-template-columns: 1fr !important;
}
.portfolio-card {
padding: 2rem 1.5rem;
text-align: center;
}
.split-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.split-img {
height: 250px !important;
}
.split-content {
text-align: center;
padding: 0 1rem;
}
.split-content h2 {
font-size: 1.8rem;
}
.split-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.target-grid {
grid-template-columns: 1fr !important;
text-align: left;
max-width: 300px;
margin: 0 auto;
gap: 1rem !important;
}
.target-item {
padding: 1rem;
background: white;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 12px;
width: 100%;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.spec-grid {
grid-template-columns: 1fr !important;
}
.spec-card {
padding: 2.5rem 1.5rem !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;
}
.principles-grid {
grid-template-columns: 1fr !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);
}
.cta-section {
padding: 4rem 0 !important;
}
.cta-section h2 {
font-size: clamp(1.5rem, 8vw, 2rem) !important;
}
.cta-section p {
font-size: 1.1rem !important;
}
footer {
text-align: center;
padding-bottom: 2rem !important;
}
footer .grid {
grid-template-columns: 1fr !important;
gap: 3rem !important;
}
footer .grid div {
display: flex;
flex-direction: column;
align-items: center;
}
footer .container > div:last-child {
flex-direction: column;
gap: 1rem;
text-align: center;
} }
.card { .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);
}
.portfolio-card {
padding: 2.5rem 1.5rem;
text-align: center;
}
.about-hero-grid {
grid-template-columns: 1fr !important;
gap: 3rem !important;
text-align: center;
}
.about-hero-grid h1 {
font-size: 2.5rem;
}
.about-hero-grid p {
font-size: 1.1rem;
}
.about-hero-img {
height: 300px !important;
}
.team-grid {
grid-template-columns: 1fr !important;
}
.team-card-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem !important;
}
.manifest-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.manifest-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
background: white;
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.03);
}
.contact-grid {
grid-template-columns: 1fr !important;
gap: 3rem !important;
}
.contact-form-grid {
grid-template-columns: 1fr !important;
}
.contact-info-item {
flex-direction: column;
align-items: center;
text-align: center;
background: white;
padding: 2rem 1.5rem;
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.badge {
font-size: 0.7rem;
letter-spacing: 0.1em;
}
h3 {
font-size: 1.25rem;
}
.legal-content {
padding: 1.5rem; padding: 1.5rem;
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);
}
.legal-content h2 {
font-size: 1.4rem;
margin-top: 2rem;
}
.legal-content p {
font-size: 1rem;
line-height: 1.7;
} }
} }

4
src/pages/AGB.tsx
View File

@@ -1,8 +1,8 @@
const AGB = () => ( const AGB = () => (
<div className="container"> <div className="container">
<section> <section>
<h1>Allgemeine Geschäftsbedingungen (AGB)</h1> <h1 className="no-underline">Allgemeine Geschäftsbedingungen</h1>
<div style={{ maxWidth: '800px' }}> <div className="legal-content">
<p>Hier finden Sie unsere Allgemeinen Geschäftsbedingungen...</p> <p>Hier finden Sie unsere Allgemeinen Geschäftsbedingungen...</p>
<p style={{ marginTop: '1rem' }}>[Platzhalter für AGB-Inhalte]</p> <p style={{ marginTop: '1rem' }}>[Platzhalter für AGB-Inhalte]</p>
</div> </div>

24
src/pages/About.tsx
View File

@@ -5,7 +5,7 @@ const About = () => (
<div> <div>
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <div className="container">
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}> <div className="grid about-hero-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div> <div>
<h1 className="no-underline">Über uns</h1> <h1 className="no-underline">Über uns</h1>
<p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}> <p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}>
@@ -18,7 +18,7 @@ const About = () => (
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. 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> </p>
</div> </div>
<div className="img-placeholder" style={{ height: '500px', marginBottom: 0 }}> <div className="img-placeholder about-hero-img" style={{ height: '500px', marginBottom: 0 }}>
[ Engineering Excellence Visualization ] [ Engineering Excellence Visualization ]
</div> </div>
</div> </div>
@@ -31,9 +31,9 @@ const About = () => (
<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)' }}>Expertise, die Energie zum Laufen bringt.</p>
</div> </div>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}> <div className="grid team-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
<div className="card"> <div className="card">
<div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}> <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 style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
<div> <div>
<h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3> <h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3>
@@ -49,7 +49,7 @@ const About = () => (
</div> </div>
<div className="card"> <div className="card">
<div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}> <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 style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
<div> <div>
<h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3> <h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3>
@@ -73,43 +73,43 @@ const About = () => (
<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)' }}>Werte, die unsere tägliche Arbeit leiten.</p>
</div> </div>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}> <div className="grid manifest-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>1. Kompetenz</h4> <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> <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>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>2. Verfügbarkeit</h4> <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> <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>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>3. Lösungen</h4> <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> <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>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>4. Logistik & Überwachung</h4> <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> <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>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>5. Offenheit</h4> <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> <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>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem' }}> <div className="manifest-item" style={{ display: 'flex', gap: '1.5rem' }}>
<div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div> <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4> <h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4>

10
src/pages/Contact.tsx
View File

@@ -35,7 +35,7 @@ const Contact = () => {
return ( return (
<div className="container"> <div className="container">
<section> <section>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}> <div className="grid contact-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}>
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@@ -46,21 +46,21 @@ const Contact = () => {
</p> </p>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}> <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 style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Mail size={24} /></div>
<div> <div>
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>E-Mail</h4> <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" style={{ fontSize: '1.1rem', fontWeight: 500 }}>info@mb-grid-solutions.com</a>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}> <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 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={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Telefon</h4>
<a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a> <a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a>
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}> <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 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={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Anschrift</h4>
@@ -89,7 +89,7 @@ const Contact = () => {
</div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}> <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
<div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1rem' }}> <div className="grid contact-form-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<div> <div>
<label htmlFor="name" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Name *</label> <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" /> <input type="text" id="name" name="name" required minLength={2} maxLength={100} placeholder="Ihr Name" />

43
src/pages/Home.tsx
View File

@@ -4,25 +4,25 @@ 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 className="hero" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', background: 'white', position: 'relative', overflow: 'hidden', padding: '4rem 0' }}>
<div style={{ position: 'absolute', top: 0, right: 0, width: '50%', height: '100%', background: '#f1f5f9', clipPath: 'polygon(20% 0, 100% 0, 100% 100%, 0% 100%)', zIndex: 0 }} /> <div className="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 }} />
<div className="container" style={{ position: 'relative', zIndex: 1 }}> <div className="container" style={{ position: 'relative', zIndex: 1 }}>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}> <div className="grid hero-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div> <div className="hero-content">
<span className="badge">Engineering Excellence</span> <span className="badge">Engineering Excellence</span>
<h1 style={{ marginBottom: '1.5rem' }}>Spezialisierter Partner für Energiekabelprojekte</h1> <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' }}> <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. Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
</p> </p>
<div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}> <div className="hero-actions" style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
<Link to="/kontakt" className="cta-button"> <Link to="/kontakt" className="cta-button">
Projekt anfragen <ArrowRight size={18} /> Projekt anfragen <ArrowRight size={18} />
</Link> </Link>
<Link to="/ueber-uns" style={{ fontWeight: 700, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: '0.5rem' }}> <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} /> Mehr erfahren <ArrowRight size={16} />
</Link> </Link>
</div> </div>
</div> </div>
<div className="img-placeholder" style={{ height: '400px', marginBottom: 0, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}> <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 ] [ High-Voltage Infrastructure ]
</div> </div>
</div> </div>
@@ -31,18 +31,18 @@ const Home = () => (
<section style={{ background: '#f8fafc' }}> <section style={{ background: '#f8fafc' }}>
<div className="container"> <div className="container">
<div style={{ marginBottom: '5rem' }}> <div className="section-header" style={{ marginBottom: '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' }}>Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.</p>
</div> </div>
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2.5rem' }}> <div className="grid portfolio-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2.5rem' }}>
{[ {[
{ icon: <Zap size={32} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' }, { icon: <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: <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: <BarChart3 size={32} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="card"> <div key={i} className="card portfolio-card">
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}>{item.icon}</div> <div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}>{item.icon}</div>
<h3 style={{ marginBottom: '1rem' }}>{item.title}</h3> <h3 style={{ marginBottom: '1rem' }}>{item.title}</h3>
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>{item.desc}</p> <p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>{item.desc}</p>
@@ -54,15 +54,15 @@ const Home = () => (
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <div className="container">
<div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}> <div className="grid split-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
<div className="img-placeholder" style={{ height: '400px', marginBottom: 0 }}> <div className="img-placeholder split-img" style={{ height: '400px', marginBottom: 0 }}>
[ Technical Drawing / CAD ] [ Technical Drawing / CAD ]
</div> </div>
<div> <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={{ marginBottom: '2.5rem', color: 'var(--text-secondary)', fontSize: '1.1rem' }}>Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.</p>
<div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}> <div className="grid target-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
{[ {[
'Energieversorger', 'Energieversorger',
'Ingenieurbüros', 'Ingenieurbüros',
@@ -71,7 +71,7 @@ const Home = () => (
'Projektierer EE', 'Projektierer EE',
'Planungsbüros' 'Planungsbüros'
].map((item, i) => ( ].map((item, i) => (
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 600, color: 'var(--primary-color)' }}> <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)' }} /> <CheckCircle2 size={18} style={{ color: 'var(--accent-green)' }} />
{item} {item}
</div> </div>
@@ -84,11 +84,11 @@ const Home = () => (
<section style={{ background: '#0f172a', color: 'white' }}> <section style={{ background: '#0f172a', color: 'white' }}>
<div className="container"> <div className="container">
<div style={{ marginBottom: '5rem' }}> <div className="section-header" style={{ marginBottom: '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" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}> <div className="grid spec-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
{[ {[
{ label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y, NA2XS(FL)2Y, NA2X(F)KLD2Y', desc: 'Umfassende Expertise in der Spezifikation gängiger Hochspannungskabel.' }, { label: '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.' },
@@ -96,6 +96,7 @@ const Home = () => (
].map((item, i) => ( ].map((item, i) => (
<div <div
key={i} 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: '2.5rem', border: '1px solid rgba(255,255,255,0.1)' }}
> >
<h4 style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--accent-green)', marginBottom: '1rem', letterSpacing: '0.2em' }}>{item.label}</h4> <h4 style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--accent-green)', marginBottom: '1rem', letterSpacing: '0.2em' }}>{item.label}</h4>
@@ -109,17 +110,17 @@ const Home = () => (
<section style={{ background: 'white' }}> <section style={{ background: 'white' }}>
<div className="container"> <div className="container">
<div style={{ marginBottom: '5rem' }}> <div className="section-header" style={{ marginBottom: '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" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}> <div className="grid principles-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
{[ {[
{ title: 'Exzellenz', desc: 'Höchste technische Präzision in jedem Detail. Wir suchen die optimale Lösung jenseits des Standards.' }, { title: '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} style={{ borderLeft: '3px solid var(--accent-green)', paddingLeft: '2rem' }}> <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> <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> <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, fontSize: '1rem' }}>{item.desc}</p>
</div> </div>
@@ -128,13 +129,13 @@ const Home = () => (
</div> </div>
</section> </section>
<section style={{ background: 'var(--primary-color)', padding: '6rem 0', position: 'relative', overflow: 'hidden' }}> <section className="cta-section" style={{ background: 'var(--primary-color)', padding: '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 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' }}> <p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: '3rem', fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 3rem' }}>
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p> </p>
<Link to="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}> <Link to="/kontakt" className="cta-button">
Jetzt Kontakt aufnehmen <ArrowRight size={18} /> Jetzt Kontakt aufnehmen <ArrowRight size={18} />
</Link> </Link>
</div> </div>

8
src/pages/Legal.tsx
View File

@@ -1,8 +1,8 @@
const Legal = () => ( const Legal = () => (
<div className="container"> <div className="container">
<section> <section>
<h1>Impressum</h1> <h1 className="no-underline">Impressum</h1>
<div style={{ maxWidth: '800px' }}> <div className="legal-content">
<p><strong>Angaben gemäß § 5 TMG</strong></p> <p><strong>Angaben gemäß § 5 TMG</strong></p>
<p style={{ marginBottom: '1.5rem' }}> <p style={{ marginBottom: '1.5rem' }}>
MB Grid Solutions GmbH<br /> MB Grid Solutions GmbH<br />
@@ -13,8 +13,8 @@ const Legal = () => (
<p style={{ marginBottom: '1.5rem' }}>Michael Bodemer</p> <p style={{ marginBottom: '1.5rem' }}>Michael Bodemer</p>
<p><strong>Kontakt:</strong></p> <p><strong>Kontakt:</strong></p>
<p style={{ marginBottom: '1.5rem' }}> <p style={{ marginBottom: '1.5rem' }}>
E-Mail: info@mb-grid-solutions.com<br /> E-Mail: <a href="mailto:info@mb-grid-solutions.com">info@mb-grid-solutions.com</a><br />
Web: www.mb-grid-solutions.com Web: <a href="https://www.mb-grid-solutions.com">www.mb-grid-solutions.com</a>
</p> </p>
<p><strong>Registereintrag:</strong></p> <p><strong>Registereintrag:</strong></p>
<p style={{ marginBottom: '1.5rem' }}> <p style={{ marginBottom: '1.5rem' }}>

12
src/pages/Privacy.tsx
View File

@@ -1,19 +1,19 @@
const Privacy = () => ( const Privacy = () => (
<div className="container"> <div className="container">
<section> <section>
<h1>Datenschutzerklärung</h1> <h1 className="no-underline">Datenschutzerklärung</h1>
<div style={{ maxWidth: '800px' }}> <div className="legal-content">
<h2>1. Datenschutz auf einen Blick</h2> <h2>1. Datenschutz auf einen Blick</h2>
<p style={{ marginBottom: '1.5rem' }}>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p> <p>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
<h2>2. Hosting</h2> <h2>2. Hosting</h2>
<p style={{ marginBottom: '1.5rem' }}>Unsere Website wird bei Hetzner Online GmbH gehostet. Der Serverstandort ist Deutschland. Wir haben einen Vertrag über Auftragsverarbeitung (AVV) mit Hetzner geschlossen.</p> <p>Unsere Website wird bei Hetzner Online GmbH gehostet. Der Serverstandort ist Deutschland. Wir haben einen Vertrag über Auftragsverarbeitung (AVV) mit Hetzner geschlossen.</p>
<h2>3. Kontaktformular</h2> <h2>3. Kontaktformular</h2>
<p style={{ marginBottom: '1.5rem' }}>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p> <p>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
<h2>4. Server-Log-Dateien</h2> <h2>4. Server-Log-Dateien</h2>
<p style={{ marginBottom: '1.5rem' }}>Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind: Browsertyp und Browserversion, verwendetes Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage, IP-Adresse.</p> <p>Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind: Browsertyp und Browserversion, verwendetes Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage, IP-Adresse.</p>
</div> </div>
</section> </section>
</div> </div>