From a6f63cbe5ac3a1cd0e61289b8f221f2ffe0d6d17 Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Sun, 21 Dec 2025 13:35:17 +0000
Subject: [PATCH] Add news, contact, support pages and update about content

---
 client/src/App.tsx             |   6 +
 client/src/pages/About.tsx     | 204 ++++++++++++++++++++--------
 client/src/pages/Contact.tsx   | 122 +++++++++++++++++
 client/src/pages/Desktop.tsx   |   6 +-
 client/src/pages/News.tsx      |  95 +++++++++++++
 client/src/pages/SupportUs.tsx | 234 +++++++++++++++++++++++++++++++++
 6 files changed, 607 insertions(+), 60 deletions(-)
 create mode 100644 client/src/pages/Contact.tsx
 create mode 100644 client/src/pages/News.tsx
 create mode 100644 client/src/pages/SupportUs.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2b98bf8..7cec003 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -7,6 +7,9 @@ import NotFound from "@/pages/not-found";
 
 import { Desktop } from "@/pages/Desktop";
 import { About } from "@/pages/About";
+import { News } from "@/pages/News";
+import { Contact } from "@/pages/Contact";
+import { SupportUs } from "@/pages/SupportUs";
 
 function Router() {
     return (
@@ -14,6 +17,9 @@ function Router() {
             {/* Add pages below */}
             <Route path="/" component={Desktop} />
             <Route path="/about" component={About} />
+            <Route path="/news" component={News} />
+            <Route path="/support" component={SupportUs} />
+            <Route path="/contact" component={Contact} />
             {/* Fallback to 404 */}
             <Route component={NotFound} />
         </Switch>
diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx
index d917902..b241d9a 100644
--- a/client/src/pages/About.tsx
+++ b/client/src/pages/About.tsx
@@ -3,9 +3,9 @@ import React from "react";
 const navigationItems = [
     { label: "Home", href: "/" },
     { label: "About", href: "/about" },
-    { label: "News", href: "#" },
-    { label: "Support Us", href: "#" },
-    { label: "Contact", href: "#" },
+    { label: "News", href: "/news" },
+    { label: "Support Us", href: "/support" },
+    { label: "Contact", href: "/contact" },
 ];
 
 export const About = (): JSX.Element => {
@@ -22,7 +22,10 @@ export const About = (): JSX.Element => {
                         <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
                             {navigationItems.map((item) => (
                                 <li key={item.label}>
-                                    <a className="hover:underline" href={item.href}>
+                                    <a
+                                        className="hover:underline"
+                                        href={item.href}
+                                    >
                                         {item.label}
                                     </a>
                                 </li>
@@ -36,78 +39,165 @@ export const About = (): JSX.Element => {
                 <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
                     <div>
                         <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
-                            About Highland Group RDA
+                            Who, why, where, when &amp; how?
                         </p>
                         <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
-                            Enriching lives through horses in the Highlands since
-                            1975.
+                            Highland Group RDA was established in 1975.
                         </h1>
-                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
-                            Highland Group RDA is a member of the National Riding for
-                            the Disabled Association (RDA), and of the Grampian and
-                            Highland Regional RDA. We provide safe, supportive
-                            sessions that help riders build confidence, strength, and
-                            connection through equine activities.
+                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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 className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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 className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]" style={{ backgroundImage: "url(/Samantha-and-Connolly.jpg)" }}>
+                    <div
+                        className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]"
+                        style={{
+                            backgroundImage: "url(/Samantha-and-Connolly.jpg)",
+                        }}
+                    >
                         <div className="absolute inset-0 bg-black/20" />
                     </div>
                 </div>
             </section>
 
             <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
-                <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
-                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
-                        <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
-                            Our Mission
-                        </h2>
-                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
-                            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.
-                        </p>
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                        Our Star Participants
+                    </h2>
+                    <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
+                        <div className="bg-white/70 px-6 py-6">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                                Samantha&apos;s Story
+                            </h3>
+                            <p className="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>
+                            <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                                Full Story here...
+                            </p>
+                        </div>
+                        <div className="bg-white/70 px-6 py-6">
+                            <p className="[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>
+                            <p className="mt-4 [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>
+                        </div>
                     </div>
-                    <div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
-                        <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
-                            What We Do
-                        </h2>
-                        <ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] space-y-3">
-                            <li>Inclusive riding sessions for all abilities.</li>
-                            <li>Supportive, qualified volunteers and coaches.</li>
-                            <li>Community events and family engagement.</li>
-                            <li>Opportunities to grow confidence and independence.</li>
-                        </ul>
+                    <div className="mt-6 bg-white/70 px-6 py-6">
+                        <p className="[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>
+                        <p className="mt-4 [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>
                     </div>
                 </div>
             </section>
 
             <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
-                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-8 sm:py-10">
-                    <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
-                        <div>
-                            <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
-                                Support the Work
-                            </h2>
-                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
-                                Your support helps us keep sessions accessible and
-                                safe. Donations go directly towards horse care,
-                                equipment, and volunteer training.
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                        Meet the ponies
+                    </h2>
+                    <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
+                        <div className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Breagh
+                            </h3>
+                            <p className="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 className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Connolly
+                            </h3>
+                            <p className="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 className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Harley
+                            </h3>
+                            <p className="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 className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Puzzle
+                            </h3>
+                            <p className="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 className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Lady Suede
+                            </h3>
+                            <p className="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 className="bg-white/70 px-5 py-5">
+                            <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
+                                Wispa
+                            </h3>
+                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                                14.2hh · Gelding · 15 yo
+                                <br />
+                                Wispa is cute and very cheeky!
                             </p>
                         </div>
-                        <a
-                            className="w-full sm:w-[240px] h-[50px]"
-                            href="https://www.justgiving.com/charity/highlandgrouprda"
-                            target="_blank"
-                            rel="noreferrer"
-                        >
-                            <img
-                                className="w-full h-full object-contain"
-                                alt="Donate via JustGiving"
-                                src="/Button.png"
-                            />
-                        </a>
                     </div>
                 </div>
             </section>
diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx
new file mode 100644
index 0000000..b13b795
--- /dev/null
+++ b/client/src/pages/Contact.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+
+const navigationItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "News", href: "/news" },
+    { label: "Support Us", href: "/support" },
+    { label: "Contact", href: "/contact" },
+];
+
+export const Contact = (): JSX.Element => {
+    return (
+        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+            <header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
+                <div className="flex flex-row items-start justify-between gap-4">
+                    <img
+                        className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                        alt="Rdalogo"
+                        src="/figmaAssets/rdalogo-1.svg"
+                    />
+                    <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
+                        <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
+                            {navigationItems.map((item) => (
+                                <li key={item.label}>
+                                    <a className="hover:underline" href={item.href}>
+                                        {item.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                </div>
+            </header>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
+                <div>
+                    <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                        Get in touch
+                    </p>
+                    <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
+                        Contact Highland Group RDA
+                    </h1>
+                    <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
+                <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
+                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                        <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                            Contact details
+                        </h2>
+                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                            The Highland Group RDA, Culloden, Inverness, IV2
+                        </p>
+                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                            Tel: 01463 000 000
+                            <br />
+                            Email: info@highlandrda.org.uk
+                        </p>
+                        <div className="mt-6">
+                            <a
+                                className="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@highlandrda.org.uk"
+                            >
+                                Email us
+                            </a>
+                        </div>
+                    </div>
+
+                    <div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
+                        <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                            Send a message
+                        </h2>
+                        <form className="mt-4 space-y-4" action="#" method="post">
+                            <div>
+                                <label className="block text-sm font-semibold text-black">
+                                    Name
+                                </label>
+                                <input
+                                    className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                                    type="text"
+                                    name="name"
+                                />
+                            </div>
+                            <div>
+                                <label className="block text-sm font-semibold text-black">
+                                    Email
+                                </label>
+                                <input
+                                    className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                                    type="email"
+                                    name="email"
+                                />
+                            </div>
+                            <div>
+                                <label className="block text-sm font-semibold text-black">
+                                    Message
+                                </label>
+                                <textarea
+                                    className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
+                                    name="message"
+                                    rows={4}
+                                />
+                            </div>
+                            <button
+                                className="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"
+                            >
+                                Send message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+};
diff --git a/client/src/pages/Desktop.tsx b/client/src/pages/Desktop.tsx
index 30517ff..df2af89 100644
--- a/client/src/pages/Desktop.tsx
+++ b/client/src/pages/Desktop.tsx
@@ -4,9 +4,9 @@ import { Card, CardContent } from "@/components/ui/card";
 const navigationItems = [
     { label: "Home", href: "/" },
     { label: "About", href: "/about" },
-    { label: "News", href: "#" },
-    { label: "Support Us", href: "#" },
-    { label: "Contact", href: "#" },
+    { label: "News", href: "/news" },
+    { label: "Support Us", href: "/support" },
+    { label: "Contact", href: "/contact" },
 ];
 
 const cardData = [
diff --git a/client/src/pages/News.tsx b/client/src/pages/News.tsx
new file mode 100644
index 0000000..89503e5
--- /dev/null
+++ b/client/src/pages/News.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+
+const navigationItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "News", href: "/news" },
+    { label: "Support Us", href: "/support" },
+    { label: "Contact", href: "/contact" },
+];
+
+const newsItems = [
+    {
+        date: "Dec 2025",
+        title: "Winter sessions and holiday activities",
+        summary:
+            "Our winter timetable is live. Sessions continue with extra family days across December.",
+    },
+    {
+        date: "Nov 2025",
+        title: "Volunteer spotlight: the team behind the yard",
+        summary:
+            "A huge thank you to our volunteers who keep everything running smoothly week to week.",
+    },
+    {
+        date: "Oct 2025",
+        title: "New accessibility equipment supported by donors",
+        summary:
+            "We have added new adaptive tack to make sessions more comfortable and inclusive.",
+    },
+];
+
+export const News = (): JSX.Element => {
+    return (
+        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+            <header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
+                <div className="flex flex-row items-start justify-between gap-4">
+                    <img
+                        className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                        alt="Rdalogo"
+                        src="/figmaAssets/rdalogo-1.svg"
+                    />
+                    <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
+                        <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
+                            {navigationItems.map((item) => (
+                                <li key={item.label}>
+                                    <a className="hover:underline" href={item.href}>
+                                        {item.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                </div>
+            </header>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
+                <div className="flex flex-col gap-6">
+                    <div>
+                        <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                            Latest News
+                        </p>
+                        <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
+                            Updates from Highland Group RDA
+                        </h1>
+                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
+                    {newsItems.map((item) => (
+                        <article
+                            key={item.title}
+                            className="bg-[#d6d6d6] px-6 py-6 sm:py-8"
+                        >
+                            <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                                {item.date}
+                            </p>
+                            <h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2]">
+                                {item.title}
+                            </h2>
+                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                                {item.summary}
+                            </p>
+                        </article>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+};
diff --git a/client/src/pages/SupportUs.tsx b/client/src/pages/SupportUs.tsx
new file mode 100644
index 0000000..2c132ee
--- /dev/null
+++ b/client/src/pages/SupportUs.tsx
@@ -0,0 +1,234 @@
+import React from "react";
+
+const navigationItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "News", href: "/news" },
+    { label: "Support Us", href: "/support" },
+    { label: "Contact", href: "/contact" },
+];
+
+export const SupportUs = (): JSX.Element => {
+    return (
+        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+            <header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
+                <div className="flex flex-row items-start justify-between gap-4">
+                    <img
+                        className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                        alt="Rdalogo"
+                        src="/figmaAssets/rdalogo-1.svg"
+                    />
+                    <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
+                        <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
+                            {navigationItems.map((item) => (
+                                <li key={item.label}>
+                                    <a
+                                        className="hover:underline"
+                                        href={item.href}
+                                    >
+                                        {item.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                </div>
+            </header>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
+                <div>
+                    <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                        Support Us
+                    </p>
+                    <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
+                        We are able to carry out our life-changing activities
+                        thanks to you.
+                    </h1>
+                    <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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 className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+                        <div>
+                            <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                                Donate today!
+                            </h2>
+                            <p className="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>
+                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
+                                Just Giving Donate
+                            </p>
+                        </div>
+                        <a
+                            className="w-full sm:w-[240px] h-[50px]"
+                            href="https://www.justgiving.com/charity/highlandgrouprda"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <img
+                                className="w-full h-full object-contain"
+                                alt="Donate via JustGiving"
+                                src="/Button.png"
+                            />
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                        Volunteering
+                    </h2>
+                    <p className="mt-4 [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 className="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 className="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>
+                    <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                        To find out more about volunteering for an RDA centre,
+                        download our Volunteer Information Pack.
+                    </p>
+                    <h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                        How much time do I need to commit?
+                    </h3>
+                    <p className="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>
+                    <h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                        How can I apply?
+                    </h3>
+                    <p className="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 clicking here.
+                    </p>
+                    <h3 className="mt-6 [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 className="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 className="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>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                        Sponsor a pony
+                    </h2>
+                    <h3 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                        Why sponsor a pony?
+                    </h3>
+                    <p className="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 className="mt-6 [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 className="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 className="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>
+                    <h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
+                        How do I pay?
+                    </h3>
+                    <p className="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>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-10">
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
+                    <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
+                        Fundraising
+                    </h2>
+                    <p className="mt-4 [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 className="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>
+            </section>
+        </div>
+    );
+};