reveals

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>