diff --git a/src/app/page.tsx b/src/app/page.tsx
index ee20e5e..771cb88 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,8 +2,6 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useState, useEffect } from "react";
-import gsap from "gsap";
-import ScrollTrigger from "gsap/dist/ScrollTrigger";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
@@ -14,127 +12,168 @@ import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
-import { Moon, Sun, Sparkles } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
 
 gsap.registerPlugin(ScrollTrigger);
 
 const lightTheme = {
-  "--background": "#ffffff",  "--card": "#f9f9f9",  "--foreground": "#000000",  "--primary-cta": "#000000",  "--secondary-cta": "#f9f9f9",  "--accent": "#e2e2e2",  "--background-accent": "#c4c4c4",  "--primary-cta-text": "#ffffff",  "--secondary-cta-text": "#000000"};
+  "--background": "#ffffff",  "--card": "#f9f9f9",  "--foreground": "#000000",  "--primary-cta": "#000000",  "--secondary-cta": "#f9f9f9",  "--accent": "#e2e2e2",  "--background-accent": "#c4c4c4",  "--primary-cta-text": "#ffffff",  "--secondary-cta-text": "#000000"
+};
 
 const darkTheme = {
-  "--background": "#0a0a0a",  "--card": "#1a1a1a",  "--foreground": "#ffffff",  "--primary-cta": "#ffffff",  "--secondary-cta": "#1a1a1a",  "--accent": "#737373",  "--background-accent": "#737373",  "--primary-cta-text": "#0a0a0a",  "--secondary-cta-text": "#ffffff"};
+  "--background": "#0a0a0a",  "--card": "#1a1a1a",  "--foreground": "#ffffff",  "--primary-cta": "#ffffff",  "--secondary-cta": "#1a1a1a",  "--accent": "#737373",  "--background-accent": "#737373",  "--primary-cta-text": "#0a0a0a",  "--secondary-cta-text": "#ffffff"
+};
 
 export default function LandingPage() {
   const [isDarkMode, setIsDarkMode] = useState(false);
-  const [mounted, setMounted] = useState(false);
 
   const theme = isDarkMode ? darkTheme : lightTheme;
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    Object.entries(theme).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+  };
 
   useEffect(() => {
-    if (!mounted) return;
-
-    // Apply theme colors
+    // Apply initial theme
     Object.entries(theme).forEach(([key, value]) => {
       document.documentElement.style.setProperty(key, value);
     });
 
-    // Enhanced GSAP animations
-    gsap.utils.toArray("[data-section]").forEach((section: any) => {
-      // Fade in sections on scroll
-      gsap.fromTo(
-        section,
-        { opacity: 0, y: 50 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 1,
-          scrollTrigger: {
-            trigger: section,
-            start: "top 80%",            toggleActions: "play none none reverse",            once: false,
+    // Initialize GSAP animations
+    const initGsapAnimations = () => {
+      // Stagger animation for section elements
+      const sections = document.querySelectorAll('[data-section]');
+      sections.forEach((section) => {
+        const elements = section.querySelectorAll('h1, h2, h3, p, button, [data-animate]');
+        elements.forEach((el, index) => {
+          gsap.set(el, { opacity: 0, y: 20 });
+          ScrollTrigger.create({
+            trigger: el,
+            onEnter: () => {
+              gsap.to(el, {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                delay: index * 0.05,
+                ease: "power3.out"
+              });
+            },
+            once: true
+          });
+        });
+      });
+
+      // Hero section parallax
+      const hero = document.querySelector('#hero');
+      if (hero) {
+        const heroContent = hero.querySelector('[data-animate]');
+        if (heroContent) {
+          gsap.to(heroContent, {
+            scrollTrigger: {
+              trigger: hero,
+              start: "top center",              end: "bottom center",              scrub: 1
+            },
+            y: -50,
+            opacity: 0.8
+          });
+        }
+      }
+
+      // Card scale animation on scroll
+      const cards = document.querySelectorAll('[class*="card"], [class*="Card"]');
+      cards.forEach((card) => {
+        gsap.set(card, { scale: 0.95, opacity: 0 });
+        ScrollTrigger.create({
+          trigger: card,
+          onEnter: () => {
+            gsap.to(card, {
+              scale: 1,
+              opacity: 1,
+              duration: 0.8,
+              ease: "back.out"
+            });
           },
-        }
-      );
-    });
-
-    // Animate text elements with stagger
-    gsap.utils.toArray("h1, h2, h3").forEach((element: any) => {
-      gsap.fromTo(
-        element,
-        { opacity: 0, y: 20 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 0.8,
-          scrollTrigger: {
-            trigger: element,
-            start: "top 85%",            toggleActions: "play none none reverse"},
-        }
-      );
-    });
-
-    // Animate cards with parallax effect
-    gsap.utils.toArray("[class*='card']").forEach((card: any) => {
-      gsap.fromTo(
-        card,
-        { opacity: 0, scale: 0.95, y: 30 },
-        {
-          opacity: 1,
-          scale: 1,
-          y: 0,
-          duration: 0.6,
-          scrollTrigger: {
-            trigger: card,
-            start: "top 75%",            toggleActions: "play none none reverse"},
-        }
-      );
-    });
-
-    // Hover effects on buttons
-    gsap.utils.toArray("button[type='submit'], a[href*='#']").forEach((btn: any) => {
-      btn.addEventListener("mouseenter", () => {
-        gsap.to(btn, { scale: 1.05, duration: 0.3 });
+          once: true
+        });
       });
-      btn.addEventListener("mouseleave", () => {
-        gsap.to(btn, { scale: 1, duration: 0.3 });
-      });
-    });
 
-    // Parallax scroll for hero section
-    const heroSection = document.getElementById("hero");
-    if (heroSection) {
-      gsap.to(heroSection, {
-        backgroundPosition: "50% 50%",        ease: "none",        scrollTrigger: {
-          trigger: heroSection,
-          start: "top top",          end: "bottom top",          scrub: 1,
-          markers: false,
-        },
+      // Floating animation for images
+      const images = document.querySelectorAll('img[data-animate], [class*="image"] img');
+      images.forEach((img) => {
+        gsap.to(img, {
+          y: -10,
+          duration: 3,
+          repeat: -1,
+          yoyo: true,
+          ease: "sine.inOut"
+        });
       });
+
+      // Text reveal animation
+      const textElements = document.querySelectorAll('h1, h2, h3');
+      textElements.forEach((text) => {
+        ScrollTrigger.create({
+          trigger: text,
+          onEnter: () => {
+            gsap.to(text, {
+              backgroundPosition: "200% center",              duration: 1.5,
+              ease: "power2.out"
+            });
+          },
+          once: true
+        });
+      });
+
+      // Button hover glow effect
+      const buttons = document.querySelectorAll('button');
+      buttons.forEach((btn) => {
+        btn.addEventListener('mouseenter', () => {
+          gsap.to(btn, {
+            boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",            duration: 0.3
+          });
+        });
+        btn.addEventListener('mouseleave', () => {
+          gsap.to(btn, {
+            boxShadow: "0 0 0px rgba(0, 0, 0, 0)",            duration: 0.3
+          });
+        });
+      });
+
+      // Scroll-triggered counter animations
+      const counters = document.querySelectorAll('[data-count]');
+      counters.forEach((counter) => {
+        ScrollTrigger.create({
+          trigger: counter,
+          onEnter: () => {
+            const target = parseInt(counter.getAttribute('data-count')) || 0;
+            gsap.to(counter, {
+              textContent: target,
+              duration: 2,
+              snap: { textContent: 1 },
+              ease: "power2.out"
+            });
+          },
+          once: true
+        });
+      });
+    };
+
+    // Wait for DOM to be fully loaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initGsapAnimations);
+    } else {
+      initGsapAnimations();
     }
 
-    // Floating animation for decorative elements
-    gsap.utils.toArray("[data-float]").forEach((element: any) => {
-      gsap.to(element, {
-        y: -20,
-        duration: 3,
-        repeat: -1,
-        yoyo: true,
-        ease: "sine.inOut"});
-    });
-
     return () => {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
     };
-  }, [mounted, isDarkMode]);
-
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
-  if (!mounted) return null;
+  }, [isDarkMode]);
 
   return (
     <ThemeProvider
@@ -158,7 +197,7 @@ export default function LandingPage() {
               { name: "How It Works", id: "process" },
               { name: "Features", id: "features" },
               { name: "FAQ", id: "faq" },
-              { name: "Contact", id: "contact" },
+              { name: "Contact", id: "contact" }
             ]}
           />
           <button
@@ -175,31 +214,26 @@ export default function LandingPage() {
         </div>
       </div>
 
-      <div id="hero" data-section="hero" className="relative overflow-hidden">
-        <div className="absolute inset-0 pointer-events-none">
-          <div className="absolute top-10 left-10 w-32 h-32 opacity-20" data-float>
-            <Sparkles className="w-full h-full" />
-          </div>
-          <div className="absolute bottom-20 right-10 w-24 h-24 opacity-20" data-float>
-            <Sparkles className="w-full h-full" />
-          </div>
-        </div>
+      <div id="hero" data-section="hero">
         <HeroCentered
           title="Stop Writing SQL. Start Building."
           description="Aether DB turns plain English into production-ready database schemas in seconds. Just describe your application, and get PostgreSQL schemas, TypeScript types, API definitions, and more—instantly."
           background={{ variant: "animated-grid" }}
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              alt: "User 1"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              alt: "User 1"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              alt: "User 2"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              alt: "User 2"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              alt: "User 3"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              alt: "User 3"
+            }
           ]}
           avatarText="Trusted by 500+ developers"
           buttons={[
             { text: "Try it free", href: "#contact" },
-            { text: "See demo", href: "#process" },
+            { text: "See demo", href: "#process" }
           ]}
           buttonAnimation="slide-up"
         />
@@ -212,9 +246,11 @@ export default function LandingPage() {
           description="Aether DB is an AI-powered database schema generator that transforms natural language descriptions into production-ready PostgreSQL databases. Designed for award-winning teams who demand excellence, it eliminates manual schema design, reduces development time by 90%, and ensures enterprise-level security and performance from day one."
           metrics={[
             {
-              value: "90%",              title: "Faster development cycles"},
+              value: "90%",              title: "Faster development cycles"
+            },
             {
-              value: "100%",              title: "Type-safe across your stack"},
+              value: "100%",              title: "Type-safe across your stack"
+            }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-showing-the-transformati-1772511922816-9b8b2394.png"
           imageAlt="Transformation from manual to automated database setup"
@@ -267,7 +303,7 @@ export default function LandingPage() {
                     Simply tell Aether DB about your application in plain English. Describe your entities, relationships, and business logic as naturally as you would to a colleague.
                   </p>
                 </>
-              ),
+              )
             },
             {
               id: "2",              reverse: true,
@@ -303,7 +339,7 @@ export default function LandingPage() {
                     Our advanced AI engine analyzes your description, identifies all entities, relationships, and constraints, then generates an optimized schema plan.
                   </p>
                 </>
-              ),
+              )
             },
             {
               id: "3",              reverse: false,
@@ -347,7 +383,7 @@ export default function LandingPage() {
                     Aether DB generates production-ready PostgreSQL schemas with proper indexes, constraints, and row-level security policies automatically.
                   </p>
                 </>
-              ),
+              )
             },
             {
               id: "4",              reverse: true,
@@ -384,7 +420,7 @@ export default function LandingPage() {
                     Get Zod schemas, TypeScript types, API endpoint definitions, and seed data—all perfectly synchronized with your database schema.
                   </p>
                 </>
-              ),
+              )
             },
             {
               id: "5",              reverse: false,
@@ -427,8 +463,8 @@ export default function LandingPage() {
                     Your production-ready infrastructure is complete. Deploy with confidence knowing your database is secure, optimized, and enterprise-ready.
                   </p>
                 </>
-              ),
-            },
+              )
+            }
           ]}
         />
       </div>
