feat: move to consistent branding colours

src/components/Cards.astro

@@ -24,7 +24,7 @@ const { cards } = Astro.props;
               />
 
               <div class="grow ms-5">
-                <h3 class="group-hover:text-blue-600 font-semibold text-gray-800 dark:group-hover:text-neutral-400 dark:text-neutral-200">
+                <h3 class="group-hover:text-secondary font-semibold text-gray-800 dark:group-hover:text-neutral-400 dark:text-neutral-200">
                   {card.title}
                 </h3>
                 <p class="text-sm text-gray-500 dark:text-neutral-500">

src/components/FAQs.astro

@@ -10,9 +10,7 @@ const { title, faqs } = Astro.props;
 
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
   <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
-    <h2
-      class="text-2xl font-bold md:text-3xl md:leading-tight text-gray-800 dark:text-neutral-200"
-    >
+    <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-primary">
       {title}
     </h2>
   </div>
@@ -22,7 +20,7 @@ const { title, faqs } = Astro.props;
       {
         faqs.map((faq) => (
           <div>
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">
+            <h3 class="text-lg font-semibold text-secondary dark:text-secondary">
               {faq.question}
             </h3>
             <p class="mt-2 text-gray-600 dark:text-neutral-400">{faq.answer}</p>

src/components/FeaturesLarge.astro

@@ -37,7 +37,7 @@ const { title, description, image, features } = Astro.props;
             <div class="flex gap-x-5">
               <Icon
                 name={feature.icon}
-                class="flex-shrink-0 mt-1 size-6 text-blue-600 dark:text-blue-500"
+                class="flex-shrink-0 mt-1 size-6 text-secondary dark:text-secondary"
                 title="Icon"
               />
               <div class="grow">

src/components/Hero.astro

@@ -17,7 +17,7 @@ import heroImage from "@images/hero.avif";
 
       <div class="mt-7 grid gap-3 w-full sm:inline-flex">
         <a
-          class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
+          class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primary disabled:opacity-50 disabled:pointer-events-none"
           href="/what-we-do"
         >
           What We Do

src/components/IconCards.astro

@@ -11,7 +11,7 @@ const { cards, location } = Astro.props;
 
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
   <h2
-    class="block text-3xl font-bold text-gray-800 sm:text-4xl md:text-5xl lg:text-4xl dark:text-white"
+    class="block text-3xl font-bold text-primary sm:text-4xl md:text-5xl lg:text-4xl dark:text-primary"
     id={location.toLowerCase().replace(" ", "-")}
   >
     <a href=`#${location.toLowerCase().replace(" ", "-")}`>{location}</a>

src/components/Navbar.astro

@@ -96,7 +96,7 @@ import Logo from "@components/Logo.astro";
                   <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-neutral-800 sm:dark:border dark:border-neutral-700 dark:divide-neutral-700 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden">
                     {link.links.map((sublink) => (
                       <a
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300"
+                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-secondary dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300"
                         href={sublink.href}
                       >
                         {sublink.label}

src/components/People.astro

@@ -79,7 +79,7 @@ import { Icon } from "astro-icon/components";
         >
           <h3 class="text-lg text-secondary">{hiringTitle}</h3>
           <div>
-            <span class="inline-flex items-center gap-x-2 text-gray-500 dark:text-neutral-500 group-hover:text-blue-800 dark:group-hover:text-blue-100">
+            <span class="inline-flex items-center gap-x-2 text-gray-500 dark:text-neutral-500 group-hover:text-secondary dark:group-hover:text-secondary">
               {hiringDescription}
               <svg
                 class="flex-shrink-0 size-4"

src/components/Pricing.astro

@@ -12,7 +12,9 @@ const { tiers } = Astro.props;
 
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
   <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
-    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
+    <h2
+      class="text-2xl font-bold text-primary md:text-4xl md:leading-tight dark:text-primary"
+    >
       Join as Sponsor
     </h2>
     <p class="mt-1 text-gray-600 dark:text-neutral-400">
@@ -39,7 +41,7 @@ const { tiers } = Astro.props;
             {tier.items.map((item) => (
               <li class="flex space-x-2">
                 <svg
-                  class="flex-shrink-0 mt-0.5 size-4 text-blue-600 dark:text-blue-500"
+                  class="flex-shrink-0 mt-0.5 size-4 text-secondary dark:text-secondary"
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
                   height="24"
@@ -58,7 +60,7 @@ const { tiers } = Astro.props;
           </ul>
 
           <a
-            class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-blue-500 dark:hover:border-blue-600"
+            class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-secondary hover:text-secondary disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-secondary dark:hover:border-secondary"
             href="#contact"
           >
             Sponsor Us
@@ -83,7 +85,7 @@ const { tiers } = Astro.props;
       <ul class="mt-7 space-y-2.5 text-sm">
         <li class="flex space-x-2">
           <svg
-            class="flex-shrink-0 mt-0.5 size-4 text-blue-600 dark:text-blue-500"
+            class="flex-shrink-0 mt-0.5 size-4 text-secondary dark:text-secondary"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
@@ -103,7 +105,7 @@ const { tiers } = Astro.props;
       </ul>
 
       <a
-        class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-blue-500 dark:hover:border-blue-600"
+        class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-secondary hover:text-secondary disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-secondary dark:hover:border-secondary"
         href="#contact"
       >
         Sponsor Us

src/components/SmallHero.astro

@@ -13,11 +13,11 @@ const { title, featureImage, description } = Astro.props;
   <div class="grid lg:grid-cols-7 lg:gap-x-8 xl:gap-x-12 lg:items-center">
     <div class="lg:col-span-3">
       <h1
-        class="block text-3xl font-bold text-gray-800 sm:text-4xl md:text-5xl lg:text-6xl dark:text-white"
+        class="block text-3xl font-bold text-primary sm:text-4xl md:text-5xl lg:text-6xl dark:text-primary"
       >
         {title}
       </h1>
-      <p class="mt-3 text-lg text-gray-800 dark:text-neutral-400">
+      <p class="mt-3 text-lg text-secondary dark:text-secondary">
         {description}
       </p>
     </div>

src/data.ts

@@ -306,7 +306,7 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         day: "Monday",
         time: "3:30pm to 5:30pm",
         description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+          "Session to explore all areas of technology, work on projects and explore. This term there is a focus on Cybersecurity/Ethical Hacking.",
         type: "After School",
       },
       {
@@ -315,16 +315,15 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         day: "Tuesday",
         time: "3:30pm to 5:30pm",
         description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+          "Session to explore all areas of technology, work on projects and explore. This term there is a focus on Cybersecurity/Ethical Hacking.",
         type: "After School",
       },
       {
         title: "Te Tūhunga Rau Community Centre",
         ages: "5 - 8",
         day: "Monday",
         time: "3:30pm to 5:30pm",
-        description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+        description: "Introduction to programming using Python.",
         type: "After School",
         signupLink: "https://forms.gle/uCXEsoksTq3tSEBfA",
       },
@@ -334,7 +333,7 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         day: "Wednesday",
         time: "3:30pm to 5:30pm",
         description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+          "Session to explore all areas of technology, work on projects and explore. This term there is a focus on Cybersecurity/Ethical Hacking.",
         type: "After School",
       },
 
@@ -343,8 +342,7 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         ages: "5 - 8",
         day: "Wednesday",
         time: "3:30pm to 5:30pm",
-        description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+        description: "Introduction to programming using Python.",
         type: "After School",
         signupLink: "https://forms.gle/PqwLGaTZJPuT4tLc6",
       },
@@ -353,20 +351,17 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         ages: "5 - 8",
         day: "Thursday",
         time: "3:30pm to 5:30pm",
-        starts: "Thursday 9th May",
-        description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+        starts: "Thursday 16th May",
+        description: "Introduction to programming using Scratch.",
         type: "After School",
         signupLink: "https://forms.gle/yxiPE7ccqQ6SZ5DZ9",
       },
       {
         title: "South Wellington Intermediate School",
         ages: "7 - 8",
         day: "Friday",
-        time: "Schooltime",
-
-        description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+        time: "In School Enrichment",
+        description: "Introduction to programming using Python.",
         type: "During School Enrichment",
       },
     ],
@@ -379,9 +374,9 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         ages: "5 - 8",
         day: "Monday",
         time: "3:30pm to 5:30pm",
-        description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+        description: "Introduction to programming using Scratch.",
         type: "After School",
+        starts: "Monday 20th May",
         signupLink: "",
       },
     ],
@@ -394,8 +389,9 @@ export const sessions: { location: string; sessions: Session[] }[] = [
         ages: "9 - 13",
         day: "Monday",
         time: "3:30pm to 5:30pm",
+        starts: "Monday 20th May",
         description:
-          "After school every Monday from 3:30pm to 5:30pm for students in years 9 to 13;",
+          "Session to explore all areas of technology, work on projects and explore. This term there is a focus on Cybersecurity/Ethical Hacking.",
         type: "After School",
         signupLink: "https://forms.gle/yoC2wsCnsPjwu8nv9",
       },

src/pages/what-we-do.astro

@@ -17,7 +17,7 @@ const title = "What We Do";
     <!-- Content -->
     <div class="space-y-5 md:space-y-8">
       <div class="space-y-3">
-        <h2 class="text-2xl font-bold md:text-3xl dark:text-white">Sessions</h2>
+        <h2 class="text-2xl font-bold text-primary md:text-3xl dark:text-primary">Sessions</h2>
 
         <p class="text-lg text-gray-800 dark:text-neutral-200">
           At the core of what we do is our After School Sessions where we work