init

src/components/Layout.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="layout">
+      <header style={{ 
+        position: 'sticky', 
+        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' }}>
+            <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} />
+          </Link>
+          <nav style={{ display: 'flex', gap: '2rem' }}>
+            <Link to="/" className="nav-link">Startseite</Link>
+            <Link to="/ueber-uns" className="nav-link">Über uns</Link>
+            <Link to="/kontakt" className="nav-link">Kontakt</Link>
+          </nav>
+        </div>
+      </header>
+
+      <main>
+        {children}
+      </main>
+
+      <footer style={{ borderTop: '1px solid var(--secondary-bg)', padding: '4rem 0', marginTop: '4rem', background: 'white' }}>
+        <div className="container">
+          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', marginBottom: '3rem' }}>
+            <div>
+              <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '80px', marginBottom: '1.5rem', filter: 'grayscale(1)' }} />
+              <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                Ihr Partner für Energiekabelprojekte bis 110 kV.
+              </p>
+            </div>
+            <div>
+              <h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Navigation</h4>
+              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                <Link to="/">Startseite</Link>
+                <Link to="/ueber-uns">Über uns</Link>
+                <Link to="/kontakt">Kontakt</Link>
+              </nav>
+            </div>
+            <div>
+              <h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Rechtliches</h4>
+              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                <Link to="/impressum">Impressum</Link>
+                <Link to="/datenschutz">Datenschutz</Link>
+                <Link to="/agb">AGB</Link>
+              </nav>
+            </div>
+          </div>
+          <div style={{ borderTop: '1px solid var(--secondary-bg)', paddingTop: '2rem', display: 'flex', justifyContent: 'space-between', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+            <div>&copy; {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.</div>
+            <div>Made with precision.</div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Layout;