design

app/error.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { RefreshCcw, Home } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="text-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-9xl font-extrabold text-slate-200 mb-8"
+        >
+          500
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+        >
+          <h1 className="text-4xl font-bold text-primary mb-4">Etwas ist schiefgelaufen</h1>
+          <p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
+            Es gab ein technisches Problem. Wir arbeiten bereits an der Lösung.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button
+              onClick={() => reset()}
+              className="btn-accent flex items-center gap-2"
+            >
+              <RefreshCcw size={18} />
+              Erneut versuchen
+            </button>
+            <Link href="/" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2">
+              <Home size={18} />
+              Zur Startseite
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { Home, ArrowLeft } from 'lucide-react';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="text-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-9xl font-extrabold text-slate-200 mb-8"
+        >
+          404
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+        >
+          <h1 className="text-4xl font-bold text-primary mb-4">Seite nicht gefunden</h1>
+          <p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
+            Die von Ihnen gesuchte Seite scheint nicht zu existieren oder wurde verschoben.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/" className="btn-primary flex items-center gap-2">
+              <Home size={18} />
+              Zur Startseite
+            </Link>
+            <button 
+              onClick={() => window.history.back()}
+              className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2"
+            >
+              <ArrowLeft size={18} />
+              Zurück
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -36,7 +36,7 @@ export default function Home() {
             initial="initial"
             animate="animate"
             variants={stagger}
-            className="max-w-3xl"
+            className="text-left"
           >
             <motion.span 
               variants={fadeInUp}
@@ -89,7 +89,7 @@ export default function Home() {
             variants={fadeInUp}
             className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"
           >
-            <div className="max-w-2xl">
+            <div>
               <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
               <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unsere Leistungen</h2>
               <p className="text-slate-600 text-lg md:text-xl">
@@ -128,8 +128,7 @@ export default function Home() {
               <motion.div
                 key={i}
                 variants={fadeInUp}
-                whileHover={{ y: -8 }}
+                className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300"
-                className="card-modern group motion-fix"
               >
                 <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
                   {item.icon}
@@ -219,7 +218,7 @@ export default function Home() {
             whileInView="animate"
             viewport={{ once: true }}
             variants={fadeInUp}
-            className="text-center max-w-3xl mx-auto mb-20"
+            className="mb-20"
           >
             <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
             <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
@@ -275,7 +274,7 @@ export default function Home() {
               </svg>
             </div>
             
-            <div className="relative z-10 max-w-2xl">
+            <div className="relative z-10">
               <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
                 Bereit für Ihr nächstes Projekt?
               </h2>

app/ueber-uns/page.tsx

@@ -37,7 +37,7 @@ export default function About() {
             initial="initial"
             animate="animate"
             variants={stagger}
-            className="max-w-3xl"
+            className="text-left"
           >
             <motion.span 
               variants={fadeInUp}
@@ -113,7 +113,7 @@ export default function About() {
             whileInView="animate"
             viewport={{ once: true }}
             variants={fadeInUp}
-            className="text-center max-w-3xl mx-auto mb-20"
+            className="mb-20"
           >
             <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
             <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unser Manifest</h2>
@@ -138,8 +138,7 @@ export default function About() {
               <motion.div
                 key={i}
                 variants={fadeInUp}
-                whileHover={{ y: -5 }}
+                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
-                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all motion-fix"
               >
                 <div className="text-accent mb-6">
                   <item.icon size={32} />
@@ -160,9 +159,9 @@ export default function About() {
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8 }}
-            className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden text-center"
+            className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden"
           >
-            <div className="relative z-10 max-w-2xl mx-auto">
+            <div className="relative z-10">
               <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
                 Bereit für Ihr nächstes Projekt?
               </h2>

components/Layout.tsx

@@ -35,7 +35,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   const navLinks = [
     { href: '/', label: 'Startseite', icon: Home },
     { href: '/ueber-uns', label: 'Über uns', icon: Info },
-    { href: '/kontakt', label: 'Kontakt', icon: Mail },
   ];
 
   return (
@@ -46,11 +45,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
         className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
           isScrolled 
-            ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
+            ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm' 
-            : 'bg-gradient-to-b from-white/50 to-transparent'
+            : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
         }`}
       >
-        <div className="container-custom flex justify-between items-center w-full">
+        <div className="container-custom flex justify-between items-center w-full relative z-10">
           <Link
             href="/"
             className="relative z-10 flex items-center group"
@@ -65,18 +64,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           </Link>
 
           {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center gap-1" aria-label="Hauptnavigation">
+          <nav className="hidden md:flex items-center gap-8" aria-label="Hauptnavigation">
             {navLinks.map((link) => (
               <Link 
                 key={link.href}
                 href={link.href} 
-                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                className={`relative px-2 py-1 text-sm font-bold tracking-tight transition-all group ${
                   isActive(link.href) 
-                    ? 'text-accent bg-accent/5'
+                    ? 'text-primary' 
-                    : `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary hover:bg-slate-50`
+                    : `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary`
                 }`}
               >
                 {link.label}
+                <span className={`absolute -bottom-1 left-0 w-full h-0.5 bg-accent transition-transform duration-300 origin-left ${isActive(link.href) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`} />
               </Link>
             ))}
             <Link 
@@ -105,7 +105,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
-            className="fixed inset-0 z-[90] bg-white pt-24 px-6 md:hidden"
+            className="fixed inset-0 z-[90] bg-white pt-32 px-6 md:hidden"
           >
             <nav className="flex flex-col gap-4">
               {navLinks.map((link) => (
@@ -179,6 +179,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                     {link.label}
                   </Link>
                 ))}
+                <Link href="/kontakt" className="hover:text-accent transition-colors">Kontakt</Link>
               </nav>
             </div>