first commit

2025-11-27 11:44:23 +01:00
commit 989253c72f
32 changed files with 4983 additions and 0 deletions
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <nav className="nav">
+      <div className="nav-container">
+        <Link href="/" className="nav-logo">
+          doing-it
+        </Link>
+        
+        {/* Desktop Menu */}
+        <div className="nav-menu">
+          <Link href="/" className="nav-link">
+            Home
+          </Link>
+          <Link href="/unternehmen" className="nav-link">
+            Für Unternehmen
+          </Link>
+          <Link href="/quereinsteiger" className="nav-link">
+            Für Quereinsteiger
+          </Link>
+          <Link href="/ueber-uns" className="nav-link">
+            Über uns
+          </Link>
+          <Link href="/kontakt" className="nav-link">
+            Kontakt
+          </Link>
+          <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
+            <span aria-label="LinkedIn">🔗</span>
+          </a>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className="nav-toggle"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Menu"
+        >
+          <span className={isOpen ? 'open' : ''}></span>
+          <span className={isOpen ? 'open' : ''}></span>
+          <span className={isOpen ? 'open' : ''}></span>
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="nav-mobile"
+          >
+            <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Home
+            </Link>
+            <Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Für Unternehmen
+            </Link>
+            <Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Für Quereinsteiger
+            </Link>
+            <Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Über uns
+            </Link>
+            <Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Kontakt
+            </Link>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  )
+}
+