Update src/app/page.tsx

src/app/page.tsx

@@ -8,11 +8,86 @@ import FeatureHoverPattern from '@/components/sections/feature/featureHoverPatte
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Sparkles, Award, Palette, Zap, Target, TrendingUp, MessageSquare, Dribbble, Linkedin, Twitter, Instagram } from 'lucide-react';
+import { Sparkles, Award, Palette, Zap, Target, TrendingUp, MessageSquare, Dribbble, Linkedin, Twitter, Instagram, Mail } from 'lucide-react';
+import gsap from 'gsap';
+import { useEffect, useRef } from 'react';
 
 export default function LandingPage() {
+  const contactRef = useRef(null);
+
+  useEffect(() => {
+    // Register ScrollTrigger plugin
+    const { ScrollTrigger } = require('gsap/ScrollTrigger');
+    gsap.registerPlugin(ScrollTrigger);
+
+    // Animate contact section on scroll
+    if (contactRef.current) {
+      const ctx = gsap.context(() => {
+        // Title animation
+        gsap.from('[data-contact-title]', {
+          scrollTrigger: {
+            trigger: contactRef.current,
+            start: 'top 60%',
+            end: 'top 30%',
+            scrub: 1,
+            markers: false,
+          },
+          opacity: 0,
+          y: 50,
+          duration: 1,
+        });
+
+        // Description animation with stagger
+        gsap.from('[data-contact-description]', {
+          scrollTrigger: {
+            trigger: contactRef.current,
+            start: 'top 55%',
+            end: 'top 25%',
+            scrub: 1,
+            markers: false,
+          },
+          opacity: 0,
+          y: 40,
+          duration: 1,
+          delay: 0.2,
+        });
+
+        // Button animation
+        gsap.from('[data-contact-button]', {
+          scrollTrigger: {
+            trigger: contactRef.current,
+            start: 'top 50%',
+            end: 'top 20%',
+            scrub: 1,
+            markers: false,
+          },
+          opacity: 0,
+          scale: 0.8,
+          duration: 1,
+          delay: 0.4,
+        });
+
+        // Background animated elements
+        gsap.to('[data-contact-bg-element]', {
+          scrollTrigger: {
+            trigger: contactRef.current,
+            start: 'top center',
+            end: 'bottom center',
+            scrub: 2,
+            markers: false,
+          },
+          rotation: 360,
+          duration: 20,
+          repeat: -1,
+        });
+      }, contactRef);
+
+      return () => ctx.revert();
+    }
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -167,8 +242,8 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
+      <div id="contact" data-section="contact" ref={contactRef}>
+        <ContactCTA
           tag="Let's Create Together"
           title="Ready to transform your brand?"
           description="Schedule a consultation with our creative team. We'll respond within 24 hours with a tailored proposal and creative roadmap to elevate your brand and drive measurable business impact."
@@ -176,9 +251,10 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "rotated-rays-animated-grid" }}
           useInvertedBackground={false}
-          buttonText="Get in Touch"
-          inputPlaceholder="your@email.com"
-          termsText="By submitting, you agree to our privacy policy. We'll respond within 24 hours."
+          buttons={[
+            { text: "Get in Touch", href: "contact" },
+            { text: "View Portfolio", href: "work" }
+          ]}
         />
       </div>