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>
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0"> <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 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">
@ -73,9 +73,6 @@ export const SupportUs = (): JSX.Element => {
Head over to our Just Giving Page to give a Head over to our Just Giving Page to give a
one-off donation today. one-off donation today.
</p> </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> </div>
<a <a
className="w-full sm:w-[240px] h-[50px]" className="w-full sm:w-[240px] h-[50px]"
@ -93,11 +90,29 @@ export const SupportUs = (): JSX.Element => {
</div> </div>
</section> </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"> <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="relative">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <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 Volunteering
</h2> </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 className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
<div> <div>
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <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>
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0"> <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="relative">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <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 Sponsor a pony
</h2> </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 className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
<div> <div>
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> <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"> <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="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="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-[320px_1fr] sm:items-start">
Fundraising <div className="relative">
</h2> <img
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> className="w-full h-[240px] sm:h-[260px] object-cover"
Highland Group RDA is self-funded, as are all RDA alt="Ponies lined up"
groups. We have to self fund coaching fees, the care src="/alineofponies-1920w.webp"
of our beautiful ponies, riding equipment, insurance />
and everything else that comes with running an RDA <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">
group. Fundraising
</p> </h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> </div>
One of the ways we raise money for the upkeep of <div>
Highland Group RDA is through fundraising. We run a <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
variety of events throughout the year and are always Highland Group RDA is self-funded, as are
looking for volunteers to support in running these all RDA groups. We have to self fund
events. If you can spare some time to assist or are coaching fees, the care of our beautiful
aware of any fundraising opportunities, please get ponies, riding equipment, insurance and
in touch. We&apos;d love to hear from you! everything else that comes with running an
</p> 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> </div>
</section> </section>
<SiteFooter fullBleedOnMobile /> <SiteFooter fullBleedOnMobile />