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 { Desktop } from "@/pages/Desktop";
|
||||||
import { About } from "@/pages/About";
|
import { About } from "@/pages/About";
|
||||||
|
import { News } from "@/pages/News";
|
||||||
|
import { Contact } from "@/pages/Contact";
|
||||||
|
import { SupportUs } from "@/pages/SupportUs";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -14,6 +17,9 @@ function Router() {
|
||||||
{/* Add pages below */}
|
{/* Add pages below */}
|
||||||
<Route path="/" component={Desktop} />
|
<Route path="/" component={Desktop} />
|
||||||
<Route path="/about" component={About} />
|
<Route path="/about" component={About} />
|
||||||
|
<Route path="/news" component={News} />
|
||||||
|
<Route path="/support" component={SupportUs} />
|
||||||
|
<Route path="/contact" component={Contact} />
|
||||||
{/* Fallback to 404 */}
|
{/* Fallback to 404 */}
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@ import React from "react";
|
||||||
const navigationItems = [
|
const navigationItems = [
|
||||||
{ label: "Home", href: "/" },
|
{ label: "Home", href: "/" },
|
||||||
{ label: "About", href: "/about" },
|
{ label: "About", href: "/about" },
|
||||||
{ label: "News", href: "#" },
|
{ label: "News", href: "/news" },
|
||||||
{ label: "Support Us", href: "#" },
|
{ label: "Support Us", href: "/support" },
|
||||||
{ label: "Contact", href: "#" },
|
{ label: "Contact", href: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const About = (): JSX.Element => {
|
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">
|
<ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
|
||||||
{navigationItems.map((item) => (
|
{navigationItems.map((item) => (
|
||||||
<li key={item.label}>
|
<li key={item.label}>
|
||||||
<a className="hover:underline" href={item.href}>
|
<a
|
||||||
|
className="hover:underline"
|
||||||
|
href={item.href}
|
||||||
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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 className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
|
||||||
<div>
|
<div>
|
||||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
<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>
|
</p>
|
||||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
<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
|
Highland Group RDA was established in 1975.
|
||||||
1975.
|
|
||||||
</h1>
|
</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]">
|
<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 a member of the National Riding for
|
We are located at our own premises just outside
|
||||||
the Disabled Association (RDA), and of the Grampian and
|
Kirkhill, near Inverness. We operate from Spring to
|
||||||
Highland Regional RDA. We provide safe, supportive
|
Autumn 4 days per week. The majority of our
|
||||||
sessions that help riders build confidence, strength, and
|
participants are Inverness and Ross-shire based with
|
||||||
connection through equine activities.
|
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>
|
</p>
|
||||||
</div>
|
</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 className="absolute inset-0 bg-black/20" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
<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">
|
<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">
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
Our Mission
|
Our Star Participants
|
||||||
</h2>
|
</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]">
|
<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
|
Read Samantha's story and find out how her
|
||||||
changes in the health and well-being of people with
|
RDA sessions have not only improved her physical
|
||||||
physical or mental disabilities through activities with
|
and mental wellbeing, but helped her to overcome
|
||||||
our horses and ponies.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
<div className="bg-white/70 px-6 py-6">
|
||||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
What We Do
|
Riding helps to correct her posture and protects
|
||||||
</h2>
|
the spine and hips while it strengthens the
|
||||||
<ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] space-y-3">
|
muscles. More than that, it gives a sense of
|
||||||
<li>Inclusive riding sessions for all abilities.</li>
|
achievement and of being just as
|
||||||
<li>Supportive, qualified volunteers and coaches.</li>
|
'able-bodied' as everyone else on the
|
||||||
<li>Community events and family engagement.</li>
|
back of a horse.
|
||||||
<li>Opportunities to grow confidence and independence.</li>
|
</p>
|
||||||
</ul>
|
<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="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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
|
<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="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">
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
Support the Work
|
Meet the ponies
|
||||||
</h2>
|
</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]">
|
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||||
Your support helps us keep sessions accessible and
|
<div className="bg-white/70 px-5 py-5">
|
||||||
safe. Donations go directly towards horse care,
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||||
equipment, and volunteer training.
|
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>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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 = [
|
const navigationItems = [
|
||||||
{ label: "Home", href: "/" },
|
{ label: "Home", href: "/" },
|
||||||
{ label: "About", href: "/about" },
|
{ label: "About", href: "/about" },
|
||||||
{ label: "News", href: "#" },
|
{ label: "News", href: "/news" },
|
||||||
{ label: "Support Us", href: "#" },
|
{ label: "Support Us", href: "/support" },
|
||||||
{ label: "Contact", href: "#" },
|
{ label: "Contact", href: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const cardData = [
|
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