reveals

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>