diff --git a/src/App.tsx b/src/App.tsx
index 4bc0283..026991c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,169 +1,12 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
-import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
-import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
+import { Routes, Route } from "react-router-dom";
+import HomePage from "@/pages/HomePage";
+import PlansPage from "@/pages/PlansPage";
 
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="FlowSync"
-      navItems={[
-        { name: "Features", href: "#features" },
-        { name: "Pricing", href: "#pricing" },
-        { name: "About", href: "#about" },
-        { name: "FAQ", href: "#faq" }
-      ]}
-      ctaButton={{
-        text: "Get Started",        href: "#contact"
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
-      tag="Boost Productivity Today"
-      title="Streamline Your Workflow with FlowSync"
-      description="The all-in-one productivity platform designed to help teams work smarter, organize tasks, and hit every deadline with ease."
-      primaryButton={{
-        text: "Get Started",        href: "#contact"
-      }}
-      secondaryButton={{
-        text: "Learn More",        href: "#about"
-      }}
-      testimonials={[
-        { name: "Sarah Chen", handle: "@sarahchen", text: "FlowSync changed how we manage our engineering sprints completely. Absolute game changer.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869127352-4c4dae3e.png" },
-        { name: "Alex Rivet", handle: "@alexrivet", text: "Unmatched visibility into team projects. Our velocity has increased by 40%.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869137170-01797df6.png" },
-        { name: "Jordan Lee", handle: "@jlee_prod", text: "Simple, powerful, and fast. Everything we needed for our cross-functional team.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869146645-9d58f195.png" },
-        { name: "Morgan West", handle: "@morgan_w", text: "Finally, a centralized tool that keeps our remote team on track every single day.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1762077656255-d367c3dc1cc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxicmFuZCUyMGxvZ28lMjBtb25vY2hyb21lfGVufDF8MHx8fDE3NzY4NjkxNjl8MA&ixlib=rb-4.1.0&q=80&w=1080" },
-        { name: "Sam Taylor", handle: "@staylor_ops", text: "The most intuitive interface I've used. Onboarding took less than an hour.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1767354987491-20bbb34f05b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNnx8bW9kZXJuJTIwZGlnaXRhbCUyMGJyYW5kfGVufDF8MHx8fDE3NzY4NjkxNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080" }
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-futuristic-saas-productivity-dashboard-1776869089774-7db44c51.png"
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofMarquee
-      tag="Trusted by Innovators"
-      title="Used by high-growth startups globally"
-      description="Join over 5,000+ teams who have transformed their productivity."
-      names={["TechInnovate", "GlobalScale", "GrowthGenius", "FutureBound", "CloudBridge", "NexGenApps", "DataFlow"]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <AboutMediaOverlay
-      tag="Our Philosophy"
-      title="Work Without Friction"
-      description="FlowSync is built on the belief that complex processes shouldn't slow you down. We eliminate the noise, allowing your team to focus on the work that actually matters."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/business-professionals-collaborating-in--1776869099126-5718ae77.png"
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeaturesStatisticsCards
-      tag="Key Capabilities"
-      title="Built for High Performance"
-      description="Comprehensive tools for tracking, scheduling, and collaboration."
-      items={[
-        { title: "Real-time sync", description: "Keep everyone updated across devices instantly.", label: "Speed", value: "20ms" },
-        { title: "Smart Automation", description: "Eliminate repetitive tasks with AI-driven triggers.", label: "Efficiency", value: "85%" },
-        { title: "Data Insights", description: "Make informed decisions with advanced metrics.", label: "Analytics", value: "100%" }
-      ]}
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricsMinimalCards
-      tag="By the Numbers"
-      metrics={[
-        { value: "1.2M", description: "Tasks Completed" },
-        { value: "500k", description: "Hours Saved" },
-        { value: "99.9%", description: "Uptime Reliability" }
-      ]}
-      title="Measurable Impact"
-    />
-  </div>
-
-  <div id="testimonial" data-section="testimonial">
-      <TestimonialDetailedCards
-      tag="User Stories"
-      title="Loved by thousands of teams"
-      description="See why industry leaders trust us for their productivity needs."
-      testimonials={[
-        { title: "Incredible Results", quote: "Finally, a tool that keeps up with our rapid pace.", name: "David Kim", role: "VP Product", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-modern-entrepreneur-clean--1776869154777-03fc56ad.png" },
-        { title: "Seamless Integration", quote: "The API documentation is world-class, integration was a breeze.", name: "Elena Rodriguez", role: "Lead Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-operations-manager-clean-o-1776869165140-91b64f75.png" },
-        { title: "Clean UI", quote: "Beautifully designed and extremely intuitive. My team loves it.", name: "Sarah Chen", role: "Design Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869183611-fe51c1d6.png" },
-        { title: "Top Tier Support", quote: "Support response time is unmatched, always helpful.", name: "Alex Rivet", role: "Engineering Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869192950-eebc0da0.png" },
-        { title: "Must Have", quote: "Can't imagine going back to our old stack.", name: "Jordan Lee", role: "Product Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869203934-48bd0602.png" }
-      ]}
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingSimpleCards
-      tag="Transparent Pricing"
-      title="Simple Plans for Growing Teams"
-      description="Choose the right plan for your team size and productivity needs."
-      plans={[
-        { tag: "Starter", price: "$29/mo", description: "Perfect for freelancers and small projects.", features: ["Task Management", "Basic Integrations", "Email Support"] },
-        { tag: "Pro", price: "$99/mo", description: "Everything in Starter plus advanced workflows.", features: ["AI Automation", "Advanced Reporting", "Priority Support"] },
-        { tag: "Enterprise", price: "Custom", description: "Tailored solutions for large-scale organizations.", features: ["Dedicated Account Manager", "SSO & Security", "On-Prem Deployment"] }
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      tag="Need Help?"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about getting started with FlowSync."
-      items={[
-        { question: "Can I integrate with my existing tools?", answer: "Yes, we support integration with Slack, Jira, Github, and over 100 other apps." },
-        { question: "Is there a free trial available?", answer: "We offer a 14-day free trial on all Pro plans, no credit card required." },
-        { question: "How secure is my data?", answer: "Security is our top priority. We are SOC2 compliant and use end-to-end encryption." }
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-conceptual-abstract-illustration-of-cu-1776869108850-371306a1.png"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitEmail
-      tag="Get Started"
-      title="Ready to scale your output?"
-      description="Join the next generation of productive teams today."
-      inputPlaceholder="Enter your professional email"
-      buttonText="Start Free Trial"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-minimalist-high-tech-abstract-backgrou-1776869117294-9abef0b7.png"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimpleReveal
-      brand="FlowSync"
-      columns={[
-        {
-          title: "Product",          items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "#security" }]
-        },
-        {
-          title: "Company",          items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#careers" }, { label: "Blog", href: "#blog" }]
-        },
-        {
-          title: "Legal",          items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]
-        }
-      ]}
-      copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
-      links={[]}
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/plans" element={<PlansPage />} />
+    </Routes>
   );
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..6261bd1 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,22 +1,172 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
+import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
 
-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="FlowSync"
+      navItems={[
+        { name: "Features", href: "#features" },
+        { name: "Pricing", href: "#pricing" },
+        { name: "About", href: "#about" },
+        { name: "FAQ", href: "#faq" },
+        { name: "Plans", href: "/plans" },
 
-export default HomePage;
+      ]}
+      ctaButton={{
+        text: "Get Started",        href: "#contact"
+      }}
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroSplitTestimonial
+      tag="Boost Productivity Today"
+      title="Streamline Your Workflow with FlowSync"
+      description="The all-in-one productivity platform designed to help teams work smarter, organize tasks, and hit every deadline with ease."
+      primaryButton={{
+        text: "Get Started",        href: "#contact"
+      }}
+      secondaryButton={{
+        text: "Learn More",        href: "#about"
+      }}
+      testimonials={[
+        { name: "Sarah Chen", handle: "@sarahchen", text: "FlowSync changed how we manage our engineering sprints completely. Absolute game changer.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869127352-4c4dae3e.png" },
+        { name: "Alex Rivet", handle: "@alexrivet", text: "Unmatched visibility into team projects. Our velocity has increased by 40%.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869137170-01797df6.png" },
+        { name: "Jordan Lee", handle: "@jlee_prod", text: "Simple, powerful, and fast. Everything we needed for our cross-functional team.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869146645-9d58f195.png" },
+        { name: "Morgan West", handle: "@morgan_w", text: "Finally, a centralized tool that keeps our remote team on track every single day.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1762077656255-d367c3dc1cc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxicmFuZCUyMGxvZ28lMjBtb25vY2hyb21lfGVufDF8MHx8fDE3NzY4NjkxNjl8MA&ixlib=rb-4.1.0&q=80&w=1080" },
+        { name: "Sam Taylor", handle: "@staylor_ops", text: "The most intuitive interface I've used. Onboarding took less than an hour.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1767354987491-20bbb34f05b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNnx8bW9kZXJuJTIwZGlnaXRhbCUyMGJyYW5kfGVufDF8MHx8fDE3NzY4NjkxNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080" }
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-futuristic-saas-productivity-dashboard-1776869089774-7db44c51.png"
+    />
+  </div>
+
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofMarquee
+      tag="Trusted by Innovators"
+      title="Used by high-growth startups globally"
+      description="Join over 5,000+ teams who have transformed their productivity."
+      names={["TechInnovate", "GlobalScale", "GrowthGenius", "FutureBound", "CloudBridge", "NexGenApps", "DataFlow"]}
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <AboutMediaOverlay
+      tag="Our Philosophy"
+      title="Work Without Friction"
+      description="FlowSync is built on the belief that complex processes shouldn't slow you down. We eliminate the noise, allowing your team to focus on the work that actually matters."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/business-professionals-collaborating-in--1776869099126-5718ae77.png"
+    />
+  </div>
+
+  <div id="features" data-section="features">
+      <FeaturesStatisticsCards
+      tag="Key Capabilities"
+      title="Built for High Performance"
+      description="Comprehensive tools for tracking, scheduling, and collaboration."
+      items={[
+        { title: "Real-time sync", description: "Keep everyone updated across devices instantly.", label: "Speed", value: "20ms" },
+        { title: "Smart Automation", description: "Eliminate repetitive tasks with AI-driven triggers.", label: "Efficiency", value: "85%" },
+        { title: "Data Insights", description: "Make informed decisions with advanced metrics.", label: "Analytics", value: "100%" }
+      ]}
+    />
+  </div>
+
+  <div id="metrics" data-section="metrics">
+      <MetricsMinimalCards
+      tag="By the Numbers"
+      metrics={[
+        { value: "1.2M", description: "Tasks Completed" },
+        { value: "500k", description: "Hours Saved" },
+        { value: "99.9%", description: "Uptime Reliability" }
+      ]}
+      title="Measurable Impact"
+    />
+  </div>
+
+  <div id="testimonial" data-section="testimonial">
+      <TestimonialDetailedCards
+      tag="User Stories"
+      title="Loved by thousands of teams"
+      description="See why industry leaders trust us for their productivity needs."
+      testimonials={[
+        { title: "Incredible Results", quote: "Finally, a tool that keeps up with our rapid pace.", name: "David Kim", role: "VP Product", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-modern-entrepreneur-clean--1776869154777-03fc56ad.png" },
+        { title: "Seamless Integration", quote: "The API documentation is world-class, integration was a breeze.", name: "Elena Rodriguez", role: "Lead Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-operations-manager-clean-o-1776869165140-91b64f75.png" },
+        { title: "Clean UI", quote: "Beautifully designed and extremely intuitive. My team loves it.", name: "Sarah Chen", role: "Design Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869183611-fe51c1d6.png" },
+        { title: "Top Tier Support", quote: "Support response time is unmatched, always helpful.", name: "Alex Rivet", role: "Engineering Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869192950-eebc0da0.png" },
+        { title: "Must Have", quote: "Can't imagine going back to our old stack.", name: "Jordan Lee", role: "Product Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869203934-48bd0602.png" }
+      ]}
+    />
+  </div>
+
+  <div id="pricing" data-section="pricing">
+      <PricingSimpleCards
+      tag="Transparent Pricing"
+      title="Simple Plans for Growing Teams"
+      description="Choose the right plan for your team size and productivity needs."
+      plans={[
+        { tag: "Starter", price: "$29/mo", description: "Perfect for freelancers and small projects.", features: ["Task Management", "Basic Integrations", "Email Support"] },
+        { tag: "Pro", price: "$99/mo", description: "Everything in Starter plus advanced workflows.", features: ["AI Automation", "Advanced Reporting", "Priority Support"] },
+        { tag: "Enterprise", price: "Custom", description: "Tailored solutions for large-scale organizations.", features: ["Dedicated Account Manager", "SSO & Security", "On-Prem Deployment"] }
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqSplitMedia
+      tag="Need Help?"
+      title="Frequently Asked Questions"
+      description="Everything you need to know about getting started with FlowSync."
+      items={[
+        { question: "Can I integrate with my existing tools?", answer: "Yes, we support integration with Slack, Jira, Github, and over 100 other apps." },
+        { question: "Is there a free trial available?", answer: "We offer a 14-day free trial on all Pro plans, no credit card required." },
+        { question: "How secure is my data?", answer: "Security is our top priority. We are SOC2 compliant and use end-to-end encryption." }
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-conceptual-abstract-illustration-of-cu-1776869108850-371306a1.png"
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactSplitEmail
+      tag="Get Started"
+      title="Ready to scale your output?"
+      description="Join the next generation of productive teams today."
+      inputPlaceholder="Enter your professional email"
+      buttonText="Start Free Trial"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-minimalist-high-tech-abstract-backgrou-1776869117294-9abef0b7.png"
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterSimpleReveal
+      brand="FlowSync"
+      columns={[
+        {
+          title: "Product",          items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "#security" }]
+        },
+        {
+          title: "Company",          items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#careers" }, { label: "Blog", href: "#blog" }]
+        },
+        {
+          title: "Legal",          items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]
+        }
+      ]}
+      copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
+      links={[]}
+    />
+  </div>
+    </>
+  );
+}
diff --git a/src/pages/PlansPage.tsx b/src/pages/PlansPage.tsx
new file mode 100644
index 0000000..72d0b62
--- /dev/null
+++ b/src/pages/PlansPage.tsx
@@ -0,0 +1,102 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Button from "@/components/ui/Button";
+
+export default function PlansPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      {/* Hero Section */}
+      <section className="relative flex flex-col items-center justify-center py-20 text-center md:py-32">
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Flexible Plans for Every Need</h1>
+        <p className="mt-4 max-w-2xl text-lg text-muted-foreground sm:text-xl">Choose the perfect plan to power your business forward.</p>
+        <div className="mt-8 flex gap-4">
+          <Button variant="primary" size="lg" href="#pricing">View Pricing</Button>
+          <Button variant="secondary" size="lg" href="/contact">Contact Sales</Button>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="w-full py-20 md:py-32 bg-card text-card-foreground">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Simple, Transparent Pricing</h2>
+          <p className="mt-4 max-w-2xl mx-auto text-lg text-muted-foreground">No hidden fees. Just straightforward plans designed to grow with you.</p>
+
+          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
+            {/* Starter Plan */}
+            <div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
+              <h3 className="text-2xl font-bold">Starter</h3>
+              <p className="mt-4 text-4xl font-extrabold">$19<span className="text-lg font-medium text-muted-foreground">/month</span></p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> 5 Projects</li>
+                <li><span>✓</span> Basic Analytics</li>
+                <li><span>✓</span> Community Support</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="primary" href="/signup">Get Started</Button>
+            </div>
+
+            {/* Pro Plan (highlighted) */}
+            <div className="relative flex flex-col rounded-lg border-2 border-primary-cta bg-background p-8 shadow-lg">
+              <div className="absolute -top-3 right-0 -mr-3 rounded-full bg-primary-cta px-3 py-1 text-xs font-semibold uppercase text-primary-cta-foreground">Popular</div>
+              <h3 className="text-2xl font-bold">Pro</h3>
+              <p className="mt-4 text-4xl font-extrabold">$49<span className="text-lg font-medium text-muted-foreground">/month</span></p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> Unlimited Projects</li>
+                <li><span>✓</span> Advanced Analytics</li>
+                <li><span>✓</span> Priority Support</li>
+                <li><span>✓</span> Custom Integrations</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="primary" href="/signup">Choose Pro</Button>
+            </div>
+
+            {/* Enterprise Plan */}
+            <div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
+              <h3 className="text-2xl font-bold">Enterprise</h3>
+              <p className="mt-4 text-4xl font-extrabold">Custom</p>
+              <ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
+                <li><span>✓</span> All Pro Features</li>
+                <li><span>✓</span> Dedicated Account Manager</li>
+                <li><span>✓</span> SLA Guarantee</li>
+                <li><span>✓</span> On-premise Deployment</li>
+              </ul>
+              <Button className="mt-8 w-full" variant="secondary" href="/contact">Contact Sales</Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer Section */}
+      <footer className="w-full py-12 md:py-16 bg-card text-card-foreground">
+        <div className="container mx-auto px-4 grid grid-cols-1 gap-8 md:grid-cols-4">
+          <div className="md:col-span-1">
+            <h3 className="text-xl font-bold">Brand</h3>
+            <p className="mt-4 text-muted-foreground">Building the future, one pixel at a time.</p>
+            <div className="mt-6 flex space-x-4">
+              <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
+            </div>
+          </div>
+          <div className="md:col-span-1">
+            <h4 className="text-lg font-semibold">Company</h4>
+            <ul className="mt-4 space-y-2">
+              <li><a href="/about" className="text-muted-foreground hover:text-foreground">About</a></li>
+              <li><a href="/plans" className="text-muted-foreground hover:text-foreground">Pricing</a></li>
+              <li><a href="/contact" className="text-muted-foreground hover:text-foreground">Contact</a></li>
+            </ul>
+          </div>
+          <div className="md:col-span-2">
+            {/* Additional footer content can go here if needed */}
+          </div>
+        </div>
+        <div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
+          © 2024 Brand. All rights reserved.
+        </div>
+      </footer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..3b19189 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: '/plans', label: 'Plans', pageFile: 'PlansPage' },
 ];