src/components/Layout.tsx

@@ -34,6 +34,10 @@ export default function Layout() {
   {
     "name": "Products",
     "href": "#products"
+  },
+  {
+    "name": "Pricing",
+    "href": "/pricing"
   }
 ];
 

src/pages/PricingPage.tsx

@@ -0,0 +1,64 @@
+import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingPage() {
+  return (
+    <div id="pricing" data-section="pricing">
+      <SectionErrorBoundary name="pricing">
+        <PricingHighlightedCards
+          tag="Our Plans"
+          title="Flexible Pricing for Every Need"
+          description="Choose the plan that best fits your home or business, with transparent pricing and no hidden fees."
+          plans={[
+            {
+              name: "Basic Comfort",
+              price: "$99",
+              priceDetails: "/month",
+              features: [
+                "Annual AC Tune-up",
+                "Annual Heating Tune-up",
+                "Priority Scheduling",
+                "10% Off Repairs",
+              ],
+              button: {
+                text: "Get Started",
+                href: "#contact",
+              },
+            },
+            {
+              name: "Premium Protection",
+              price: "$149",
+              priceDetails: "/month",
+              features: [
+                "All Basic Comfort Features",
+                "Bi-Annual Air Quality Check",
+                "20% Off Repairs",
+                "No Overtime Charges",
+              ],
+              button: {
+                text: "Choose Plan",
+                href: "#contact",
+              },
+              highlighted: true,
+            },
+            {
+              name: "Ultimate Peace of Mind",
+              price: "$199",
+              priceDetails: "/month",
+              features: [
+                "All Premium Protection Features",
+                "Annual Duct Cleaning",
+                "30% Off Repairs",
+                "24/7 Emergency Service",
+              ],
+              button: {
+                text: "Select Plan",
+                href: "#contact",
+              },
+            },
+          ]}
+        />
+      </SectionErrorBoundary>
+    </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' },
 ];