Apply v3 redesign to Support Us page
Rewrites support-us.astro with hero, three-way editorial flex cards (Donate/Sponsor/Volunteer), yellow donate band, Sponsor a Pony split panel with cost grid, Volunteering panel with role grid, and a native <details>/<summary> FAQ section. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir
parent
4fc9fb0151
commit
474da4f3a3
1 changed files with 444 additions and 321 deletions
|
|
@ -12,348 +12,471 @@ const pageSeo = {
|
||||||
"Support Highland RDA, donate to RDA, RDA fundraising, volunteer with RDA, charity donations Scotland, equestrian therapy support",
|
"Support Highland RDA, donate to RDA, RDA fundraising, volunteer with RDA, charity donations Scotland, equestrian therapy support",
|
||||||
canonicalPath: "/support-us",
|
canonicalPath: "/support-us",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ways = [
|
||||||
|
{
|
||||||
|
label: "Donate",
|
||||||
|
heading: "Give today",
|
||||||
|
body: "A one-off or regular donation via JustGiving goes directly towards running our sessions, caring for our ponies, and keeping our facilities safe.",
|
||||||
|
action: "Donate via JustGiving",
|
||||||
|
href: "https://www.justgiving.com/charity/highlandgrouprda",
|
||||||
|
external: true,
|
||||||
|
img: "/contact-640.webp",
|
||||||
|
objectPos: "50% 40%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Sponsor a pony",
|
||||||
|
heading: "Sponsor one of our ponies",
|
||||||
|
body: "Cover the real costs of keeping a pony — hoof trimming, hay, vet visits, and more. A tangible, direct way to make a lasting difference.",
|
||||||
|
action: "Find out more",
|
||||||
|
href: "#sponsor",
|
||||||
|
external: false,
|
||||||
|
img: "/alineofponies-1920w.webp",
|
||||||
|
objectPos: "50% 45%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Volunteer",
|
||||||
|
heading: "Give your time",
|
||||||
|
body: "No horse experience needed. Side walkers, horse leaders, groomers, fundraisers — there is a role for everyone who wants to help.",
|
||||||
|
action: "Apply to volunteer",
|
||||||
|
href: "#volunteer",
|
||||||
|
external: false,
|
||||||
|
img: "/Vols5-2880w-1024x768.avif",
|
||||||
|
objectPos: "50% 28%",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const costs = [
|
||||||
|
{ amount: "£34", period: "every 6 weeks", label: "Hoof trimming" },
|
||||||
|
{ amount: "£35", period: "per bale", label: "Large hay bale" },
|
||||||
|
{ amount: "£60", period: "per visit", label: "Vet visit" },
|
||||||
|
{ amount: "£30", period: "per session", label: "Fund a riding session" },
|
||||||
|
{ amount: "£20", period: "per bag", label: "Bag of feed" },
|
||||||
|
{ amount: "£75", period: "one-off", label: "Riding hat" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const volunteerRoles = [
|
||||||
|
{ role: "Side walker", desc: "Walk alongside the rider to provide support and encouragement during sessions." },
|
||||||
|
{ role: "Horse leader", desc: "Lead the pony safely around the arena while the rider is in session." },
|
||||||
|
{ role: "Groomer", desc: "Help prepare the ponies before and after sessions — grooming and tacking up." },
|
||||||
|
{ role: "Fundraiser", desc: "Help organise events and campaigns to raise vital funds for the group." },
|
||||||
|
{ role: "Maintenance", desc: "General upkeep of facilities, fencing, painting, and equipment." },
|
||||||
|
{ role: "Admin support", desc: "Assist with communications, social media, and administrative tasks." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
q: "Can I volunteer if I have no experience with horses?",
|
||||||
|
a: "Absolutely. Most of our volunteers had no prior horse experience when they joined us. Full training and support is provided for all roles.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "How much time do I need to commit?",
|
||||||
|
a: "Sessions run Tuesday to Friday mornings. Any regular commitment is welcome — even one morning a week makes a real difference. Flexible arrangements are available, especially during summer.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "How old do I need to be?",
|
||||||
|
a: "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 80–90).",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "What checks are required?",
|
||||||
|
a: "You will need to provide 2 referees who are not a relative or partner and who have known you for more than 1 year. Volunteers aged 16 and over who are actively involved with sessions are required to undergo an enhanced disclosure check, as they are volunteering with vulnerable adults and children.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Are there other ways to fundraise?",
|
||||||
|
a: "Yes — sponsored walks, bake sales, and local events all help enormously. Get in touch and we can advise on how to fundraise on our behalf.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Can organisations or businesses support us?",
|
||||||
|
a: "We welcome corporate sponsorship and partnerships. Please contact us to discuss how your organisation could get involved.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "How do I pay to sponsor a pony?",
|
||||||
|
a: "We are currently working on a dedicated payment method — thank you for your patience. In the meantime, you can donate via JustGiving or contact us directly to discuss sponsorship arrangements.",
|
||||||
|
},
|
||||||
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout {...pageSeo}>
|
<BaseLayout {...pageSeo}>
|
||||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
<Fragment slot="head">
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
as="image"
|
||||||
|
href="/Vols5-2880w-1024x768.avif"
|
||||||
|
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; }
|
||||||
|
|
||||||
|
/* Three-ways editorial cards */
|
||||||
|
.ways-strip {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.way-card {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
display: block;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.way-card:hover { flex: 1.35 1 0; }
|
||||||
|
.way-card-img {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
.way-card:hover .way-card-img { transform: scale(1.04); }
|
||||||
|
.way-body, .way-action { opacity: 0; transition: opacity 0.3s ease; }
|
||||||
|
.way-card:hover .way-body { opacity: 1; }
|
||||||
|
.way-card:hover .way-action { opacity: 1; }
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.ways-strip { flex-direction: column; height: auto; }
|
||||||
|
.way-card { flex: none; height: 200px; }
|
||||||
|
.way-body, .way-action { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Split panels */
|
||||||
|
.panel-img { transition: transform 0.55s ease; }
|
||||||
|
.panel-wrap:hover .panel-img { transform: scale(1.03); }
|
||||||
|
|
||||||
|
@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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cost cards */
|
||||||
|
.cost-card { transition: transform 0.25s ease; }
|
||||||
|
.cost-card:hover { transform: translateY(-4px); }
|
||||||
|
|
||||||
|
/* Volunteer role cards */
|
||||||
|
.role-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.role-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAQ accordion */
|
||||||
|
details { border-bottom: 1px solid rgba(0,0,0,0.12); }
|
||||||
|
details summary {
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 20px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
details summary::-webkit-details-marker { display: none; }
|
||||||
|
details summary:hover .faq-q { text-decoration: underline; }
|
||||||
|
details summary .faq-icon { transition: transform 0.25s ease; flex-shrink: 0; }
|
||||||
|
details[open] summary .faq-icon { transform: rotate(45deg); }
|
||||||
|
.faq-body {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
color: rgba(0,0,0,0.65);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
</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">
|
<main class="w-full">
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
||||||
|
<!-- ── HERO ── -->
|
||||||
|
<section class="relative w-full overflow-hidden" style="min-height: 62vh;">
|
||||||
|
<img
|
||||||
|
class="absolute inset-0 h-full w-full object-cover"
|
||||||
|
style="object-position: 50% 28%;"
|
||||||
|
alt=""
|
||||||
|
src="/Vols5-2880w-1024x768.avif"
|
||||||
|
loading="eager"
|
||||||
|
fetchpriority="high"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
class="absolute inset-0"
|
||||||
style="background-image: url(/Kenneth.jpg);"
|
style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 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: 62vh; padding: 120px 28px 72px;"
|
||||||
>
|
>
|
||||||
<div class="absolute inset-0 bg-black/45"></div>
|
<div class="anim-fade-up" style="max-width: 700px;">
|
||||||
<SiteHeader
|
<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;">
|
||||||
navigationItems={navigationItems}
|
Support Us
|
||||||
theme="dark"
|
</p>
|
||||||
className="px-6 sm:px-4"
|
<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, 56px); color: #F6F1E8; line-height: 1.1; margin-bottom: 22px;">
|
||||||
<div
|
We are able to carry out our life-changing activities thanks to you.
|
||||||
class="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8"
|
</h1>
|
||||||
>
|
<p style="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: 560px;">
|
||||||
<div
|
We couldn't do what we do without the generosity of our donors, sponsors, and volunteers. Every contribution — however big or small — directly supports our riders.
|
||||||
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>
|
||||||
>
|
|
||||||
<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't do what we do without the hard
|
|
||||||
work and dedication of our wonderful volunteers
|
|
||||||
and fundraisers. We wouldn'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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
<!-- ── THREE WAYS ── -->
|
||||||
<div class="bg-[#f5d445] px-6 sm:px-8 py-6 sm:py-8">
|
<div class="ways-strip">
|
||||||
<div
|
{ways.map((w) => (
|
||||||
class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between"
|
<a
|
||||||
|
class="way-card"
|
||||||
|
href={w.href}
|
||||||
|
target={w.external ? "_blank" : undefined}
|
||||||
|
rel={w.external ? "noreferrer" : undefined}
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
class="way-card-img"
|
||||||
|
src={w.img}
|
||||||
|
alt={w.heading}
|
||||||
|
style={`object-position: ${w.objectPos};`}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.1) 100%);" />
|
||||||
|
<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 34px;">
|
||||||
|
<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: 8px;">
|
||||||
|
{w.label}
|
||||||
|
</p>
|
||||||
|
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 26px); color: white; line-height: 1.2; margin-bottom: 10px;">
|
||||||
|
{w.heading}
|
||||||
|
</h3>
|
||||||
|
<p class="way-body" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.6; max-width: 280px; margin-bottom: 14px;">
|
||||||
|
{w.body}
|
||||||
|
</p>
|
||||||
|
<div class="way-action" style="display: flex; align-items: center; gap: 8px;">
|
||||||
|
<span style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: white; letter-spacing: 0.08em; text-transform: uppercase;">
|
||||||
|
{w.action}
|
||||||
|
</span>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── DONATE BAND ── -->
|
||||||
|
<section style="background: #f5d445; padding: clamp(32px, 5vw, 44px) clamp(24px, 6vw, 72px);">
|
||||||
|
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
|
||||||
|
<div>
|
||||||
|
<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;">
|
||||||
|
Donate today via JustGiving.
|
||||||
|
</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;">
|
||||||
|
One-off or regular — every donation goes directly towards our riders and ponies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
style="flex-shrink: 0;"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/Button.webp"
|
||||||
|
alt="Donate via JustGiving"
|
||||||
|
style="height: 52px; object-fit: contain; display: block;"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── SPONSOR A PONY ── -->
|
||||||
|
<section id="sponsor" class="split-panel" style="display: flex; width: 100%; min-height: 520px; overflow: hidden;">
|
||||||
|
<div class="panel-wrap split-panel-img" style="flex: 0 0 48%; 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;">
|
||||||
|
Sponsor a pony
|
||||||
|
</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: 16px;">
|
||||||
|
By sponsoring a pony, you enable us to enrich lives.
|
||||||
|
</h2>
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.7; margin-bottom: 32px;">
|
||||||
|
Our ponies need regular farriery, feed, and veterinary care. Sponsoring one — even partially — makes a direct, tangible difference to a real animal and the riders who depend on them.
|
||||||
|
</p>
|
||||||
|
<!-- Cost grid -->
|
||||||
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px;">
|
||||||
|
{costs.map((c) => (
|
||||||
|
<div class="cost-card" style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 16px 18px;">
|
||||||
|
<p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: 26px; color: #7DA371; line-height: 1;">
|
||||||
|
{c.amount}
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 11px; color: rgba(246,241,232,0.45); text-transform: uppercase; letter-spacing: 0.08em;">
|
||||||
|
{c.period}
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 8px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: #F6F1E8; line-height: 1.4;">
|
||||||
|
{c.label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
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 via JustGiving
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- ── VOLUNTEERING ── -->
|
||||||
|
<section id="volunteer" class="split-panel" style="display: flex; width: 100%; min-height: 520px; 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;">
|
||||||
|
Volunteering
|
||||||
|
</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: 16px;">
|
||||||
|
We welcome all volunteers — no horse experience needed.
|
||||||
|
</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: 32px;">
|
||||||
|
Sessions run Tuesday to Friday mornings. Regular help is ideal, but flexible arrangements are available — especially during summer.
|
||||||
|
</p>
|
||||||
|
<!-- Role grid -->
|
||||||
|
<div class="role-grid" style="margin-bottom: 36px;">
|
||||||
|
{volunteerRoles.map((v) => (
|
||||||
|
<div style="background: #e2e2e2; border-radius: 6px; padding: 14px 18px; border-left: 3px solid #7DA371;">
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; color: #000; margin-bottom: 4px;">
|
||||||
|
{v.role}
|
||||||
|
</p>
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.6); line-height: 1.5;">
|
||||||
|
{v.desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<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 46%; 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% 28%;"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── FAQ ── -->
|
||||||
|
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||||
|
<div style="max-width: 860px; 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;">
|
||||||
|
Common questions
|
||||||
|
</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, 32px); color: #000; line-height: 1.15; margin-bottom: 40px;">
|
||||||
|
Good to know.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div style="border-top: 1px solid rgba(0,0,0,0.12);">
|
||||||
|
{faqs.map((item) => (
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<span class="faq-q" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); color: #000; line-height: 1.3;">
|
||||||
|
{item.q}
|
||||||
|
</span>
|
||||||
|
<svg class="faq-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#7DA371" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M10 4v12M4 10h12"/>
|
||||||
|
</svg>
|
||||||
|
</summary>
|
||||||
|
<p class="faq-body">{item.a}</p>
|
||||||
|
</details>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Still have questions callout -->
|
||||||
|
<div style="margin-top: 48px; background: #d6d6d6; border-radius: 7px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
|
||||||
<div>
|
<div>
|
||||||
<h2
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #000; margin-bottom: 6px;">
|
||||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
Still have questions?
|
||||||
>
|
</p>
|
||||||
Donate today!
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.6); line-height: 1.6;">
|
||||||
</h2>
|
We'd love to hear from you.
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
class="w-full sm:w-[240px] h-[50px]"
|
href="/contact"
|
||||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
style="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; flex-shrink: 0;"
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
>
|
||||||
<img
|
Contact us
|
||||||
class="w-full h-full object-contain"
|
<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">
|
||||||
alt="Donate via JustGiving"
|
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||||
src="/Button.webp"
|
</svg>
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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'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'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'd
|
|
||||||
love to hear from you!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<SiteFooter fullBleedOnMobile />
|
|
||||||
</main>
|
</main>
|
||||||
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById("site-nav");
|
||||||
|
if (nav) {
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue