Merge pull request 'Merge version_11 into main' (#11) from version_11 into main

Reviewed-on: #11

src/app/page.tsx

@@ -10,7 +10,8 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Sparkles, Award, Rocket, Linkedin, Twitter, Github, Mail } from "lucide-react";
+import { Sparkles, Award, Rocket, Linkedin, Twitter, Github, Mail, Users, Clock, HeadphonesIcon, Globe } from "lucide-react";
+import AboutMetric from "@/components/sections/about/AboutMetric";
 
 export default function LandingPage() {
   return (
@@ -48,7 +49,7 @@ export default function LandingPage() {
           description="Learn from industry experts in our comprehensive IT courses. From web development to data science, gain practical skills and launch your tech career."
           tag="Start Learning Today"
           tagIcon={Sparkles}
-          background={{}}
+          background={{ variant: "radial-gradient" }}
           mediaItems={[
             {
               imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg",              imageAlt: "Students learning online"
@@ -77,6 +78,36 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero-new" data-section="hero-new">
+        <AboutMetric
+          title="Unlocking Tech Potential"
+          metrics={[
+              {
+                "icon": Users,
+                "label": "Happy Customers",
+                "value": "10K+"
+              },
+              {
+                "icon": Clock,
+                "label": "Uptime",
+                "value": "99.9%"
+              },
+              {
+                "icon": HeadphonesIcon,
+                "label": "Support",
+                "value": "24/7"
+              },
+              {
+                "icon": Globe,
+                "label": "Countries",
+                "value": "50+"
+              }
+            ]}
+          useInvertedBackground="noInvert"
+          ariaLabel="About metrics section"
+        />
+      </div>
+
       <div id="about" data-section="about">
         <MediaSplitTabsAbout
           title="Why Choose TechAcademy?"