calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Update support, contact, and facebook pages

Browse source
This commit is contained in:
Calum Muir 2025-12-21 20:26:11 +00:00
parent 32b5c0caba
commit 0e9b25bba1
7 changed files with 398 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 554 KiB

BIN
client/public/Kenneth.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

2
client/src/App.tsx
View file

@ -12,6 +12,7 @@ import { Contact } from "@/pages/Contact";
import { SupportUs } from "@/pages/SupportUs"; import { SupportUs } from "@/pages/SupportUs";
import { Privacy } from "@/pages/Privacy"; import { Privacy } from "@/pages/Privacy";
import { NewsArticle } from "@/pages/NewsArticle"; import { NewsArticle } from "@/pages/NewsArticle";
import { Facebook } from "@/pages/Facebook";
function Router() { function Router() {
return ( return (
@ -21,6 +22,7 @@ function Router() {
<Route path="/about" component={About} /> <Route path="/about" component={About} />
<Route path="/news" component={News} /> <Route path="/news" component={News} />
<Route path="/news/:slug" component={NewsArticle} /> <Route path="/news/:slug" component={NewsArticle} />
<Route path="/facebook" component={Facebook} />
<Route path="/support" component={SupportUs} /> <Route path="/support" component={SupportUs} />
<Route path="/contact" component={Contact} /> <Route path="/contact" component={Contact} />
<Route path="/privacy" component={Privacy} /> <Route path="/privacy" component={Privacy} />

24
client/src/components/SiteHeader.tsx
View file

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { FaFacebookF } from "react-icons/fa";
type NavItem = { type NavItem = {
label: string; label: string;
@ -9,12 +10,14 @@ type SiteHeaderProps = {
navigationItems: NavItem[]; navigationItems: NavItem[];
theme?: "dark" | "light"; theme?: "dark" | "light";
className?: string; className?: string;
facebookHref?: string;
}; };
export const SiteHeader = ({ export const SiteHeader = ({
navigationItems, navigationItems,
theme = "light", theme = "light",
className = "", className = "",
facebookHref = "/facebook",
}: SiteHeaderProps): JSX.Element => { }: SiteHeaderProps): JSX.Element => {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const isDark = theme === "dark"; const isDark = theme === "dark";
@ -60,6 +63,18 @@ export const SiteHeader = ({
</a> </a>
</li> </li>
))} ))}
<li>
<a
className="flex items-center gap-3 border-b border-black/10 pb-4"
href={facebookHref}
onClick={() => setMenuOpen(false)}
>
<span className="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black">
<FaFacebookF className="h-4 w-4" />
</span>
Facebook
</a>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
@ -109,6 +124,15 @@ export const SiteHeader = ({
</a> </a>
</li> </li>
))} ))}
<li className="hidden sm:block">
<a
className={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
href={facebookHref}
aria-label="Highland Group RDA on Facebook"
>
<FaFacebookF className="h-4 w-4" />
</a>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>

64
client/src/pages/Contact.tsx
View file

@ -13,46 +13,61 @@ const navigationItems = [
export const Contact = (): JSX.Element => { export const Contact = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{
backgroundImage:
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
}}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader <SiteHeader
navigationItems={navigationItems} navigationItems={navigationItems}
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8" theme="dark"
className="px-6 sm:px-4"
/> />
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<main className="w-full"> <div className="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">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
<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 Get in touch
</p> </p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]"> <div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
Contact Highland Group RDA Contact Highland Group RDA
</h1> </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]"> <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
We would love to hear from you about sessions, We would love to hear from you about
volunteering, or ways to support the group. Reach sessions, volunteering, or ways to support
out and we will get back to you as soon as we can. the group. Reach out and we will get back to
you as soon as we can.
</p> </p>
</div> </div>
</div>
</div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<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"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
<div>
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Contact details Contact details
</h2> </h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 Highland Group RDA, Sandycroft, Reelig,
Kirkhill, IV5 7PP
</p> </p>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 Tel: +447500 203226
<br /> <br />
Email: info@highlandrda.org.uk Email: info@highlandgrouprda.org.uk
</p> </p>
<div className="mt-6"> <div className="mt-6">
<a <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" 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" href="mailto:info@highlandgrouprda.org.uk"
> >
Email us Email us
</a> </a>
@ -107,6 +122,21 @@ export const Contact = (): JSX.Element => {
</form> </form>
</div> </div>
</div> </div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="h-px w-full bg-black/20 mb-6" />
<div className="overflow-hidden rounded-[7px] border border-black/10">
<iframe
title="Highland Group RDA location"
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
className="w-full h-[300px] sm:h-[380px] border-0"
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</section> </section>
<SiteFooter /> <SiteFooter />
</main> </main>

83
client/src/pages/Facebook.tsx Normal file
View file

@ -0,0 +1,83 @@
import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "News", href: "/news" },
{ label: "Support Us", href: "/support" },
{ label: "Contact", href: "/contact" },
];
const facebookPageUrl =
"https://www.facebook.com/profile.php?id=100064729054822";
const facebookEmbedUrl =
"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064729054822&tabs=timeline&width=500&height=900&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true";
export const Facebook = (): JSX.Element => {
return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{
backgroundImage:
"url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp)",
}}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader
navigationItems={navigationItems}
theme="dark"
className="px-6 sm:px-4"
facebookHref={facebookPageUrl}
/>
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<div className="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 className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
Social
</p>
<div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
Facebook updates
</h1>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
Follow our latest news, events, and photos
on Facebook.
</p>
</div>
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="mt-6 w-full max-w-[500px] mx-auto">
<iframe
title="Highland Group RDA Facebook feed"
src={facebookEmbedUrl}
width="500"
height="900"
className="w-full h-[700px] sm:h-[900px] border-0 rounded-[7px] bg-white"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
loading="lazy"
/>
</div>
<a
className="mt-6 inline-flex [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
href={facebookPageUrl}
target="_blank"
rel="noreferrer"
>
Visit our Facebook page
</a>
</div>
</section>
<SiteFooter />
</main>
</div>
);
};

