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

Update support page sections

Browse source
This commit is contained in:
Calum Muir 2025-12-22 12:15:01 +00:00
parent 315233ad38
commit 2fcb183743
2 changed files with 68 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/alineofponies-1920w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

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

@ -63,7 +63,7 @@ export const SupportUs = (): JSX.Element => {
</section>
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#f2e2a2] px-6 sm:px-8 py-6 sm:py-8">
<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">
@ -73,9 +73,6 @@ export const SupportUs = (): JSX.Element => {
Head over to our Just Giving Page to give a
one-off donation today.
</p>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
Just Giving Donate
</p>
</div>
<a
className="w-full sm:w-[240px] h-[50px]"
@ -93,11 +90,29 @@ export const SupportUs = (): JSX.Element => {
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6">
<div className="h-px bg-black/10" />
</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">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
<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]">
@ -190,10 +205,22 @@ export const SupportUs = (): JSX.Element => {
</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">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
<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">
@ -245,25 +272,39 @@ export const SupportUs = (): JSX.Element => {
<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">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Fundraising
</h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
Highland Group RDA is self-funded, as are all RDA
groups. We have to self fund coaching fees, the care
of our beautiful ponies, riding equipment, insurance
and everything else that comes with running an RDA
group.
</p>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
One of the ways we raise money for the upkeep of
Highland Group RDA is through fundraising. We run a
variety of events throughout the year and are always
looking for volunteers to support in running these
events. If you can spare some time to assist or are
aware of any fundraising opportunities, please get
in touch. We&apos;d love to hear from you!
</p>
<div 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&apos;d love to hear from you!
</p>
</div>
</div>
</div>
</section>
<SiteFooter fullBleedOnMobile />