updated calltoaction to use tailwind

src/components/CallToAction.astro

@@ -1,17 +1,13 @@
 <div class="container">
-  <div class="call-to-action mb-32 mt-24 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24">
+  <div class="mb-32 mt-24 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 text-[var(--neutral-900)] bg-gradient-to-r from-[var(--highlight-blue-300)] to-[var(--highlight-purple-200)]">
     <h2 class="text-center text-3xl md:text-5xl">Contact us today!</h2>
     <a href="/contact">
-      <button class=`rounded-md border border-[var(--neutral-800)] py-2 px-4 text-center text-2xl transition-all shadow-sm hover:shadow-lg text-[var(--neutral-900)] hover:text-[var(--neutral-200)] hover:bg-[var(--highlight-blue-400)] hover:border-[var(--neutral-800)] focus:text-white focus:bg-[var(--highlight-blue-400)] focus:border-[var(--neutral-800)] active:border-[var(--neutral-800)] active:text-[var(--neutral-200)] active:bg-[var(--highlight-blue-400)] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` type="button">
+      <button 
+        class=`rounded-md border border-[var(--neutral-800)] py-2 px-4 text-center text-2xl transition-all shadow-sm hover:shadow-lg text-[var(--neutral-900)] hover:text-[var(--neutral-200)] hover:bg-[var(--highlight-blue-400)] hover:border-[var(--neutral-800)] focus:text-white focus:bg-[var(--highlight-blue-400)] focus:border-[var(--neutral-800)] active:border-[var(--neutral-800)] active:text-[var(--neutral-200)] active:bg-[var(--highlight-blue-400)] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` 
+        type="button"
+        >
         Contact Us
       </button>
     </a>
   </div>
-</div>
-
-<style lang="scss">
-  .call-to-action {
-    color: var(--neutral-900);
-    background-image: linear-gradient(40deg, var(--highlight-blue-300) 45%, var(--highlight-purple-200));
-  }
-</style>
+</div>

src/pages/_ngo.astro

@@ -0,0 +1,89 @@
+---
+import DefaultLayout from "../layouts/DefaultLayout.astro";
+import PageTitle from '../components/PageTitle.astro';
+import CallToAction from '../components/CallToAction.astro';
+
+export const prerender = true;
+const pageTitle = "NGO's";
+
+---
+<DefaultLayout title="NGO's">
+    <div class="container">
+      <PageTitle 
+        title={pageTitle} 
+        desc="Alex's Guardian provides a subset of our services to not for profit organizations at a discounted rate or for free."
+        notice="This page covers the services we offer to NGOs, how to provide proof of not for profit status, and our rates." />
+      <div>
+        <h3>
+          Services and Rates
+        </h3>
+        <sub>
+          Please see the table below for the services and their rates we offer to not for profit organizations.
+        </sub>
+        <section>
+          <div class="bg-[var(--neutral-200)] text-[var(--neutral-100)] dark:bg-[var(--dark-100)] dark:text-[var(--neutral-100)]">
+            <table class="table-fixed">
+              <thead>
+                <tr>
+                  <th scope="col">Service</th>
+                  <th scope"col">Rates</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">Basic Remote IT Troubleshooting</th>
+                  <td>FREE</td>
+                </tr>
+                <tr>
+                  <th scope="row">Advanced Remote IT Troubleshooting</th>
+                  <td>$5/hr</td>
+                </tr>
+                <tr>
+                  <th scope="row">Basic Onsite IT Troubleshooting</th>
+                  <td>FREE</td>
+                </tr>
+                <tr>
+                  <th scope="row">Advanced Onsite IT Troubleshooting</th>
+                  <td>$10/hr</td>
+                </tr>
+                <tr>
+                  <th scope="row">Basic Organization Networking</th>
+                  <td>FREE</td>
+                </tr>
+                <tr>
+                  <th scope="row">Advanced Organization Networking</th>
+                  <td>$10/hr</td>
+                </tr>
+                <tr>
+                  <th scope="row">Basic Hardware Purchasing & Setup</th>
+                  <td>FREE</td>
+                </tr>
+                <tr>
+                  <th scope="row">Advanced Hardware Purchasing & Setup</th>
+                  <td>$10/hr</td>
+                </tr>
+                <tr>
+                  <th scope="row">Basic Website Hosting & Management*</th>
+                  <td>FREE</td>
+                </tr>
+                <tr>
+                  <th scope="row">Advanced Website Hosting & Management*</th>
+                  <td>$10/hr</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr>
+                  <sub>Services and or rates are subject to change.</sub>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </section>
+        <section>
+
+        </section>
+      </div>
+    <div>
+
+  <CallToAction />
+</DefaultLayout>

src/pages/index.astro

@@ -63,7 +63,7 @@ export const prerender = true;
     </div>
   </section>
 
-  <section class="mb-[5rem] mt-[5rem]">
+  <!-- <section class="mb-[5rem] mt-[5rem]">
     <div class="container border-4 rounded border-[#95509f] bg-[var(--neutral-200)] text-[var(--neutral-900)] dark:bg-[var(--dark-100)] dark:text-[var(--neutral-200)]">
       <div class="p-12">
         <h3 class="mb-10 text-6xl text-center">NGO's</h3>
@@ -73,7 +73,7 @@ export const prerender = true;
         </p>
       </div>
     </div>
-  </section>
+  </section> -->
 
   <section class="mb-32 mt-64">
     <div class="container">