200
client/src/pages/SupportUs.tsx
View file

@ -13,40 +13,50 @@ const navigationItems = [
export const SupportUs = (): JSX.Element => { export const SupportUs = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{ backgroundImage: "url(/Kenneth.jpg)" }}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader <SiteHeader
navigationItems={navigationItems} navigationItems={navigationItems}
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8" theme="dark"
className="px-6 sm:px-4"
/> />
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<main className="w-full"> <div className="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">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
<div>
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
Support Us Support Us
</p> </p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]"> <div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="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 We are able to carry out our life-changing
activities thanks to you. activities thanks to you.
</h1> </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]"> <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
We couldn&apos;t do what we do without the hard work We couldn&apos;t do what we do without the
and dedication of our wonderful volunteers and hard work and dedication of our wonderful
fundraisers. We wouldn&apos;t be where we are volunteers and fundraisers. We wouldn&apos;t
without the kindness and generosity of our sponsors be where we are without the kindness and
and donors. generosity of our sponsors and donors.
</p> </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]"> <p className="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 We understand not everyone is in the
able to volunteer but donations are just as position to be able to volunteer but
impactful. We are truly grateful for any and every donations are just as impactful. We are
donation received as we can only do what we do as a truly grateful for any and every donation
received as we can only do what we do as a
result of self-funding. result of self-funding.
</p> </p>
</div> </div>
</div>
</div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#f2e2a2] 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 className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@ -81,14 +91,17 @@ export const SupportUs = (): JSX.Element => {
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Volunteering Volunteering
</h2> </h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
We welcome all volunteers, you don&apos;t have to <div>
know anything about horses, or even like being <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
around animals, there are plenty of other We welcome all volunteers, you don&apos;t
opportunities for you to get involved and help us. have to know anything about horses, or even
We also need lots of help with other tasks such as like being around animals, there are plenty
fundraising, publicity, painting, creating new of other opportunities for you to get
activities for the participants and general 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. maintenance.
</p> </p>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
@ -98,57 +111,75 @@ export const SupportUs = (): JSX.Element => {
<li>Grooming</li> <li>Grooming</li>
<li>Tacking up the ponies</li> <li>Tacking up the ponies</li>
<li> <li>
Leading the ponies and/or walking beside the Leading the ponies and/or walking beside
ponies to support the riders the ponies to support the riders
</li> </li>
<li>Poo picking the fields</li> <li>Poo picking the fields</li>
</ul> </ul>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 To find out more about volunteering for an
centre, download our Volunteer Information Pack. RDA centre, download our Volunteer
Information Pack.
</p> </p>
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> </div>
<div className="space-y-6">
<div>
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
How much time do I need to commit? How much time do I need to commit?
</h3> </h3>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 If you are keen to work with our
you would need to be available during one of our participants then you would need to be
session times - Tuesday - Friday mornings. If you available during one of our session
can commit to helping regularly it would be great, times - Tuesday - Friday mornings. If
but everyone understands that&apos;s not always you can commit to helping regularly it
possible and there are usually many other flexible would be great, but everyone understands
options available - especially in summer. that&apos;s not always possible and
there are usually many other flexible
options available - especially in
summer.
</p> </p>
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> </div>
<div>
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
How can I apply? How can I apply?
</h3> </h3>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 You can contact us via email or phone by
here. clicking here.
</p> </p>
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> </div>
How old do I need to be and what credentials do I <div>
need to have? <h3 className="[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> </h3>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 All volunteers must be 12 or over. There
age limit. We have Public Liability insurance and is no upper age limit. We have Public
Trustee Indemnity for all volunteers. Volunteers Liability insurance and Trustee
aged between 12 and 90 also have Personal Accident Indemnity for all volunteers. Volunteers
insurance (with some restrictions for those aged aged between 12 and 90 also have
between 80 and 90). Personal Accident insurance (with some
restrictions for those aged between 80
and 90).
</p> </p>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 You will need to provide the names and
details of 2 referees who are not a relative or contact details of 2 referees who are
partner and who have known you for more than 1 year. not a relative or partner and who have
Volunteers of 16 years of age and over who are known you for more than 1 year.
actively involved with our sessions are required to Volunteers of 16 years of age and over
undergo an enhanced disclosure check because they who are actively involved with our
are volunteering with vulnerable adults and sessions are required to undergo an
children. enhanced disclosure check because they
are volunteering with vulnerable adults
and children.
</p> </p>
</div> </div>
</div>
</div>
</div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
@ -156,27 +187,40 @@ export const SupportUs = (): JSX.Element => {
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Sponsor a pony Sponsor a pony
</h2> </h2>
<h3 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> <div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
<div>
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
Why sponsor a pony? Why sponsor a pony?
</h3> </h3>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 We currently have a school of ponies which
require care and attention. Our volunteers and all require care and attention. Our
coaches work hard every day all year round to ensure volunteers and coaches work hard every day
our ponies are well looked after and suitable for all year round to ensure our ponies are well
our riders. By sponsoring a pony, you are enabling looked after and suitable for our riders. By
us to enrich the lives of disabled children and sponsoring a pony, you are enabling us to
enrich the lives of disabled children and
adults throughout the Highlands. adults throughout the Highlands.
</p> </p>
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> <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 How do I pay?
RDA pony?
</h3> </h3>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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 We are working on a payment method so we
here are some of the things we regularly need to thank you for bearing with us. If you would
look after our ponies and ensure we can keep running like more information, please get in touch.
our RDA sessions. </p>
</div>
<div>
<h3 className="[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> </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"> <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>£34 every 6 weeks for hoof trimming</li>
@ -187,14 +231,8 @@ export const SupportUs = (): JSX.Element => {
<li>£30 to fund a riding session</li> <li>£30 to fund a riding session</li>
<li>£75 to buy a riding hat</li> <li>£75 to buy a riding hat</li>
</ul> </ul>
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> </div>
How do I pay? </div>
</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> </div>
</section> </section>