Bob AI: Add pricing page

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import PricingPage from "@/pages/PricingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/pricing" element={<PricingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -35,7 +35,9 @@ export default function Layout() {
   {
     "name": "Proof",
     "href": "#proof"
-  }
+  },
+  { name: "Pricing", href: "/pricing" },
+
 ];
 
   return (

src/pages/PricingPage.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function PricingPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="AcmeCorp"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/signup" }}
+      />
+      
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Pricing"
+          title="Simple, transparent pricing"
+          description="Choose the perfect plan for your business needs. No hidden fees, cancel anytime."
+          primaryButton={{ text: "View Plans", href: "#plans" }}
+          secondaryButton={{ text: "Contact Sales", href: "/contact" }}
+        />
+
+        <div id="plans">
+          <PricingLayeredCards
+            tag="Plans"
+            title="Find your perfect fit"
+            description="Whether you're just starting out or scaling up, we have a plan for you."
+            plans={[
+              {
+                tag: "Starter",
+                price: "$19",
+                description: "Perfect for individuals and small projects.",
+                primaryButton: { text: "Get Started", href: "/signup?plan=starter" },
+                features: ["1 User", "Basic Support", "10GB Storage", "Community Access"]
+              },
+              {
+                tag: "Pro",
+                price: "$49",
+                description: "Best for small teams and growing businesses.",
+                primaryButton: { text: "Start Free Trial", href: "/signup?plan=pro" },
+                features: ["5 Users", "Priority Support", "100GB Storage", "Advanced Analytics", "Custom Domains"]
+              },
+              {
+                tag: "Enterprise",
+                price: "Custom",
+                description: "For large organizations with complex needs.",
+                primaryButton: { text: "Contact Sales", href: "/contact" },
+                features: ["Unlimited Users", "24/7 Dedicated Support", "Unlimited Storage", "Custom Integrations", "SLA Guarantee"]
+              }
+            ]}
+          />
+        </div>
+
+        <FaqSimple
+          tag="FAQ"
+          title="Frequently asked questions"
+          description="Everything you need to know about the product and billing."
+          items={[
+            {
+              question: "Can I change my plan later?",
+              answer: "Yes, you can upgrade or downgrade your plan at any time from your account settings. Prorated charges will be applied automatically."
+            },
+            {
+              question: "What payment methods do you accept?",
+              answer: "We accept all major credit cards, PayPal, and wire transfers for annual enterprise plans."
+            },
+            {
+              question: "Is there a free trial?",
+              answer: "Yes, we offer a 14-day free trial on all our paid plans. No credit card is required to start your trial."
+            },
+            {
+              question: "Do you offer discounts for non-profits?",
+              answer: "Yes, we offer a 50% discount for eligible non-profit organizations. Please contact our support team for more details."
+            }
+          ]}
+        />
+      </main>
+
+      <FooterSimple
+        brand="AcmeCorp"
+        columns={[
+          {
+            title: "Product",
+            items: [
+              { label: "Features", href: "/features" },
+              { label: "Pricing", href: "/pricing" },
+              { label: "Changelog", href: "/changelog" }
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About Us", href: "/about" },
+              { label: "Careers", href: "/careers" },
+              { label: "Contact", href: "/contact" }
+            ]
+          }
+        ]}
+        copyright="© 2024 AcmeCorp. All rights reserved."
+        links={[
+          { label: "Privacy Policy", href: "/privacy" },
+          { label: "Terms of Service", href: "/terms" }
+        ]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
 ];