Add pricing section

CtrlAltAssist/Components/Layout/Navbar.razor

@@ -18,6 +18,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="#services">Services</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#pricing">Pricing</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#founder">Founder</a>
                 </li>

CtrlAltAssist/Components/Pages/Home.razor

@@ -31,12 +31,12 @@
 <!-- Services Section -->
 <section id="services" class="section-padding bg-light-green">
     <div class="container">
-        <h2 class="text-center mb-5 text-light">Our Comprehensive Services</h2>
+        <h2 class="text-center mb-5 text-dark">Our Comprehensive Services</h2>
         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 service-list">
             <div class="col">
-                <div class="card h-100 bg-light-blue text-light">
+                <div class="card h-100 bg-light-blue text-dark">
                     <div class="card-body">
-                        <h5 class="card-title text-light">Financial & Accounting Support</h5>
+                        <h5 class="card-title text-dark">Financial & Accounting Support</h5>
                         <ul>
                             <li>Bookkeeping, Budgets, Management Accounts</li>
                             <li>SAGE, SAGE ONE, SAGE Online Tools, SAGE Payroll</li>
@@ -50,9 +50,9 @@
                 </div>
             </div>
             <div class="col">
-                <div class="card h-100 bg-light-purple text-light">
+                <div class="card h-100 bg-light-purple text-dark">
                     <div class="card-body">
-                        <h5 class="card-title text-light">Office & Administrative Management</h5>
+                        <h5 class="card-title text-dark">Office & Administrative Management</h5>
                         <ul>
                             <li>Complete office management – full admin service</li>
                             <li>Creation and organizing of Business Systems & Procedures</li>
@@ -66,9 +66,9 @@
                 </div>
             </div>
             <div class="col">
-                <div class="card h-100 bg-light-blue text-light">
+                <div class="card h-100 bg-light-blue text-dark">
                     <div class="card-body">
-                        <h5 class="card-title text-light">Digital & Project Support</h5>
+                        <h5 class="card-title text-dark">Digital & Project Support</h5>
                         <ul>
                             <li>Report Writing, PowerPoint Presentations</li>
                             <li>Customer Relations Management</li>
@@ -86,26 +86,101 @@
             </div>
         </div>
         <div class="text-center mt-5">
-            <p class="lead text-light">We offer both package, hourly or group rates customised to your personal needs.</p>
+            <p class="lead text-dark">We offer both package, hourly or group rates customised to your personal needs.</p>
             <a href="#contact" class="btn btn-lg btn-pastel">Get a Custom Quote</a>
         </div>
     </div>
 </section>
 
+<!-- Pricing Section -->
+<section id="pricing" class="section-padding">
+    <div class="container">
+        <p class="text-uppercase text-muted small fw-semibold mb-1">Transparent pricing</p>
+        <h2 class="fw-bold mb-2">Choose the package that fits where you are right now</h2>
+        <p class="text-muted mb-5">All packages are month-to-month with no lock-in contracts. Prices are quoted exclusive of tax.</p>
+
+        <div class="row g-4 align-items-stretch">
+
+            <!-- Basic -->
+            <div class="col-lg-4">
+                <div class="card h-100 p-4 shadow-sm price-card">
+                    <p class="text-muted small mb-1">Starter</p>
+                    <h3 class="fw-bold mb-2">Basic</h3>
+                    <p class="text-muted small">For sole proprietors and early-stage startups with straightforward finances.</p>
+                    <div class="price-amount">From R2000 pm</div>
+                    <p class="price-note">Price to be confirmed</p>
+                    <ul class="price-features flex-grow-1 mb-4">
+                        <li><span class="check">✓</span>Xero setup and onboarding</li>
+                        <li><span class="check">✓</span>Monthly bank reconciliation</li>
+                        <li><span class="check">✓</span>Income statement and balance sheet</li>
+                        <li><span class="check">✓</span>Up to 50 transactions per month</li>
+                        <li><span class="check">✓</span>Email support</li>
+                    </ul>
+                    <a href="#contact" class="btn btn-outline-primary w-100">Get a quote</a>
+                </div>
+            </div>
+
+            <!-- Premium (featured) -->
+            <div class="col-lg-4">
+                <div class="card h-100 p-4 shadow-sm price-card featured">
+                    <div><span class="featured-tag">Most popular</span></div>
+                    <p class="text-muted small mb-1">Full service</p>
+                    <h3 class="fw-bold mb-2">Premium</h3>
+                    <p class="text-muted small">For growing SMEs and non-profits that need complete monthly financial management.</p>
+                    <div class="price-amount">From R3500 pm</div>
+                    <p class="price-note">Price to be confirmed</p>
+                    <ul class="price-features flex-grow-1 mb-4">
+                        <li><span class="check">✓</span>Everything in Basic</li>
+                        <li><span class="check">✓</span>Full monthly bookkeeping service (Including VAT)</li>
+                        <li><span class="check">✓</span>Up to 200 transactions per month</li>
+                        <li><span class="check">✓</span>Monthly management accounts</li>
+                        <li><span class="check">✓</span>Priority email and phone support</li>
+                        <li><span class="check">✓</span>Quarterly financial review call</li>
+                    </ul>
+                    <a href="#contact" class="btn btn-primary w-100">Get a quote</a>
+                </div>
+            </div>
+
+            <!-- Custom -->
+            <div class="col-lg-4">
+                <div class="card h-100 p-4 shadow-sm price-card">
+                    <p class="text-muted small mb-1">Enterprise</p>
+                    <h3 class="fw-bold mb-2">Custom</h3>
+                    <p class="text-muted small">For businesses with complex structures, high transaction volumes or multiple entities.</p>
+                    <div class="price-amount">Bespoke</div>
+                    <p class="price-note">Tailored to your exact requirements</p>
+                    <ul class="price-features flex-grow-1 mb-4">
+                        <li><span class="check">✓</span>Everything in Premium</li>
+                        <li><span class="check">✓</span>Unlimited transactions</li>
+                        <li><span class="check">✓</span>Multi-entity reporting</li>
+                        <li><span class="check">✓</span>Custom Xero integrations</li>
+                        <li><span class="check">✓</span>Dedicated monthly strategy session</li>
+                        <li><span class="check">✓</span>Direct adviser access</li>
+                    </ul>
+                    <a href="#contact" class="btn btn-outline-primary w-100">Let's talk</a>
+                </div>
+            </div>
+
+        </div>
+
+        <p class="text-center text-muted small mt-4">Your monthly Xero subscription is billed separately and directly by Xero. No lock-in contracts.</p>
+    </div>
+</section>
+
 <!-- Founder Section -->
