diff --git a/src/app/page.tsx b/src/app/page.tsx
index babbcee..95af9e2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,11 +3,10 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
 import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
-import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import { Award, Zap, Sparkles, TrendingUp, MessageCircle, Briefcase, CheckCircle, Shield, Target, Linkedin, Twitter, Instagram, Github } from "lucide-react";
@@ -32,8 +31,9 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "home" },
             { name: "Services", id: "services" },
-            { name: "Work", id: "work" },
-            { name: "About", id: "about" }
+            { name: "Process", id: "process" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Get Started", href: "#contact" }}
           animateOnLoad={true}
@@ -73,88 +73,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
-              perspective: '1000px'
-            }}>
-              <div className="absolute inset-0 pointer-events-none" style={{
-                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
-              }} />
-              <div className="relative z-10">
-                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">200+</div>
-                <div className="text-sm text-gray-400">Happy Clients</div>
-              </div>
-            </div>
-            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
-              perspective: '1000px'
-            }}>
-              <div className="absolute inset-0 pointer-events-none" style={{
-                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
-              }} />
-              <div className="relative z-10">
-                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">500+</div>
-                <div className="text-sm text-gray-400">Projects Completed</div>
-              </div>
-            </div>
-            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
-              perspective: '1000px'
-            }}>
-              <div className="absolute inset-0 pointer-events-none" style={{
-                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
-              }} />
-              <div className="relative z-10">
-                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">99%</div>
-                <div className="text-sm text-gray-400">Uptime</div>
-              </div>
-            </div>
-          </div>
-          <style>{`
-            @media (max-width: 768px) {
-              .grid {
-                grid-template-columns: repeat(2, 1fr);
-              }
-            }
-            @media (max-width: 640px) {
-              .grid {
-                grid-template-columns: 1fr;
-              }
-            }
-          `}</style>
-        </div>
-        <script>{`
-          (function() {
-            const cards = document.querySelectorAll('[data-section="metrics"] .bg-\\[var\\(--background-accent\\)\\]');
-            cards.forEach(card => {
-              card.addEventListener('mousemove', (e) => {
-                const rect = card.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                const xPercent = (x / rect.width) * 100;
-                const yPercent = (y / rect.height) * 100;
-                
-                card.style.setProperty('--mouse-x', xPercent + '%');
-                card.style.setProperty('--mouse-y', yPercent + '%');
-                
-                const centerX = rect.width / 2;
-                const centerY = rect.height / 2;
-                const angleX = (y - centerY) * 0.03;
-                const angleY = (centerX - x) * 0.03;
-                
-                card.style.transform = \`perspective(1000px) rotateX(\${angleX}deg) rotateY(\${angleY}deg) translateZ(10px)\`;
-                card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-              });
-              
-              card.addEventListener('mouseleave', () => {
-                card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
-                card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-              });
-            });
-          })();
-        `}</script>
-      </div>
-
       <div id="about" data-section="about">
         <TextSplitAbout
           title="We blend creativity with strategy to deliver results that matter."
@@ -171,7 +89,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="services" data-section="services">
         <FeatureCardNineteen
           title="Our Core Services"
           description="Comprehensive solutions designed to elevate your digital presence and drive measurable business growth."
@@ -201,6 +119,58 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="cards" data-section="cards">
+        <FeatureCardMedia
+          title="Why Choose Our Services"
+          description="We combine cutting-edge technology with strategic thinking to deliver measurable results for your business."
+          tag="Our Advantages"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="scale-rotate"
+          features={[
+            {
+              id: "advantage-1",              title: "Performance First",              description: "Lightning-fast websites optimized for speed and user experience that drive conversions.",              tag: "Speed",              imageSrc: "http://img.b2bpic.net/free-vector/business-analytics-concept_52683-43849.jpg",              imageAlt: "performance metrics dashboard"
+            },
+            {
+              id: "advantage-2",              title: "Scalable Solutions",              description: "Built to grow with your business, from startups to enterprise-level applications.",              tag: "Scalability",              imageSrc: "http://img.b2bpic.net/free-vector/growing-chart_74855-6681.jpg",              imageAlt: "growth chart visualization"
+            },
+            {
+              id: "advantage-3",              title: "24/7 Support",              description: "Dedicated support team ready to assist you whenever you need help or updates.",              tag: "Support",              imageSrc: "http://img.b2bpic.net/free-photo/customer-support-service-team_23-2148903343.jpg",              imageAlt: "support team collaboration"
+            }
+          ]}
+          className="w-full"
+          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <FeatureCardMedia
+          title="Our Process"
+          description="A streamlined approach to bringing your vision to life with clarity and collaboration at every step."
+          tag="How We Work"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="opacity"
+          features={[
+            {
+              id: "process-1",              title: "Discovery & Strategy",              description: "We start by understanding your vision, goals, and target audience. Through in-depth consultation and research, we develop a strategic roadmap for success.",              tag: "Phase 1",              imageSrc: "http://img.b2bpic.net/free-photo/business-team-brainstorming-office_1157-31968.jpg",              imageAlt: "discovery meeting collaboration"
+            },
+            {
+              id: "process-2",              title: "Design & Development",              description: "Our creative team designs stunning interfaces while developers build robust, scalable code. We ensure every pixel serves a purpose.",              tag: "Phase 2",              imageSrc: "http://img.b2bpic.net/free-photo/designer-working-digital-tablet_23-2148427239.jpg",              imageAlt: "design development work"
+            },
+            {
+              id: "process-3",              title: "Testing & Launch",              description: "Rigorous testing ensures quality and performance. We launch with confidence and provide ongoing support for your success.",              tag: "Phase 3",              imageSrc: "http://img.b2bpic.net/free-photo/team-testing-website-design_23-2148603324.jpg",              imageAlt: "testing and quality assurance"
+            }
+          ]}
+          className="w-full"
+          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+        />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFive
           title="Client Stories That Inspire"
@@ -235,45 +205,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="portfolio" data-section="portfolio">
-        <FeatureCardTen
-          title="Featured Work & Case Studies"
-          description="Explore our portfolio of successful projects that showcase our expertise across diverse industries and creative challenges."
-          tag="Portfolio"
-          tagIcon={Briefcase}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="scale-rotate"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: "portfolio-1",              title: "E-Commerce Platform Redesign",              description: "Complete redesign and development of a major e-commerce platform, resulting in improved UX and 300% increase in conversions.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-psd/weekend-sale-banner-template_23-2148680582.jpg",                imageAlt: "e-commerce website design portfolio"
-              },
-              items: [
-                { icon: Zap, text: "Performance Optimization" },
-                { icon: Shield, text: "Security Enhancement" },
-                { icon: Target, text: "Conversion Focused" }
-              ],
-              reverse: false
-            },
-            {
-              id: "portfolio-2",              title: "Corporate Website & Brand Launch",              description: "Strategic branding and website launch for a B2B services company, establishing market leadership and thought authority.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19805.jpg",                imageAlt: "corporate business website design"
-              },
-              items: [
-                { icon: Award, text: "Industry Recognition" },
-                { icon: TrendingUp, text: "Lead Generation Growth" },
-                { icon: CheckCircle, text: "Brand Consistency" }
-              ],
-              reverse: true
-            }
-          ]}
-          className="w-full"
-          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
-        />
-      </div>
-
       <div id="contact" data-section="contact">
         <ContactText
           text="Ready to transform your digital presence? Let's collaborate on your next project."