diff --git a/src/App.tsx b/src/App.tsx
index f4c30c9..e586733 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,294 +1,12 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
-import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingPage from '@/components/sections/pricing/PricingPage';
-import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import LegalSection from '@/components/sections/legal/LegalSection';
+import { Routes, Route } from "react-router-dom";
+import HomePage from "@/pages/HomePage";
+import ServicesPage from "@/pages/ServicesPage";
 
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="DriveEasy"
-      navItems={[
-        {
-          name: "Home",
-          href: "#hero",
-        },
-        {
-          name: "About",
-          href: "#about",
-        },
-        {
-          name: "Vehicles",
-          href: "#vehicles",
-        },
-        {
-          name: "Pricing",
-          href: "#pricing",
-        },
-      ]}
-      ctaButton={{
-        text: "Book Now",
-        href: "#contact",
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroBillboard
-      tag="Reliable Rental Service"
-      title="Drive Your Way with DriveEasy"
-      description="Premium car rentals for every journey. Discover a fleet of modern, well-maintained vehicles ready for your next adventure."
-      primaryButton={{
-        text: "Browse Fleet",
-        href: "#vehicles",
-      }}
-      secondaryButton={{
-        text: "Book Now",
-        href: "#contact",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/child-perspective-motorcar-generic-race_1232-3545.jpg"
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <AboutTestimonial
-      tag="Why Us"
-      quote="DriveEasy transformed our vacation. The booking process was seamless, and the car was in pristine condition. Excellent service!"
-      author="Mark Thompson"
-      role="Frequent Traveler"
-      imageSrc="http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-female-customer-workshop_637285-9789.jpg"
-    />
-  </div>
-
-  <div id="stats" data-section="stats">
-      <FeaturesStatisticsCards
-      tag="Our Impact"
-      title="Trusted by Thousands"
-      description="Data-driven excellence in vehicle rental experiences."
-      items={[
-        {
-          title: "Vehicles",
-          description: "Active fleet size",
-          label: "Fleet",
-          value: "500+",
-        },
-        {
-          title: "Happy Clients",
-          description: "Satisfied renters",
-          label: "Clients",
-          value: "15k+",
-        },
-        {
-          title: "Locations",
-          description: "Global reach",
-          label: "Stations",
-          value: "45",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="vehicles" data-section="vehicles">
-      <ProductVariantCards
-      tag="Our Fleet"
-      title="Modern Vehicles"
-      description="Choose from our wide selection of high-quality vehicles."
-      products={[
-        {
-          name: "Economy Hatchback",
-          variant: "Compact",
-          price: "$45/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-car-little-african-girl-with-mther_1157-45011.jpg",
-        },
-        {
-          name: "Family SUV",
-          variant: "Spacious",
-          price: "$85/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-choosing-car-car-showroom_1303-22807.jpg",
-        },
-        {
-          name: "Executive Sedan",
-          variant: "Premium",
-          price: "$120/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-businessman-white-shirt-speaking-by-phone-entering-his-car-while-standing-outdoors-streets-city-near-modern-office-center_496169-517.jpg",
-        },
-        {
-          name: "Urban Crossover",
-          variant: "Versatile",
-          price: "$70/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-car-showroom-dealership_23-2149117122.jpg",
-        },
-        {
-          name: "Sports Coupe",
-          variant: "Performance",
-          price: "$150/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-car_1157-6513.jpg",
-        },
-        {
-          name: "Comfort Minivan",
-          variant: "Group",
-          price: "$110/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-cute-chihuahua-dog_23-2150265005.jpg",
-        },
-      ]}
-    />
-  </div>
-
-    <PricingPage />
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialRatingCards
-      tag="Testimonials"
-      title="User Stories"
-      description="Hear from our happy customers."
-      testimonials={[
-        {
-          name: "Alice Johnson",
-          role: "Corporate Client",
-          quote: "Fantastic service and excellent vehicles.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/lady-car-salon-woman-buying-car-elegant-woman-blue-dress_1157-45031.jpg",
-        },
-        {
-          name: "Bob Smith",
-          role: "Traveler",
-          quote: "Easy booking and very helpful staff.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg",
-        },
-        {
-          name: "Charlie Davis",
-          role: "Local Renter",
-          quote: "Reliable and consistent quality.",
-          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-traveler-enjoys-serenity-high-altitude-wilderness_482257-124914.jpg",
-        },
-        {
-          name: "Diana Prince",
-          role: "Vacationer",
-          quote: "Loved the clean and new car I got.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-customer-car-dealership-with-seller_23-2149106200.jpg",
-        },
-        {
-          name: "Edward Norton",
-          role: "Tourist",
-          quote: "Best car rental experience so far.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqTwoColumn
-      tag="Support"
-      title="Common Questions"
-      description="Find answers to our most popular questions here."
-      items={[
-        {
-          question: "What is the age requirement?",
-          answer: "You must be 21 years or older with a valid driver's license.",
-        },
-        {
-          question: "Are insurance plans included?",
-          answer: "We offer various insurance options, including full coverage.",
-        },
-        {
-          question: "Can I cancel my booking?",
-          answer: "Yes, cancellations are free if made 48 hours before pickup.",
-        },
-        {
-          question: "Is mileage unlimited?",
-          answer: "Most of our standard plans include unlimited mileage.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCta
-      tag="Ready to go?"
-      text="Start your booking today. Click the button to reach out."
-      primaryButton={{
-        text: "Contact Us",
-        href: "#footer",
-      }}
-      secondaryButton={{
-        text: "Book Fleet",
-        href: "#vehicles",
-      }}
-    />
-  </div>
-
-  <div id="legal" data-section="legal">
-    <LegalSection />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBrandReveal
-      brand="DriveEasy"
-      columns={[
-        {
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Safety",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",
-              href: "#",
-            },
-            {
-              label: "Locations",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/services" element={<ServicesPage />} />
+    </Routes>
   );
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..7151bc8 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,22 +1,297 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
+import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import PricingPage from '@/components/sections/pricing/PricingPage';
+import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
+import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import LegalSection from '@/components/sections/legal/LegalSection';
 
-const HomePage = () => {
+
+export default function HomePage() {
   return (
-    <div className="min-h-screen bg-background">
+    <>
+  <div id="nav" data-section="nav">
       <NavbarCentered
-        logo="Logo"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "#" }}
-      />
-      <main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
-        <h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
-        <p className="text-lg text-muted-foreground max-w-xl text-center">
-          Your website content will appear here.
-        </p>
-      </main>
-    </div>
-  );
-};
+      logo="DriveEasy"
+      navItems={[
+        {
+          name: "Home",
+          href: "#hero",
+        },
+        {
+          name: "About",
+          href: "#about",
+        },
+        {
+          name: "Vehicles",
+          href: "#vehicles",
+        },
+        {
+          name: "Pricing",
+          href: "#pricing",
+        },
+        { name: "Services", href: "/services" },
 
-export default HomePage;
+      ]}
+      ctaButton={{
+        text: "Book Now",
+        href: "#contact",
+      }}
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroBillboard
+      tag="Reliable Rental Service"
+      title="Drive Your Way with DriveEasy"
+      description="Premium car rentals for every journey. Discover a fleet of modern, well-maintained vehicles ready for your next adventure."
+      primaryButton={{
+        text: "Browse Fleet",
+        href: "#vehicles",
+      }}
+      secondaryButton={{
+        text: "Book Now",
+        href: "#contact",
+      }}
+      imageSrc="http://img.b2bpic.net/free-photo/child-perspective-motorcar-generic-race_1232-3545.jpg"
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <AboutTestimonial
+      tag="Why Us"
+      quote="DriveEasy transformed our vacation. The booking process was seamless, and the car was in pristine condition. Excellent service!"
+      author="Mark Thompson"
+      role="Frequent Traveler"
+      imageSrc="http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-female-customer-workshop_637285-9789.jpg"
+    />
+  </div>
+
+  <div id="stats" data-section="stats">
+      <FeaturesStatisticsCards
+      tag="Our Impact"
+      title="Trusted by Thousands"
+      description="Data-driven excellence in vehicle rental experiences."
+      items={[
+        {
+          title: "Vehicles",
+          description: "Active fleet size",
+          label: "Fleet",
+          value: "500+",
+        },
+        {
+          title: "Happy Clients",
+          description: "Satisfied renters",
+          label: "Clients",
+          value: "15k+",
+        },
+        {
+          title: "Locations",
+          description: "Global reach",
+          label: "Stations",
+          value: "45",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="vehicles" data-section="vehicles">
+      <ProductVariantCards
+      tag="Our Fleet"
+      title="Modern Vehicles"
+      description="Choose from our wide selection of high-quality vehicles."
+      products={[
+        {
+          name: "Economy Hatchback",
+          variant: "Compact",
+          price: "$45/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-car-little-african-girl-with-mther_1157-45011.jpg",
+        },
+        {
+          name: "Family SUV",
+          variant: "Spacious",
+          price: "$85/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-choosing-car-car-showroom_1303-22807.jpg",
+        },
+        {
+          name: "Executive Sedan",
+          variant: "Premium",
+          price: "$120/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-businessman-white-shirt-speaking-by-phone-entering-his-car-while-standing-outdoors-streets-city-near-modern-office-center_496169-517.jpg",
+        },
+        {
+          name: "Urban Crossover",
+          variant: "Versatile",
+          price: "$70/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-car-showroom-dealership_23-2149117122.jpg",
+        },
+        {
+          name: "Sports Coupe",
+          variant: "Performance",
+          price: "$150/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-car_1157-6513.jpg",
+        },
+        {
+          name: "Comfort Minivan",
+          variant: "Group",
+          price: "$110/day",
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-cute-chihuahua-dog_23-2150265005.jpg",
+        },
+      ]}
+    />
+  </div>
+
+    <PricingPage />
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialRatingCards
+      tag="Testimonials"
+      title="User Stories"
+      description="Hear from our happy customers."
+      testimonials={[
+        {
+          name: "Alice Johnson",
+          role: "Corporate Client",
+          quote: "Fantastic service and excellent vehicles.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/lady-car-salon-woman-buying-car-elegant-woman-blue-dress_1157-45031.jpg",
+        },
+        {
+          name: "Bob Smith",
+          role: "Traveler",
+          quote: "Easy booking and very helpful staff.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg",
+        },
+        {
+          name: "Charlie Davis",
+          role: "Local Renter",
+          quote: "Reliable and consistent quality.",
+          rating: 4,
+          imageSrc: "http://img.b2bpic.net/free-photo/young-traveler-enjoys-serenity-high-altitude-wilderness_482257-124914.jpg",
+        },
+        {
+          name: "Diana Prince",
+          role: "Vacationer",
+          quote: "Loved the clean and new car I got.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-customer-car-dealership-with-seller_23-2149106200.jpg",
+        },
+        {
+          name: "Edward Norton",
+          role: "Tourist",
+          quote: "Best car rental experience so far.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqTwoColumn
+      tag="Support"
+      title="Common Questions"
+      description="Find answers to our most popular questions here."
+      items={[
+        {
+          question: "What is the age requirement?",
+          answer: "You must be 21 years or older with a valid driver's license.",
+        },
+        {
+          question: "Are insurance plans included?",
+          answer: "We offer various insurance options, including full coverage.",
+        },
+        {
+          question: "Can I cancel my booking?",
+          answer: "Yes, cancellations are free if made 48 hours before pickup.",
+        },
+        {
+          question: "Is mileage unlimited?",
+          answer: "Most of our standard plans include unlimited mileage.",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactCta
+      tag="Ready to go?"
+      text="Start your booking today. Click the button to reach out."
+      primaryButton={{
+        text: "Contact Us",
+        href: "#footer",
+      }}
+      secondaryButton={{
+        text: "Book Fleet",
+        href: "#vehicles",
+      }}
+    />
+  </div>
+
+  <div id="legal" data-section="legal">
+    <LegalSection />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterBrandReveal
+      brand="DriveEasy"
+      columns={[
+        {
+          items: [
+            {
+              label: "About Us",
+              href: "#about",
+            },
+            {
+              label: "Services",
+              href: "#",
+            },
+            {
+              label: "Blog",
+              href: "#",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Terms of Service",
+              href: "#",
+            },
+            {
+              label: "Privacy Policy",
+              href: "#",
+            },
+            {
+              label: "Safety",
+              href: "#",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Contact",
+              href: "#",
+            },
+            {
+              label: "Locations",
+              href: "#",
+            },
+            {
+              label: "Support",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+    />
+  </div>
+    </>
+  );
+}
diff --git a/src/pages/ServicesPage.tsx b/src/pages/ServicesPage.tsx
new file mode 100644
index 0000000..bd73655
--- /dev/null
+++ b/src/pages/ServicesPage.tsx
@@ -0,0 +1,93 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered"; // Corrected import path
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import FeaturesDetailedCards from "@/components/sections/features/FeaturesDetailedCards";
+import TestimonialQuoteCards from "@/components/sections/testimonial/TestimonialQuoteCards";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function ServicesPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <main className="flex-grow">
+        <HeroSplit
+          title="Our Comprehensive Services"
+          description="We offer a wide range of solutions designed to elevate your business and achieve your goals. Explore how we can help you succeed."
+          primaryCta={{ text: "View All Services", href: "/services#list" }}
+          secondaryCta={{ text: "Contact Us", href: "/contact" }}
+          media={{ type: "image", src: "/placeholder-image.jpg", alt: "Services overview" }}
+        />
+
+        <FeaturesDetailedCards
+          id="list"
+          title="Tailored Solutions for Your Success"
+          description="From strategy to execution, our expert team provides services that deliver measurable results."
+          cards={[
+            {
+              title: "Digital Marketing",
+              description: "Boost your online presence with SEO, SEM, social media, and content marketing strategies.",
+              icon: "📈",
+            },
+            {
+              title: "Web Development",
+              description: "Build robust, scalable, and user-friendly websites and web applications tailored to your needs.",
+              icon: "💻",
+            },
+            {
+              title: "Cloud Solutions",
+              description: "Leverage the power of cloud computing for enhanced scalability, security, and efficiency.",
+              icon: "☁️",
+            },
+            {
+              title: "Data Analytics",
+              description: "Transform raw data into actionable insights to drive informed business decisions.",
+              icon: "📊",
+            },
+          ]}
+        />
+
+        <TestimonialQuoteCards
+          title="What Our Clients Say"
+          description="Hear directly from businesses that have experienced the impact of our services."
+          testimonials={[
+            {
+              quote: "Our partnership has been transformative. Their expertise in digital marketing significantly boosted our online reach.",
+              author: "Jane Doe",
+              title: "CEO, Tech Innovators",
+              avatar: "/placeholder-avatar.jpg",
+            },
+            {
+              quote: "The web development team delivered an outstanding platform, exceeding all our expectations for functionality and design.",
+              author: "John Smith",
+              title: "Founder, Creative Solutions",
+              avatar: "/placeholder-avatar.jpg",
+            },
+          ]}
+        />
+
+        <ContactCta
+          title="Ready to Transform Your Business?"
+          description="Let's discuss how our services can help you achieve your next big milestone."
+          primaryCta={{ text: "Get a Free Consultation", href: "/contact" }}
+        />
+      </main>
+
+      <FooterSimple
+        logo="Brand"
+        description="Innovating for a better future."
+        socialLinks={[
+          { name: "Facebook", href: "#" },
+          { name: "Twitter", href: "#" },
+          { name: "LinkedIn", href: "#" },
+        ]}
+        copyright="© 2024 Brand. All rights reserved."
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..6b7660e 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/services', label: 'Services', pageFile: 'ServicesPage' },
 ];