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

85
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,26 +272,40 @@ 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">
<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 Fundraising
</h2> </h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> </div>
Highland Group RDA is self-funded, as are all RDA <div>
groups. We have to self fund coaching fees, the care <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
of our beautiful ponies, riding equipment, insurance Highland Group RDA is self-funded, as are
and everything else that comes with running an RDA all RDA groups. We have to self fund
group. coaching fees, the care of our beautiful
ponies, riding equipment, insurance and
everything else that comes with running an
RDA group.
</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]">
One of the ways we raise money for the upkeep of One of the ways we raise money for the
Highland Group RDA is through fundraising. We run a upkeep of Highland Group RDA is through
variety of events throughout the year and are always fundraising. We run a variety of events
looking for volunteers to support in running these throughout the year and are always looking
events. If you can spare some time to assist or are for volunteers to support in running these
aware of any fundraising opportunities, please get events. If you can spare some time to assist
in touch. We&apos;d love to hear from you! or are aware of any fundraising
opportunities, please get in touch.
We&apos;d love to hear from you!
</p> </p>
</div> </div>
</div>
</div>
</section> </section>
<SiteFooter fullBleedOnMobile /> <SiteFooter fullBleedOnMobile />
</main> </main>