-<section id="founder" class="section-padding text-center">
+<section id="founder" class="section-padding text-center bg-light-green">
     <div class="container">
         <h2>Meet Our Founder</h2>
         <img src="Images/Olivia.png" alt="Olivia, Founder of Ctrl Alt Assist" class="founder-img">
         <h3>Olivia</h3>
-        <p class="lead">Loving wife, involved mom, and devoted pet parent.</p>
+        <p class="lead text-dark">Loving wife, involved mom, and devoted pet parent.</p>
-        <p>Olivia brings over 20 years of robust experience in both the Corporate and Private sector, working with JSE listed companies and privately owned businesses across diverse industries from transport to the arts. Her extensive knowledge is backed by a Bcompt, Business Studies Diploma, various Computer & Accounting software diplomas, and a Mini-MBA with Action Coach Ignite.</p>
+        <p class="text-dark">Olivia brings over 20 years of robust experience in both the Corporate and Private sector, working with JSE listed companies and privately owned businesses across diverse industries from transport to the arts. Her extensive knowledge is backed by a Bcompt, Business Studies Diploma, various Computer & Accounting software diplomas, and a Mini-MBA with Action Coach Ignite.</p>
-        <p>A firm believer in continuous learning and growth, Olivia is a motivated and organized professional. She provides all necessary software, hardware, and office requirements, ensuring a seamless and efficient service. Clients also benefit from a personal login to our website, allowing them to view timesheets, track hours remaining, and more.</p>
+        <p class="text-dark">A firm believer in continuous learning and growth, Olivia is a motivated and organized professional. She provides all necessary software, hardware, and office requirements, ensuring a seamless and efficient service. Clients also benefit from a personal login to our website, allowing them to view timesheets, track hours remaining, and more.</p>
     </div>
 </section>
 
 <!-- Call to Action for Login -->
-<section id="login-cta" class="call-to-action">
+<section id="login-cta" class="call-to-action-section">
     <div class="container">
         <h2>Already a Client?</h2>
         <p class="lead">Access your personalized portal to manage your services and track progress.</p>

CtrlAltAssist/Components/Pages/Home.razor.css

@@ -30,21 +30,6 @@
         margin: 0 auto 30px;
     }
 
-.testimonial-carousel .carousel-item {
-    padding: 40px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    margin: 20px auto;
-    max-width: 800px;
-}
-
-.testimonial-carousel .carousel-control-prev-icon,
-.testimonial-carousel .carousel-control-next-icon {
-    filter: invert(100%);
-}
-
-
 .founder-img {
     max-width: 250px;
     border-radius: 50%;
@@ -70,12 +55,12 @@
 
         .service-list ul li::before {
             content: '?';
-            color: var(--quaternary-pastel-pink);
+            color: var(--text-dark); /*var(--quaternary-pastel-pink);*/
             font-weight: bold;
             margin-right: 10px;
         }
 
-.call-to-action {
+.call-to-action-section {
     background-color: var(--quaternary-pastel-pink);
     color: var(--text-dark);
     padding: 60px 0;