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

Update support, contact, and facebook pages

Browse source
This commit is contained in:
Calum Muir 2025-12-21 20:26:11 +00:00
parent 32b5c0caba
commit 0e9b25bba1
7 changed files with 398 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 554 KiB

BIN
client/public/Kenneth.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

2
client/src/App.tsx
View file

@ -12,6 +12,7 @@ import { Contact } from "@/pages/Contact";
import { SupportUs } from "@/pages/SupportUs";
import { Privacy } from "@/pages/Privacy";
import { NewsArticle } from "@/pages/NewsArticle";
import { Facebook } from "@/pages/Facebook";
function Router() {
return (
@ -21,6 +22,7 @@ function Router() {
<Route path="/about" component={About} />
<Route path="/news" component={News} />
<Route path="/news/:slug" component={NewsArticle} />
<Route path="/facebook" component={Facebook} />
<Route path="/support" component={SupportUs} />
<Route path="/contact" component={Contact} />
<Route path="/privacy" component={Privacy} />

24
client/src/components/SiteHeader.tsx
View file

@ -1,4 +1,5 @@
import React, { useState } from "react";
import { FaFacebookF } from "react-icons/fa";
type NavItem = {
label: string;
@ -9,12 +10,14 @@ type SiteHeaderProps = {
navigationItems: NavItem[];
theme?: "dark" | "light";
className?: string;
facebookHref?: string;
};
export const SiteHeader = ({
navigationItems,
theme = "light",
className = "",
facebookHref = "/facebook",
}: SiteHeaderProps): JSX.Element => {
const [menuOpen, setMenuOpen] = useState(false);
const isDark = theme === "dark";
@ -60,6 +63,18 @@ export const SiteHeader = ({
</a>
</li>
))}
<li>
<a
className="flex items-center gap-3 border-b border-black/10 pb-4"
href={facebookHref}
onClick={() => setMenuOpen(false)}
>
<span className="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black">
<FaFacebookF className="h-4 w-4" />
</span>
Facebook
</a>
</li>
</ul>
</nav>
</div>
@ -109,6 +124,15 @@ export const SiteHeader = ({
</a>
</li>
))}
<li className="hidden sm:block">
<a
className={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
href={facebookHref}
aria-label="Highland Group RDA on Facebook"
>
<FaFacebookF className="h-4 w-4" />
</a>
</li>
</ul>
</nav>
</div>

64
client/src/pages/Contact.tsx
View file

@ -13,46 +13,61 @@ const navigationItems = [
export const Contact = (): JSX.Element => {
return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{
backgroundImage:
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
}}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader
navigationItems={navigationItems}
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
theme="dark"
className="px-6 sm:px-4"
/>
<main className="w-full">
<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">
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<div className="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
Get in touch
</p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
<div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white 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 className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white 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>
</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-8 sm:grid-cols-[1.1fr_0.9fr]">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
<div>
<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
Highland Group RDA, Sandycroft, Reelig,
Kirkhill, IV5 7PP
</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
Tel: +447500 203226
<br />
Email: info@highlandrda.org.uk
Email: info@highlandgrouprda.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"
href="mailto:info@highlandgrouprda.org.uk"
>
Email us
</a>
@ -107,6 +122,21 @@ export const Contact = (): JSX.Element => {
</form>
</div>
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="h-px w-full bg-black/20 mb-6" />
<div className="overflow-hidden rounded-[7px] border border-black/10">
<iframe
title="Highland Group RDA location"
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
className="w-full h-[300px] sm:h-[380px] border-0"
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</section>
<SiteFooter />
</main>

83
client/src/pages/Facebook.tsx Normal file
View file

@ -0,0 +1,83 @@
import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "News", href: "/news" },
{ label: "Support Us", href: "/support" },
{ label: "Contact", href: "/contact" },
];
const facebookPageUrl =
"https://www.facebook.com/profile.php?id=100064729054822";
const facebookEmbedUrl =
"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064729054822&tabs=timeline&width=500&height=900&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true";
export const Facebook = (): JSX.Element => {
return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{
backgroundImage:
"url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp)",
}}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader
navigationItems={navigationItems}
theme="dark"
className="px-6 sm:px-4"
facebookHref={facebookPageUrl}
/>
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<div className="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
Social
</p>
<div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
Facebook updates
</h1>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
Follow our latest news, events, and photos
on Facebook.
</p>
</div>
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="mt-6 w-full max-w-[500px] mx-auto">
<iframe
title="Highland Group RDA Facebook feed"
src={facebookEmbedUrl}
width="500"
height="900"
className="w-full h-[700px] sm:h-[900px] border-0 rounded-[7px] bg-white"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
loading="lazy"
/>
</div>
<a
className="mt-6 inline-flex [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
href={facebookPageUrl}
target="_blank"
rel="noreferrer"
>
Visit our Facebook page
</a>
</div>
</section>
<SiteFooter />
</main>
</div>
);
};

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

@ -13,40 +13,50 @@ const navigationItems = [
export const SupportUs = (): JSX.Element => {
return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{ backgroundImage: "url(/Kenneth.jpg)" }}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader
navigationItems={navigationItems}
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
theme="dark"
className="px-6 sm:px-4"
/>
<main className="w-full">
<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">
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
<div className="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
Support Us
</p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
<div className="mt-3 h-[2px] w-10 bg-white/70" />
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white 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&apos;t do what we do without the hard work
and dedication of our wonderful volunteers and
fundraisers. We wouldn&apos;t be where we are
without the kindness and generosity of our sponsors
and donors.
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
We couldn&apos;t do what we do without the
hard work and dedication of our wonderful
volunteers and fundraisers. We wouldn&apos;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
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white 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>
</div>
</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">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
<div className="bg-[#f2e2a2] 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">
@ -81,14 +91,17 @@ export const SupportUs = (): JSX.Element => {
<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&apos;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
<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]">
We welcome all volunteers, you don&apos;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]">
@ -98,57 +111,75 @@ export const SupportUs = (): JSX.Element => {
<li>Grooming</li>
<li>Tacking up the ponies</li>
<li>
Leading the ponies and/or walking beside the
ponies to support the riders
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.
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">
</div>
<div className="space-y-6">
<div>
<h3 className="[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&apos;s not always
possible and there are usually many other flexible
options available - especially in summer.
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&apos;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">
</div>
<div>
<h3 className="[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.
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?
</div>
<div>
<h3 className="[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).
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.
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>
</div>
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
@ -156,27 +187,40 @@ export const SupportUs = (): JSX.Element => {
<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">
<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">
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
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?
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]">
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.
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>
<div>
<h3 className="[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>
@ -187,14 +231,8 @@ export const SupportUs = (): JSX.Element => {
<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>
</div>
</div>
</section>