@@ -440,11 +476,13 @@ export default function LandingPage() {
           description="Stop spending days planning architecture, writing migrations, and syncing types across your codebase."
           negativeCard={{
             items: [
-              "Hours planning database schema",              "Writing and debugging SQL migrations",              "Manually creating TypeScript types",              "Syncing types across frontend and backend",              "Managing relational integrity by hand",              "Setting up RLS policies manually"],
+              "Hours planning database schema",              "Writing and debugging SQL migrations",              "Manually creating TypeScript types",              "Syncing types across frontend and backend",              "Managing relational integrity by hand",              "Setting up RLS policies manually"
+            ]
           }}
           positiveCard={{
             items: [
-              "Instant schema generation",              "Zero-migration SQL setup",              "Auto-generated TypeScript types",              "Perfect type sync everywhere",              "Automatic constraint validation",              "Built-in security policies"],
+              "Instant schema generation",              "Zero-migration SQL setup",              "Auto-generated TypeScript types",              "Perfect type sync everywhere",              "Automatic constraint validation",              "Built-in security policies"
+            ]
           }}
           animationType="slide-up"
           textboxLayout="default"
@@ -465,16 +503,19 @@ export default function LandingPage() {
           metrics={[
             {
               id: "1",              value: "10x",              title: "Faster development",              items: [
-                "Database setup in minutes",                "Reduce development cycles",                "Ship features faster"],
+                "Database setup in minutes",                "Reduce development cycles",                "Ship features faster"
+              ]
             },
             {
               id: "2",              value: "0",              title: "Type mismatches",              items: [
-                "Auto-generated consistency",                "End-to-end type safety",                "Catch errors early"],
+                "Auto-generated consistency",                "End-to-end type safety",                "Catch errors early"
+              ]
             },
             {
               id: "3",              value: "100%",              title: "Schema coverage",              items: [
-                "Complete documentation",                "All relationships mapped",                "Never miss a constraint"],
-            },
+                "Complete documentation",                "All relationships mapped",                "Never miss a constraint"
+              ]
+            }
           ]}
         />
       </div>
@@ -493,22 +534,26 @@ export default function LandingPage() {
               id: "1",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial:
                 "Aether DB cut our database setup time from 2 days to 10 minutes. The generated TypeScript types alone saved us countless hours of debugging.",              rating: 5,
               imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              imageAlt: "Sarah Chen"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              imageAlt: "Sarah Chen"
+            },
             {
               id: "2",              name: "Marcus Rodriguez",              handle: "@mrodriguez",              testimonial:
                 "Finally, a tool that understands what developers actually need. No more manual schema creation, no more type mismatches. Just describe what you want.",              rating: 5,
               imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              imageAlt: "Marcus Rodriguez"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              imageAlt: "Marcus Rodriguez"
+            },
             {
               id: "3",              name: "Emma Thompson",              handle: "@emmathompson",              testimonial:
                 "The RLS policies and security constraints are production-ready out of the box. This is enterprise-grade infrastructure in minutes.",              rating: 5,
               imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              imageAlt: "Emma Thompson"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              imageAlt: "Emma Thompson"
+            },
             {
               id: "4",              name: "Alex Kumar",              handle: "@alexkumar",              testimonial:
                 "We went from prototyping to production faster than ever. Aether DB handles the boring database stuff so we can focus on features.",              rating: 5,
               imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png",              imageAlt: "Alex Kumar"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png",              imageAlt: "Alex Kumar"
+            }
           ]}
         />
       </div>
