update

src/components/Layout.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import { ArrowUp, Home, Info, Mail } from 'lucide-react';
-import { Link, useLocation, NavLink } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
-import { Home, Info, Mail, ArrowUp } from 'lucide-react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation();
@@ -39,7 +39,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             <img
               src="/assets/logo.png"
               alt="MB Grid Solutions"
-              style={{ height: '80px' }}
+              style={{ height: '160px' }}
               loading="eager"
             />
           </Link>

src/index.css

@@ -435,6 +435,7 @@ header .container {
   .hero {
     padding: 0 !important;
     min-height: auto !important;
+    display: block !important;
   }
 
   .hero-bg {
@@ -449,7 +450,7 @@ header .container {
   .hero-content {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     padding: var(--spacing-2xl) var(--spacing-lg);
-    text-align: center;
+    text-align: left !important;
     order: 2;
   }
 
@@ -458,6 +459,7 @@ header .container {
     line-height: 1.15;
     margin-bottom: var(--spacing-md);
     letter-spacing: -0.03em;
+    text-align: left !important;
   }
 
   .hero-content p {
@@ -465,13 +467,16 @@ header .container {
     line-height: 1.6;
     margin-bottom: var(--spacing-xl);
     color: #4b5563;
+    text-align: left !important;
+    max-width: none !important;
   }
 
   .hero-actions {
-    justify-content: center;
+    justify-content: flex-start !important;
     flex-direction: column;
     width: 100%;
     gap: var(--spacing-md) !important;
+    align-items: flex-start !important;
   }
 
   .hero-actions .secondary-link {

src/pages/About.tsx

@@ -3,15 +3,16 @@ import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck }
 const About = () => (
   <div>
     <section style={{
-      background: 'linear-gradient(to right, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
+      background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       minHeight: 'clamp(60vh, 70vh, 80vh)',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'flex-start'
     }}>
-      <div className="container">
+      <div className="container" style={{ margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
-        <div className="about-hero-content" style={{ maxWidth: '700px' }}>
+        <div className="about-hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
           <h1 className="no-underline">Über uns</h1>
           <p style={{
             fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
@@ -290,7 +291,7 @@ const About = () => (
         <div className="card" style={{
           background: 'var(--primary-color)',
           color: 'white',
-          textAlign: 'center',
+          textAlign: 'left',
           padding: 'clamp(3rem, 6vw, 4rem)'
         }}>
           <h2
@@ -301,7 +302,8 @@ const About = () => (
               padding: 0,
               marginBottom: 'var(--spacing-lg)',
               fontSize: 'clamp(1.5rem, 6vw, 2rem)',
-              position: 'relative'
+              position: 'relative',
+              textAlign: 'left'
             }}
           >
             Bereit für Ihr nächstes Projekt?
@@ -310,7 +312,8 @@ const About = () => (
             marginBottom: 'var(--spacing-2xl)',
             opacity: 0.9,
             fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
-            lineHeight: 1.65
+            lineHeight: 1.65,
+            textAlign: 'left'
           }}>
             Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
           </p>

src/pages/Contact.tsx

@@ -1,6 +1,6 @@
+import { CheckCircle, Mail, MapPin, Phone, Send } from 'lucide-react';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
 
 const Contact = () => {
   const [submitted, setSubmitted] = useState(false);
@@ -32,23 +32,48 @@ const Contact = () => {
   };
 
   return (
-    <div className="container">
+    <div>
+      <section
+        className="hero"
+        style={{
+          minHeight: 'clamp(40vh, 50vh, 60vh)',
+          display: 'flex',
+          alignItems: 'center',
+          background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/business/iStock-1068752548.jpg")',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          position: 'relative',
+          overflow: 'hidden',
+          padding: 'clamp(1.5rem, 4vw, 3rem) 0',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <div className="container" style={{ position: 'relative', zIndex: 1, margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
+          <div className="hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
+            <span className="badge">Kontakt</span>
+            <h1 style={{ marginBottom: 'var(--spacing-md)' }}>
+              Kontakt
+            </h1>
+            <p style={{
+              fontSize: 'clamp(1rem, 2vw, 1.1rem)',
+              marginBottom: 'var(--spacing-xl)',
+              color: 'var(--text-secondary)',
+              lineHeight: 1.6,
+              maxWidth: '600px'
+            }}>
+              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
+            </p>
+          </div>
+        </div>
+      </section>
+
       <section>
+        <div className="container">
           <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: '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',
@@ -344,6 +369,7 @@ const Contact = () => {
               )}
             </div>
           </div>
+        </div>
       </section>
     </div>
   );

src/pages/Home.tsx

@@ -9,16 +9,17 @@ const Home = () => (
         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")',
+        background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/cables/HS Kabel 2.jpg")',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         position: 'relative',
         overflow: 'hidden',
-        padding: 'clamp(2rem, 6vw, 4rem) 0'
+        padding: 'clamp(2rem, 6vw, 4rem) 0',
+        justifyContent: 'flex-start'
       }}
     >
-      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
+      <div className="container" style={{ position: 'relative', zIndex: 1, margin: '0 auto', display: 'flex', justifyContent: 'flex-start', paddingLeft: 0 }}>
-        <div className="hero-content" style={{ maxWidth: '700px' }}>
+        <div className="hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
           <span className="badge">Engineering Excellence</span>
           <h1 style={{ marginBottom: 'var(--spacing-lg)' }}>
             Spezialisierter Partner für Energiekabelprojekte
@@ -30,7 +31,7 @@ const Home = () => (
             lineHeight: 1.6,
             maxWidth: '600px'
           }}>
-            Herstellerneutrale technische Mit-Begleitung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
+            Herstellerneutrale technische Beratung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
           </p>
           <div className="hero-actions" style={{
             display: 'flex',
@@ -115,7 +116,7 @@ const Home = () => (
           gap: 'clamp(2rem, 6vw, 4rem)'
         }}>
           <img
-            src="/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp"
+            src="/media/cables/HS Kabel.png"
             alt="Technical Engineering and Cable Infrastructure"
             className="split-img"
             style={{
@@ -288,7 +289,7 @@ const Home = () => (
         overflow: 'hidden'
       }}
     >
-      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
+      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'left' }}>
         <h2
           className="no-underline"
           style={{
@@ -298,7 +299,8 @@ const Home = () => (
             marginBottom: 'var(--spacing-lg)',
             fontSize: 'clamp(1.5rem, 6vw, 2.5rem)',
             lineHeight: 1.2,
-            position: 'relative'
+            position: 'relative',
+            textAlign: 'left'
           }}
         >
           Bereit für Ihr nächstes Projekt?
@@ -308,8 +310,9 @@ const Home = () => (
           marginBottom: 'var(--spacing-2xl)',
           fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
           maxWidth: '700px',
-          margin: '0 auto var(--spacing-2xl)',
+          margin: '0 0 var(--spacing-2xl) 0',
-          lineHeight: 1.65
+          lineHeight: 1.65,
+          textAlign: 'left'
         }}>
           Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
         </p>