diff --git a/src/App.tsx b/src/App.tsx
index e8642e8..cc2eba5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,344 +1,12 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
-import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-import { Award, Users, Zap } from "lucide-react";
+import { Routes, Route } from "react-router-dom";
+import HomePage from "@/pages/HomePage";
+import ProductsPage from "@/pages/ProductsPage";
 
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="Flow"
-      navItems={[
-        {
-          name: "Features",
-          href: "#features",
-        },
-        {
-          name: "Pricing",
-          href: "#pricing",
-        },
-        {
-          name: "Testimonials",
-          href: "#testimonials",
-        },
-      ]}
-      ctaButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroOverlay
-      tag="Productivity Reimagined"
-      title="Streamline Your Workflow, Elevate Your Results"
-      description="Flow helps teams organize tasks, automate workflows, and hit deadlines without the chaos."
-      primaryButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "#about",
-      }}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-clean-modern-saas-software-dashboard-i-1776939335175-602df7e8.png"
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofMarquee
-      tag="Trusted by Teams"
-      title="Empowering Companies Worldwide"
-      description="Join thousands of businesses that streamline productivity with Flow."
-      names={[
-        "InnovateTech",
-        "GrowthHub",
-        "GlobalSolutions",
-        "FutureOps",
-        "NextGen Systems",
-        "ScaleUp",
-        "Velocity Group",
-      ]}
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeaturesStatisticsCards
-      tag="Advanced Features"
-      title="Built for Peak Performance"
-      description="Everything your team needs to stay productive, synced, and efficient every single day."
-      items={[
-        {
-          title: "Smart Task Routing",
-          description: "Automatically assign tasks based on team capacity and skill sets.",
-          label: "Time Saved",
-          value: "40%",
-        },
-        {
-          title: "Automated Workflows",
-          description: "Reduce manual entry by automating recurring project tasks.",
-          label: "Processes",
-          value: "120+",
-        },
-        {
-          title: "Real-time Collaboration",
-          description: "Keep everyone aligned with live project updates and discussions.",
-          label: "Active Users",
-          value: "50k+",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <AboutMediaOverlay
-      tag="Our Mission"
-      title="Efficiency Without Compromise"
-      description="We believe in creating tools that empower creators to focus on the work that actually matters. Flow was built to remove friction, not add it."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-modern-professional-workspace-with-a-p-1776939335201-f4bc224f.png"
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricsIconCards
-      tag="Real Results"
-      title="Measurable Impact"
-      description="Don't just take our word for it. See the numbers."
-      metrics={[
-        {
-          icon: Zap,
-          title: "Tasks Completed",
-          value: "1.2M+",
-        },
-        {
-          icon: Users,
-          title: "Teams Onboarded",
-          value: "5,000+",
-        },
-        {
-          icon: Award,
-          title: "Avg. Growth Rate",
-          value: "3x",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialQuoteCards
-      tag="Testimonials"
-      title="What Our Users Say"
-      description="See why top teams trust Flow to manage their complex projects."
-      testimonials={[
-        {
-          name: "Sarah Chen",
-          role: "Head of Operations",
-          quote: "Flow transformed our team workflow. We saved 15+ hours per week.",
-          imageSrc: "https://images.unsplash.com/photo-1758600587839-56ba05596c69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxjYXN1YWwlMjBwcm9mZXNzaW9uYWwlMjBoZWFkc2hvdCUyMGZyaWVuZGx5fGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
-        },
-        {
-          name: "Mark Johnson",
-          role: "Product Lead",
-          quote: "The automation tools are intuitive and incredibly powerful. A total game changer.",
-          imageSrc: "https://images.unsplash.com/photo-1589616710474-78fef3b06aa3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyMXx8Y3JlYXRpdmUlMjBwcm9mZXNzaW9uYWwlMjBwb3J0cmFpdCUyMHNtYXJ0JTIwY2FzdWFsfGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
-        },
-        {
-          name: "Emily Rodriguez",
-          role: "Creative Director",
-          quote: "Finally, a platform that feels like it was designed for how we actually work.",
-          imageSrc: "https://images.unsplash.com/photo-1758599543111-5db56cfa9a59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyNnx8aGFwcHklMjBwcm9mZXNzaW9uYWwlMjB3b21hbiUyMGJ1c2luZXNzJTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
-        },
-        {
-          name: "David Kim",
-          role: "Engineering Manager",
-          quote: "The integration capabilities have unified our entire tech stack seamlessly.",
-          imageSrc: "https://images.unsplash.com/photo-1650728287460-37c20c1c6a30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxzbWlsaW5nJTIwYnVzaW5lc3MlMjBjb25zdWx0YW50JTIwYnJpZ2h0JTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
-        },
-        {
-          name: "Linda Wu",
-          role: "Marketing Manager",
-          quote: "Managing our global team has never been simpler. Highly recommended.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yltro0",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCenteredCards
-      tag="Pricing Plans"
-      title="Scalable for Every Stage"
-      description="Choose the perfect plan for your team size and productivity needs."
-      plans={[
-        {
-          tag: "Starter",
-          price: "$29/mo",
-          description: "Perfect for individuals and small startups.",
-          features: [
-            "Task Automation",
-            "Basic Reporting",
-            "Email Support",
-          ],
-          primaryButton: {
-            text: "Get Started",
-            href: "#contact",
-          },
-        },
-        {
-          tag: "Professional",
-          price: "$99/mo",
-          description: "The ideal choice for growing teams.",
-          features: [
-            "Advanced Automation",
-            "Detailed Analytics",
-            "Priority Support",
-            "Team Integrations",
-          ],
-          primaryButton: {
-            text: "Get Started",
-            href: "#contact",
-          },
-        },
-        {
-          tag: "Enterprise",
-          price: "Custom",
-          description: "Everything for scaling organizations.",
-          features: [
-            "Dedicated Manager",
-            "Security Audit",
-            "API Access",
-            "SSO Support",
-          ],
-          primaryButton: {
-            text: "Contact Us",
-            href: "#contact",
-          },
-        },
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqTwoColumn
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Common questions about getting started and optimizing Flow."
-      items={[
-        {
-          question: "Is there a free trial?",
-          answer: "Yes, we offer a 14-day free trial on all Pro plans.",
-        },
-        {
-          question: "Can I cancel anytime?",
-          answer: "Yes, cancel at any time directly through your account settings.",
-        },
-        {
-          question: "Do you offer enterprise support?",
-          answer: "Absolutely. Our Enterprise plan includes a dedicated account manager.",
-        },
-        {
-          question: "Is my data secure?",
-          answer: "Data security is our top priority. We are SOC2 compliant.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCta
-      tag="Start Today"
-      text="Ready to skyrocket your team's productivity? Start your journey with Flow today."
-      primaryButton={{
-        text: "Get Started",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Contact Sales",
-        href: "#",
-      }}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimpleMedia
-      brand="Flow"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "API Docs",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-            {
-              label: "GitHub",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyright="© 2024 Flow Productivity Tools. All rights reserved."
-      links={[
-        {
-          label: "Privacy Policy",
-          href: "#",
-        },
-        {
-          label: "Terms of Service",
-          href: "#",
-        },
-      ]}
-      imageSrc="https://images.unsplash.com/photo-1573867901325-b55d3928d6c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyN3x8c29mdHdhcmUlMjBzdGFydHVwJTIwaWNvbiUyMGRlc2lnbnxlbnwxfDB8fHwxNzc2OTM5MzMwfDA&ixlib=rb-4.1.0&q=80&w=1080"
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/products" element={<ProductsPage />} />
+    </Routes>
   );
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..896611d 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,22 +1,347 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
+import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import { Award, Users, Zap } from "lucide-react";
 
-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="Flow"
+      navItems={[
+        {
+          name: "Features",
+          href: "#features",
+        },
+        {
+          name: "Pricing",
+          href: "#pricing",
+        },
+        {
+          name: "Testimonials",
+          href: "#testimonials",
+        },
+        { name: "Products", href: "/products" },
 
-export default HomePage;
+      ]}
+      ctaButton={{
+        text: "Get Started",
+        href: "#contact",
+      }}
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroOverlay
+      tag="Productivity Reimagined"
+      title="Streamline Your Workflow, Elevate Your Results"
+      description="Flow helps teams organize tasks, automate workflows, and hit deadlines without the chaos."
+      primaryButton={{
+        text: "Get Started",
+        href: "#contact",
+      }}
+      secondaryButton={{
+        text: "Learn More",
+        href: "#about",
+      }}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-clean-modern-saas-software-dashboard-i-1776939335175-602df7e8.png"
+    />
+  </div>
+
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofMarquee
+      tag="Trusted by Teams"
+      title="Empowering Companies Worldwide"
+      description="Join thousands of businesses that streamline productivity with Flow."
+      names={[
+        "InnovateTech",
+        "GrowthHub",
+        "GlobalSolutions",
+        "FutureOps",
+        "NextGen Systems",
+        "ScaleUp",
+        "Velocity Group",
+      ]}
+    />
+  </div>
+
+  <div id="features" data-section="features">
+      <FeaturesStatisticsCards
+      tag="Advanced Features"
+      title="Built for Peak Performance"
+      description="Everything your team needs to stay productive, synced, and efficient every single day."
+      items={[
+        {
+          title: "Smart Task Routing",
+          description: "Automatically assign tasks based on team capacity and skill sets.",
+          label: "Time Saved",
+          value: "40%",
+        },
+        {
+          title: "Automated Workflows",
+          description: "Reduce manual entry by automating recurring project tasks.",
+          label: "Processes",
+          value: "120+",
+        },
+        {
+          title: "Real-time Collaboration",
+          description: "Keep everyone aligned with live project updates and discussions.",
+          label: "Active Users",
+          value: "50k+",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <AboutMediaOverlay
+      tag="Our Mission"
+      title="Efficiency Without Compromise"
+      description="We believe in creating tools that empower creators to focus on the work that actually matters. Flow was built to remove friction, not add it."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-modern-professional-workspace-with-a-p-1776939335201-f4bc224f.png"
+    />
+  </div>
+
+  <div id="metrics" data-section="metrics">
+      <MetricsIconCards
+      tag="Real Results"
+      title="Measurable Impact"
+      description="Don't just take our word for it. See the numbers."
+      metrics={[
+        {
+          icon: Zap,
+          title: "Tasks Completed",
+          value: "1.2M+",
+        },
+        {
+          icon: Users,
+          title: "Teams Onboarded",
+          value: "5,000+",
+        },
+        {
+          icon: Award,
+          title: "Avg. Growth Rate",
+          value: "3x",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialQuoteCards
+      tag="Testimonials"
+      title="What Our Users Say"
+      description="See why top teams trust Flow to manage their complex projects."
+      testimonials={[
+        {
+          name: "Sarah Chen",
+          role: "Head of Operations",
+          quote: "Flow transformed our team workflow. We saved 15+ hours per week.",
+          imageSrc: "https://images.unsplash.com/photo-1758600587839-56ba05596c69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxjYXN1YWwlMjBwcm9mZXNzaW9uYWwlMjBoZWFkc2hvdCUyMGZyaWVuZGx5fGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        },
+        {
+          name: "Mark Johnson",
+          role: "Product Lead",
+          quote: "The automation tools are intuitive and incredibly powerful. A total game changer.",
+          imageSrc: "https://images.unsplash.com/photo-1589616710474-78fef3b06aa3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyMXx8Y3JlYXRpdmUlMjBwcm9mZXNzaW9uYWwlMjBwb3J0cmFpdCUyMHNtYXJ0JTIwY2FzdWFsfGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        },
+        {
+          name: "Emily Rodriguez",
+          role: "Creative Director",
+          quote: "Finally, a platform that feels like it was designed for how we actually work.",
+          imageSrc: "https://images.unsplash.com/photo-1758599543111-5db56cfa9a59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyNnx8aGFwcHklMjBwcm9mZXNzaW9uYWwlMjB3b21hbiUyMGJ1c2luZXNzJTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
+        },
+        {
+          name: "David Kim",
+          role: "Engineering Manager",
+          quote: "The integration capabilities have unified our entire tech stack seamlessly.",
+          imageSrc: "https://images.unsplash.com/photo-1650728287460-37c20c1c6a30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxzbWlsaW5nJTIwYnVzaW5lc3MlMjBjb25zdWx0YW50JTIwYnJpZ2h0JTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
+        },
+        {
+          name: "Linda Wu",
+          role: "Marketing Manager",
+          quote: "Managing our global team has never been simpler. Highly recommended.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yltro0",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="pricing" data-section="pricing">
+      <PricingCenteredCards
+      tag="Pricing Plans"
+      title="Scalable for Every Stage"
+      description="Choose the perfect plan for your team size and productivity needs."
+      plans={[
+        {
+          tag: "Starter",
+          price: "$29/mo",
+          description: "Perfect for individuals and small startups.",
+          features: [
+            "Task Automation",
+            "Basic Reporting",
+            "Email Support",
+          ],
+          primaryButton: {
+            text: "Get Started",
+            href: "#contact",
+          },
+        },
+        {
+          tag: "Professional",
+          price: "$99/mo",
+          description: "The ideal choice for growing teams.",
+          features: [
+            "Advanced Automation",
+            "Detailed Analytics",
+            "Priority Support",
+            "Team Integrations",
+          ],
+          primaryButton: {
+            text: "Get Started",
+            href: "#contact",
+          },
+        },
+        {
+          tag: "Enterprise",
+          price: "Custom",
+          description: "Everything for scaling organizations.",
+          features: [
+            "Dedicated Manager",
+            "Security Audit",
+            "API Access",
+            "SSO Support",
+          ],
+          primaryButton: {
+            text: "Contact Us",
+            href: "#contact",
+          },
+        },
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqTwoColumn
+      tag="Support"
+      title="Frequently Asked Questions"
+      description="Common questions about getting started and optimizing Flow."
+      items={[
+        {
+          question: "Is there a free trial?",
+          answer: "Yes, we offer a 14-day free trial on all Pro plans.",
+        },
+        {
+          question: "Can I cancel anytime?",
+          answer: "Yes, cancel at any time directly through your account settings.",
+        },
+        {
+          question: "Do you offer enterprise support?",
+          answer: "Absolutely. Our Enterprise plan includes a dedicated account manager.",
+        },
+        {
+          question: "Is my data secure?",
+          answer: "Data security is our top priority. We are SOC2 compliant.",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactCta
+      tag="Start Today"
+      text="Ready to skyrocket your team's productivity? Start your journey with Flow today."
+      primaryButton={{
+        text: "Get Started",
+        href: "#",
+      }}
+      secondaryButton={{
+        text: "Contact Sales",
+        href: "#",
+      }}
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterSimpleMedia
+      brand="Flow"
+      columns={[
+        {
+          title: "Company",
+          items: [
+            {
+              label: "About",
+              href: "#about",
+            },
+            {
+              label: "Careers",
+              href: "#",
+            },
+            {
+              label: "Blog",
+              href: "#",
+            },
+          ],
+        },
+        {
+          title: "Resources",
+          items: [
+            {
+              label: "Help Center",
+              href: "#",
+            },
+            {
+              label: "API Docs",
+              href: "#",
+            },
+            {
+              label: "Terms",
+              href: "#",
+            },
+          ],
+        },
+        {
+          title: "Social",
+          items: [
+            {
+              label: "Twitter",
+              href: "#",
+            },
+            {
+              label: "LinkedIn",
+              href: "#",
+            },
+            {
+              label: "GitHub",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+      copyright="© 2024 Flow Productivity Tools. All rights reserved."
+      links={[
+        {
+          label: "Privacy Policy",
+          href: "#",
+        },
+        {
+          label: "Terms of Service",
+          href: "#",
+        },
+      ]}
+      imageSrc="https://images.unsplash.com/photo-1573867901325-b55d3928d6c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyN3x8c29mdHdhcmUlMjBzdGFydHVwJTIwaWNvbiUyMGRlc2lnbnxlbnwxfDB8fHwxNzc2OTM5MzMwfDA&ixlib=rb-4.1.0&q=80&w=1080"
+    />
+  </div>
+    </>
+  );
+}
diff --git a/src/pages/ProductsPage.tsx b/src/pages/ProductsPage.tsx
new file mode 100644
index 0000000..9cf583f
--- /dev/null
+++ b/src/pages/ProductsPage.tsx
@@ -0,0 +1,30 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function ProductsPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={[{"name":"Home","href":"/"},{"name":"Products","href":"/products"},{"name":"Solutions","href":"/solutions"},{"name":"About Us","href":"/about"},{"name":"Contact","href":"/contact"}]}
+        ctaButton={{"text":"View Pricing","href":"/pricing"}}
+      />
+      <ProductMediaCards
+        tag="Shop Our Collection"
+        title="Explore Brand's Premium Products"
+        description="Discover a curated selection of high-quality products designed to enhance your life. From innovative gadgets to essential everyday items, find exactly what you need with Brand."
+        primaryButton={{"text":"Shop Now","href":"/products#products-list"}}
+        secondaryButton={{"text":"Learn More About Brand","href":"/about"}}
+        products={[{"name":"Brand Smartwatch Pro","price":"$299.99","imageSrc":"https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Wireless Earbuds","price":"$149.99","imageSrc":"https://images.unsplash.com/photo-1606220588913-b3fdb71830a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Portable Speaker","price":"$99.99","imageSrc":"https://images.unsplash.com/photo-1545127398-1d071765c911?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Ergonomic Keyboard","price":"$129.99","imageSrc":"https://images.unsplash.com/photo-1587820101416-091f32a74c26?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand HD Webcam","price":"$79.99","imageSrc":"https://images.unsplash.com/photo-1629429462823-3801f9b3297a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"}]}
+      />
+      <FooterSimple
+        brand="Brand"
+        columns={[{"title":"Products","items":[{"label":"All Products","href":"/products"},{"label":"New Releases","href":"/products/new"},{"label":"Best Sellers","href":"/products/best-sellers"}]},{"title":"Company","items":[{"label":"About Us","href":"/about"},{"label":"Careers","href":"/careers"},{"label":"Blog","href":"/blog"}]},{"title":"Support","items":[{"label":"FAQ","href":"/faq"},{"label":"Contact Us","href":"/contact"},{"label":"Documentation","href":"/docs"}]}]}
+        copyright="© 2024 Brand. All rights reserved."
+        links={[{"label":"Privacy Policy","href":"/privacy"},{"label":"Terms of Service","href":"/terms"},{"label":"Cookie Settings","href":"/cookie-settings"}]}
+      />
+    </div>
+  );
+}
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..93d7fae 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: '/products', label: 'Products', pageFile: 'ProductsPage' },
 ];