Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -10,7 +10,8 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { AlertCircle, Eye, Heart, Sparkles, Zap, Instagram, Mail, Phone } from "lucide-react";
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import { AlertCircle, Eye, Heart, Sparkles, Zap, Instagram, Mail, Phone, TrendingUp, Users, Award } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -120,6 +121,27 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          metrics={[
+            { id: "1", icon: TrendingUp, title: "Success Rate", value: "95%" },
+            { id: "2", icon: Users, title: "Active Students", value: "500+" },
+            { id: "3", icon: Award, title: "Industry Placements", value: "200+" }
+          ]}
+          title="Our Impact"
+          description="Proven results from our professional beauty training programs"
+          tag="Performance Metrics"
+          tagAnimation="slide-up"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Join Our Community", href: "contact" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
       <div id="pricing" data-section="pricing">
         <PricingCardThree
           title="Choose Your Course"
@@ -285,4 +307,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}