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

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

src/pages/PricingPage.tsx

@@ -0,0 +1,117 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import PricingSplitCards from "@/components/sections/pricing/PricingSplitCards";
+import PricingSimpleCards from "@/components/sections/pricing/PricingSimpleCards";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function PricingPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="NailStudio"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Book Now", href: "/contact" }}
+      />
+      
+      <HeroBillboard
+        tag="Pricing & Services"
+        title="Making your hands feel beautiful"
+        description="Explore our range of premium nail services, from classic manicures to intricate wedding designs. Find the perfect treatment for you."
+        primaryButton={{ text: "Book Appointment", href: "/contact" }}
+        secondaryButton={{ text: "View Services", href: "#services" }}
+      />
+
+      <div id="services">
+        <PricingSplitCards
+          tag="Main Services"
+          title="Our Signature Treatments"
+          description="Detailed pricing for our most popular nail services."
+          plans={[
+            {
+              tag: "Gel Polish",
+              price: "$45+",
+              period: "per session",
+              description: "Long-lasting, chip-resistant gel polish application.",
+              features: ["Cuticle care", "Nail shaping", "Gel polish application", "Hand massage"],
+              primaryButton: { text: "Book Gel", href: "/contact" }
+            },
+            {
+              tag: "Extensions",
+              price: "$75+",
+              period: "full set",
+              description: "Acrylic or hard gel extensions for added length and strength.",
+              features: ["Consultation", "Tip application", "Shaping & buffing", "Polish of choice"],
+              primaryButton: { text: "Book Extensions", href: "/contact" }
+            },
+            {
+              tag: "Classic Manicure",
+              price: "$30",
+              period: "per session",
+              description: "Essential care for healthy, beautiful natural nails.",
+              features: ["Soak", "Cuticle care", "Nail shaping", "Regular polish"],
+              primaryButton: { text: "Book Manicure", href: "/contact" }
+            },
+            {
+              tag: "Bridal Package",
+              price: "$120+",
+              period: "package",
+              description: "Specialized care for your big day, including trial and day-of services.",
+              features: ["Consultation & Trial", "Intricate nail art", "Hand & arm massage", "Priority booking"],
+              primaryButton: { text: "Book Bridal", href: "/contact" }
+            }
+          ]}
+        />
+      </div>
+
+      <PricingSimpleCards
+        tag="Add-ons"
+        title="Additional Services"
+        description="Enhance your treatment with these extras."
+        plans={[
+          {
+            tag: "Nail Art",
+            price: "$5+",
+            description: "Custom designs per nail.",
+            features: ["Hand-painted art", "Gems & rhinestones", "Foil accents"],
+            primaryButton: { text: "Add to Booking", href: "/contact" }
+          },
+          {
+            tag: "Removal",
+            price: "$15",
+            description: "Safe removal of existing gel or extensions.",
+            features: ["Gentle soaking", "Damage-free removal", "Nail strengthening treatment"],
+            primaryButton: { text: "Add to Booking", href: "/contact" }
+          },
+          {
+            tag: "Repair",
+            price: "$8",
+            description: "Fix a broken or chipped nail.",
+            features: ["Quick fix", "Color match", "Seamless blend"],
+            primaryButton: { text: "Add to Booking", href: "/contact" }
+          }
+        ]}
+      />
+
+      <ContactCta
+        tag="Booking"
+        text="Ready to treat yourself? Book your appointment today."
+        primaryButton={{ text: "Book Now", href: "/contact" }}
+        secondaryButton={{ text: "Call Us", href: "/contact" }}
+      />
+
+      <FooterSimple
+        brand="NailStudio"
+        columns={[
+          { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }
+        ]}
+        copyright="© 2024 NailStudio. All rights reserved."
+        links={[
+          { label: "Privacy Policy", href: "#" },
+          { label: "Terms of Service", href: "#" }
+        ]}
+      />
+    </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' },
 ];