diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2a22c3e..691f8fa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -114,7 +114,7 @@ export default function LandingPage() {
           tag="Interactive Map"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
+          animationType="scale-rotate"
           gridVariant="three-columns-all-equal-width"
           products={[
             {
@@ -216,7 +216,7 @@ export default function LandingPage() {
           tag="Impact"
           textboxLayout="default"
           useInvertedBackground={true}
-          animationType="slide-up"
+          animationType="depth-3d"
           metrics={[
             { id: "1", icon: Users, title: "Active Explorers", value: "50K+" },
             { id: "2", icon: Globe, title: "Countries Reached", value: "45" },
@@ -286,6 +286,9 @@ export default function LandingPage() {
           mediaAnimation="slide-up"
           mediaPosition="right"
           buttonText="Start Exploring"
+          className="perspective-3d hover:shadow-2xl transition-shadow duration-500"
+          containerClassName="transform-gpu"
+          contentClassName="backface-hidden"
         />
       </div>
 
@@ -299,6 +302,11 @@ export default function LandingPage() {
             { icon: Linkedin, href: "https://linkedin.com/company/bharatbeachsafari", ariaLabel: "Connect on LinkedIn" },
             { icon: Mail, href: "mailto:hello@bharatbeachsafari.com", ariaLabel: "Email us" }
           ]}
+          className="perspective-3d"
+          containerClassName="transform-gpu backface-hidden"
+          cardClassName="hover:shadow-2xl transition-all duration-500"
+          socialContainerClassName="flex gap-6 justify-center will-change-transform"
+          socialIconClassName="transform hover:scale-110 transition-transform duration-300"
         />
       </div>
     </ThemeProvider>