309 lines
19 KiB
TypeScript
309 lines
19 KiB
TypeScript
import React from "react";
|
|
import { SiteHeader } from "@/components/SiteHeader";
|
|
import { SiteFooter } from "@/components/SiteFooter";
|
|
import { usePageMeta } from "@/lib/seo";
|
|
|
|
const navigationItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "News", href: "/events" },
|
|
{ label: "Support Us", href: "/support-us" },
|
|
{ label: "Contact", href: "/contact" },
|
|
];
|
|
|
|
export const SupportUs = (): JSX.Element => {
|
|
usePageMeta({
|
|
title: "Support Us",
|
|
path: "/support-us",
|
|
description:
|
|
"Support Highland Group RDA through donations, volunteering, and fundraising.",
|
|
});
|
|
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(/Kenneth.jpg)" }}
|
|
>
|
|
<div className="absolute inset-0 bg-black/45" />
|
|
<SiteHeader
|
|
navigationItems={navigationItems}
|
|
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">
|
|
<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">
|
|
Support Us
|
|
</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]">
|
|
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-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 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 able to volunteer but
|
|
donations are just as impactful. We are
|
|
truly grateful for any and every donation
|
|
received as we can only do what we do as a
|
|
result of self-funding.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
<div className="bg-[#f5d445] 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>
|
|
</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.webp"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
<div className="relative">
|
|
<img
|
|
className="w-full h-[140px] object-cover"
|
|
style={{ objectPosition: "50% 35%" }}
|
|
alt=""
|
|
src="/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/35" />
|
|
<h2 className="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 className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
|
<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
|
<div>
|
|
<p className="[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 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>
|
|
</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?
|
|
</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's not always possible and
|
|
there are usually many other flexible
|
|
options available - especially in
|
|
summer.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="[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{" "}
|
|
<a
|
|
className="underline"
|
|
href="/contact"
|
|
>
|
|
clicking here
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
<div className="relative">
|
|
<img
|
|
className="w-full h-[140px] object-cover"
|
|
style={{ objectPosition: "50% 35%" }}
|
|
alt=""
|
|
src="/274864973_7295359163837841_5927911936073070889_n-1920w.webp"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/35" />
|
|
<h2 className="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 className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
|
<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?
|
|
</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 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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
|
|
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
|
<div className="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-[320px_1fr] sm:items-start">
|
|
<div className="relative">
|
|
<img
|
|
className="w-full h-[240px] sm:h-[260px] object-cover"
|
|
alt="Ponies lined up"
|
|
src="/alineofponies-1920w.webp"
|
|
/>
|
|
<h2 className="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 className="[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'd love to hear from you!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<SiteFooter fullBleedOnMobile />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|