convert to astro

.gitignore

@@ -4,20 +4,5 @@ dist
 server/public
 vite.config.ts.*
 *.tar.gz
+.astro/
 .local/
-222957077_6028824210491349_4146132303877993139_n-1920w.webp
-223152689_6028821187158318_7901235528269673744_n-1920w-1.webp
-Breagh-bc8e70e8-2880w.webp
-Button.png
-connolly-73f3e69f-2880w-2.webp
-dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4
-Harley-6ece9eca-2880w.webp
-news.webp
-puzzle-5de6e325-2880w.webp
-Samantha-and-Connolly.jpg
-Samantha-sStory-2880w.webp
-small-mono.png
-Star-Participants-Samantha-s-story.pdf
-Suede-2880w.webp
-Wispa-2880w-906x1536.avif
-Wispa-2880w.webp

astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+
+export default defineConfig({
+  output: "static",
+  integrations: [tailwind()],
+});

package.json

@@ -4,13 +4,17 @@
     "type": "module",
     "license": "MIT",
     "scripts": {
-    "dev": "NODE_ENV=development tsx server/index.ts",
-    "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist",
-    "start": "NODE_ENV=production node dist/index.js",
+        "dev": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "server:dev": "NODE_ENV=development tsx server/index.ts",
+        "server:build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist",
+        "server:start": "NODE_ENV=production node dist/index.js",
         "check": "tsc",
         "db:push": "drizzle-kit push"
     },
     "dependencies": {
+        "astro": "^4.15.0",
         "@hookform/resolvers": "^3.10.0",
         "@jridgewell/trace-mapping": "^0.3.25",
         "@neondatabase/serverless": "^0.10.4",
@@ -78,6 +82,7 @@
         "zod-validation-error": "^3.4.0"
     },
     "devDependencies": {
+        "@astrojs/tailwind": "^5.1.0",
         "@replit/vite-plugin-cartographer": "^0.3.1",
         "@replit/vite-plugin-dev-banner": "^0.1.1",
         "@replit/vite-plugin-runtime-error-modal": "^0.0.3",

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://highlandgrouprda.org.uk/sitemap.xml

public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Highland Group RDA",
+  "short_name": "Highland RDA",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#e2e2e2",
+  "background_color": "#e2e2e2",
+  "display": "standalone"
+}

public/sitemap.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://highlandgrouprda.org.uk/</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/about</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/events</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/events/volunteers-summer-2024</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/events/summer-awards-2024</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/events/race-night</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/events/important-news</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/support-us</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/contact</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/privacy</loc>
+  </url>
+  <url>
+    <loc>https://highlandgrouprda.org.uk/facebook</loc>
+  </url>
+</urlset>

src/components/SiteFooter.astro

@@ -0,0 +1,50 @@
+---
+const { fullBleedOnMobile = false } = Astro.props;
+const outerClass = fullBleedOnMobile
+  ? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
+  : "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
+---
+<footer class={outerClass}>
+  <div class="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8">
+    <div class="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
+      <p class="font-semibold">
+        Highland Group RDA is a registered charity in
+        <br />
+        Scotland
+        <a
+          class="underline"
+          href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
+          target="_blank"
+          rel="noreferrer"
+        >
+          SC007357
+        </a>
+      </p>
+      <div class="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <p class="font-semibold">
+          Highland Group RDA, Sandycroft, Reelig, Kirkhill, IV5 7PP
+        </p>
+        <p class="font-semibold">
+          Tel: +447500 203226 · Email:
+          <a
+            class="underline"
+            href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
+          >
+            info@highlandgrouprda.org.uk
+          </a>
+        </p>
+      </div>
+      <p class="mt-4 font-semibold">
+        <a class="underline" href="/privacy">Privacy Policy</a>
+        ·
+        <a class="underline" href="/accessibility">Accessibility</a>
+      </p>
+      <p class="mt-4 font-semibold">
+        Site designed by
+        <a class="underline" href="https://muir.in" target="_blank" rel="noreferrer">
+          Calum Muir
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>

src/components/SiteHeader.astro

@@ -0,0 +1,171 @@
+---
+const {
+    navigationItems,
+    theme = "light",
+    className = "",
+    facebookHref = "/facebook",
+} = Astro.props;
+
+const isDark = theme === "dark";
+const textClass = isDark ? "text-white" : "text-black";
+const borderClass = isDark ? "border-white/40" : "border-black/20";
+const lineClass = isDark ? "bg-white" : "bg-black";
+---
+
+<div
+    id="mobile-menu"
+    class="fixed inset-0 z-50 hidden flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
+    role="dialog"
+    aria-modal="true"
+    aria-hidden="true"
+>
+    <div class="flex items-center justify-between">
+        <a href="/" aria-label="Highland Group RDA home">
+            <img
+                class="w-[140px] h-[75px]"
+                alt="RDA logo"
+                src="/figmaAssets/rdalogo-1.svg"
+            />
+        </a>
+        <button
+            id="menu-close"
+            class="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
+            type="button"
+        >
+            Close
+        </button>
+    </div>
+    <nav
+        class="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]"
+    >
+        <ul class="flex flex-col gap-6">
+            {
+                navigationItems.map((item) => (
+                    <li>
+                        <a
+                            class="block border-b border-black/10 pb-4"
+                            href={item.href}
+                        >
+                            {item.label}
+                        </a>
+                    </li>
+                ))
+            }
+            <li>
+                <a
+                    class="flex items-center gap-3 border-b border-black/10 pb-4"
+                    href={facebookHref}
+                >
+                    <span
+                        class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black"
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            class="h-4 w-4"
+                            aria-hidden="true"
+                            focusable="false"
+                        >
+                            <path
+                                fill="currentColor"
+                                d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"
+                            ></path>
+                        </svg>
+                    </span>
+                    Facebook
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+<header class={`relative w-full ${className}`.trim()}>
+    <div
+        class="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]"
+    >
+        <a href="/" aria-label="Highland Group RDA home">
+            <img
+                class="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                alt="RDA logo"
+                src="/figmaAssets/rdalogo-1.svg"
+            />
+        </a>
+        <div class="flex flex-col gap-3 items-end ml-auto text-right">
+            <button
+                id="menu-open"
+                class={`inline-flex items-center gap-3 rounded-full border px-4 py-2 text-sm font-semibold uppercase tracking-wide sm:hidden ${borderClass} ${textClass}`}
+                type="button"
+                aria-haspopup="dialog"
+                aria-expanded="false"
+                aria-controls="mobile-menu"
+            >
+                <span class="flex flex-col gap-1">
+                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
+                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
+                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
+                </span>
+                Menu
+            </button>
+            <nav
+                class={`hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold ${textClass} text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1`}
+            >
+                <ul
+                    class="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto"
+                >
+                    {
+                        navigationItems.map((item) => (
+                            <li>
+                                <a class="hover:underline" href={item.href}>
+                                    {item.label}
+                                </a>
+                            </li>
+                        ))
+                    }
+                    <li class="hidden sm:block">
+                        <a
+                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
+                            href={facebookHref}
+                            aria-label="Highland Group RDA on Facebook"
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                class="h-6 w-6"
+                                aria-hidden="true"
+                                focusable="false"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"
+                                ></path>
+                            </svg>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</header>
+
+<script>
+    const menu = document.getElementById("mobile-menu");
+    const openButton = document.getElementById("menu-open");
+    const closeButton = document.getElementById("menu-close");
+
+    if (menu && openButton && closeButton) {
+        const toggleMenu = (open) => {
+            menu.classList.toggle("hidden", !open);
+            menu.setAttribute("aria-hidden", open ? "false" : "true");
+            openButton.setAttribute("aria-expanded", open ? "true" : "false");
+        };
+
+        openButton.addEventListener("click", () => toggleMenu(true));
+        closeButton.addEventListener("click", () => toggleMenu(false));
+        menu.addEventListener("click", (event) => {
+            if (
+                event.target instanceof HTMLElement &&
+                event.target.tagName === "A"
+            ) {
+                toggleMenu(false);
+            }
+        });
+    }
+</script>

