Add space to nav scroll.

CtrlAltAssist/Components/App.razor

@@ -8,6 +8,7 @@
     <ResourcePreloader />
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="@Assets["app.css"]" />

CtrlAltAssist/Components/Pages/Home/D_PricingSection.razor

@@ -15,11 +15,11 @@
                     <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><i class="bi bi-check-circle-fill text-success me-2"></i>Xero setup and onboarding</li>
-                        <li><span class="check">✓</span>Monthly bank reconciliation</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Monthly bank reconciliation</li>
-                        <li><span class="check">✓</span>Income statement and balance sheet</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Income statement and balance sheet</li>
-                        <li><span class="check">✓</span>Up to 50 transactions per month</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Up to 50 transactions per month</li>
-                        <li><span class="check">✓</span>Email support</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Email support</li>
                     </ul>
                     <a href="#contact" class="btn btn-outline-primary w-100">Get a quote</a>
                 </div>
@@ -28,19 +28,19 @@
             <!-- 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>
+                    <span class="featured-tag">Most popular</span>
                     <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><i class="bi bi-check-circle-fill text-success me-2"></i>Everything in Basic</li>
-                        <li><span class="check">✓</span>Full monthly bookkeeping service (Including VAT)</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Full monthly bookkeeping service (Including VAT)</li>
-                        <li><span class="check">✓</span>Up to 200 transactions per month</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Up to 200 transactions per month</li>
-                        <li><span class="check">✓</span>Monthly management accounts</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Monthly management accounts</li>
-                        <li><span class="check">✓</span>Priority email and phone support</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Priority email and phone support</li>
-                        <li><span class="check">✓</span>Quarterly financial review call</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Quarterly financial review call</li>
                     </ul>
                     <a href="#contact" class="btn btn-primary w-100">Get a quote</a>
                 </div>
@@ -55,12 +55,12 @@
                     <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><i class="bi bi-check-circle-fill text-success me-2"></i>Everything in Premium</li>
-                        <li><span class="check">✓</span>Unlimited transactions</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited transactions</li>
-                        <li><span class="check">✓</span>Multi-entity reporting</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Multi-entity reporting</li>
-                        <li><span class="check">✓</span>Custom Xero integrations</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Custom Xero integrations</li>
-                        <li><span class="check">✓</span>Dedicated monthly strategy session</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Dedicated monthly strategy session</li>
-                        <li><span class="check">✓</span>Direct adviser access</li>
+                        <li><i class="bi bi-check-circle-fill text-success me-2"></i>Direct adviser access</li>
                     </ul>
                     <a href="#contact" class="btn btn-outline-primary w-100">Let's talk</a>
                 </div>

CtrlAltAssist/Components/Pages/Home/D_PricingSection.razor.css

@@ -0,0 +1,26 @@
+.price-features {
+    list-style: none;
+    padding-left: 0;
+}
+
+.featured {
+    position: relative;
+    border: 1px solid #0d6efd !important;
+    border-radius: 0.75rem !important;
+    box-shadow: 0 0 20px rgba(13, 110, 253, 0.5), 0 0 40px rgba(13, 110, 253, 0.3), 0 0 60px rgba(13, 110, 253, 0.15) !important;
+}
+
+.featured-tag {
+    position: absolute;
+    top: -13px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #0d6efd;
+    color: #fff;
+    padding: 4px 18px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    white-space: nowrap;
+    z-index: 1;
+}

CtrlAltAssist/wwwroot/app.css

@@ -123,4 +123,10 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
     border-color: #929292;
 }
+
+/* Offset anchor scroll targets so the sticky navbar doesn't hide content */
+section[id],
+header[id] {
+    scroll-margin-top: 40px;
+}
     

CtrlAltAssist/wwwroot/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /