diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c43862..78100e0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,14 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Award, Zap, CheckCircle, Shield } from "lucide-react";
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 
 export default function Page() {
     return (
@@ -84,13 +84,30 @@ export default function Page() {
             </div>
 
             <div id="learning-process" data-section="learning-process">
-                <HeroBillboardScroll
-                    title={'IT "STEP" Academy'}
-                    description="We follow a proven 4-step methodology to ensure comprehensive learning and skill mastery."
-                    background={{ variant: "plain" }}
+                <FeatureCardEight
                     tag="Our Methodology"
-                    buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
-                    imageSrc="https://placehold.co/600x400"
+                    title="IT "STEP" Academy"
+                    description="We follow a proven 4-step methodology to ensure comprehensive learning and skill mastery."
+                    textboxLayout="default"
+                    useInvertedBackground="noInvert"
+                    features={[
+                        {
+                            id: 1,
+                            title: "Foundation Building",              description: "Start with core concepts and fundamentals. Master the basics before advancing to complex topics.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg",              imageAlt: "Foundation building and learning basics"
+                        },
+                        {
+                            id: 2,
+                            title: "Hands-On Practice",              description: "Engage in interactive coding sessions, labs, and workshops to reinforce theoretical knowledge.",              imageSrc: "https://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg",              imageAlt: "Hands-on coding practice and workshops"
+                        },
+                        {
+                            id: 3,
+                            title: "Project Development",              description: "Build portfolio projects from scratch, applying learned skills to solve real-world problems.",              imageSrc: "https://img.b2bpic.net/free-photo/group-young-people-casual-clothes-working-modern-office_146671-16433.jpg",              imageAlt: "Real-world project development"
+                        },
+                        {
+                            id: 4,
+                            title: "Career Launch",              description: "Graduate with credentials, resume support, and job placement assistance from our career team.",              imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg",              imageAlt: "Career launch and job placement support"
+                        }
+                    ]}
                 />
             </div>
 
@@ -121,13 +138,27 @@ export default function Page() {
             </div>
 
             <div id="metrics" data-section="metrics">
-                <HeroBillboard
+                <MetricCardSeven
+                    tag="Our Impact"
                     title="Proven Results & Success Metrics"
                     description="Join thousands of students who have transformed their careers through IT Academy."
-                    background="plain"
-                    tag="Our Impact"
-                    buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
-                    imageSrc="https://placehold.co/600x400"
+                    textboxLayout="default"
+                    useInvertedBackground="noInvert"
+                    animationType="scale-rotate"
+                    metrics={[
+                        {
+                            id: "1",              value: "15K+",              title: "Students Trained",              items: ["From 50+ countries", "98% completion rate", "Diverse backgrounds"]
+                        },
+                        {
+                            id: "2",              value: "92%",              title: "Job Placement Rate",              items: ["Within 6 months of graduation", "Average salary increase of 45%", "Top tech companies"]
+                        },
+                        {
+                            id: "3",              value: "8+",              title: "Years in Education",              items: ["Founded since 2016", "Continuously updated curriculum", "Industry partnerships"]
+                        },
+                        {
+                            id: "4",              value: "50+",              title: "Expert Instructors",              items: ["Average 12+ years experience", "Active in their fields", "Mentorship available"]
+                        }
+                    ]}
                 />
             </div>