src/content/news/2024-06-volunteers-summer.md

@@ -0,0 +1,8 @@
+---
+title: "Volunteers Summer 2024"
+date: "2024-06-01"
+summary: "Volunteers summer 2024"
+image: "/Vols5-2880w-1024x768.avif"
+slug: "volunteers-summer-2024"
+---
+We welcomed a group of our volunteers to the centre for a catch up and discussion about upcoming events. It’s always great to get together! Find out how you can help out by **[Volunteering for us](/support-us)**.

src/content/news/2024-07-summer-awards-2024.md

@@ -0,0 +1,11 @@
+---
+title: "Summer Awards"
+date: "2024-07-01"
+summary: "Summer awards 2024"
+image: "/Awardtime-1920w-768x1024.avif"
+slug: "summer-awards-2024"
+---
+Last week we had the pleasure of our awards ceremony. It’s always fantastic to see the progress of our riders, ponies and everyone involved in Highland Group RDA. Samantha received an award for.., read <a href="/Star-Participants-Samantha-s-story.pdf" target="_blank" rel="noreferrer">Samantha's story</a>
+.
+![Alt text](/Art-1024x683.jpg)
+![Alt text](/Louise-art-award-822x1024.jpg)

src/content/news/2024-10-race-night.md

@@ -0,0 +1,8 @@
+---
+title: "Race Night"
+date: "2024-10-01"
+summary: "Race night"
+image: "/race-night.avif"
+slug: "race-night"
+---
+![Alt text](/race-night.avif)

src/content/news/2025-12-important-news.md

@@ -0,0 +1,25 @@
+---
+title: "Important News"
+date: "2025-12-19"
+summary: "Important news to share with the community."
+image: "/important-news.png"
+slug: "important-news"
+---
+
+The Highland Riding for the Disabled Group (SCIO 007357) has been operating from
+Reelig Estate since 2019 and where a plan was developed to create a range of indoor
+and outdoor facilities.
+
+Due to the challenges of significant price increases across the construction sectors,
+changes within the funding landscape and the groups need to focus on its core
+charitable purpose, it was decided by the group that they needed to find an alternative
+venue from which to operate and will terminate the lease on the 1st January 2026.
+The landlords, Dan and Sarah Fraser have been supportive and patient through the
+process and are able to offer a grazing license so that we have time to transition to our
+new premises.
+
+Sarah and Dan would like to add that they are saddened by the groups’ decision but
+respect their reasons. They are committed to ensure that the remaining facility will be
+available for the community to use as that was part of the original planning
+permission and wish the Highland RDA Group all the best in their future
+developments.

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -0,0 +1,73 @@
+---
+import "../styles/global.css";
+
+const {
+  title = "Home",
+  description =
+    "Highland Group RDA provides horse riding for people with disabilities in the Highlands, offering safe, fun, and therapeutic equestrian activities.",
+  path = "/",
+  image = "/Samantha-and-Connolly-1280.webp",
+} = Astro.props;
+
+const SITE_NAME = "Highland Group RDA";
+const BASE_URL = "https://highlandgrouprda.org.uk";
+const pageTitle = `${SITE_NAME} - ${title}`;
+const canonical = path === "/" ? BASE_URL : `${BASE_URL}${path}`;
+const imageUrl = image.startsWith("http") ? image : `${BASE_URL}${image}`;
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{pageTitle}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:image" content={imageUrl} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={pageTitle} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={imageUrl} />
+    <meta name="theme-color" content="#e2e2e2" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <slot name="head" />
+    <script src="https://cdn.userway.org/widget.js" data-account="ZdcVJAc6ri"></script>
+  </head>
+  <body>
+    <div class="snow-banner" role="region" aria-label="Holiday announcement">
+      <div class="snow-banner__snow" aria-hidden="true">
+        <span class="snowflake snowflake-1"></span>
+        <span class="snowflake snowflake-2"></span>
+        <span class="snowflake snowflake-3"></span>
+        <span class="snowflake snowflake-4"></span>
+        <span class="snowflake snowflake-5"></span>
+        <span class="snowflake snowflake-6"></span>
+        <span class="snowflake snowflake-7"></span>
+        <span class="snowflake snowflake-8"></span>
+      </div>
+      <a
+        class="snow-banner__link"
+        href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
+        target="_blank"
+        rel="noreferrer"
+      >
+        The ponies have had a chat and put together an Amazon Wish-List for Christmas! Click here
+      </a>
+    </div>
+    <slot />
+  </body>
+</html>

src/lib/navigation.ts

@@ -0,0 +1,7 @@
+export const navigationItems = [
+  { label: "Home", href: "/" },
+  { label: "About", href: "/about" },
+  { label: "News", href: "/events" },
+  { label: "Support Us", href: "/support-us" },
+  { label: "Contact", href: "/contact" },
+];

src/lib/news.ts

