Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -34,10 +34,10 @@ export default function LandingPage() {
           name: "Home",          id: "#home"},
         {
           name: "Courses",          id: "#courses"},
-        {
-          name: "About",          id: "#about"},
         {
           name: "Features",          id: "#features"},
+        {
+          name: "Social",          id: "#social-media"},
         {
           name: "Contact",          id: "#contact"},
       ]}
@@ -50,7 +50,7 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroSplitKpi
       background={{
-        variant: "canvas-reveal"}}
+        variant: "sparkles-gradient"}}
       imagePosition="right"
       title="Where Mathematics Becomes Mastery"
       description="Expert coaching for Classes IX–XII, JEE Main & undergraduate mathematics. Small batches. Individual attention. Proven results."
@@ -104,7 +104,7 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
@@ -123,12 +123,17 @@ export default function LandingPage() {
       ]}
       title="Our Achievements & Commitment"
       description="Dedicated to fostering mathematical excellence and student success with measurable results."
+      buttons={[
+        {
+          text: "Enroll in Free Trial",          href: "#trial"
+        }
+      ]}
     />
   </div>
 
   <div id="courses" data-section="courses">
       <ProductCardOne
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
@@ -149,7 +154,7 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardThree
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
@@ -213,6 +218,25 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="social-media" data-section="social-media">
+    <FeatureCardThree
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={false}
+      title="Connect With Us on Social Media"
+      description="Stay updated with the latest news, tips, and insights from I.M.C.C. Follow us for more!"
+      features={[
+        {
+          title: "Instagram",          description: "Join our community on Instagram.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ekh1NETXyzQUYxsxxdBjXqCOfP/uploaded-1780729189823-zl5isxa6.jpg",          imageAlt: "Instagram Logo"
+        },
+        {
+          title: "Facebook",          description: "Like our page on Facebook.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ekh1NETXyzQUYxsxxdBjXqCOfP/uploaded-1780729189823-xc5igql4.jpg",          imageAlt: "Facebook Logo"
+        }
+      ]}
+    />
+  </div>
+
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
@@ -263,4 +287,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}