+
© {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.
Made with precision.
diff --git a/src/index.css b/src/index.css
index 2c4d254..fb1e074 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
}
}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 6a3e273..42e1334 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -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 = () => (
-
+
-
-
-
Über uns
-
- Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
-
-
- 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.
-
-
- 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.
-
-
-
- [ Engineering Excellence Visualization ]
-
+
+
Über uns
+
+ Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
+
+
+ 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.
+
+
+ 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.
+
-
+
Die Köpfe hinter MB Grid Solution
-
Expertise, die Energie zum Laufen bringt.
+
+ Expertise, die Energie zum Laufen bringt.
+
-
+
-
-
+
+
-
Michael Bodemer
-
Technische Leitung
+
+
Michael Bodemer
+
+
+
+
+
+ Geschäftsführung
+
-
- „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“
+
+ „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren."
-
+
Michael Bodemer ist 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.
-
-
+
+
-
Klaus Mintel
-
Projektmanagement
+
+
+ Geschäftsführung
+
-
- „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“
+
+ „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen."
-
+
Klaus 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.
@@ -69,51 +183,182 @@ const About = () => (
-
+
Unser Manifest
-
Werte, die unsere tägliche Arbeit leiten.
+
+ Werte, die unsere tägliche Arbeit leiten.
+
-
-
-
+
+
+
-
1. Kompetenz
-
Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
+
+ 1. Kompetenz
+
+
+ Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
+
-
-
+
+
+
+
-
2. Verfügbarkeit
-
Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.
+
+ 2. Verfügbarkeit
+
+
+ Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.
+
-
-
+
+
+
+
-
3. Lösungen
-
Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.
+
+ 3. Lösungen
+
+
+ Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.
+
-
-
+
+
+
+
-
4. Logistik & Überwachung
-
Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
+
+ 4. Logistik & Überwachung
+
+
+ Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
+
-
-
+
+
+
+
-
5. Offenheit
-
Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.
+
+ 5. Offenheit
+
+
+ Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.
+
-
-
+
+
+
+
-
6. Zuverlässigkeit
-
Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.
+
+ 6. Zuverlässigkeit
+
+
+ Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.
+
@@ -122,10 +367,44 @@ const About = () => (
-
-
Bereit für Ihr nächstes Projekt?
-
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
-
Jetzt Kontakt aufnehmen
+
+
+ Bereit für Ihr nächstes Projekt?
+
+
+ Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
+
+
+ Jetzt Kontakt aufnehmen
+
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index e73fe05..c60343e 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -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 (
-
-
+
+
Kontakt
-
+
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
-
-
-
-
-
E-Mail
-
info@mb-grid-solutions.com
+
-
-
-
-
Anschrift
-
+
+ Telefon
+
+
+ +49 (0) 123 456789
+
+
+
+
+
+
+
+
+
+ Anschrift
+
+
MB Grid Solutions GmbH
Raiffeisenstraße 22
73630 Remshalden
@@ -72,54 +169,180 @@ const Contact = () => {
-
+
-
+
{submitted ? (
-
-
-
Nachricht gesendet
-
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
-
setSubmitted(false)} className="cta-button" style={{ marginTop: '2rem' }}>Weitere Nachricht
+
+
+
+
+
+ Nachricht gesendet
+
+
+ Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
+
+
setSubmitted(false)}
+ className="cta-button"
+ aria-label="Weitere Nachricht senden"
+ >
+ Weitere Nachricht
+
) : (
-
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index c6e0e9a..353b28c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -3,27 +3,61 @@ import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
const Home = () => (
-
-
+
-
-
-
Engineering Excellence
-
Spezialisierter Partner für Energiekabelprojekte
-
- Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
-
-
-
- Projekt anfragen
-
-
- Mehr erfahren
-
-
-
-
- [ High-Voltage Infrastructure ]
+
+
Engineering Excellence
+
+ Spezialisierter Partner für Energiekabelprojekte
+
+
+ Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
+
+
+
+ Projekt anfragen
+
+
+ Mehr erfahren
+
@@ -31,21 +65,42 @@ const Home = () => (
-
+
Portfolio
Unsere Leistungen
-
Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.
+
+ Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.
+
-
+
{[
- { icon:
, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' },
- { icon:
, title: 'Projektbegleitung', desc: 'Professionelle Überwachung und Qualitätssicherung während der gesamten Ausführung.' },
- { icon:
, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
+ { icon:
, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' },
+ { icon:
, title: 'Projektbegleitung', desc: 'Professionelle Überwachung und Qualitätssicherung während der gesamten Ausführung.' },
+ { icon:
, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
].map((item, i) => (
-
{item.icon}
-
{item.title}
-
{item.desc}
+
+ {item.icon}
+
+
{item.title}
+
+ {item.desc}
+
))}
@@ -54,15 +109,39 @@ const Home = () => (
-
-
- [ Technical Drawing / CAD ]
-
+
+
Expertise
Anwendungen & Zielgruppen
-
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
-
+
+ Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
+
+
{[
'Energieversorger',
'Ingenieurbüros',
@@ -71,8 +150,19 @@ const Home = () => (
'Projektierer EE',
'Planungsbüros'
].map((item, i) => (
-
-
+
+
{item}
))}
@@ -82,26 +172,63 @@ const Home = () => (
-
+
-
+
Expertise
Technische Spezifikationen
-
+
{[
{ 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) => (
-
-
{item.label}
-
{item.value}
-
{item.desc}
+
+ {item.label}
+
+
+ {item.value}
+
+
+ {item.desc}
+
))}
@@ -110,33 +237,84 @@ const Home = () => (
-
+
Werte
Unsere Leitprinzipien
-
+
{[
{ 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) => (
-
-
{item.title}
-
{item.desc}
+
+
+ {item.title}
+
+
+ {item.desc}
+
))}
-
+
-
Bereit für Ihr nächstes Projekt?
-
+
+ Bereit für Ihr nächstes Projekt?
+
+
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
-
- Jetzt Kontakt aufnehmen
+
+ Jetzt Kontakt aufnehmen