@@ -0,0 +1,76 @@
+import { format } from "date-fns";
+import { marked } from "marked";
+
+export type NewsArticle = {
+  title: string;
+  date: string;
+  summary: string;
+  image?: string;
+  slug: string;
+  body: string;
+  html: string;
+};
+
+type Frontmatter = Partial<
+  Pick<NewsArticle, "title" | "date" | "summary" | "image" | "slug">
+>;
+
+const newsModules = import.meta.glob("/src/content/news/*.md", {
+  eager: true,
+  as: "raw",
+});
+
+const parseFrontmatter = (raw: string): { frontmatter: Frontmatter; body: string } => {
+  const frontmatterMatch = raw.match(/^---\s*([\s\S]*?)\s*---\s*([\s\S]*)$/);
+  if (!frontmatterMatch) {
+    return { frontmatter: {}, body: raw.trim() };
+  }
+
+  const [, frontmatterBlock, body] = frontmatterMatch;
+  const frontmatter: Frontmatter = {};
+
+  frontmatterBlock.split("\n").forEach((line) => {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) return;
+    const [key, ...rest] = trimmed.split(":");
+    if (!key || rest.length === 0) return;
+    const value = rest.join(":").trim().replace(/^["']|["']$/g, "");
+    if (key in frontmatter) return;
+    (frontmatter as Record<string, string>)[key.trim()] = value;
+  });
+
+  return { frontmatter, body: body.trim() };
+};
+
+export const newsArticles: NewsArticle[] = Object.entries(newsModules)
+  .map(([path, raw]) => {
+    const { frontmatter, body } = parseFrontmatter(raw as string);
+    const slug = frontmatter.slug || path.split("/").pop()?.replace(/\.md$/, "") || "";
+
+    return {
+      title: frontmatter.title || slug,
+      date: frontmatter.date || "",
+      summary: frontmatter.summary || "",
+      image: frontmatter.image,
+      slug,
+      body,
+      html: marked.parse(body) as string,
+    };
+  })
+  .sort((a, b) => {
+    const aDate = Date.parse(a.date);
+    const bDate = Date.parse(b.date);
+    if (Number.isNaN(aDate) || Number.isNaN(bDate)) {
+      return b.title.localeCompare(a.title);
+    }
+    return bDate - aDate;
+  });
+
+export const getNewsArticle = (slug: string): NewsArticle | undefined =>
+  newsArticles.find((article) => article.slug === slug);
+
+export const formatNewsDate = (date: string): string => {
+  const parsed = Date.parse(date);
+  if (Number.isNaN(parsed)) return date;
+  return format(new Date(parsed), "MMM yyyy");
+};

src/pages/404.astro

@@ -0,0 +1,30 @@
+---
+import Base from "../layouts/Base.astro";
+---
+
+<Base title="Page not found" path="/404">
+  <div class="min-h-screen w-full flex items-center justify-center bg-[#e2e2e2] px-4">
+    <div class="w-full max-w-md rounded-lg border border-black/10 bg-white/90 px-6 py-6 shadow-sm">
+      <div class="flex items-center gap-3">
+        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-red-100 text-red-500">
+          <svg viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M11 7h2v6h-2zm0 8h2v2h-2z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 2 1 21h22z"
+              opacity="0.15"
+            />
+          </svg>
+        </span>
+        <h1 class="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
+      </div>
+      <p class="mt-4 text-sm text-gray-600">
+        The page you are looking for does not exist. Try heading back to the homepage.
+      </p>
+      <a class="mt-6 inline-flex text-sm font-semibold text-black underline" href="/">Return home</a>
+    </div>
+  </div>
+</Base>

src/pages/about.astro

@@ -0,0 +1,243 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+---
+
+<Base
+  title="About"
+  path="/about"
+  description="Learn about Highland Group RDA, our mission, and how we support riders across the Highlands."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
+        >
+          <div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                Who, why, where, when &amp; how?
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                Highland Group RDA was established in 1975.
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
+                We are located at our own premises just outside Kirkhill, near Inverness. We operate
+                from Spring to Autumn 4 days per week. The majority of our participants are Inverness
+                and Ross-shire based with a reach including Glenurquhart, Dingwall and Inverness.
+              </p>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
+                We are completely self-funded and rely on income from donations for our sessions,
+                fundraising from local events and available grants to fund our services, upkeep of our
+                facilities and most importantly fund the care and training of our wonderful ponies.
+              </p>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+            <h2 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+              Our Star Participants
+            </h2>
+            <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/60">
+              Stories and testimonials
+            </p>
+          </div>
+
+          <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_0.95fr]">
+            <div class="bg-white/70 px-6 py-6">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
+                Featured story
+              </p>
+              <h3 class="mt-2 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                Samantha&apos;s Story
+              </h3>
+              <div
+                class="mt-4 h-[200px] sm:h-[260px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/Samantha-sStory-2880w.webp);"
+              ></div>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                Read Samantha&apos;s story and find out how her RDA sessions have not only improved her
+                physical and mental wellbeing, but helped her to overcome her prognosis of never being
+                able to walk.
+              </p>
+              <a
+                class="mt-4 inline-flex items-center gap-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] underline"
+                href="/Star-Participants-Samantha-s-story.pdf"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Full story (PDF)
+              </a>
+            </div>
+
+            <div class="bg-white/70 px-6 py-6">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
+                Testimonials
+              </p>
+              <div class="mt-4 space-y-4">
+                <blockquote class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
+                  <span class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">&ldquo;</span>
+                  <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                    Riding helps to correct her posture and protects the spine and hips while it
+                    strengthens the muscles. More than that, it gives a sense of achievement and of
+                    being just as &apos;able-bodied&apos; as everyone else on the back of a horse.
+                  </p>
+                </blockquote>
+                <blockquote class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
+                  <span class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">&ldquo;</span>
+                  <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                    He feels the responsibility of controlling such a large and powerful animal and it
+                    helps him understand life just that bit better. It&apos;s also very calming for him,
+                    especially at the end of a session when he can nurture the horse by brushing her
+                    and giving her some hay.
+                  </p>
+                </blockquote>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <blockquote class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
+              <span class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">&ldquo;</span>
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                We cannot thank the team at RDA Highland enough for what they&apos;ve done for our child.
+                To see only the individual and the pure joy of achievement, and not the disability is a
+                tremendous gift. Our whole family benefits from these sessions. Thank you.
+              </p>
+            </blockquote>
+            <blockquote class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
+              <span class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">&ldquo;</span>
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                RDA&apos;s gentle, calm and serene atmosphere coupled with the warm sentient creature that
+                she can bond with and enjoy without needing words. I think it helps her to feel calm and
+                grounded and gives a huge sense of achievement. RDA is such an important part of our
+                lives and each of my children take something different away.
+              </p>
+            </blockquote>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pt-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="h-px w-24 bg-black/20"></div>
+          <h2 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Meet the ponies
+          </h2>
+          <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Breagh</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/Breagh-bc8e70e8-2880w.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                13.2hh · Mare · 15 yo
+                <br />
+                She is very willing and independent
+              </p>
+            </div>
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Connolly</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/connolly-73f3e69f-2880w-2.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                14.2hh · Gelding · 16 yo
+                <br />
+                A true gentleman and everyone&apos;s friend
+              </p>
+            </div>
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Harley</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/Harley-6ece9eca-2880w.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                15.3hh · Gelding · 15 yo
+                <br />
+                He is the boss but very obliging
+              </p>
+            </div>
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Puzzle</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/puzzle-5de6e325-2880w.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                15.3hh · Mare · 14 yo
+                <br />
+                She is very sensitive and gentle
+              </p>
+            </div>
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Lady Suede</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
+                style="background-image: url(/Suede-2880w.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                13hh · Mare · 23 yo
+                <br />
+                RIP October 2024
+              </p>
+            </div>
+            <div class="bg-white/70 px-5 py-5">
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">Wispa</h3>
+              <div
+                class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_20%]"
+                style="background-image: url(/Wispa-2880w.webp);"
+              ></div>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                14.2hh · Gelding · 15 yo
+                <br />
+                RIP 2025
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="h-px w-24 bg-black/20"></div>
+          <h2 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Apple foraging video
+          </h2>
+          <div class="mt-6 overflow-hidden rounded-[7px] bg-black">
+            <video
+              class="w-full h-auto"
+              src="/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4"
+              controls
+              preload="metadata"
+            ></video>
+          </div>
+        </div>
+      </section>
+
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/accessibility.astro

