reveals

app/globals.css

@@ -32,10 +32,16 @@
   }
 
   body {
-    @apply bg-surface text-text-main antialiased selection:bg-accent/20 selection:text-accent;
+    @apply bg-surface text-text-main antialiased selection:bg-accent/20 selection:text-accent overflow-x-hidden;
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }
 
+  .motion-fix {
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold tracking-tight text-primary;
     text-wrap: balance;

app/impressum/page.tsx

@@ -1,8 +1,17 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
 export default function Legal() {
   return (
     <div className="bg-slate-50 min-h-screen pt-32 pb-20">
       <div className="container-custom">
-        <div className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100">
+        <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"
+        >
           <h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1>
           
           <div className="space-y-12 text-slate-600 leading-relaxed">
@@ -47,7 +56,7 @@ export default function Legal() {
               </p>
             </section>
           </div>
-        </div>
+        </motion.div>
       </div>
     </div>
   );

app/kontakt/page.tsx

@@ -11,6 +11,14 @@ const fadeInUp = {
   transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
 };
 
+const stagger = {
+  animate: {
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
 export default function Contact() {
   const [submitted, setSubmitted] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -56,16 +64,22 @@ export default function Contact() {
           <motion.div 
             initial="initial"
             animate="animate"
-            variants={fadeInUp}
+            variants={stagger}
             className="max-w-3xl"
           >
-            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
-            <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
+            <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>
-            </h1>
-            <p className="text-slate-600 text-xl md:text-2xl leading-relaxed">
+            </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.
-            </p>
+            </motion.p>
           </motion.div>
         </div>
       </section>
@@ -73,8 +87,15 @@ export default function Contact() {
       <section className="bg-slate-50">
         <div className="container-custom">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
-            <div className="space-y-8">
+            <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"
               >
@@ -90,6 +111,7 @@ export default function Contact() {
               </motion.div>
 
               <motion.div 
+                variants={fadeInUp}
                 whileHover={{ x: 5 }}
                 className="card-modern !p-8 flex gap-6 items-start"
               >
@@ -105,9 +127,15 @@ export default function Contact() {
                   </p>
                 </div>
               </motion.div>
-            </div>
+            </motion.div>
 
-            <div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
+            <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 }}
@@ -196,7 +224,7 @@ export default function Contact() {
                   </p>
                 </form>
               )}
-            </div>
+            </motion.div>
           </div>
         </div>
       </section>

app/page.tsx

@@ -7,7 +7,7 @@ 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] }
+  transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
 };
 
 const stagger = {
@@ -82,7 +82,13 @@ export default function Home() {
       {/* Portfolio Section */}
       <section className="bg-slate-50">
         <div className="container-custom">
-          <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
+          <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"
+          >
             <div className="max-w-2xl">
               <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>
@@ -93,9 +99,15 @@ export default function Home() {
             <Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group">
               Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
             </Link>
-          </div>
+          </motion.div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <motion.div 
+            variants={stagger}
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            className="grid grid-cols-1 md:grid-cols-3 gap-8 motion-fix"
+          >
             {[
               { 
                 icon: <Zap size={32} />, 
@@ -115,8 +127,9 @@ export default function Home() {
             ].map((item, i) => (
               <motion.div 
                 key={i}
+                variants={fadeInUp}
                 whileHover={{ y: -8 }}
-                className="card-modern group"
+                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}
@@ -127,7 +140,7 @@ export default function Home() {
                 </p>
               </motion.div>
             ))}
-          </div>
+          </motion.div>
         </div>
       </section>
 
@@ -135,21 +148,35 @@ export default function Home() {
       <section className="bg-white">
         <div className="container-custom">
           <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
-            <div className="relative">
+            <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"
               />
-            </div>
-            <div>
-              <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">
+            </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.
-              </p>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              </motion.p>
+              <motion.div 
+                variants={stagger}
+                className="grid grid-cols-1 sm:grid-cols-2 gap-4"
+              >
                 {[
                   'Energieversorger',
                   'Ingenieurbüros',
@@ -158,18 +185,19 @@ export default function Home() {
                   'Projektierer EE',
                   'Planungsbüros'
                 ].map((item, i) => (
-                  <div
+                  <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} />
                     </div>
                     <span className="text-primary font-semibold">{item}</span>
-                  </div>
+                  </motion.div>
                 ))}
-              </div>
-            </div>
+              </motion.div>
+            </motion.div>
           </div>
         </div>
       </section>
@@ -186,19 +214,32 @@ export default function Home() {
         </div>
         
         <div className="container-custom relative z-10">
-          <div className="text-center max-w-3xl mx-auto mb-20">
+          <motion.div 
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-3xl mx-auto 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>
-          </div>
+          </motion.div>
           
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <motion.div 
+            variants={stagger}
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            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) => (
-              <div
+              <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">
@@ -210,16 +251,22 @@ export default function Home() {
                 <p className="text-slate-400 leading-relaxed">
                   {item.desc}
                 </p>
-              </div>
+              </motion.div>
             ))}
-          </div>
+          </motion.div>
         </div>
       </section>
 
       {/* CTA Section */}
       <section className="bg-white">
         <div className="container-custom">
-          <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden">
+          <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" />
@@ -240,7 +287,7 @@ export default function Home() {
                 <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
               </Link>
             </div>
-          </div>
+          </motion.div>
         </div>
       </section>
     </div>

app/ueber-uns/page.tsx

@@ -8,7 +8,7 @@ import Link from 'next/link';
 const fadeInUp = {
   initial: { opacity: 0, y: 20 },
   animate: { opacity: 1, y: 0 },
-  transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
+  transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
 };
 
 const stagger = {
@@ -65,20 +65,32 @@ export default function About() {
       <section className="bg-white">
         <div className="container-custom">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-            <div className="space-y-6 text-lg text-slate-600 leading-relaxed">
+            <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>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            </motion.div>
+            <motion.div 
+              variants={stagger}
+              initial="initial"
+              whileInView="animate"
+              viewport={{ once: true }}
+              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) => (
-                <div key={i} className="card-modern !p-6">
+                <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">
@@ -86,9 +98,9 @@ export default function About() {
                     </a>
                   </div>
                   <p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
-                </div>
+                </motion.div>
               ))}
-            </div>
+            </motion.div>
           </div>
         </div>
       </section>
@@ -96,41 +108,60 @@ export default function About() {
       {/* Manifest Section */}
       <section className="bg-slate-50">
         <div className="container-custom">
-          <div className="text-center max-w-3xl mx-auto mb-20">
+          <motion.div 
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="text-center max-w-3xl mx-auto 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>
-          </div>
+          </motion.div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <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"
+          >
             {[
-              { 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.' },
-              { icon: <Lightbulb />, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
-              { icon: <Truck />, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
-              { 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.' }
+              { 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.' },
+              { icon: Lightbulb, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
+              { icon: Truck, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
+              { 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}
                 whileHover={{ y: -5 }}
-                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all"
+                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">
-                  {React.cloneElement(item.icon as React.ReactElement, { size: 32 })}
+                  <item.icon size={32} />
                 </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>
             ))}
-          </div>
+          </motion.div>
         </div>
       </section>
 
       {/* CTA Section */}
       <section className="bg-white">
         <div className="container-custom">
-          <div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden text-center">
+          <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 text-center"
+          >
             <div className="relative z-10 max-w-2xl mx-auto">
               <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
                 Bereit für Ihr nächstes Projekt?
@@ -143,7 +174,7 @@ export default function About() {
                 <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
               </Link>
             </div>
-          </div>
+          </motion.div>
         </div>
       </section>
     </div>