@@ -525,22 +570,28 @@ export default function LandingPage() {
           faqs={[
             {
               id: "1",              title: "How does Aether DB generate database schemas?",              content:
-                "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."},
+                "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."
+            },
             {
               id: "2",              title: "What exactly do I get when I use Aether DB?",              content:
-                "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."},
+                "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."
+            },
             {
               id: "3",              title: "Is the generated code production-ready?",              content:
-                "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."},
+                "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."
+            },
             {
               id: "4",              title: "Can I customize the generated schema?",              content:
-                "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."},
+                "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."
+            },
             {
               id: "5",              title: "What databases are supported?",              content:
-                "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."},
+                "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."
+            },
             {
               id: "6",              title: "Do you store my project descriptions?",              content:
-                "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."},
+                "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."
+            }
           ]}
         />
       </div>
@@ -570,34 +621,35 @@ export default function LandingPage() {
               items: [
                 { label: "What is Aether DB", href: "#what-is" },
                 { label: "How It Works", href: "#process" },
-                { label: "Features", href: "#features" },
-              ],
+                { label: "Features", href: "#features" }
+              ]
             },
             {
               items: [
                 {
-                  label: "Documentation",                  href: "https://docs.aether-db.com"},
+                  label: "Documentation",                  href: "https://docs.aether-db.com"
+                },
                 { label: "API Reference", href: "https://docs.aether-db.com/api" },
-                { label: "GitHub", href: "https://github.com/aether-db" },
-              ],
+                { label: "GitHub", href: "https://github.com/aether-db" }
+              ]
             },
             {
               items: [
                 { label: "Blog", href: "https://blog.aether-db.com" },
                 { label: "Twitter", href: "https://twitter.com/aether_db" },
-                { label: "Discord", href: "https://discord.gg/aether-db" },
-              ],
+                { label: "Discord", href: "https://discord.gg/aether-db" }
+              ]
             },
             {
               items: [
                 { label: "Privacy Policy", href: "#" },
                 { label: "Terms of Service", href: "#" },
-                { label: "Contact", href: "#contact" },
-              ],
-            },
+                { label: "Contact", href: "#contact" }
+              ]
+            }
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file