@@ -0,0 +1,169 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+---
+
+<Base
+    title="Accessibility"
+    path="/accessibility"
+    description="Accessibility statement for Highland Group RDA and our commitment to inclusive access."
+>
+    <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+        <main class="w-full">
+            <section
+                class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
+            >
+                <div
+                    class="bg-[#d6d6d6] px-6 sm:px-8 pt-6 sm:pt-4 pb-6 sm:pb-8"
+                >
+                    <SiteHeader
+                        navigationItems={navigationItems}
+                        className="px-0"
+                    />
+                    <p
+                        class="mt-6 [font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70"
+                    >
+                        Accessibility Statement
+                    </p>
+                    <h1
+                        class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]"
+                    >
+                        Accessibility Statement
+                    </h1>
+
+                    <p
+                        class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        Highland Group RDA is committed to making our website as
+                        accessible and inclusive as possible, so that everyone
+                        can use it with confidence.
+                    </p>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        We aim for our website to be easy to understand, easy to
+                        navigate, and usable across a range of devices and
+                        assistive technologies.
+                    </p>
+
+                    <h2
+                        class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                    >
+                        What we're doing to support accessibility
+                    </h2>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        We have designed this website so that it:
+                    </p>
+                    <ul
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2"
+                    >
+                        <li>Uses clear language and simple page layouts</li>
+                        <li>
+                            Works on mobile phones, tablets, and desktop
+                            computers
+                        </li>
+                        <li>Can be navigated using a keyboard</li>
+                        <li>
+                            Uses readable font sizes and good colour contrast
+                        </li>
+                        <li>
+                            Is compatible with common screen readers and
+                            accessibility tools
+                        </li>
+                    </ul>
+                    <p
+                        class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        Behind the scenes, we use well-supported systems and
+                        follow recognised accessibility guidance when adding or
+                        updating content.
+                    </p>
+
+                    <h2
+                        class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                    >
+                        Known limitations
+                    </h2>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        We recognise that no website is perfect. Some documents
+                        or older content may not yet be fully accessible,
+                        particularly where materials were created before
+                        accessibility standards were more widely adopted.
+                    </p>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        If you encounter any difficulties, we are very happy to
+                        help.
+                    </p>
+
+                    <h2
+                        class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                    >
+                        Alternative formats and support
+                    </h2>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        If you need information from this website in a different
+                        format -- such as large print, plain text, or by talking
+                        things through -- please let us know.
+                    </p>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        You can contact us at:
+                    </p>
+                    <p
+                        class="mt-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        Email: info@highlandgrouprda.org.uk
+                    </p>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        We will do our best to respond promptly and support your
+                        needs.
+                    </p>
+
+                    <h2
+                        class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                    >
+                        Accessibility beyond the website
+                    </h2>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        Accessibility is central to everything we do as a riding
+                        for the disabled group. Information shared through our
+                        website, application forms, and communications helps us
+                        understand individual needs so that appropriate support
+                        can be provided safely and respectfully during
+                        activities.
+                    </p>
+
+                    <h2
+                        class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                    >
+                        Continuous improvement
+                    </h2>
+                    <p
+                        class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
+                    >
+                        We are committed to improving accessibility over time.
+                        As the website evolves, we will continue to review and
+                        enhance it to ensure it remains welcoming and usable for
+                        everyone.
+                    </p>
+                </div>
+            </section>
+            <SiteFooter fullBleedOnMobile />
+        </main>
+    </div>
+</Base>

src/pages/contact.astro

@@ -0,0 +1,210 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+
+const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
+---
+
+<Base
+  title="Contact"
+  path="/contact"
+  description="Contact Highland Group RDA for sessions, volunteering, and support."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
+        >
+          <div class="absolute inset-0 bg-black/45"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                Get in touch
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                Contact Highland Group RDA
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
+                We would love to hear from you about sessions, volunteering, or ways to support the group. Reach out
+                and we will get back to you as soon as we can.
+              </p>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
+            <div>
+              <h2 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                Contact details
+              </h2>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                Highland Group RDA, Sandycroft, Reelig, Kirkhill, IV5 7PP
+              </p>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                Tel: +447500 203226
+                <br />
+                Email: info@highlandgrouprda.org.uk
+              </p>
+              <div class="mt-6">
+                <a
+                  class="inline-flex items-center rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
+                  href="mailto:info@highlandgrouprda.org.uk"
+                >
+                  Email us
+                </a>
+              </div>
+            </div>
+
+            <div class="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
+              <h2 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                Send a message
+              </h2>
+              <form class="mt-4 space-y-4" action="/api/contact" method="post" data-contact-form>
+                <div>
+                  <label class="block text-sm font-semibold text-black">Name</label>
+                  <input
+                    class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                    type="text"
+                    name="name"
+                    autocomplete="name"
+                    required
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-semibold text-black">Email</label>
+                  <input
+                    class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                    type="email"
+                    name="email"
+                    autocomplete="email"
+                    required
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-semibold text-black">Message</label>
+                  <textarea
+                    class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                    name="message"
+                    rows="4"
+                    required
+                  ></textarea>
+                </div>
+                <div class="cf-turnstile" data-sitekey={turnstileSiteKey}></div>
+                <p class="text-sm font-semibold text-black" data-form-message></p>
+                <button
+                  class="inline-flex items-center rounded-full border border-black/20 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-black"
+                  type="submit"
+                  data-form-submit
+                >
+                  Send message
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="h-px w-full bg-black/20 mb-6"></div>
+          <div class="overflow-hidden rounded-[7px] border border-black/10">
+            <iframe
+              title="Highland Group RDA location"
+              src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
+              class="w-full h-[300px] sm:h-[380px] border-0"
+              loading="lazy"
+              referrerpolicy="no-referrer-when-downgrade"
+            ></iframe>
+          </div>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+
+  <script type="module">
+    const turnstileSiteKey = {JSON.stringify(turnstileSiteKey)};
+
+    if (turnstileSiteKey) {
+      const existingScript = document.querySelector("script[data-turnstile]");
+      if (!existingScript) {
+        const script = document.createElement("script");
+        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+        script.async = true;
+        script.defer = true;
+        script.dataset.turnstile = "true";
+        document.body.appendChild(script);
+      }
+    }
+
+    const form = document.querySelector("[data-contact-form]");
+    const message = document.querySelector("[data-form-message]");
+    const submitButton = document.querySelector("[data-form-submit]");
+
+    if (form && message && submitButton) {
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        if (submitButton.disabled) return;
+
+        submitButton.disabled = true;
+        submitButton.textContent = "Sending...";
+        message.textContent = "";
+
+        try {
+          const response = await fetch(form.action, {
+            method: "POST",
+            body: new FormData(form),
+          });
+
+          if (!response.ok) {
+            let errorMessage = "Request failed";
+            const errorData = await response.json().catch(() => null);
+            if (errorData?.error) {
+              errorMessage = errorData.details
+                ? `${errorData.error} (${errorData.details})`
+                : errorData.error;
+            } else {
+              const errorText = await response.text().catch(() => "");
+              if (errorText.trim()) {
+                errorMessage = `${response.status} ${response.statusText}: ${errorText}`;
+              } else {
+                errorMessage = `${response.status} ${response.statusText}`;
+              }
+            }
+            throw new Error(errorMessage);
+          }
+
+          message.textContent = "Thanks! Your message has been sent.";
+          form.reset();
+          if (window.turnstile && typeof window.turnstile.reset === "function") {
+            window.turnstile.reset();
+          }
+        } catch (error) {
+          message.textContent =
+            error instanceof Error
+              ? error.message
+              : "Sorry, something went wrong. Please try again.";
+        } finally {
+          submitButton.disabled = false;
+          submitButton.textContent = "Send message";
+        }
+      });
+    }
+  </script>
+</Base>

src/pages/events/[slug].astro

@@ -0,0 +1,74 @@
+---
+import Base from "../../layouts/Base.astro";
+import SiteHeader from "../../components/SiteHeader.astro";
+import SiteFooter from "../../components/SiteFooter.astro";
+import { navigationItems } from "../../lib/navigation";
+import { newsArticles, formatNewsDate } from "../../lib/news";
+
+export function getStaticPaths() {
+  return newsArticles.map((article) => ({
+    params: { slug: article.slug },
+    props: { article },
+  }));
+}
+
+const { article } = Astro.props;
+---
+
+<Base
+  title={article.title}
+  path={`/events/${article.slug}`}
+  description={article.summary}
+  image={article.image || "/news.webp"}
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style={`background-image: url(${article.image || "/news.webp"});`}
+        >
+          <div class="absolute inset-0 bg-black/45"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                {formatNewsDate(article.date)}
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                {article.title}
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
+                {article.summary}
+              </p>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-2 left-4 sm:bottom-4 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div
+            class="prose prose-neutral max-w-[720px] text-base sm:text-lg [font-family:'Public_Sans',Helvetica] prose-headings:font-['Merriweather',Helvetica] prose-headings:font-bold prose-p:leading-[1.75] prose-li:leading-[1.75]"
+            set:html={article.html}
+          ></div>
+          <div class="mt-8">
+            <a class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline" href="/events">
+              Back to news
+            </a>
+          </div>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/events/index.astro

