content

src/pages/About.tsx

@@ -1,9 +1,9 @@
-import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck, Linkedin } from 'lucide-react';
+import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
 
 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/profile/mb-grid-solutions-team.webp")',
+      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")',
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       minHeight: 'clamp(60vh, 70vh, 80vh)',
@@ -45,136 +45,56 @@ const About = () => (
           marginBottom: 'clamp(3rem, 6vw, 4rem)'
         }}>
           <h2 className="no-underline">Die Köpfe und Koordinatoren hinter MB Grid Solution</h2>
-          <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))',
           gap: 'var(--spacing-xl)'
         }}>
           <div className="card">
-            <div className="team-card-header" style={{
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
-              display: 'flex',
+              <h3 style={{ marginBottom: 0 }}>Michael Bodemer</h3>
-              gap: 'var(--spacing-xl)',
+              <a
-              marginBottom: 'var(--spacing-lg)'
+                href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
-            }}>
+                target="_blank"
-              <img
+                rel="noopener noreferrer"
-                src="/media/profile/michael-bodemer.webp"
+                style={{ color: '#0077b5', display: 'flex' }}
-                alt="Michael Bodemer - Geschäftsführung"
+                aria-label="Michael Bodemer auf LinkedIn"
-                style={{
+              >
-                  width: '120px',
+                <Linkedin size={20} />
-                  height: '120px',
+              </a>
-                  objectFit: 'cover',
-                  flexShrink: 0,
-                  borderRadius: '12px'
-                }}
-                loading="lazy"
-              />
-              <div>
-                <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 und Inhaber
-                </p>
-              </div>
             </div>
             <p style={{
-              fontStyle: 'italic',
+              color: 'var(--accent-green)',
-              marginBottom: 'var(--spacing-lg)',
+              fontWeight: 600,
-              color: 'var(--primary-color)',
+              fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
-              fontWeight: 500,
+              textTransform: 'uppercase',
-              fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+              letterSpacing: '0.05em',
-              lineHeight: 1.6
             }}>
-              „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren."
+              Geschäftsführung und Inhaber
-            </p>
-            <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={{
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
-              display: 'flex',
+              <h3 style={{ marginBottom: 0 }}>Klaus Mintel</h3>
-              gap: 'var(--spacing-xl)',
+              <a
-              marginBottom: 'var(--spacing-lg)'
+                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
-            }}>
+                target="_blank"
-              <img
+                rel="noopener noreferrer"
-                src="/media/profile/klaus-mintel.webp"
+                style={{ color: '#0077b5', display: 'flex' }}
-                alt="Klaus Mintel - Geschäftsführung"
+                aria-label="Klaus Mintel auf LinkedIn"
-                style={{
+              >
-                  width: '120px',
+                <Linkedin size={20} />
-                  height: '120px',
+              </a>
-                  objectFit: 'cover',
-                  flexShrink: 0,
-                  borderRadius: '12px'
-                }}
-                loading="lazy"
-              />
-              <div>
-                <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',
+              color: 'var(--accent-green)',
-              marginBottom: 'var(--spacing-lg)',
+              fontWeight: 600,
-              color: 'var(--primary-color)',
+              fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
-              fontWeight: 500,
+              textTransform: 'uppercase',
-              fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+              letterSpacing: '0.05em',
-              lineHeight: 1.6
             }}>
-              „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen."
+              Geschäftsführung
-            </p>
-            <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>
         </div>

src/pages/Home.tsx

@@ -115,7 +115,7 @@ const Home = () => (
           gap: 'clamp(2rem, 6vw, 4rem)'
         }}>
           <img
-            src="/media/10432-DSC07539-Large.webp"
+            src="/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp"
             alt="Technical Engineering and Cable Infrastructure"
             className="split-img"
             style={{