Add news, contact, support pages and update about content
This commit is contained in:
Calum Muir
parent
f9b74a4a98
commit
a6f63cbe5a
6 changed files with 607 additions and 60 deletions
|
|
@ -7,6 +7,9 @@ import NotFound from "@/pages/not-found";
|
|||
|
||||
import { Desktop } from "@/pages/Desktop";
|
||||
import { About } from "@/pages/About";
|
||||
import { News } from "@/pages/News";
|
||||
import { Contact } from "@/pages/Contact";
|
||||
import { SupportUs } from "@/pages/SupportUs";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
|
|
@ -14,6 +17,9 @@ function Router() {
|
|||
{/* Add pages below */}
|
||||
<Route path="/" component={Desktop} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/news" component={News} />
|
||||
<Route path="/support" component={SupportUs} />
|
||||
<Route path="/contact" component={Contact} />
|
||||
{/* Fallback to 404 */}
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import React from "react";
|
|||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "#" },
|
||||
{ label: "Support Us", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
export const About = (): JSX.Element => {
|
||||
|
|
@ -22,7 +22,10 @@ export const About = (): JSX.Element => {
|
|||
<ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
|
||||
{navigationItems.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a className="hover:underline" href={item.href}>
|
||||
<a
|
||||
className="hover:underline"
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -36,78 +39,165 @@ export const About = (): JSX.Element => {
|
|||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
About Highland Group RDA
|
||||
Who, why, where, when & how?
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Enriching lives through horses in the Highlands since
|
||||
1975.
|
||||
Highland Group RDA was established in 1975.
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
|
||||
Highland Group RDA is a member of the National Riding for
|
||||
the Disabled Association (RDA), and of the Grampian and
|
||||
Highland Regional RDA. We provide safe, supportive
|
||||
sessions that help riders build confidence, strength, and
|
||||
connection through equine activities.
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We are located at our own premises just outside
|
||||
Kirkhill, near Inverness. We operate from Spring to
|
||||
Autumn 4 days per week. The majority of our
|
||||
participants are Inverness and Ross-shire based with
|
||||
a reach including Glenurquhart, Dingwall and
|
||||
Inverness.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We are completely self-funded and rely on income
|
||||
from donations for our sessions, fundraising from
|
||||
local events and available grants to fund our
|
||||
services, upkeep of our facilities and most
|
||||
importantly fund the care and training of our
|
||||
wonderful ponies.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]" style={{ backgroundImage: "url(/Samantha-and-Connolly.jpg)" }}>
|
||||
<div
|
||||
className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]"
|
||||
style={{
|
||||
backgroundImage: "url(/Samantha-and-Connolly.jpg)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
||||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||
<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">
|
||||
Our Mission
|
||||
</h2>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Our mission is to bring about meaningful and positive
|
||||
changes in the health and well-being of people with
|
||||
physical or mental disabilities through activities with
|
||||
our horses and ponies.
|
||||
</p>
|
||||
<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">
|
||||
Our Star Participants
|
||||
</h2>
|
||||
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div className="bg-white/70 px-6 py-6">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
Samantha's Story
|
||||
</h3>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Read Samantha's story and find out how her
|
||||
RDA sessions have not only improved her physical
|
||||
and mental wellbeing, but helped her to overcome
|
||||
her prognosis of never being able to walk.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Full Story here...
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-6 py-6">
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Riding helps to correct her posture and protects
|
||||
the spine and hips while it strengthens the
|
||||
muscles. More than that, it gives a sense of
|
||||
achievement and of being just as
|
||||
'able-bodied' as everyone else on the
|
||||
back of a horse.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
He feels the responsibility of controlling such
|
||||
a large and powerful animal and it helps him
|
||||
understand life just that bit better. It's
|
||||
also very calming for him, especially at the end
|
||||
of a session when he can nurture the horse by
|
||||
brushing her and giving her some hay.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white/70 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">
|
||||
What We Do
|
||||
</h2>
|
||||
<ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] space-y-3">
|
||||
<li>Inclusive riding sessions for all abilities.</li>
|
||||
<li>Supportive, qualified volunteers and coaches.</li>
|
||||
<li>Community events and family engagement.</li>
|
||||
<li>Opportunities to grow confidence and independence.</li>
|
||||
</ul>
|
||||
<div className="mt-6 bg-white/70 px-6 py-6">
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We cannot thank the team at RDA Highland enough for
|
||||
what they've done for our child. To see only
|
||||
the individual and the pure joy of achievement, and
|
||||
not the disability is a tremendous gift. Our whole
|
||||
family benefits from these sessions. Thank you.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
RDA's gentle, calm and serene atmosphere
|
||||
coupled with the warm sentient creature that she can
|
||||
bond with and enjoy without needing words. I think
|
||||
it helps her to feel calm and grounded and gives a
|
||||
huge sense of achievement. RDA is such an important
|
||||
part of our lives and each of my children take
|
||||
something different away.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-8 sm:py-10">
|
||||
<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">
|
||||
Support the Work
|
||||
</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]">
|
||||
Your support helps us keep sessions accessible and
|
||||
safe. Donations go directly towards horse care,
|
||||
equipment, and volunteer training.
|
||||
<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">
|
||||
Meet the ponies
|
||||
</h2>
|
||||
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Breagh
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
13.2hh · Mare · 15 yo
|
||||
<br />
|
||||
She is very willing and independent
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Connolly
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
14.2hh · Gelding · 16 yo
|
||||
<br />A true gentleman and everyone's
|
||||
friend
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Harley
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
15.3hh · Gelding · 15 yo
|
||||
<br />
|
||||
He is the boss but very obliging
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Puzzle
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
15.3hh · Mare · 14 yo
|
||||
<br />
|
||||
She is very sensitive and gentle
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Lady Suede
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
13hh · Mare · 23 yo
|
||||
<br />
|
||||
RIP October 2024
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/70 px-5 py-5">
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Wispa
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
14.2hh · Gelding · 15 yo
|
||||
<br />
|
||||
Wispa is cute and very cheeky!
|
||||
</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.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
122
client/src/pages/Contact.tsx
Normal file
122
client/src/pages/Contact.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import React from "react";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
export const Contact = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
|
||||
<div className="flex flex-row items-start justify-between gap-4">
|
||||
<img
|
||||
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
|
||||
alt="Rdalogo"
|
||||
src="/figmaAssets/rdalogo-1.svg"
|
||||
/>
|
||||
<nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
|
||||
<ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
|
||||
{navigationItems.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a className="hover:underline" href={item.href}>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<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
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Contact Highland Group RDA
|
||||
</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]">
|
||||
We would love to hear from you about sessions, volunteering,
|
||||
or ways to support the group. Reach out and we will get back
|
||||
to you as soon as we can.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
|
||||
<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">
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Contact details
|
||||
</h2>
|
||||
<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
|
||||
</p>
|
||||
<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
|
||||
<br />
|
||||
Email: info@highlandrda.org.uk
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<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"
|
||||
href="mailto:info@highlandrda.org.uk"
|
||||
>
|
||||
Email us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/70 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">
|
||||
Send a message
|
||||
</h2>
|
||||
<form className="mt-4 space-y-4" action="#" method="post">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
name="message"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="inline-flex items-center rounded-full border border-black/20 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-black"
|
||||
type="submit"
|
||||
>
|
||||
Send message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,9 +4,9 @@ import { Card, CardContent } from "@/components/ui/card";
|
|||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "#" },
|
||||
{ label: "Support Us", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
const cardData = [
|
||||
|
|
|
|||
95
client/src/pages/News.tsx
Normal file
95
client/src/pages/News.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React from "react";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
const newsItems = [
|
||||
{
|
||||
date: "Dec 2025",
|
||||
title: "Winter sessions and holiday activities",
|
||||
summary:
|
||||
"Our winter timetable is live. Sessions continue with extra family days across December.",
|
||||
},
|
||||
{
|
||||
date: "Nov 2025",
|
||||
title: "Volunteer spotlight: the team behind the yard",
|
||||
summary:
|
||||
"A huge thank you to our volunteers who keep everything running smoothly week to week.",
|
||||
},
|
||||
{
|
||||
date: "Oct 2025",
|
||||
title: "New accessibility equipment supported by donors",
|
||||
summary:
|
||||
"We have added new adaptive tack to make sessions more comfortable and inclusive.",
|
||||
},
|
||||
];
|
||||
|
||||
export const News = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
|
||||
<div className="flex flex-row items-start justify-between gap-4">
|
||||
<img
|
||||
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
|
||||
alt="Rdalogo"
|
||||
src="/figmaAssets/rdalogo-1.svg"
|
||||
/>
|
||||
<nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
|
||||
<ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
|
||||
{navigationItems.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a className="hover:underline" href={item.href}>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
Latest News
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Updates from Highland Group RDA
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[700px]">
|
||||
Stories, milestones, and updates from the yard, our
|
||||
riders, volunteers, and supporters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||
{newsItems.map((item) => (
|
||||
<article
|
||||
key={item.title}
|
||||
className="bg-[#d6d6d6] px-6 py-6 sm:py-8"
|
||||
>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
{item.date}
|
||||
</p>
|
||||
<h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2]">
|
||||
{item.title}
|
||||
</h2>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
{item.summary}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
234
client/src/pages/SupportUs.tsx
Normal file
234
client/src/pages/SupportUs.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import React from "react";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
export const SupportUs = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
|
||||
<div className="flex flex-row items-start justify-between gap-4">
|
||||
<img
|
||||
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
|
||||
alt="Rdalogo"
|
||||
src="/figmaAssets/rdalogo-1.svg"
|
||||
/>
|
||||
<nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
|
||||
<ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
|
||||
{navigationItems.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a
|
||||
className="hover:underline"
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
Support Us
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black 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-black 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-black 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>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div className="bg-[#d6d6d6] 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>
|
||||
<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]"
|
||||
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.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
||||
<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">
|
||||
Volunteering
|
||||
</h2>
|
||||
<p className="mt-4 [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>
|
||||
<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 centre,
|
||||
download our Volunteer Information Pack.
|
||||
</p>
|
||||
<h3 className="mt-6 [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>
|
||||
<h3 className="mt-6 [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 clicking here.
|
||||
</p>
|
||||
<h3 className="mt-6 [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>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
||||
<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">
|
||||
Sponsor a pony
|
||||
</h2>
|
||||
<h3 className="mt-4 [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 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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-10">
|
||||
<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'd love to hear from you!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue