507 lines
34 KiB
Text
507 lines
34 KiB
Text
---
|
||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||
import SiteHeader from "../components/SiteHeader.astro";
|
||
import SiteFooter from "../components/SiteFooter.astro";
|
||
import { navigationItems } from "../lib/navigation";
|
||
|
||
const pageSeo = {
|
||
title: "About",
|
||
description:
|
||
"Highland Group RDA is a volunteer-led charity offering therapeutic horse riding in the Highlands. Learn about our mission, history, and community impact.",
|
||
keywords:
|
||
"Highland Group RDA, about Highland RDA, RDA charity, volunteer-led charity Scotland, therapeutic riding, equestrian therapy Highlands",
|
||
canonicalPath: "/about",
|
||
};
|
||
|
||
const stats = [
|
||
{ number: "1975", label: "Founded" },
|
||
{ number: "50+", label: "Years serving the Highlands" },
|
||
{ number: "4", label: "Days a week, Tue–Fri" },
|
||
{ number: "Tue–Fri", label: "Morning sessions" },
|
||
];
|
||
|
||
const ponies = [
|
||
{
|
||
name: "Breagha",
|
||
img: "/Breagh-bc8e70e8-2880w.webp",
|
||
details: "13hh · Skewbald cob mare · 19 yo",
|
||
pos: "50% 40%",
|
||
quote: "I am the most recent arrival at RDA, part of the herd for the past three and a half years. I take my job very seriously and am careful and steady with riders who are gaining confidence while enjoying a faster walk and trot from time to time. People say that I make them feel calm and happy — that makes me very happy too.",
|
||
},
|
||
{
|
||
name: "Harley",
|
||
img: "/Harley-6ece9eca-2880w.webp",
|
||
details: "15.3hh · Skewbald cob/Clydesdale · 17 yo",
|
||
pos: "50% 35%",
|
||
quote: "I like to think that I am good at my job. I stand quietly at the mounting block and always try to do what I have been asked as well as I can. After lessons, nothing makes me more excited than searching for the odd piece of carrot or apple scattered about the field — that is when I do my happy prance about!",
|
||
},
|
||
{
|
||
name: "Connolly",
|
||
img: "/connolly-73f3e69f-2880w-2.webp",
|
||
details: "15.1hh · Piebald cob gelding · 18 yo",
|
||
pos: "50% 30%",
|
||
quote: "People say that I am a calm, sensible boy who likes to tackle life at a leisurely pace while at work. I will stand forever to be groomed, often relaxing so much that I look like I have fallen asleep. I have a very thick mane and love to give my head a cheeky little shake just when it is all lying nice and flat!",
|
||
},
|
||
{
|
||
name: "Puzzle",
|
||
img: "/puzzle-5de6e325-2880w.webp",
|
||
details: "15.1hh · Skewbald cob mare · 16 yo",
|
||
pos: "50% 35%",
|
||
quote: "Everyone says that I am a kind, loving girl. I enjoy being groomed and pampered, and I like to be around people who are calm, quiet and patient — that fills me with confidence. After work I like to wander slowly round the field searching for the tastiest patches of grass, or a nice dusty place to have a roll!",
|
||
},
|
||
{
|
||
name: "The Minis",
|
||
img: "/alineofponies-1920w.webp",
|
||
details: "Orris · Bru · Sam — Miniature Shetland ponies",
|
||
pos: "50% 60%",
|
||
quote: "We are better known as the minis! People often like to get to know us first if they are nervous about meeting the bigger horses. We might be small but make up for it with our cheeky personalities — and our ability to know when the electric fence has been switched off.",
|
||
},
|
||
{
|
||
name: "Lady Suede",
|
||
img: "/Suede-2880w.webp",
|
||
details: "13hh · Mare · 23 yo",
|
||
pos: "50% 50%",
|
||
memorial: true,
|
||
memorialNote: "RIP October 2024",
|
||
},
|
||
{
|
||
name: "Wispa",
|
||
img: "/Wispa-2880w.webp",
|
||
details: "14.2hh · Gelding · 15 yo",
|
||
pos: "50% 20%",
|
||
memorial: true,
|
||
memorialNote: "RIP 2025",
|
||
},
|
||
];
|
||
|
||
const testimonials = [
|
||
"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 'able-bodied' as everyone else on the back of a horse.",
|
||
"He feels the responsibility of controlling such a large and powerful animal and it helps him understand life just that bit better. It'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.",
|
||
"We cannot thank the team at RDA Highland enough for what they'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.",
|
||
"RDA'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.",
|
||
];
|
||
---
|
||
|
||
<BaseLayout {...pageSeo}>
|
||
<Fragment slot="head">
|
||
<link
|
||
rel="preload"
|
||
as="image"
|
||
href="/hero-about.jpg"
|
||
imagesizes="100vw"
|
||
/>
|
||
</Fragment>
|
||
|
||
<style>
|
||
#site-nav {
|
||
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
||
}
|
||
#site-nav.scrolled {
|
||
background: rgba(0, 0, 0, 0.82);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.anim-fade-up { animation: fadeUp 0.9s ease both; }
|
||
|
||
.panel-img { transition: transform 0.55s ease; }
|
||
.panel-wrap:hover .panel-img { transform: scale(1.03); }
|
||
|
||
.stat-card { transition: transform 0.25s ease; }
|
||
.stat-card:hover { transform: translateY(-3px); }
|
||
|
||
@media (max-width: 767px) {
|
||
.split-panel { flex-direction: column !important; }
|
||
.split-panel-img { flex: none !important; height: 260px; }
|
||
.split-panel-text { padding: 40px 24px !important; }
|
||
.who-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
|
||
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.location-grid { grid-template-columns: 1fr !important; }
|
||
}
|
||
</style>
|
||
|
||
<!-- Fixed nav -->
|
||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||
</div>
|
||
|
||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||
<main class="w-full">
|
||
|
||
<!-- ── HERO ── -->
|
||
<section class="relative w-full overflow-hidden" style="min-height: 68vh;">
|
||
<img
|
||
class="absolute inset-0 h-full w-full object-cover"
|
||
style="object-position: 50% 42%;"
|
||
alt=""
|
||
src="/hero-about.jpg"
|
||
loading="eager"
|
||
fetchpriority="high"
|
||
decoding="async"
|
||
/>
|
||
<div
|
||
class="absolute inset-0"
|
||
style="background: linear-gradient(160deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.55) 100%);"
|
||
/>
|
||
<div
|
||
class="relative flex flex-col justify-end"
|
||
style="min-height: 68vh; padding: 120px 28px 64px;"
|
||
>
|
||
<div class="anim-fade-up" style="max-width: 700px;">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
||
About Us
|
||
</p>
|
||
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
||
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 58px); color: #F6F1E8; line-height: 1.1;">
|
||
Enriching lives through horses in the Highlands since 1975.
|
||
</h1>
|
||
<p style="margin-top: 22px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.85); line-height: 1.65; max-width: 580px;">
|
||
We are a voluntary organisation based at Sandycroft, Reelig, Kirkhill — providing therapeutic and recreational riding for people with disabilities across the Highlands.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── MISSION ── -->
|
||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||
<div style="max-width: 860px; margin: 0 auto; text-align: center;">
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 28px;" />
|
||
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: #F6F1E8; line-height: 1.55;">
|
||
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.
|
||
</blockquote>
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin: 28px auto 0;" />
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── WHO WE ARE / WHAT WE DO ── -->
|
||
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||
<div class="who-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px;">
|
||
<div>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">Who we are</p>
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||
A community of volunteers, coaches, and horses.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
|
||
Highland Group RDA is entirely self-funded and run by committed volunteers and qualified coaches. We have been part of the community for over five decades, welcoming riders with a wide range of physical and mental disabilities.
|
||
</p>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||
We are a member of the national Riding for the Disabled Association (RDA) and the Grampian and Highland Regional RDA, and a registered Scottish Charitable Incorporated Organisation (<a href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357" target="_blank" rel="noreferrer" style="text-decoration: underline;">SC007357</a>).
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">What we do</p>
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||
Riding and so much more.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
|
||
We provide riding sessions for participants with a wide range of disabilities. Working with horses improves balance, coordination, confidence, and provides a uniquely meaningful interaction with animals.
|
||
</p>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||
Sessions run Tuesday to Friday mornings from our base at Sandycroft. Each session is supported by trained volunteers and supervised by qualified coaches.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── STATS ── -->
|
||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||
<div style="max-width: 1100px; margin: 0 auto;">
|
||
<div class="stats-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;">
|
||
{stats.map((s) => (
|
||
<div class="stat-card" style="background: #d6d6d6; border-radius: 7px; padding: 36px 28px; text-align: center;">
|
||
<p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(28px, 3vw, 42px); color: #7DA371; line-height: 1;">
|
||
{s.number}
|
||
</p>
|
||
<p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.6); letter-spacing: 0.05em; text-transform: uppercase;">
|
||
{s.label}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── OUR PONIES (image left, dark text right) ── -->
|
||
<section class="split-panel" style="display: flex; width: 100%; min-height: 480px; overflow: hidden;">
|
||
<div class="panel-wrap split-panel-img" style="flex: 0 0 55%; position: relative; overflow: hidden;">
|
||
<img
|
||
class="panel-img"
|
||
src="/alineofponies-1920w.webp"
|
||
alt="Our ponies"
|
||
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="split-panel-text" style="flex: 1 1 0; background: #1e2e1a; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
|
||
Our ponies
|
||
</p>
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #F6F1E8; line-height: 1.15; margin-bottom: 20px;">
|
||
The heart of everything we do.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 16px;">
|
||
Our ponies are carefully selected and trained to work safely with riders of all abilities. They are well cared for, happy, and central to the therapeutic experience we offer.
|
||
</p>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 32px;">
|
||
You can support them directly by sponsoring a pony — covering the costs of hoof trimming, hay, vet visits, and more.
|
||
</p>
|
||
<a
|
||
href="/support-us"
|
||
style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||
>
|
||
Sponsor a pony
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── HORSE PROFILES ── -->
|
||
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||
Meet the horses
|
||
</p>
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); color: #000; line-height: 1.15; margin-bottom: 12px;">
|
||
In their own words.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.6); line-height: 1.65; max-width: 620px; margin-bottom: 40px;">
|
||
Highland Group RDA are very proud of the contribution made by our fantastic team of horses. We'll let them introduce themselves.
|
||
</p>
|
||
|
||
<!-- Active horses -->
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px;">
|
||
{ponies.filter(p => !p.memorial).map((pony) => (
|
||
<div style="background: rgba(255,255,255,0.6); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;">
|
||
<div style="position: relative; height: 220px; overflow: hidden; flex-shrink: 0;">
|
||
<img
|
||
src={pony.img}
|
||
alt={pony.name}
|
||
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos};`}
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div style="padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column;">
|
||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #000; margin-bottom: 5px;">
|
||
{pony.name}
|
||
</h3>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7DA371; margin-bottom: 16px;">
|
||
{pony.details}
|
||
</p>
|
||
<div style="border-left: 2px solid #7DA371; padding-left: 16px; flex: 1;">
|
||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 14px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||
"{pony.quote}"
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<!-- Memorial section -->
|
||
<div style="margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.12);">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.35); margin-bottom: 20px;">
|
||
Remembered fondly
|
||
</p>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; max-width: 560px;">
|
||
{ponies.filter(p => p.memorial).map((pony) => (
|
||
<div style="background: rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden;">
|
||
<div style="position: relative; height: 160px; overflow: hidden;">
|
||
<img
|
||
src={pony.img}
|
||
alt={pony.name}
|
||
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos}; filter: grayscale(50%);`}
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div style="padding: 16px 18px;">
|
||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 17px; color: rgba(0,0,0,0.7); margin-bottom: 4px;">
|
||
{pony.name}
|
||
</h3>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; color: rgba(0,0,0,0.35); margin-bottom: 4px;">
|
||
{pony.details}
|
||
</p>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.4); font-style: italic;">
|
||
{pony.memorialNote}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── TESTIMONIALS ── -->
|
||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
|
||
What families say
|
||
</p>
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
|
||
{testimonials.map((quote) => (
|
||
<blockquote style="background: rgba(255,255,255,0.07); border-radius: 7px; padding: 28px; position: relative;">
|
||
<div style="width: 24px; height: 2px; background: #7DA371; margin-bottom: 16px;" />
|
||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 15px; color: rgba(246,241,232,0.85); line-height: 1.65;">
|
||
"{quote}"
|
||
</p>
|
||
</blockquote>
|
||
))}
|
||
</div>
|
||
<div style="margin-top: 40px; padding: 28px 32px; background: rgba(255,255,255,0.05); border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
|
||
<div>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 10px;">Featured story</p>
|
||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #F6F1E8; line-height: 1.2; margin-bottom: 10px;">Samantha's Story</h3>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(246,241,232,0.75); line-height: 1.6; max-width: 560px;">
|
||
Read how Samantha's RDA sessions have not only improved her physical and mental wellbeing, but helped her overcome her prognosis of never being able to walk.
|
||
</p>
|
||
</div>
|
||
<a
|
||
href="/Star-Participants-Samantha-s-story.pdf"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
style="flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||
>
|
||
Read her story (PDF)
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── OUR VOLUNTEERS (text left, image right) ── -->
|
||
<section class="split-panel" style="display: flex; width: 100%; min-height: 420px; overflow: hidden;">
|
||
<div class="split-panel-text" style="flex: 1 1 0; background: #d6d6d6; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||
Volunteers & coaches
|
||
</p>
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||
We couldn't do it without you.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 16px;">
|
||
Our sessions are made possible by a dedicated team of volunteers — side walkers, horse leaders, groomers, and more. You don't need any horse experience to join us.
|
||
</p>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 32px;">
|
||
Qualified RDA coaches supervise all sessions and provide ongoing training and support for our volunteer team.
|
||
</p>
|
||
<a
|
||
href="/volunteer-application"
|
||
style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||
>
|
||
Apply to volunteer
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div class="panel-wrap split-panel-img" style="flex: 0 0 50%; position: relative; overflow: hidden;">
|
||
<img
|
||
class="panel-img"
|
||
src="/Vols5-2880w-1024x768.avif"
|
||
alt="Our volunteers"
|
||
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── LOCATION ── -->
|
||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||
<div class="location-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;">
|
||
<div>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||
Find us
|
||
</p>
|
||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||
Based at Sandycroft, Reelig.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 8px;">
|
||
We are based at Sandycroft, Reelig, Kirkhill — on the outskirts of Inverness.
|
||
</p>
|
||
<address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.8; margin-bottom: 20px;">
|
||
Sandycroft, Reelig<br />
|
||
Kirkhill<br />
|
||
IV5 7PP
|
||
</address>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.6;">
|
||
Sessions: Tuesday to Friday mornings
|
||
</p>
|
||
<a
|
||
href="/contact"
|
||
style="margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #7DA371; color: #000; border-radius: 9999px; padding: 12px 26px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||
>
|
||
Contact us
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div style="height: 340px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
|
||
<iframe
|
||
title="Highland Group RDA location"
|
||
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
|
||
style="width: 100%; height: 100%; border: 0; display: block;"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer-when-downgrade"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── CTA STRIP ── -->
|
||
<section style="background: #f5d445; padding: clamp(36px, 6vw, 52px) clamp(24px, 6vw, 72px);">
|
||
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;">
|
||
<div style="max-width: 640px;">
|
||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); color: #000; line-height: 1.3; margin-bottom: 8px;">
|
||
We are able to carry out our life-changing activities thanks to you.
|
||
</h2>
|
||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.65); line-height: 1.6;">
|
||
Donate, volunteer, or sponsor a pony — every contribution makes a real difference.
|
||
</p>
|
||
</div>
|
||
<div style="display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center;">
|
||
<a
|
||
href="/support-us"
|
||
style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: white; border-radius: 9999px; padding: 14px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||
>
|
||
Support us
|
||
</a>
|
||
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||
<img
|
||
src="/Button.webp"
|
||
alt="Donate via JustGiving"
|
||
style="height: 46px; object-fit: contain; display: block;"
|
||
loading="lazy"
|
||
/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<SiteFooter fullBleedOnMobile />
|
||
</div>
|
||
|
||
<script>
|
||
const nav = document.getElementById("site-nav");
|
||
if (nav) {
|
||
window.addEventListener("scroll", () => {
|
||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||
}, { passive: true });
|
||
}
|
||
</script>
|
||
</BaseLayout>
|