Bob AI: [SECTION ADD OPERATION]

You must create a COMPLETELY NEW sec

src/App.tsx

@@ -6,15 +6,52 @@ import AboutPage from "@/pages/AboutPage";
 import ContactPage from "@/pages/ContactPage";
 import TeamTestimonialsPage from "@/pages/TeamTestimonialsPage";
 import PricingPage from "@/pages/PricingPage";
+import PricingSimpleCards from "@/components/sections/pricing/PricingSimpleCards";
+
 export default function App() {
   return (
-    <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/plans" element={<PlansPage />} />
-      <Route path="/about" element={<AboutPage />} />
-      <Route path="/contact" element={<ContactPage />} />
-      <Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
-      <Route path="/pricing" element={<PricingPage />} />
-    </Routes>
+    <>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/plans" element={<PlansPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/contact" element={<ContactPage />} />
+        <Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
+        <Route path="/pricing" element={<PricingPage />} />
+      </Routes>
+      <div id="pricing" data-section="pricing">
+        <PricingSimpleCards
+          tag="Pricing"
+          title="Simple, transparent pricing"
+          description="Choose the plan that best fits your needs. No hidden fees."
+          plans={[
+            {
+              tag: "Starter",
+              price: "$19/mo",
+              description: "Perfect for individuals and small projects.",
+              features: ["Up to 5 projects", "Basic analytics", "24-hour support response time"],
+              buttonText: "Get Started",
+              buttonHref: "#"
+            },
+            {
+              tag: "Pro",
+              price: "$49/mo",
+              description: "Ideal for growing teams and businesses.",
+              features: ["Unlimited projects", "Advanced analytics", "1-hour support response time", "Custom domains"],
+              buttonText: "Upgrade to Pro",
+              buttonHref: "#"
+            },
+            {
+              tag: "Enterprise",
+              price: "$99/mo",
+              description: "For large scale organizations with custom needs.",
+              features: ["Everything in Pro", "Dedicated account manager", "Custom integrations", "SLA guarantee"],
+              buttonText: "Contact Sales",
+              buttonHref: "#"
+            }
+          ]}
+        />
+      </div>
+    </>
   );
-}
+}

src/components/sections/pricing/PricingSimpleCards.tsx

@@ -9,6 +9,8 @@ type PricingPlan = {
   price: string;
   description: string;
   features: string[];
+  buttonText?: string;
+  buttonHref?: string;
 };
 
 const PricingSimpleCards = ({
@@ -71,7 +73,7 @@ const PricingSimpleCards = ({
 
               <div className="w-full h-px bg-foreground/20" />
 
-              <div className="flex flex-col gap-3">
+              <div className="flex flex-col gap-3 grow">
                 {plan.features.map((feature) => (
                   <div key={feature} className="flex items-start gap-3">
                     <div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
@@ -81,6 +83,12 @@ const PricingSimpleCards = ({
                   </div>
                 ))}
               </div>
+              
+              {(plan.buttonText || plan.buttonHref) && (
+                <div className="mt-4">
+                  <Button text={plan.buttonText || "Get Started"} href={plan.buttonHref || "#"} variant="primary" className="w-full" />
+                </div>
+              )}
             </div>
           ))}
         </GridOrCarousel>
@@ -89,4 +97,4 @@ const PricingSimpleCards = ({
   </section>
 );
 
-export default PricingSimpleCards;
+export default PricingSimpleCards;