Major site overhaul: resources hub, content migration, new blog posts, forms

- Redesign /resources as sectioned hub with category pages
- Migrate 645 Squarespace CDN images to local /images/content/
- Create 9 new news/blog posts with event photos
- Fix blog post slugs (rename gibberish filenames)
- Rename Design Blog to Design Blogs across site
- Remove education page, replace with Platform in nav
- Redesign rover repair request form with dynamic rover entries
- Add school search combobox to contact, store, and repair forms
- Extract shared KNOWN_SCHOOLS data
- Make /rover-expansion-3d-printing dynamically pull from MDX
- Add related resources sections to product pages
- Fix homepage broken /quote links to /store
- Store page: sample kit cards, inline quote builder, mailing list opt-in

src/app/contact/ContactForm.tsx

@@ -1,17 +1,30 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Container } from "@/components/layout/Container";
 import { Button } from "@/components/ui/Button";
 import { FormField } from "@/components/ui/FormField";
+import { KNOWN_SCHOOLS } from "@/data/schools";
 
 export default function ContactForm() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
   const [institution, setInstitution] = useState("");
+  const [institutionOpen, setInstitutionOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [submitted, setSubmitted] = useState(false);
+  const institutionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (institutionRef.current && !institutionRef.current.contains(e.target as Node)) {
+        setInstitutionOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -36,6 +49,9 @@ export default function ContactForm() {
     );
   }
 
+  const inputClasses =
+    "w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";
+
   return (
     <section className="bg-white py-16 sm:py-24">
       <Container>
@@ -82,14 +98,52 @@ export default function ContactForm() {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
             />
-            <FormField
-              label="Institution/Organisation"
-              name="institution"
-              type="text"
-              placeholder="Your institution or organisation"
-              value={institution}
-              onChange={(e) => setInstitution(e.target.value)}
-            />
+
+            {/* School search combobox */}
+            <div ref={institutionRef} className="relative">
+              <label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
+                School / Organisation
+              </label>
+              <input
+                type="text"
+                id="institution"
+                value={institution}
+                onChange={(e) => {
+                  setInstitution(e.target.value);
+                  setInstitutionOpen(true);
+                }}
+                onFocus={() => setInstitutionOpen(true)}
+                placeholder="Search or type your school name"
+                className={inputClasses}
+                autoComplete="off"
+              />
+              {institutionOpen && institution.length > 0 && (() => {
+                const query = institution.toLowerCase();
+                const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
+                const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
+                if (matches.length === 0 && !exactMatch) return null;
+                if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
+                return (
+                  <ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
+                    {matches.map((school) => (
+                      <li key={school}>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setInstitution(school);
+                            setInstitutionOpen(false);
+                          }}
+                          className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
+                        >
+                          {school}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                );
+              })()}
+            </div>
+
             <FormField
               label="Message"
               name="message"