@@ -0,0 +1,88 @@
+---
+import Base from "../../layouts/Base.astro";
+import SiteHeader from "../../components/SiteHeader.astro";
+import SiteFooter from "../../components/SiteFooter.astro";
+import { navigationItems } from "../../lib/navigation";
+import { newsArticles, formatNewsDate } from "../../lib/news";
+---
+
+<Base
+  title="News"
+  path="/events"
+  description="News, events, and updates from Highland Group RDA and our community."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style="background-image: url(/news.webp);"
+        >
+          <div class="absolute inset-0 bg-black/45"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                Latest News
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                Updates from Highland Group RDA
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[700px]">
+                Stories, milestones, and updates from the yard, our riders, volunteers, and supporters.
+              </p>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+            {newsArticles.map((item) => (
+              <article>
+                <a
+                  class="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
+                  href={`/events/${item.slug}`}
+                  aria-label={`Read ${item.title}`}
+                >
+                  <div class="flex flex-col gap-4">
+                    {item.image ? (
+                      <div
+                        class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
+                        style={`background-image: url(${item.image});`}
+                      ></div>
+                    ) : null}
+                    <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                      {formatNewsDate(item.date)}
+                    </p>
+                    <div class="h-px w-full bg-black/20"></div>
+                    <h2 class="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
+                      {item.title}
+                    </h2>
+                    <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                      {item.summary}
+                    </p>
+                    <span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
+                      Read more
+                    </span>
+                  </div>
+                </a>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/facebook.astro

@@ -0,0 +1,82 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+
+const facebookPageUrl = "https://www.facebook.com/profile.php?id=100064729054822";
+const facebookEmbedUrl =
+  "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064729054822&tabs=timeline&width=500&height=900&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true";
+---
+
+<Base
+  title="Facebook"
+  path="/facebook"
+  description="Follow Highland Group RDA on Facebook for the latest updates and events."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style="background-image: url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp);"
+        >
+          <div class="absolute inset-0 bg-black/45"></div>
+          <SiteHeader
+            navigationItems={navigationItems}
+            theme="dark"
+            className="px-6 sm:px-4"
+            facebookHref={facebookPageUrl}
+          />
+          <div class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                Social
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                Facebook updates
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
+                Follow our latest news, events, and photos on Facebook.
+              </p>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="mt-6 w-full max-w-[500px] mx-auto">
+            <iframe
+              title="Highland Group RDA Facebook feed"
+              src={facebookEmbedUrl}
+              width="500"
+              height="900"
+              class="w-full h-[700px] sm:h-[900px] border-0 rounded-[7px] bg-white"
+              allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+              loading="lazy"
+            ></iframe>
+          </div>
+          <a
+            class="mt-6 inline-flex [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
+            href={facebookPageUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Visit our Facebook page
+          </a>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/index.astro

@@ -0,0 +1,163 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+
+const cardData = [
+  {
+    title: "About Us",
+    imageUrl: "/about-640.webp",
+    imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
+    href: "/about",
+  },
+  {
+    title: "Support Us",
+    imageUrl: "/support-640.webp",
+    imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
+    href: "/support-us",
+  },
+  {
+    title: "Contact",
+    imageUrl: "/contact-640.webp",
+    imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
+    href: "/contact",
+  },
+];
+---
+
+<Base title="Home" path="/">
+  <Fragment slot="head">
+    <link
+      rel="preload"
+      as="image"
+      href="/Samantha-and-Connolly-1280.webp"
+      imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
+      imagesizes="100vw"
+    />
+  </Fragment>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
+        <div class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden">
+          <img
+            class="absolute inset-0 h-full w-full object-cover"
+            alt=""
+            src="/Samantha-and-Connolly-1280.webp"
+            srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
+            sizes="100vw"
+            loading="eager"
+            fetchpriority="high"
+            decoding="async"
+          />
+          <div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]">
+            <div class="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <h1 class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
+                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
+                  Enriching lives through horses in the
+                </span>
+                <span class="underline">Highlands</span>
+                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
+                  since
+                </span>
+                <span class="underline">1975</span>
+                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">.</span>
+              </h1>
+            </div>
+          </div>
+          <div class="relative pb-16 sm:pb-[42px]">
+            <div class="flex justify-end px-4 sm:px-6">
+              <blockquote class="max-w-[520px] rounded-[7px] bg-black/35 px-5 py-5 sm:px-6 sm:py-6 [font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3] backdrop-blur-sm">
+                &quot;Our mission is to bring about meaningful and positive changes in the
+                health and well-being of people with physical or mental disabilities through
+                activities with our horses and ponies.&quot;
+              </blockquote>
+            </div>
+          </div>
+          <a
+            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+            href="https://www.justgiving.com/charity/highlandgrouprda"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+          </a>
+        </div>
+      </section>
+
+      <section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0">
+        <div class="w-full">
+          <div class="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
+            <div class="text-center">
+              <p class="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
+                Find out more about who we are, what we do and how you can support us to help make a
+                difference.
+              </p>
+              <div class="mt-4 mx-auto h-[2px] w-16 bg-black/60"></div>
+            </div>
+
+            <div class="mt-8 sm:mt-[60px]">
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
+                {cardData.map((card) => (
+                  <div class="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent">
+                    <a
+                      class="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
+                      href={card.href}
+                    >
+                      <div class="relative p-2.5 h-full flex flex-col overflow-hidden">
+                        <img
+                          class="absolute inset-0 h-full w-full object-cover"
+                          alt={`${card.title} background`}
+                          src={card.imageUrl}
+                          srcset={card.imageSrcSet}
+                          sizes="(min-width: 640px) 33vw, 100vw"
+                          loading="lazy"
+                          decoding="async"
+                        />
+                        <div class="absolute inset-0 bg-black/40"></div>
+                        <div class="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
+                          <h3 class="group-hover:underline group-focus-visible:underline group-active:underline [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
+                            {card.title}
+                          </h3>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div class="mt-6 sm:mt-8">
+              <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8">
+                <div class="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
+                  Highland Group RDA is a member of the National Riding for the Disabled
+                  Association (RDA), and of the Grampian and Highland Regional RDA.
+                  <br />
+                  <br />
+                  We are a registered Scottish Charitable Incorporated Organisation (SC007357).
+                </div>
+                <a
+                  href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label="View Highland Group RDA on the OSCR register"
+                >
+                  <img
+                    class="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
+                    alt="Small mono"
+                    src="/small-mono.webp"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/privacy.astro

@@ -0,0 +1,207 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+---
+
+<Base
+  title="Privacy Policy"
+  path="/privacy"
+  description="Privacy policy for Highland Group RDA, including our use of Cloudflare Web Analytics."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 pt-6 sm:pt-4 pb-6 sm:pb-8">
+          <SiteHeader navigationItems={navigationItems} className="px-0" />
+          <p class="mt-6 [font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+            Privacy Policy
+          </p>
+          <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
+            Privacy Policy
+          </h1>
+          <p class="mt-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Last updated: December 2025
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Who we are
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Highland Group RDA is a registered charity providing riding and carriage-driving activities for disabled
+            children and adults.
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>Website: www.highlandgrouprda.org.uk</li>
+            <li>Email: info@highlandgrouprda.org.uk</li>
+            <li>Charity number: SC007357</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We are committed to protecting your privacy and handling your personal data responsibly and
+            transparently.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            What information we collect
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Depending on how you interact with us, we may collect:
+          </p>
+          <h3 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+            Information you provide directly
+          </h3>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>Name</li>
+            <li>Email address</li>
+            <li>Telephone number</li>
+            <li>Information submitted through contact or enquiry forms</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            If you apply to participate in RDA activities, additional information may be collected separately using
+            secure application forms. This can include health, mobility, or support-related information, which is
+            handled with particular care.
+          </p>
+          <h3 class="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+            Information collected automatically
+          </h3>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            When you visit our website, basic technical information may be collected automatically, such as:
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>IP address</li>
+            <li>Device and browser type</li>
+            <li>Pages visited</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            This information is used only to help us understand how the website is used and to keep it secure.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            How we use your information
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We use your information to:
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>Respond to enquiries</li>
+            <li>Manage participation in RDA activities</li>
+            <li>Communicate important information about sessions, events, or safety</li>
+            <li>Improve and maintain our website</li>
+            <li>Meet legal and safeguarding obligations</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We only use your data where we have a lawful basis to do so, such as consent, legitimate interests, or
+            legal obligation.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Sensitive personal data
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Some information we collect (for example, health or disability details) is classed as special category
+            data under UK GDPR.
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>This information is used only to support participants safely and appropriately</li>
+            <li>Access is restricted to relevant RDA personnel</li>
+            <li>It is never used for marketing</li>
+          </ul>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Cookies
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Our website may use essential cookies to ensure it works properly.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We do not use cookies for advertising or tracking across other websites.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            If non-essential cookies are introduced in future, clear information and choices will be provided.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Website hosting and processors
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Behind the scenes, the website is hosted using modern, secure infrastructure. This may involve trusted
+            third-party providers who process limited technical data on our behalf, strictly under data-protection
+            agreements.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            From your point of view, this does not change how your information is handled.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            How long we keep your data
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We keep personal data only for as long as necessary:
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>Enquiry data is kept only while it is relevant</li>
+            <li>Participant records are retained in line with RDA UK guidance and legal requirements</li>
+            <li>Data is securely deleted when no longer required</li>
+          </ul>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Sharing your information
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We do not sell or rent personal data.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Information may be shared only:
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>With RDA UK where required</li>
+            <li>With medical or safeguarding professionals where necessary for safety</li>
+            <li>Where required by law</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Any sharing is done carefully and proportionately.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Your rights
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            Under UK data-protection law, you have the right to:
+          </p>
+          <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+            <li>Access the personal data we hold about you</li>
+            <li>Ask for incorrect data to be corrected</li>
+            <li>Ask for your data to be erased (where appropriate)</li>
+            <li>Object to or restrict certain types of processing</li>
+          </ul>
+          <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            To exercise these rights, contact us at info@highlandgrouprda.org.uk.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Keeping your data safe
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            We take appropriate technical and organisational steps to protect personal information from loss,
+            misuse, or unauthorised access.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            If something technical needs attention, it is handled centrally.
+          </p>
+
+          <h2 class="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+            Changes to this policy
+          </h2>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            This policy may be updated occasionally to reflect changes in law or how the charity operates.
+          </p>
+          <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+            The latest version will always be published on our website.
+          </p>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/pages/support-us.astro

@@ -0,0 +1,232 @@
+---
+import Base from "../layouts/Base.astro";
+import SiteHeader from "../components/SiteHeader.astro";
+import SiteFooter from "../components/SiteFooter.astro";
+import { navigationItems } from "../lib/navigation";
+---
+
+<Base
+  title="Support Us"
+  path="/support-us"
+  description="Support Highland Group RDA through donations, volunteering, and fundraising."
+>
+  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+    <main class="w-full">
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div
+          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
+          style="background-image: url(/Kenneth.jpg);"
+        >
+          <div class="absolute inset-0 bg-black/45"></div>
+          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
+          <div class="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
+            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
+                Support Us
+              </p>
+              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
+              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
+                We are able to carry out our life-changing activities thanks to you.
+              </h1>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
+                We couldn&apos;t do what we do without the hard work and dedication of our wonderful volunteers
+                and fundraisers. We wouldn&apos;t be where we are without the kindness and generosity of our
+                sponsors and donors.
+              </p>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
+                We understand not everyone is in the position to be able to volunteer but donations are just as
+                impactful. We are truly grateful for any and every donation received as we can only do what we do
+                as a result of self-funding.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="bg-[#f5d445] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                Donate today!
+              </h2>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
+                Head over to our Just Giving Page to give a one-off donation today.
+              </p>
+            </div>
+            <a
+              class="w-full sm:w-[240px] h-[50px]"
+              href="https://www.justgiving.com/charity/highlandgrouprda"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="relative">
+          <img
+            class="w-full h-[140px] object-cover"
+            style="object-position: 50% 35%;"
+            alt=""
+            src="/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp"
+          />
+          <div class="absolute inset-0 bg-black/35"></div>
+          <h2 class="absolute inset-0 flex items-end px-6 sm:px-8 pb-3 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
+            Volunteering
+          </h2>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
+            <div>
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                We welcome all volunteers, you don&apos;t have to know anything about horses, or even like being
+                around animals, there are plenty of other opportunities for you to get involved and help us. We
+                also need lots of help with other tasks such as fundraising, publicity, painting, creating new
+                activities for the participants and general maintenance.
+              </p>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                Volunteering for sessions involves:
+              </p>
+              <ul class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+                <li>Grooming</li>
+                <li>Tacking up the ponies</li>
+                <li>Leading the ponies and/or walking beside the ponies to support the riders</li>
+                <li>Poo picking the fields</li>
+              </ul>
+            </div>
+            <div class="space-y-6">
+              <div>
+                <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                  How much time do I need to commit?
+                </h3>
+                <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                  If you are keen to work with our participants then you would need to be available during one of
+                  our session times - Tuesday - Friday mornings. If you can commit to helping regularly it would be
+                  great, but everyone understands that&apos;s not always possible and there are usually many other
+                  flexible options available - especially in summer.
+                </p>
+              </div>
+              <div>
+                <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                  How can I apply?
+                </h3>
+                <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                  You can contact us via email or phone by
+                  <a class="underline" href="/contact">clicking here</a>.
+                </p>
+              </div>
+              <div>
+                <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                  How old do I need to be and what credentials do I need to have?
+                </h3>
+                <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                  All volunteers must be 12 or over. There is no upper age limit. We have Public Liability
+                  insurance and Trustee Indemnity for all volunteers. Volunteers aged between 12 and 90 also have
+                  Personal Accident insurance (with some restrictions for those aged between 80 and 90).
+                </p>
+                <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                  You will need to provide the names and contact details of 2 referees who are not a relative or
+                  partner and who have known you for more than 1 year. Volunteers of 16 years of age and over who
+                  are actively involved with our sessions are required to undergo an enhanced disclosure check
+                  because they are volunteering with vulnerable adults and children.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="relative">
+          <img
+            class="w-full h-[140px] object-cover"
+            style="object-position: 50% 35%;"
+            alt=""
+            src="/274864973_7295359163837841_5927911936073070889_n-1920w.webp"
+          />
+          <div class="absolute inset-0 bg-black/35"></div>
+          <h2 class="absolute inset-0 flex items-end px-6 sm:px-8 pb-3 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
+            Sponsor a pony
+          </h2>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
+            <div>
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                Why sponsor a pony?
+              </h3>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                We currently have a school of ponies which all require care and attention. Our volunteers and
+                coaches work hard every day all year round to ensure our ponies are well looked after and suitable
+                for our riders. By sponsoring a pony, you are enabling us to enrich the lives of disabled children
+                and adults throughout the Highlands.
+              </p>
+              <h3 class="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                How do I pay?
+              </h3>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                We are working on a payment method so we thank you for bearing with us. If you would like more
+                information, please get in touch.
+              </p>
+            </div>
+            <div>
+              <h3 class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                How much does it cost to sponsor a Highland Group RDA pony?
+              </h3>
+              <p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                You can sponsor as little or as much as you like but here are some of the things we regularly need
+                to look after our ponies and ensure we can keep running our RDA sessions.
+              </p>
+              <ul class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
+                <li>£34 every 6 weeks for hoof trimming</li>
+                <li>£35 for a large bale of hay</li>
+                <li>£60 for a vet to visit</li>
+                <li>£20 for a bag of feed</li>
+                <li>£4 for a bag of carrots</li>
+                <li>£30 to fund a riding session</li>
+                <li>£75 to buy a riding hat</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
+        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+          <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-[320px_1fr] sm:items-start">
+            <div class="relative">
+              <img class="w-full h-[240px] sm:h-[260px] object-cover" alt="Ponies lined up" src="/alineofponies-1920w.webp" />
+              <h2 class="absolute left-0 bottom-0 m-3 px-3 py-2 bg-black/55 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
+                Fundraising
+              </h2>
+            </div>
+            <div>
+              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                Highland Group RDA is self-funded, as are all RDA groups. We have to self fund coaching fees, the
+                care of our beautiful ponies, riding equipment, insurance and everything else that comes with running
+                an RDA group.
+              </p>
+              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                One of the ways we raise money for the upkeep of Highland Group RDA is through fundraising. We run a
+                variety of events throughout the year and are always looking for volunteers to support in running these
+                events. If you can spare some time to assist or are aware of any fundraising opportunities, please get in
+                touch. We&apos;d love to hear from you!
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <SiteFooter fullBleedOnMobile />
+    </main>
+  </div>
+</Base>

src/styles/global.css

@@ -0,0 +1,316 @@
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .all-\[unset\] {
+        all: unset;
+    }
+}
+
+:root {
+    --animate-spin: spin 1s linear infinite;
+}
+
+.animate-fade-in {
+    animation: fade-in 1s var(--animation-delay, 0s) ease forwards;
+}
+
+.animate-fade-up {
+    animation: fade-up 1s var(--animation-delay, 0s) ease forwards;
+}
+
+.animate-marquee {
+    animation: marquee var(--duration) infinite linear;
+}
+
+.animate-marquee-vertical {
+    animation: marquee-vertical var(--duration) linear infinite;
+}
+
+.animate-shimmer {
+    animation: shimmer 8s infinite;
+}
+
+.animate-spin {
+    animation: var(--animate-spin);
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes image-glow {
+    0% {
+        opacity: 0;
+        animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
+    }
+
+    10% {
+        opacity: 0.7;
+        animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
+    }
+
+    to {
+        opacity: 0.4;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fade-up {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes shimmer {
+    0%,
+    90%,
+    to {
+        background-position: calc(-100% - var(--shimmer-width)) 0;
+    }
+
+    30%,
+    60% {
+        background-position: calc(100% + var(--shimmer-width)) 0;
+    }
+}
+
+@keyframes marquee {
+    0% {
+        transform: translate(0);
+    }
+
+    to {
+        transform: translateX(calc(-100% - var(--gap)));
+    }
+}
+
+@keyframes marquee-vertical {
+    0% {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(calc(-100% - var(--gap)));
+    }
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+
+        --card: transparent;
+        --card-foreground: 222.2 47.4% 11.2%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 215 20.2% 65.1%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 224 71% 4%;
+        --foreground: 213 31% 91%;
+
+        --muted: 223 47% 11%;
+        --muted-foreground: 215.4 16.3% 56.9%;
+
+        --accent: 216 34% 17%;
+        --accent-foreground: 210 40% 98%;
+
+        --popover: 224 71% 4%;
+        --popover-foreground: 215 20.2% 65.1%;
+
+        --border: 216 34% 17%;
+        --input: 216 34% 17%;
+
+        --card: transparent;
+        --card-foreground: 213 31% 91%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 1.2%;
+
+        --secondary: 222.2 47.4% 11.2%;
+        --secondary-foreground: 210 40% 98%;
+
+        --destructive: 0 63% 31%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 216 34% 17%;
+
+        --radius: 0.5rem;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+        font-feature-settings:
+            "rlig" 1,
+            "calt" 1;
+    }
+}
+
+.snow-banner {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    overflow: hidden;
+    background: linear-gradient(120deg, #0a3b6a, #0f5b8f);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    animation: banner-slide-down 0.6s ease-out;
+}
+
+.snow-banner__link {
+    display: block;
+    padding: 14px 20px;
+    text-align: center;
+    font-family: "Merriweather", Helvetica, serif;
+    font-weight: 700;
+    color: #ffffff;
+    text-decoration: none;
+    letter-spacing: 0.01em;
+}
+
+.snow-banner__link:hover,
+.snow-banner__link:focus-visible {
+    text-decoration: underline;
+}
+
+.snow-banner__snow {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+}
+
+.snowflake {
+    position: absolute;
+    top: -12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.8);
+    animation: snow-fall 6s linear infinite;
+}
+
+.snowflake-1 {
+    left: 8%;
+    animation-delay: 0s;
+    animation-duration: 5.5s;
+}
+
+.snowflake-2 {
+    left: 18%;
+    animation-delay: 1s;
+    animation-duration: 6.5s;
+}
+
+.snowflake-3 {
+    left: 32%;
+    animation-delay: 0.5s;
+    animation-duration: 5.8s;
+}
+
+.snowflake-4 {
+    left: 45%;
+    animation-delay: 1.4s;
+    animation-duration: 6.2s;
+}
+
+.snowflake-5 {
+    left: 58%;
+    animation-delay: 0.2s;
+    animation-duration: 5.9s;
+}
+
+.snowflake-6 {
+    left: 72%;
+    animation-delay: 1.1s;
+    animation-duration: 6.7s;
+}
+
+.snowflake-7 {
+    left: 84%;
+    animation-delay: 0.7s;
+    animation-duration: 5.6s;
+}
+
+.snowflake-8 {
+    left: 93%;
+    animation-delay: 1.6s;
+    animation-duration: 6.9s;
+}
+
+@keyframes banner-slide-down {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes snow-fall {
+    0% {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.9;
+    }
+
+    100% {
+        transform: translateY(60px);
+        opacity: 0;
+    }
+}

tailwind.config.ts

@@ -1,6 +1,8 @@
 module.exports = {
-  content: ["./client/index.html", "./client/src/**/*.{js,jsx,ts,tsx}",
-    "./src/**/*.{html,js,ts,jsx,tsx}",
+    content: [
+        "./client/index.html",
+        "./client/src/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{astro,html,js,ts,jsx,tsx}",
         "app/**/*.{ts,tsx}",
         "components/**/*.{ts,tsx}",
     ],
@@ -72,8 +74,15 @@ module.exports = {
                 "accordion-up": "accordion-up 0.2s ease-out",
             },
         },
-    container: { center: true, padding: "2rem", screens: { "2xl": "1400px" } },
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: { "2xl": "1400px" },
         },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+    },
+    plugins: [
+        require("tailwindcss-animate"),
+        require("@tailwindcss/typography"),
+    ],
     darkMode: ["class"],
 };

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["client/src/**/*", "shared/**/*", "server/**/*"],
+    "include": ["client/src/**/*", "shared/**/*", "server/**/*", "src/**/*"],
     "exclude": ["node_modules", "build", "dist", "**/*.test.ts"],
     "compilerOptions": {
         "incremental": true,