Merge version_3 into main

Merge version_3 into main

src/app/layout.tsx

@@ -5,7 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Oron Studio - Award-Winning Creative Agency",  description: "Oron Studio crafts bold brands and immersive digital experiences with cutting-edge animation and strategic thinking."};
+  title: "Oron Studio - Award-Winning Creative Agency",  description: "Oron Studio crafts bold brands and immersive digital experiences with cutting-edge animation and strategic thinking."
+};
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -8,11 +8,87 @@ 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 gsap from 'gsap';
+import { useEffect, useRef } from 'react';
 
 export default function LandingPage() {
+  const contactRef = useRef(null);
+
+  useEffect(() => {
+    // Register ScrollTrigger plugin
+    import('gsap/ScrollTrigger').then(({ default: 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 +243,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 +252,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>