Fix

src/app/globals.css

@@ -7,11 +7,10 @@
   /* --background: #162b17;;
   --card: #234126;;
   --foreground: #f2f2f2;;
-  --primary-cta: #4CAF50;;
+  --primary-cta: #9c59d4;;
-  --secondary-cta: #2e7d32;;
+  --secondary-cta: #7e4af4;;
-  --accent: #76ff03;;
+  --accent: #d06eb8;;
-  --background-accent: #1e3c1f;; */
+  --background-accent: #442e66;; */
-
   --background: #162b17;;
   --card: #234126;;
   --foreground: #f2f2f2;;

src/app/page.tsx

@@ -1,16 +1,18 @@
 "use client"
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+// import NavbarLayoutFloatitlengOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { BookOpen, HelpCircle, Star, Users, Zap } from 'lucide-react';
+import { Award, BookOpen, HelpCircle, Star, Users, Zap } from 'lucide-react';
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 
 export default function ITAcademyPage() {
   return (
@@ -43,14 +45,21 @@ export default function ITAcademyPage() {
       </div>
 
       <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+        <HeroSplit
-      title="Hero Billboard Scroll"
+          title="123"
-      description="Add your description here."
+          description="Measurable Results That Speak for Themselves"
-      tag="Label"
+          tag="Start Your Journey"
-      tagIcon="Check"
+          tagIcon={Zap}
-      buttons={[{"label": "Primary", "href": "#"}, {"label": "Secondary", "href": "#"}]}
+          background={{ variant: "glowing-orb" }}
-      imageSrc="https://placehold.co/600x400"
+          imageSrc="https://img.b2bpic.net/free-photo/man-working-energy-innovations-his-laptop_23-2148820170.jpg"
-      />
+          imageAlt="Students learning coding and IT skills"
+          imagePosition="right"
+          buttons={[
+            { text: "Browse Courses", href: "courses" },
+            { text: "Free Demo", href: "contact" }
+          ]}
+          containerClassName="mt-8"
+        />
       </div>
 
       <div id="team" data-section="team">
@@ -80,6 +89,24 @@ export default function ITAcademyPage() {
         />
       </div>
 
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="About Us"
+          tagIcon={Award}
+          title="Test Title"
+          description="Founded in 2015, IT Academy has trained over 5,000 students in cutting-edge technology. Our mission is to provide accessible, high-quality IT education that bridges the gap between academic learning and industry demands."
+          metrics={[
+            { value: "5000+", title: "Students Trained Successfully" },
+            { value: "35%", title: "Job Placement Rate" }
+          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg"
+          imageAlt="IT Academy classroom"
+          useInvertedBackground="invertDefault"
+          className="hover:shadow-xl transition-shadow duration-300"
+          className="animate-zoom-in"
+        />
+      </div>
+
       <div id="courses" data-section="courses">
         <FeatureCardThree
           title="Our Signature Courses"
@@ -190,14 +217,16 @@ export default function ITAcademyPage() {
           ]}
         />
       </div>
-      <div id="hero_billboard_scroll" data-section="hero_billboard_scroll">
+
-        <HeroBillboardScroll
+      <div id="contact" data-section="contact">
-          title="Hero Billboard Scroll"
+        <ContactText
-          description="Add your description here."
+          text="Ready to launch your IT career? Join hundreds of successful graduates who transformed their futures at IT Academy."
-          tag="Label"
+          animationType="background-highlight"
-          tagIcon="Check"
+          buttons={[
-          buttons={[{"label": "Primary", "href": "#"}, {"label": "Secondary", "href": "#"}]}
+            { text: "Start Your Journey", href: "https://example.com/enroll" },
-          imageSrc="https://placehold.co/600x400"
+            { text: "Schedule a Consultation", href: "contact" }
+          ]}
+          useInvertedBackground="invertDefault"
         />
       </div>
       <div id="footer" data-section="footer">