design

app/globals.css

@@ -42,6 +42,50 @@
     perspective: 1000px;
   }
 
+  .grid-pattern {
+    background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .tech-line {
+    @apply absolute h-px bg-accent/20;
+  }
+
+  .mesh-gradient {
+    background-color: #ffffff;
+    background-image:
+      radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.05) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.05) 0px, transparent 50%);
+  }
+
+  .tech-dot {
+    @apply absolute w-1 h-1 bg-accent/30 rounded-full;
+  }
+
+  .tech-corner {
+    @apply absolute w-4 h-4 border-accent/30;
+  }
+
+  .section-number {
+    @apply absolute -left-12 top-0 text-6xl font-black text-slate-100 select-none pointer-events-none hidden lg:block;
+    font-family: monospace;
+  }
+
+  .tech-card-border {
+    @apply relative;
+  }
+
+  .tech-card-border::before {
+    content: '';
+    @apply absolute -inset-px bg-gradient-to-br from-accent/20 via-transparent to-accent/20 rounded-[inherit] opacity-0 transition-opacity duration-500;
+  }
+
+  .tech-card-border:hover::before {
+    @apply opacity-100;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold tracking-tight text-primary;
     text-wrap: balance;

app/impressum/page.tsx

@@ -1,20 +1,25 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { TechBackground } from '@/components/TechBackground';
 
 export default function Legal() {
   return (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20">
-      <div className="container-custom">
+    <div className="bg-slate-50 min-h-screen pt-32 pb-20 relative overflow-hidden">
+      <TechBackground />
+      <div className="container-custom relative z-10">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100"
+          transition={{ type: "spring", stiffness: 50, damping: 20 }}
+          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
         >
-          <h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1>
+          <div className="tech-corner top-8 left-8 border-t-2 border-l-2 opacity-20" />
+          <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2 opacity-20" />
           
-          <div className="space-y-12 text-slate-600 leading-relaxed">
+          <h1 className="text-4xl font-extrabold text-primary mb-12 relative z-10">Impressum</h1>
+          
+          <div className="space-y-12 text-slate-600 leading-relaxed relative z-10">
             <section>
               <h2 className="text-xl font-bold text-primary mb-4">Angaben gemäß § 5 TMG</h2>
               <p>

components/AboutContent.tsx

@@ -1,132 +1,99 @@
 'use client';
 
 import React from 'react';
-import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-
-const fadeInUp = {
-  initial: { opacity: 0, y: 20 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
-};
-
-const stagger = {
-  animate: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-};
+import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
+import { Reveal } from './Reveal';
+import { TechBackground } from './TechBackground';
+import { Counter } from './Counter';
+import { Button } from './Button';
 
 export default function About() {
   return (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden relative">
       {/* Hero Section */}
-      <section className="relative min-h-[60vh] flex items-center pt-32 pb-20">
+      <section className="relative min-h-[60vh] flex items-center pt-32 pb-20 overflow-hidden">
         <div className="absolute inset-0 z-0">
           <div 
             className="absolute inset-0 bg-cover bg-center"
             style={{ backgroundImage: 'url("/media/drums/iStock-487538226 (1).jpg")' }}
           />
           <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
+          <TechBackground />
         </div>
 
         <div className="container-custom relative z-10">
-          <motion.div
-            initial="initial"
-            animate="animate"
-            variants={stagger}
-            className="text-left"
-          >
-            <motion.span 
-              variants={fadeInUp}
-              className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
-            >
-              Über uns
-            </motion.span>
-            <motion.h1 
-              variants={fadeInUp}
-              className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
-            >
-              Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
-            </motion.h1>
-            <motion.p 
-              variants={fadeInUp}
-              className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"
-            >
-              MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
-            </motion.p>
-          </motion.div>
+          <div className="text-left relative">
+            <Counter value={1} className="section-number" />
+            <Reveal delay={0.1}>
+              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
+                Über uns
+              </span>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
+                Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
+              </h1>
+            </Reveal>
+            <Reveal delay={0.3}>
+              <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8">
+                MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
+              </p>
+            </Reveal>
+          </div>
         </div>
       </section>
 
       {/* Content Section */}
-      <section className="bg-white">
-        <div className="container-custom">
+      <section className="bg-white relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <div className="section-number">02</div>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-            <motion.div 
-              initial={{ opacity: 0, x: -20 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="space-y-6 text-lg text-slate-600 leading-relaxed"
-            >
-              <p>
-                Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
-              </p>
-              <p>
-                Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
-              </p>
-            </motion.div>
-            <motion.div 
-              variants={stagger}
-              initial="initial"
-              whileInView="animate"
-              viewport={{ once: true }}
-              className="grid grid-cols-1 sm:grid-cols-2 gap-6"
-            >
+            <Reveal direction="right">
+              <div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
+                <div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
+                <p>
+                  Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
+                </p>
+                <p>
+                  Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
+                </p>
+              </div>
+            </Reveal>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               {[
                 { name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
                 { name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
               ].map((person, i) => (
-                <motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
-                  <div className="flex justify-between items-start mb-4">
-                    <h3 className="text-xl font-bold text-primary">{person.name}</h3>
-                    <a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
-                      <Linkedin size={20} />
-                    </a>
+                <Reveal key={i} delay={i * 0.1}>
+                  <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
+                    <div className="flex justify-between items-start mb-4 relative z-10">
+                      <h3 className="text-xl font-bold text-primary">{person.name}</h3>
+                      <a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
+                        <Linkedin size={20} />
+                      </a>
+                    </div>
+                    <p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">{person.role}</p>
                   </div>
-                  <p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
-                </motion.div>
+                </Reveal>
               ))}
-            </motion.div>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Manifest Section */}
-      <section className="bg-slate-50">
-        <div className="container-custom">
-          <motion.div
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            variants={fadeInUp}
-            className="mb-20"
-          >
+      <section className="bg-slate-950 text-accent relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <Counter value={3} className="section-number !text-white/5" />
+          <Reveal 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>
-            <p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
-          </motion.div>
+            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2>
+            <p className="text-slate-400 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
+          </Reveal>
 
-          <motion.div 
-            variants={stagger}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-          >
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {[
               { icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
               { icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
@@ -135,45 +102,43 @@ export default function About() {
               { icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
               { icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
             ].map((item, i) => (
-              <motion.div
-                key={i}
-                variants={fadeInUp}
-                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
-              >
-                <div className="text-accent mb-6">
-                  <item.icon size={32} />
+              <Reveal key={i} delay={i * 0.1}>
+                <div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative overflow-hidden">
+                  <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
+                  <div className="text-accent mb-6">
+                    <item.icon size={32} />
+                  </div>
+                  <h4 className="text-xl font-bold text-white mb-4">{i + 1}. {item.title}</h4>
+                  <p className="text-slate-400 leading-relaxed">{item.desc}</p>
                 </div>
-                <h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
-                <p className="text-slate-600 leading-relaxed">{item.desc}</p>
-              </motion.div>
+              </Reveal>
             ))}
-          </motion.div>
+          </div>
         </div>
       </section>
 
       {/* CTA Section */}
-      <section className="bg-white">
-        <div className="container-custom">
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            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"
-          >
-            <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>
-              <p className="text-slate-400 text-xl mb-12">
-                Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
-              </p>
-              <Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
-                Jetzt Kontakt aufnehmen
-                <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
-              </Link>
+      <section className="bg-white relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <div className="section-number">04</div>
+          <Reveal>
+            <div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden group">
+              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
+              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
+              <div className="relative z-10 max-w-2xl">
+                <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
+                  Bereit für Ihr nächstes Projekt?
+                </h2>
+                <p className="text-slate-400 text-xl mb-12">
+                  Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
+                </p>
+                <Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg">
+                  Jetzt Kontakt aufnehmen
+                </Button>
+              </div>
             </div>
-          </motion.div>
+          </Reveal>
         </div>
       </section>
     </div>

components/Button.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  variant?: 'primary' | 'accent' | 'outline' | 'ghost';
+  className?: string;
+  showArrow?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+
+export const Button = ({ 
+  children, 
+  href, 
+  onClick, 
+  variant = 'primary', 
+  className = '',
+  showArrow = false,
+  type = 'button',
+  disabled = false
+}: ButtonProps) => {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMousePosition({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
+
+  const baseStyles = "inline-flex items-center justify-center px-10 py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all duration-500 relative group disabled:opacity-50 disabled:cursor-not-allowed select-none overflow-hidden";
+  
+  const variants = {
+    primary: "bg-primary text-white shadow-lg",
+    accent: "bg-accent text-white shadow-lg",
+    outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
+    ghost: "bg-slate-100 text-primary hover:bg-slate-200"
+  };
+
+  const content = (
+    <span className="relative z-10 flex items-center gap-3">
+      {children}
+      {showArrow && (
+        <ArrowRight 
+          size={14} 
+          strokeWidth={3} 
+          className="group-hover:translate-x-1 transition-transform duration-300" 
+        />
+      )}
+    </span>
+  );
+
+  const spotlight = (
+    <motion.div
+      className="absolute inset-0 z-0 pointer-events-none transition-opacity duration-500"
+      style={{
+        opacity: isHovered ? 1 : 0,
+        background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.15), transparent 40%)`,
+      }}
+    />
+  );
+
+  const buttonProps = {
+    onMouseMove: handleMouseMove,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    className: `${baseStyles} ${variants[variant]} ${className}`,
+  };
+
+  if (href) {
+    return (
+      <Link href={href} {...buttonProps}>
+        {spotlight}
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button type={type} onClick={onClick} disabled={disabled} {...buttonProps}>
+      {spotlight}
+      {content}
+    </button>
+  );
+};

components/ContactContent.tsx

@@ -1,23 +1,11 @@
 'use client';
 
-import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
+import { CheckCircle, Mail, MapPin, Send } from 'lucide-react';
 import React, { useState } from 'react';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-
-const fadeInUp = {
-  initial: { opacity: 0, y: 20 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
-};
-
-const stagger = {
-  animate: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-};
+import { Reveal } from './Reveal';
+import { TechBackground } from './TechBackground';
+import { Counter } from './Counter';
+import { Button } from './Button';
 
 export default function Contact() {
   const [submitted, setSubmitted] = useState(false);
@@ -49,182 +37,173 @@ export default function Contact() {
   };
 
   return (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden relative">
       {/* Hero Section */}
-      <section className="relative min-h-[40vh] flex items-center pt-32 pb-20">
+      <section className="relative min-h-[40vh] flex items-center pt-32 pb-20 overflow-hidden">
         <div className="absolute inset-0 z-0">
           <div 
             className="absolute inset-0 bg-cover bg-center"
             style={{ backgroundImage: 'url("/media/laying/iStock-1282259999.jpg")' }}
           />
           <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
+          <TechBackground />
         </div>
 
         <div className="container-custom relative z-10">
-          <motion.div 
-            initial="initial"
-            animate="animate"
-            variants={stagger}
-            className="max-w-3xl"
-          >
-            <motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
-            <motion.h1 
-              variants={fadeInUp}
-              className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
-            >
-              Lassen Sie uns <span className="text-accent">sprechen</span>
-            </motion.h1>
-            <motion.p 
-              variants={fadeInUp}
-              className="text-slate-600 text-xl md:text-2xl leading-relaxed"
-            >
-              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
-            </motion.p>
-          </motion.div>
+          <div className="text-left relative">
+            <div className="section-number">01</div>
+            <Reveal delay={0.1}>
+              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
+                Lassen Sie uns <span className="text-accent">sprechen</span>
+              </h1>
+            </Reveal>
+            <Reveal delay={0.3}>
+              <p className="text-slate-600 text-xl md:text-2xl leading-relaxed">
+                Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
+              </p>
+            </Reveal>
+          </div>
         </div>
       </section>
 
-      <section className="bg-slate-50">
-        <div className="container-custom">
+      <section className="bg-slate-950 text-accent relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <Counter value={2} className="section-number !text-white/5" />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
-            <motion.div 
-              variants={stagger}
-              initial="initial"
-              whileInView="animate"
-              viewport={{ once: true }}
-              className="space-y-8"
-            >
-              <motion.div 
-                variants={fadeInUp}
-                whileHover={{ x: 5 }}
-                className="card-modern !p-8 flex gap-6 items-start"
-              >
-                <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
-                  <Mail size={24} />
-                </div>
-                <div>
-                  <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
-                  <a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
-                    info@mb-grid-solutions.com
-                  </a>
-                </div>
-              </motion.div>
-
-              <motion.div 
-                variants={fadeInUp}
-                whileHover={{ x: 5 }}
-                className="card-modern !p-8 flex gap-6 items-start"
-              >
-                <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
-                  <MapPin size={24} />
-                </div>
-                <div>
-                  <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
-                  <p className="text-primary text-xl font-bold leading-relaxed">
-                    MB Grid Solutions GmbH<br />
-                    Raiffeisenstraße 22<br />
-                    73630 Remshalden
-                  </p>
-                </div>
-              </motion.div>
-            </motion.div>
-
-            <motion.div 
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"
-            >
-              {submitted ? (
-                <motion.div 
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  className="text-center py-12"
-                >
-                  <div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
-                    <CheckCircle size={40} />
+            <div className="space-y-8">
+              <Reveal delay={0.1}>
+                <div className="bg-white/5 p-8 rounded-2xl border border-white/10 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
+                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
+                    <Mail size={24} />
                   </div>
-                  <h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
-                  <p className="text-slate-600 text-lg mb-10">
-                    Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
-                  </p>
-                  <button
-                    onClick={() => setSubmitted(false)}
-                    className="btn-primary"
-                  >
-                    Weitere Nachricht
-                  </button>
-                </motion.div>
-              ) : (
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="relative z-10">
+                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
+                    <a href="mailto:info@mb-grid-solutions.com" className="text-white text-xl font-bold hover:text-accent transition-colors">
+                      info@mb-grid-solutions.com
+                    </a>
+                  </div>
+                </div>
+              </Reveal>
+
+              <Reveal delay={0.2}>
+                <div className="bg-white/5 p-8 rounded-2xl border border-white/10 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
+                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
+                    <MapPin size={24} />
+                  </div>
+                  <div className="relative z-10">
+                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
+                    <p className="text-white text-xl font-bold leading-relaxed">
+                      MB Grid Solutions GmbH<br />
+                      Raiffeisenstraße 22<br />
+                      73630 Remshalden
+                    </p>
+                  </div>
+                </div>
+              </Reveal>
+
+              <Reveal delay={0.3}>
+                <div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-white/10 shadow-sm grayscale hover:grayscale-0 transition-all duration-700 relative group">
+                  <div className="absolute inset-0 border-2 border-accent/0 group-hover:border-accent/20 transition-all duration-500 z-10 pointer-events-none rounded-[2.5rem]" />
+                  <iframe 
+                    width="100%" 
+                    height="100%" 
+                    frameBorder="0" 
+                    scrolling="no" 
+                    marginHeight={0} 
+                    marginWidth={0} 
+                    src="https://www.openstreetmap.org/export/embed.html?bbox=9.445,48.815,9.465,48.825&layer=mapnik&marker=48.8198,9.4552"
+                  ></iframe>
+                </div>
+              </Reveal>
+            </div>
+
+            <Reveal delay={0.4}>
+              <div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden group">
+                <div className="tech-corner top-6 left-6 border-t-2 border-l-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                <div className="tech-corner bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                
+                {submitted ? (
+                  <div className="text-center py-12">
+                    <div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
+                      <CheckCircle size={40} />
+                    </div>
+                    <h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
+                    <p className="text-slate-600 text-lg mb-10">
+                      Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
+                    </p>
+                    <Button onClick={() => setSubmitted(false)}>
+                      Weitere Nachricht
+                    </Button>
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubmit} className="space-y-6 relative z-10">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div className="space-y-2">
+                        <label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
+                        <input
+                          type="text"
+                          id="name"
+                          name="name"
+                          required
+                          placeholder="Ihr Name"
+                          className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
+                        <input
+                          type="text"
+                          id="company"
+                          name="company"
+                          placeholder="Ihr Unternehmen"
+                          className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
+                        />
+                      </div>
+                    </div>
+                    
                     <div className="space-y-2">
-                      <label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
+                      <label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
                       <input
-                        type="text"
-                        id="name"
-                        name="name"
+                        type="email"
+                        id="email"
+                        name="email"
                         required
-                        placeholder="Ihr Name"
+                        placeholder="ihre@email.de"
                         className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
                       />
                     </div>
+                    
                     <div className="space-y-2">
-                      <label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
-                      <input
-                        type="text"
-                        id="company"
-                        name="company"
-                        placeholder="Ihr Unternehmen"
-                        className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
-                      />
+                      <label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
+                      <textarea
+                        id="message"
+                        name="message"
+                        required
+                        rows={5}
+                        placeholder="Wie können wir Ihnen helfen?"
+                        className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
+                      ></textarea>
                     </div>
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
-                    <input
-                      type="email"
-                      id="email"
-                      name="email"
-                      required
-                      placeholder="ihre@email.de"
-                      className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
-                    />
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
-                    <textarea
-                      id="message"
-                      name="message"
-                      required
-                      rows={5}
-                      placeholder="Wie können wir Ihnen helfen?"
-                      className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
-                    ></textarea>
-                  </div>
-                  
-                  <button
-                    type="submit"
-                    disabled={loading}
-                    className="btn-accent w-full py-5 text-lg group"
-                  >
-                    {loading ? 'Wird gesendet...' : 'Nachricht senden'}
-                    <Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
-                  </button>
-                  
-                  <p className="text-xs text-slate-400 text-center">
-                    * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
-                    <Link href="/datenschutz" className="text-accent hover:underline font-semibold">
-                      Datenschutzerklärung
-                    </Link>{' '}
-                    einverstanden.
-                  </p>
-                </form>
-              )}
-            </motion.div>
+                    
+                    <Button type="submit" variant="accent" disabled={loading} className="w-full py-5 text-lg" showArrow>
+                      {loading ? 'Wird gesendet...' : 'Nachricht senden'}
+                    </Button>
+                    
+                    <p className="text-xs text-slate-400 text-center">
+                      * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
+                      <a href="/datenschutz" className="text-accent hover:underline font-semibold">
+                        Datenschutzerklärung
+                      </a>{' '}
+                      einverstanden.
+                    </p>
+                  </form>
+                )}
+              </div>
+            </Reveal>
           </div>
         </div>
       </section>

components/Counter.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useInView, animate } from 'framer-motion';
+
+interface CounterProps {
+  value: number;
+  className?: string;
+}
+
+export const Counter = ({ value, className = '' }: CounterProps) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-50px" });
+  const [displayValue, setDisplayValue] = useState(0);
+
+  useEffect(() => {
+    if (isInView) {
+      const controls = animate(0, value, {
+        type: "spring",
+        stiffness: 50,
+        damping: 20,
+        mass: 1,
+        onUpdate: (latest) => {
+          setDisplayValue(Math.round(latest));
+        }
+      });
+      return () => controls.stop();
+    }
+  }, [isInView, value]);
+
+  return (
+    <span ref={ref} className={className}>
+      {displayValue < 10 ? `0${displayValue}` : displayValue}
+    </span>
+  );
+};

components/HomeContent.tsx

@@ -1,22 +1,13 @@
 'use client';
 
 import Link from 'next/link';
-import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
+import { Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
 import { motion } from 'framer-motion';
-
-const fadeInUp = {
-  initial: { opacity: 0, y: 20 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
-};
-
-const stagger = {
-  animate: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-};
+import { Reveal, Stagger } from './Reveal';
+import { TechBackground } from './TechBackground';
+import { Counter } from './Counter';
+import { Button } from './Button';
+import { TileGrid } from './TileGrid';
 
 export default function Home() {
   const serviceJsonLd = {
@@ -59,98 +50,82 @@ export default function Home() {
   };
 
   return (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden relative">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
       />
+      
       {/* Hero Section */}
-      <section className="relative min-h-[90vh] flex items-center pt-32 pb-20">
+      <section className="relative min-h-[90vh] flex items-center pt-32 pb-20 overflow-hidden">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="absolute inset-0 bg-cover bg-center"
             style={{ backgroundImage: 'url("/media/business/iStock-1068752548.jpg")' }}
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
+          <TechBackground />
         </div>
+        <TileGrid />
 
         <div className="container-custom relative z-10">
-          <motion.div
-            initial="initial"
-            animate="animate"
-            variants={stagger}
-            className="text-left"
-          >
-            <motion.span 
-              variants={fadeInUp}
-              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6"
-            >
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
+          <div className="text-left relative">
+            <Counter value={1} className="section-number" />
+            <Reveal delay={0.1}>
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
+                </span>
+                Engineering Excellence
               </span>
-              Engineering Excellence
-            </motion.span>
+            </Reveal>
             
-            <motion.h1 
-              variants={fadeInUp}
-              className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]"
-            >
-              Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
-            </motion.h1>
+            <Reveal delay={0.2}>
+              <h1 className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]">
+                Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
+              </h1>
+            </Reveal>
             
-            <motion.p 
-              variants={fadeInUp}
-              className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl"
-            >
-              Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
-            </motion.p>
+            <Reveal delay={0.3}>
+              <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl">
+                Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
+              </p>
+            </Reveal>
             
-            <motion.div 
-              variants={fadeInUp}
-              className="flex flex-wrap gap-4"
-            >
-              <Link href="/kontakt" className="btn-accent group">
-                Projekt anfragen 
-                <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
-              </Link>
-              <Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
-                Mehr erfahren
-              </Link>
-            </motion.div>
-          </motion.div>
+            <Reveal delay={0.4}>
+              <div className="flex flex-wrap gap-4">
+                <Button href="/kontakt" variant="accent" showArrow>
+                  Projekt anfragen
+                </Button>
+                <Button href="/ueber-uns" variant="ghost">
+                  Mehr erfahren
+                </Button>
+              </div>
+            </Reveal>
+          </div>
         </div>
       </section>
 
       {/* Portfolio Section */}
-      <section className="bg-slate-50">
-        <div className="container-custom">
-          <motion.div
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            variants={fadeInUp}
-            className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"
-          >
+      <section className="bg-slate-950 text-accent relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <Counter value={2} className="section-number !text-white/5" />
+          <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
             <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">
+              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unsere Leistungen</h2>
+              <p className="text-slate-400 text-lg md:text-xl">
                 Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
               </p>
             </div>
-            <Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group">
+            <Link href="/ueber-uns" className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group">
               Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
             </Link>
-          </motion.div>
+          </Reveal>
 
-          <motion.div 
-            variants={stagger}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 md:grid-cols-3 gap-8 motion-fix"
-          >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {[
               { 
                 icon: <Zap size={32} />, 
@@ -168,57 +143,50 @@ export default function Home() {
                 desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.' 
               }
             ].map((item, i) => (
-              <motion.div
-                key={i}
-                variants={fadeInUp}
-                className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300"
-              >
-                <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}
+              <Reveal key={i} delay={i * 0.1}>
+                <div className="bg-white/5 p-8 rounded-2xl border border-white/10 group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden">
+                  <div className="absolute top-0 right-0 w-16 h-16 bg-accent/5 -mr-8 -mt-8 rounded-full group-hover:bg-accent/10 transition-colors" />
+                  <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 relative z-10">
+                    {item.icon}
+                  </div>
+                  <h3 className="text-2xl font-bold text-white mb-4 relative z-10">{item.title}</h3>
+                  <p className="text-slate-400 leading-relaxed relative z-10">
+                    {item.desc}
+                  </p>
                 </div>
-                <h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
-                <p className="text-slate-600 leading-relaxed">
-                  {item.desc}
-                </p>
-              </motion.div>
+              </Reveal>
             ))}
-          </motion.div>
+          </div>
         </div>
       </section>
 
       {/* Expertise Section */}
-      <section className="bg-white">
-        <div className="container-custom">
+      <section className="bg-white relative overflow-hidden">
+        <TechBackground />
+        <div className="container-custom relative z-10">
+          <Counter value={3} className="section-number" />
           <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
-            <motion.div 
-              initial={{ opacity: 0, x: -20 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="relative"
-            >
-              <div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
-              <img
-                src="/media/cables/HS Kabel.png"
-                alt="Technical Engineering"
-                className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
-              />
-            </motion.div>
-            <motion.div
-              initial="initial"
-              whileInView="animate"
-              viewport={{ once: true }}
-              variants={stagger}
-            >
-              <motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</motion.span>
-              <motion.h2 variants={fadeInUp} className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</motion.h2>
-              <motion.p variants={fadeInUp} className="text-slate-600 text-lg md:text-xl mb-12">
-                Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
-              </motion.p>
-              <motion.div 
-                variants={stagger}
-                className="grid grid-cols-1 sm:grid-cols-2 gap-4"
-              >
+            <Reveal direction="right">
+              <div className="relative overflow-hidden rounded-2xl shadow-lg group">
+                <div className="absolute inset-0 bg-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 pointer-events-none" />
+                <img
+                  src="/media/cables/HS Kabel.png"
+                  alt="Technical Engineering"
+                  className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
+                />
+                <div className="tech-corner top-4 left-4 border-t-2 border-l-2 z-20" />
+                <div className="tech-corner bottom-4 right-4 border-b-2 border-r-2 z-20" />
+              </div>
+            </Reveal>
+            <div>
+              <Reveal>
+                <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
+                <h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2>
+                <p className="text-slate-600 text-lg md:text-xl mb-12">
+                  Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
+                </p>
+              </Reveal>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 {[
                   'Energieversorger',
                   'Ingenieurbüros',
@@ -227,19 +195,18 @@ export default function Home() {
                   'Projektierer EE',
                   'Planungsbüros'
                 ].map((item, i) => (
-                  <motion.div
-                    key={i}
-                    variants={fadeInUp}
-                    className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group"
-                  >
-                    <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
-                      <CheckCircle2 size={16} />
+                  <Reveal key={i} delay={i * 0.05}>
+                    <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
+                      <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
+                        <CheckCircle2 size={16} />
+                      </div>
+                      <span className="text-primary font-semibold">{item}</span>
                     </div>
-                    <span className="text-primary font-semibold">{item}</span>
-                  </motion.div>
+                  </Reveal>
                 ))}
-              </motion.div>
-            </motion.div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
@@ -254,82 +221,94 @@ export default function Home() {
           />
           <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
         </div>
+        <TechBackground />
         
         <div className="container-custom relative z-10">
-          <motion.div
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            variants={fadeInUp}
-            className="mb-20"
-          >
+          <Counter value={4} className="section-number !text-white/5" />
+          {/* Data Stream Effect */}
+          <div className="absolute -top-10 right-0 w-px h-64 bg-gradient-to-b from-transparent via-accent/50 to-transparent animate-pulse" />
+          <div className="absolute -bottom-10 left-10 w-px h-64 bg-gradient-to-b from-transparent via-accent/30 to-transparent animate-pulse delay-700" />
+
+          <Reveal 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>
-          </motion.div>
+          </Reveal>
           
-          <motion.div 
-            variants={stagger}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 md:grid-cols-3 gap-8"
-          >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {[
               { label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' },
               { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' },
               { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
             ].map((item, i) => (
-              <motion.div
-                key={i}
-                variants={fadeInUp}
-                className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors"
-              >
-                <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
-                  {item.label}
-                </h4>
-                <p className="text-2xl font-bold text-white mb-4 leading-tight">
-                  {item.value}
-                </p>
-                <p className="text-slate-400 leading-relaxed">
-                  {item.desc}
-                </p>
-              </motion.div>
+              <Reveal key={i} delay={i * 0.1}>
+                <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group overflow-hidden">
+                  <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
+                  <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
+                    {item.label}
+                  </h4>
+                  <p className="text-2xl font-bold text-white mb-4 leading-tight">
+                    {item.value}
+                  </p>
+                  <p className="text-slate-400 leading-relaxed">
+                    {item.desc}
+                  </p>
+                </div>
+              </Reveal>
             ))}
-          </motion.div>
+          </div>
         </div>
       </section>
 
       {/* CTA Section */}
-      <section className="bg-white">
-        <div className="container-custom">
-          <motion.div 
-            initial={{ opacity: 0, scale: 0.95 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden"
-          >
-            <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
-              <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
-                <circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
-                <circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
-              </svg>
+      <section className="bg-white relative overflow-hidden">
+        <TechBackground />
+        {/* Decorative Background Elements */}
+        <div className="absolute top-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
+
+        <div className="container-custom relative z-10">
+          <Counter value={5} className="section-number" />
+          <Reveal>
+            <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden group">
+              {/* Corner Accents */}
+              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
+              <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
+              <div className="tech-corner bottom-8 left-8 border-b-2 border-l-2" />
+              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
+              
+              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
+                <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <motion.circle 
+                    animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
+                    cx="400" cy="0" r="400" stroke="white" strokeWidth="2" 
+                  />
+                  <motion.circle 
+                    animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
+                    cx="400" cy="0" r="300" stroke="white" strokeWidth="2" 
+                  />
+                  <motion.circle 
+                    animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: 1 }}
+                    cx="400" cy="0" r="200" stroke="white" strokeWidth="2" 
+                  />
+                </svg>
+              </div>
+              
+              <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>
+                <p className="text-slate-300 text-xl mb-12 leading-relaxed">
+                  Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
+                </p>
+                <Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg">
+                  Jetzt Kontakt aufnehmen
+                </Button>
+              </div>
             </div>
-            
-            <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>
-              <p className="text-slate-300 text-xl mb-12 leading-relaxed">
-                Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
-              </p>
-              <Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
-                Jetzt Kontakt aufnehmen
-                <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
-              </Link>
-            </div>
-          </motion.div>
+          </Reveal>
         </div>
       </section>
     </div>

components/Layout.tsx

@@ -5,6 +5,8 @@ import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Reveal } from './Reveal';
+import { Button } from './Button';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
@@ -39,16 +41,14 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div className="min-h-screen flex flex-col font-sans">
-      <motion.header
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        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/90 backdrop-blur-lg border-b border-slate-200 shadow-sm' 
-            : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
-        }`}
-      >
+      <Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]">
+        <header
+          className={`transition-all duration-300 flex items-center py-1 ${
+            isScrolled
+              ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
+              : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
+          }`}
+        >
         <div className="container-custom flex justify-between items-center w-full relative z-10">
           <Link
             href="/"
@@ -79,12 +79,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                 <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 
-              href="/kontakt" 
-              className="ml-4 btn-primary !py-2 !px-5 !text-sm"
+            <Button
+              href="/kontakt"
+              className="ml-4 !py-2 !px-5 !text-[10px]"
             >
               Projekt anfragen
-            </Link>
+            </Button>
           </nav>
 
           {/* Mobile Menu Toggle */}
@@ -96,7 +96,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
           </button>
         </div>
-      </motion.header>
+        </header>
+      </Reveal>
 
       {/* Mobile Menu Overlay */}
       <AnimatePresence>
@@ -122,12 +123,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                   {link.label}
                 </Link>
               ))}
-              <Link 
-                href="/kontakt" 
-                className="mt-4 btn-primary w-full py-4 text-center"
+              <Button
+                href="/kontakt"
+                className="mt-4 w-full"
               >
                 Projekt anfragen
-              </Link>
+              </Button>
             </nav>
           </motion.div>
         )}
@@ -147,22 +148,37 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         <ArrowUp size={20} strokeWidth={2.5} />
       </button>
 
-      <motion.footer 
-        initial={{ opacity: 0 }}
-        whileInView={{ opacity: 1 }}
-        viewport={{ once: true }}
-        transition={{ duration: 1 }}
-        className="bg-slate-900 text-slate-300 py-16 md:py-24"
-      >
-        <div className="container-custom">
+      <Reveal fullWidth>
+        <footer className="bg-slate-900 text-slate-300 py-16 md:py-24 relative overflow-hidden group">
+          <div className="absolute inset-0 grid-pattern opacity-[0.08] pointer-events-none" />
+          
+          {/* Animated Tech Lines */}
+          <motion.div
+            animate={{ x: ['-100%', '100%'] }}
+            transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
+            className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/30 to-transparent"
+          />
+          <motion.div
+            animate={{ x: ['100%', '-100%'] }}
+            transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/20 to-transparent"
+          />
+
+          {/* Corner Accents */}
+          <div className="tech-corner top-8 left-8 border-t border-l border-white/10 group-hover:border-accent/30 transition-colors duration-700" />
+          <div className="tech-corner bottom-8 right-8 border-b border-r border-white/10 group-hover:border-accent/30 transition-colors duration-700" />
+          
+          <div className="container-custom relative z-10">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
             <div className="lg:col-span-2">
-              <img
-                src="/assets/logo.png"
-                alt="MB Grid Solutions"
-                className="h-20 mb-8 brightness-0 invert opacity-80"
-                loading="lazy"
-              />
+              <Link href="/" className="inline-block mb-8 group">
+                <img
+                  src="/assets/logo.png"
+                  alt="MB Grid Solutions"
+                  className="h-20 brightness-0 invert opacity-80 group-hover:opacity-100 transition-opacity"
+                  loading="lazy"
+                />
+              </Link>
               <p className="text-slate-400 max-w-md leading-relaxed mb-8">
                 Ihr spezialisierter Partner für herstellerneutrale technische Beratung und Projektbegleitung bei Energiekabelprojekten bis 110 kV.
               </p>
@@ -193,14 +209,28 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             </div>
           </div>
           
-          <div className="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-500">
+          <div className="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-500 relative">
+            <div className="absolute -top-px left-0 w-12 h-px bg-accent/50" />
             <p>&copy; {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.</p>
             <p className="flex items-center gap-2">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
+              </span>
               Made with <span className="text-accent">precision</span> in Germany
             </p>
           </div>
         </div>
-      </motion.footer>
+        </footer>
+      </Reveal>
+
+      <div className="bg-slate-950 py-6 border-t border-white/5">
+        <div className="container-custom">
+          <p className="text-[10px] uppercase tracking-[0.2em] text-slate-600 text-center md:text-left">
+            Website developed by <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-accent transition-colors duration-300">mintel.me</a>
+          </p>
+        </div>
+      </div>
     </div>
   );
 };

components/Reveal.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface RevealProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  direction?: 'up' | 'down' | 'left' | 'right';
+  fullWidth?: boolean;
+}
+
+export const Reveal = ({ 
+  children, 
+  className = '', 
+  delay = 0, 
+  direction = 'up',
+  fullWidth = false
+}: RevealProps) => {
+  const directions = {
+    up: { y: 30 },
+    down: { y: -30 },
+    left: { x: 30 },
+    right: { x: -30 },
+  };
+
+  return (
+    <motion.div
+      initial={{ 
+        opacity: 0, 
+        ...directions[direction] 
+      }}
+      whileInView={{ 
+        opacity: 1, 
+        x: 0, 
+        y: 0 
+      }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{
+        type: "spring",
+        stiffness: 50,
+        damping: 20,
+        mass: 1,
+        delay: delay
+      }}
+      className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface StaggerProps {
+  children: React.ReactNode;
+  className?: string;
+  staggerDelay?: number;
+}
+
+export const Stagger = ({ 
+  children, 
+  className = '', 
+  staggerDelay = 0.1 
+}: StaggerProps) => {
+  return (
+    <motion.div
+      initial="initial"
+      whileInView="animate"
+      viewport={{ once: true, margin: "-50px" }}
+      variants={{
+        animate: {
+          transition: {
+            staggerChildren: staggerDelay,
+          },
+        },
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};

components/TechBackground.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+export const TechBackground = () => {
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
+      {/* Very subtle large grid */}
+      <div 
+        className="absolute inset-0 opacity-[0.05]" 
+        style={{ 
+          backgroundImage: `
+            linear-gradient(to right, var(--color-accent) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--color-accent) 1px, transparent 1px)
+          `,
+          backgroundSize: '120px 120px'
+        }} 
+      />
+    </div>
+  );
+};

components/TileGrid.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+export const TileGrid = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const rows = 15;
+  const cols = 20;
+
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
+      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
+        {[...Array(rows)].map((_, rowIndex) => (
+          <div 
+            key={rowIndex} 
+            className="flex gap-3 justify-center"
+            style={{ 
+              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
+            }}
+          >
+            {[...Array(cols)].map((_, colIndex) => (
+              <motion.div
+                key={`${rowIndex}-${colIndex}`}
+                initial={{ opacity: 0.05 }}
+                animate={{ 
+                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
+                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
+                }}
+                transition={{ 
+                  duration: 5 + Math.random() * 5, 
+                  repeat: Infinity, 
+                  delay: Math.random() * 20,
+                  ease: "easeInOut"
+                }}
+                className="w-32 h-32 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};