Merge branch 'rewrite' of https://github.com/Tuhura-Tech/site into rewrite

Author: lillianhidet

package.json

@@ -14,9 +14,9 @@
 		"lint:fix": "biome check --write ."
 	},
 	"dependencies": {
-		"@astrojs/sitemap": "^3.4.2",
+		"@astrojs/sitemap": "^3.5.0",
 		"@iconify-json/heroicons": "^1.2.2",
-		"astro": "^5.12.9",
+		"astro": "^5.13.2",
 		"astro-icon": "^1.1.5",
 		"leaflet": "^2.0.0-alpha",
 		"tailwindcss": "^4.1.11"

pnpm-lock.yaml

@@ -1,5 +1,4 @@
 ---
-import { Icon } from "astro-icon/components";
 ---
 
 <dialog

src/components/DonateModal.astro

@@ -1,49 +1,60 @@
 ---
+import { Icon } from "astro-icon/components";
+
 const faqs = [
 	{
-		question: "What ages can participate in your sessions?",
+		question: "What ages can participate?",
 		answer:
-			"Our sessions welcome rangatahi and tamariki from years 5-13 (ages 9-18). We adapt activities and support to suit different age groups and experience levels - from beginners who've never coded to advanced students leading their own projects.",
+			"Years 5-13 (ages 9-18). We adapt activities for different experience levels - from complete beginners to advanced students leading their own projects.",
+		icon: "heroicons:users",
 	},
 	{
-		question: "What do you mean by 'technology education'?",
+		question: "What is 'technology education'?",
 		answer:
-			"We focus on hands-on exploration of coding, robotics, 3D printing, digital creativity, and problem-solving using technology. Led by trained kaiako with industry volunteer support, learning happens naturally through passion-driven projects rather than formal lessons.",
+			"Hands-on exploration of coding, robotics, 3D printing, and digital creativity. Learning happens through passion-driven projects led by trained kaiako with industry volunteer support.",
+		icon: "heroicons:code-bracket",
 	},
 	{
-		question: "Do sessions really cost nothing?",
+		question: "Are sessions really free?",
 		answer:
-			"Yes! Sessions, equipment, and materials are completely free. Since our founding in 2022, we've been funded by corporate sponsors, local government partnerships, and community donations. No hidden costs, ever - this commitment helps us remove barriers to technology education.",
+			"Yes! Sessions, equipment, and materials are completely free. We're funded by corporate sponsors, government partnerships, and community donations.",
+		icon: "heroicons:heart",
 	},
 	{
-		question: "Do you need prior technology experience?",
+		question: "Do I need tech experience?",
 		answer:
-			"Not at all! We welcome complete beginners alongside experienced young coders. Our trained staff and volunteer mentors adapt to each participant's level, ensuring everyone feels supported and challenged appropriately.",
+			"Not at all! We welcome complete beginners alongside experienced coders. Our mentors adapt to each participant's level.",
+		icon: "heroicons:star",
 	},
 	{
 		question: "Who runs the sessions?",
 		answer:
-			"Our sessions are led by trained kaiako (professional educators) with support from industry expert volunteers. All staff undergo appropriate safety checks. This combination provides both educational expertise and real-world tech industry experience for rangatahi.",
+			"Trained kaiako (professional educators) with support from industry volunteers. All staff undergo safety checks.",
+		icon: "heroicons:academic-cap",
 	},
 	{
 		question: "Where do sessions happen?",
 		answer:
-			"We bring technology education directly to communities! Our sessions run in schools, libraries, community centres, and marae across Wellington, Lower Hutt, Upper Hutt, and Porirua. Each location and session is tailored to the community and rangatahi who attend.",
+			"Schools, libraries, community centres, and marae across Wellington, Lower Hutt, Upper Hutt, and Porirua. Each session is tailored to its community.",
+		icon: "heroicons:map-pin",
 	},
 	{
-		question: "How can my child join a session?",
+		question: "How can my child join?",
 		answer:
-			"Check our sessions page to find locations near you. If we're not already running sessions in your community, your child can join sessions at nearby locations, or encourage your school, library, or community centre to contact us about bringing sessions to your area.",
+			"Check our sessions page to find locations near you. If we're not in your area yet, contact us about bringing sessions to your community.",
+		icon: "heroicons:hand-raised",
 	},
 	{
-		question: "How can I volunteer or support your work?",
+		question: "How can I volunteer or support you?",
 		answer:
-			"We welcome volunteers with technology backgrounds to support sessions, run workshops, or help with resources. You can also support us through donations or partnerships. Contact us to learn about opportunities that match your skills and availability.",
+			"We welcome volunteers with tech backgrounds and supporters through donations or partnerships. Contact us to learn about opportunities.",
+		icon: "heroicons:hand-raised",
 	},
 	{
 		question: "How long have you been operating?",
 		answer:
 			"Tūhura Tech was founded in 2022 as a registered charitable trust. We've been serving Wellington communities for over 3 years, supported by established corporate sponsors like WellingtonNZ, Bastion Security Group, Hutt City Council, and Spark Foundation.",
+		icon: "heroicons:clock",
 	},
 ];
 ---
@@ -65,10 +76,15 @@ const faqs = [
     <div class="mt-12 max-w-6xl mx-auto">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {
-          faqs.map((faq) => (
-            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col hover:shadow-md transition-shadow">
-              <div class="font-semibold text-xl mb-4 text-tuhura-green leading-tight">{faq.question}</div>
-              <div class="text-gray-600 leading-relaxed text-lg">{faq.answer}</div>
+          faqs.map((faq, index) => (
+            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col hover:shadow-md transition-shadow" style={`animation-delay: ${index * 0.1}s`}>
+              <div class="flex items-start mb-4">
+                <div class="w-12 h-12 bg-tuhura-green/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
+                  <Icon name={faq.icon} class="w-6 h-6 text-tuhura-green" />
+                </div>
+                <div class="font-semibold text-xl text-tuhura-green leading-tight">{faq.question}</div>
+              </div>
+              <div class="text-gray-600 leading-relaxed text-lg ml-16">{faq.answer}</div>
             </div>
           ))
         }

src/components/FAQ.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from "astro:assets";
+import pldImage from "@assets/pld.jpg";
 import eventImage from "@assets/robocup-2025.jpg";
 import sessionImage from "@assets/session.jpg";
-import pldImage from "@assets/pld.jpg";
 import { Icon } from "astro-icon/components";
 
 // import featureImage3 from "@assets/feature-3.svg";
@@ -11,23 +11,23 @@ const features = [
 	{
 		title: "Community-Based Sessions",
 		description:
-			"We bring free tech education directly to rangatahi in their own communities - schools, libraries, community centres, and marae. Each session adapts to the specific group and their interests.",
+			"Free tech education in schools, libraries, community centres, and marae. Each session adapts to the group's interests and needs.",
 		icon: "heroicons:star-solid",
 		image: sessionImage,
 		href: "/mahi/sessions",
 	},
 	{
 		title: "Workshops & Events",
 		description:
-			"Intensive experiences delivered in community spaces. From VEX Robotics competitions to 3D printing workshops, each event is customized to the venue and participants.",
+			"Intensive experiences in community spaces. From robotics competitions to 3D printing workshops, customized to venue and participants.",
 		icon: "heroicons:globe-asia-australia",
 		image: eventImage,
 		href: "/mahi/workshops",
 	},
 	{
 		title: "Kaiako (Teacher) Support",
 		description:
-			"Professional development delivered directly to schools and educational communities. We support kaiako with resources, training, and ongoing mentorship in their own teaching environments.",
+			"Professional development delivered to schools and communities. Resources, training, and ongoing mentorship for educators.",
 		icon: "heroicons:academic-cap",
 		image: pldImage,
 		href: "/mahi/pld",
@@ -47,9 +47,7 @@ const features = [
     <div class="text-center max-w-3xl mx-auto">
       <h2 class="text-3xl md:text-4xl font-bold">We Come to Your Community</h2>
       <p class="mt-4 text-xl text-gray-600">
-        Rather than expecting rangatahi to come to us, we bring technology education directly to 
-        communities. Our trained kaiako and industry volunteers deliver sessions in schools, 
-        libraries, community centres, and marae - each session adapted to the rangatahi who attend.
+        We bring technology education directly to communities. Our trained kaiako and industry volunteers deliver sessions adapted to each group of rangatahi.
       </p>
       <div class="mt-8 bg-white rounded-xl p-6 shadow-sm border border-gray-100">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">

src/components/Features.astro

@@ -11,7 +11,7 @@ import heroImage from "@assets/hero.jpg";
           Engaging <span class="gradient-text">rangatahi</span> through technology
         </h1>
         <p class="mt-6 text-xl text-gray-600 max-w-lg">
-          We provide accessible tech experiences with and for young people — in schools, libraries, and communities. For Free; We bring the gear, mentors, and kaupapa.
+          Free tech education in schools, libraries, and communities. We bring the gear, mentors, and kaupapa.
         </p>
         <div class="mt-8 flex flex-col sm:flex-row gap-4">
           <a href="/mahi" class="btn btn-primary">Explore our mahi</a>

src/components/Hero.astro

@@ -36,7 +36,7 @@ const steps = [
     <div class="max-w-3xl mx-auto text-center">
       <h2 class="text-3xl md:text-4xl font-bold">How to Get Started</h2>
       <p class="mt-4 text-xl text-gray-600">
-        Ready to join our community of young tech explorers? Here's how to get involved with Tūhura Tech.
+        Here's how to get involved with Tūhura Tech.
       </p>
     </div>
 

src/components/HowItWorks.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+import sessionImage from "@assets/session.jpg";
 import { Icon } from "astro-icon/components";
 
 const stats = [
@@ -64,6 +66,22 @@ const pillars = [
             </div>
           ))}
         </div>
+        
+        <!-- Visual element -->
+        <div class="mt-6 relative overflow-hidden rounded-xl">
+          <Image
+            src={sessionImage}
+            alt="Rangatahi learning together in our community sessions"
+            class="w-full h-32 object-cover"
+            width={300}
+            height={128}
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent">
+            <div class="absolute bottom-3 left-3 right-3">
+              <p class="text-white text-sm font-medium">Community Learning</p>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="lg:col-span-2 bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
         <h3 class="text-xl font-semibold mb-4">Ways we support communities</h3>

src/components/Impact.astro

@@ -7,7 +7,7 @@ const partners = [
 	},
 	{
 		name: "Bastion Security Group",
-		logo: "/partner-bsg.svg", 
+		logo: "/partner-bsg.svg",
 		href: "https://www.bastionsecurity.co.nz/",
 	},
 	{
@@ -44,7 +44,7 @@ const partners = [
               <img
                 src={partner.logo}
                 alt={`${partner.name} logo`}
-                class="h-16 w-auto mx-auto mb-4 object-contain filter grayscale group-hover:grayscale-0 transition-all duration-300"
+                class="h-16 w-auto mx-auto mb-4 object-contain filter group-hover:grayscale-0 transition-all duration-300"
               />
               <h4 class="text-sm font-medium text-gray-900 mb-2">{partner.name}</h4>
             </a>

src/components/Partners.astro

@@ -138,7 +138,7 @@ import "leaflet/dist/leaflet.css";
             latlong: [-41.261747, 174.944866],
             age: "Years 5-8 (Ages 8-12)",
             signupLink: "https://forms.gle/hJiRmvQF6QcjmJjt9",
-            time: "Monday at 3:30 - 5:30pm",
+            time: "Thursday at 3:30 - 5:30pm",
           },
         ],
       },
@@ -222,14 +222,14 @@ import "leaflet/dist/leaflet.css";
     const map = new Map("map");
     const markers: Marker[] = [];
     const markerOpen: Array<{ title: string; marker: Marker }> = [];
-    
-    /**const icon = new Icon({ This does nothing and was causing the markers to drift
+
+    const icon = new Icon({
       iconUrl: "/marker-icon.png",
       shadowUrl: "/marker-shadow.png",
-    });**/
+    });
 
     allSessions.forEach((session) => {
-      const marker = new Marker(session.latlong).addTo(map);
+      const marker = new Marker(session.latlong, {icon}).addTo(map);
       let popupContent = `
         <div class="session-popup" style="min-width: 250px; padding: 8px;">
           <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: bold; color: #1f2937;">${session.name}</h3>