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

Update site layout, headers, footers, and assets

Browse source
This commit is contained in:
Calum Muir 2025-12-21 16:23:51 +00:00
parent 883c52e636
commit 22d30d95af
16 changed files with 451 additions and 336 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/222957077_6028824210491349_4146132303877993139_n-1920w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 630 KiB

BIN
client/public/Breagh-bc8e70e8-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
client/public/Harley-6ece9eca-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
client/public/Samantha-sStory-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
client/public/Star-Participants-Samantha-s-story.pdf Normal file
View file

Binary file not shown.

BIN
client/public/Suede-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
client/public/Wispa-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
client/public/connolly-73f3e69f-2880w-2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
client/public/puzzle-5de6e325-2880w.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 52 KiB

66
client/src/components/SiteFooter.tsx Normal file
View file

@ -0,0 +1,66 @@
import React from "react";
export const SiteFooter = (): JSX.Element => {
return (
<footer className="mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8">
<div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-4 sm:px-0 pb-8 pt-6 sm:pt-8">
<div className="w-full max-w-[1200px] mx-auto px-0 sm:px-8">
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
<p className="font-semibold">
Highland Group RDA is a registered charity in
<br />
Scotland{" "}
<a
className="underline"
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
target="_blank"
rel="noreferrer"
>
SC007357
</a>
</p>
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="font-semibold">
Highland Group RDA, Sandycroft, Reelig,
Kirkhill, IV5 7PP
</p>
<p className="font-semibold">
Tel: +447500 203226 · Email:{" "}
<a
className="underline"
href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
>
info@highlandgrouprda.org.uk
</a>
</p>
</div>
<p className="mt-4 font-semibold">
<a className="underline" href="/privacy">
Privacy Policy
</a>{" "}
·{" "}
<a className="underline" href="/safeguarding">
Safeguarding
</a>{" "}
·{" "}
<a className="underline" href="/accessibility">
Accessibility
</a>
</p>
<p className="mt-4 font-semibold">
Site designed by{" "}
<a
className="underline"
href="https://muir.in"
target="_blank"
rel="noreferrer"
>
Calum Muir
</a>
</p>
</div>
</div>
</div>
</footer>
);
};

119
client/src/components/SiteHeader.tsx Normal file
View file

@ -0,0 +1,119 @@
import React, { useState } from "react";
type NavItem = {
label: string;
href: string;
};
type SiteHeaderProps = {
navigationItems: NavItem[];
theme?: "dark" | "light";
className?: string;
};
export const SiteHeader = ({
navigationItems,
theme = "light",
className = "",
}: SiteHeaderProps): JSX.Element => {
const [menuOpen, setMenuOpen] = useState(false);
const isDark = theme === "dark";
const textClass = isDark ? "text-white" : "text-black";
const borderClass = isDark ? "border-white/40" : "border-black/20";
const lineClass = isDark ? "bg-white" : "bg-black";
return (
<>
{menuOpen && (
<div
id="mobile-menu"
className="fixed inset-0 z-50 flex flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
role="dialog"
aria-modal="true"
>
<div className="flex items-center justify-between">
<a href="/" aria-label="Highland Group RDA home">
<img
className="w-[140px] h-[75px]"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/>
</a>
<button
className="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
type="button"
onClick={() => setMenuOpen(false)}
>
Close
</button>
</div>
<nav className="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]">
<ul className="flex flex-col gap-6">
{navigationItems.map((item) => (
<li key={item.label}>
<a
className="block border-b border-black/10 pb-4"
href={item.href}
onClick={() => setMenuOpen(false)}
>
{item.label}
</a>
</li>
))}
</ul>
</nav>
</div>
)}
<header className={`relative w-full ${className}`.trim()}>
<div className="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]">
<a href="/" aria-label="Highland Group RDA home">
<img
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/>
</a>
<div className="flex flex-col gap-3 items-end ml-auto text-right">
<button
className={`inline-flex items-center gap-3 rounded-full border px-4 py-2 text-sm font-semibold uppercase tracking-wide sm:hidden ${borderClass} ${textClass}`}
type="button"
onClick={() => setMenuOpen(true)}
aria-haspopup="dialog"
aria-expanded={menuOpen}
aria-controls="mobile-menu"
>
<span className="flex flex-col gap-1">
<span
className={`inline-block h-0.5 w-5 ${lineClass}`}
/>
<span
className={`inline-block h-0.5 w-5 ${lineClass}`}
/>
<span
className={`inline-block h-0.5 w-5 ${lineClass}`}
/>
</span>
Menu
</button>
<nav
className={`hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold ${textClass} text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1`}
>
<ul className="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto">
{navigationItems.map((item) => (
<li key={item.label}>
<a
className="hover:underline"
href={item.href}
>
{item.label}
</a>
</li>
))}
</ul>
</nav>
</div>
</div>
</header>
</>
);
};

295
client/src/pages/About.tsx
View file

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [ const navigationItems = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@ -11,79 +13,89 @@ const navigationItems = [
export const About = (): JSX.Element => { export const About = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <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>
<main className="w-full"> <main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<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">
Who, why, where, when &amp; how?
</p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
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]">
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 <div
className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]" className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
style={{ style={{
backgroundImage: backgroundImage:
"url(/Samantha-and-Connolly.jpg)", "url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
}} }}
> >
<div className="absolute inset-0 bg-black/20" /> <div className="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25" />
<SiteHeader
navigationItems={navigationItems}
theme="dark"
className="px-6 sm:px-4"
/>
<div className="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 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">
Who, why, where, when &amp; how?
</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]">
Highland Group RDA was established in 1975.
</h1>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white 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-white 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>
</div> </div>
<a
className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm: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>
</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-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">
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
<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 Star Participants Our Star Participants
</h2> </h2>
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2"> <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/60">
Stories and testimonials
</p>
</div>
<div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_0.95fr]">
<div className="bg-white/70 px-6 py-6"> <div className="bg-white/70 px-6 py-6">
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"> <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
Featured story
</p>
<h3 className="mt-2 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
Samantha&apos;s Story Samantha&apos;s Story
</h3> </h3>
<div
className="mt-4 h-[200px] sm:h-[260px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/Samantha-sStory-2880w.webp)",
}}
/>
<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]">
Read Samantha&apos;s story and find out how Read Samantha&apos;s story and find out how
her RDA sessions have not only improved her her RDA sessions have not only improved her
@ -91,55 +103,93 @@ export const About = (): JSX.Element => {
her to overcome her prognosis of never being her to overcome her prognosis of never being
able to walk. able to walk.
</p> </p>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> <a
Full Story here... className="mt-4 inline-flex items-center gap-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] underline"
</p> href="/Star-Participants-Samantha-s-story.pdf"
target="_blank"
rel="noreferrer"
>
Full story (PDF)
</a>
</div> </div>
<div className="bg-white/70 px-6 py-6"> <div className="bg-white/70 px-6 py-6">
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
Testimonials
</p>
<div className="mt-4 space-y-4">
<blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
<span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
&ldquo;
</span>
<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]">
Riding helps to correct her posture and Riding helps to correct her posture
protects the spine and hips while it and protects the spine and hips
strengthens the muscles. More than that, it while it strengthens the muscles.
gives a sense of achievement and of being More than that, it gives a sense of
just as &apos;able-bodied&apos; as everyone achievement and of being just as
&apos;able-bodied&apos; as everyone
else on the back of a horse. else on the back of a horse.
</p> </p>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> </blockquote>
He feels the responsibility of controlling <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
such a large and powerful animal and it <span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
helps him understand life just that bit &ldquo;
better. It&apos;s also very calming for him, </span>
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]"> <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 He feels the responsibility of
for what they&apos;ve done for our child. To see controlling such a large and
only the individual and the pure joy of powerful animal and it helps him
achievement, and not the disability is a understand life just that bit
tremendous gift. Our whole family benefits from better. It&apos;s also very calming
these sessions. Thank you. for him, especially at the end of a
session when he can nurture the
horse by brushing her and giving her
some hay.
</p> </p>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"> </blockquote>
RDA&apos;s gentle, calm and serene atmosphere </div>
coupled with the warm sentient creature that she </div>
can bond with and enjoy without needing words. I </div>
think it helps her to feel calm and grounded and
gives a huge sense of achievement. RDA is such <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
an important part of our lives and each of my <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
<span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
&ldquo;
</span>
<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&apos;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>
</blockquote>
<blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
<span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
&ldquo;
</span>
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
RDA&apos;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. children take something different away.
</p> </p>
</blockquote>
</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-0 pt-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="h-px w-24 bg-black/20" />
<h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Meet the ponies Meet the ponies
</h2> </h2>
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3"> <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
@ -147,6 +197,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Breagh Breagh
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/Breagh-bc8e70e8-2880w.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
13.2hh · Mare · 15 yo 13.2hh · Mare · 15 yo
<br /> <br />
@ -157,6 +214,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Connolly Connolly
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/connolly-73f3e69f-2880w-2.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
14.2hh · Gelding · 16 yo 14.2hh · Gelding · 16 yo
<br />A true gentleman and everyone&apos;s <br />A true gentleman and everyone&apos;s
@ -167,6 +231,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Harley Harley
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/Harley-6ece9eca-2880w.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
15.3hh · Gelding · 15 yo 15.3hh · Gelding · 15 yo
<br /> <br />
@ -177,6 +248,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Puzzle Puzzle
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/puzzle-5de6e325-2880w.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
15.3hh · Mare · 14 yo 15.3hh · Mare · 14 yo
<br /> <br />
@ -187,6 +265,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Lady Suede Lady Suede
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
style={{
backgroundImage:
"url(/Suede-2880w.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
13hh · Mare · 23 yo 13hh · Mare · 23 yo
<br /> <br />
@ -197,6 +282,13 @@ export const About = (): JSX.Element => {
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"> <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
Wispa Wispa
</h3> </h3>
<div
className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_20%]"
style={{
backgroundImage:
"url(/Wispa-2880w.webp)",
}}
/>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
14.2hh · Gelding · 15 yo 14.2hh · Gelding · 15 yo
<br /> <br />
@ -207,26 +299,7 @@ export const About = (): JSX.Element => {
</div> </div>
</section> </section>
<footer className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-8"> <SiteFooter />
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
<p className="font-semibold">
Highland Group RDA is a registered charity in
<br />
Scotland SCIO 2342343
</p>
<p className="mt-4 font-semibold">
Site designed by{" "}
<a
className="underline"
href="https://muir.in"
target="_blank"
rel="noreferrer"
>
Calum Muir
</a>
</p>
</div>
</footer>
</main> </main>
</div> </div>
); );

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

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [ const navigationItems = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@ -11,29 +13,10 @@ const navigationItems = [
export const Contact = (): JSX.Element => { export const Contact = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <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"> <SiteHeader
<div className="flex flex-row items-start justify-between gap-4"> navigationItems={navigationItems}
<img className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
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>
<main className="w-full"> <main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
@ -125,6 +108,7 @@ export const Contact = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<SiteFooter />
</main> </main>
</div> </div>
); );

159
client/src/pages/Desktop.tsx
View file

@ -1,5 +1,7 @@
import React, { useState } from "react"; import React from "react";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [ const navigationItems = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@ -14,64 +16,27 @@ const cardData = [
title: "About Us", title: "About Us",
backgroundImage: "bg-cover bg-[50%_50%]", backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl: "/Wispa-2880w-906x1536.avif", imageUrl: "/Wispa-2880w-906x1536.avif",
href: "/about",
}, },
{ {
title: "Support Us", title: "Support Us",
backgroundImage: "bg-cover bg-[50%_50%]", backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl: imageUrl:
"/223152689_6028821187158318_7901235528269673744_n-1920w-1.webp", "/223152689_6028821187158318_7901235528269673744_n-1920w-1.webp",
href: "/support",
}, },
{ {
title: "Contact", title: "Contact",
backgroundImage: "bg-cover bg-[50%_50%]", backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl: imageUrl:
"/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp", "/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp",
href: "/contact",
}, },
]; ];
export const Desktop = (): JSX.Element => { export const Desktop = (): JSX.Element => {
const [menuOpen, setMenuOpen] = useState(false);
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
{menuOpen && (
<div
id="mobile-menu"
className="fixed inset-0 z-50 flex flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
role="dialog"
aria-modal="true"
>
<div className="flex items-center justify-between">
<img
className="w-[140px] h-[75px]"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/>
<button
className="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
type="button"
onClick={() => setMenuOpen(false)}
>
Close
</button>
</div>
<nav className="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]">
<ul className="flex flex-col gap-6">
{navigationItems.map((item) => (
<li key={item.label}>
<a
className="block border-b border-black/10 pb-4"
href={item.href}
onClick={() => setMenuOpen(false)}
>
{item.label}
</a>
</li>
))}
</ul>
</nav>
</div>
)}
<main className="w-full"> <main className="w-full">
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0"> <section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
<div <div
@ -80,50 +45,15 @@ export const Desktop = (): JSX.Element => {
backgroundImage: "url(/Samantha-and-Connolly.jpg)", backgroundImage: "url(/Samantha-and-Connolly.jpg)",
}} }}
> >
<div className="absolute inset-0 bg-black/35" /> <div className="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25" />
<header className="relative w-full px-6 sm:px-4"> <SiteHeader
<div className="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]"> navigationItems={navigationItems}
<img theme="dark"
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]" className="px-6 sm:px-4"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/> />
<div className="flex flex-col gap-3 items-end ml-auto text-right"> <div className="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]">
<button <div className="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
className="inline-flex items-center gap-3 rounded-full border border-white/40 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white sm:hidden" <h1 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
type="button"
onClick={() => setMenuOpen(true)}
aria-haspopup="dialog"
aria-expanded={menuOpen}
aria-controls="mobile-menu"
>
<span className="flex flex-col gap-1">
<span className="inline-block h-0.5 w-5 bg-white" />
<span className="inline-block h-0.5 w-5 bg-white" />
<span className="inline-block h-0.5 w-5 bg-white" />
</span>
Menu
</button>
<nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-white text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1">
<ul className="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto">
{navigationItems.map((item) => (
<li key={item.label}>
<a
className="hover:underline"
href={item.href}
>
{item.label}
</a>
</li>
))}
</ul>
</nav>
</div>
</div>
</header>
<div className="relative px-4 sm:px-6 pt-8 pb-4 sm:pt-[70px] sm:pb-[42px]">
<div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
<h1 className="flex-1 max-w-[612px] [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
<span className="[font-family:'Merriweather',Helvetica] font-bold text-white"> <span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
Enriching lives through horses in Enriching lives through horses in
the{" "} the{" "}
@ -141,9 +71,8 @@ export const Desktop = (): JSX.Element => {
</div> </div>
</div> </div>
<div className="relative pb-16 sm:pb-[42px]"> <div className="relative pb-16 sm:pb-[42px]">
<div className="flex flex-col gap-4 sm:flex-row sm:gap-2.5 bg-black/30 p-4 sm:p-5"> <div className="flex justify-end px-4 sm:px-6">
<div className="w-full sm:w-[610px] h-40 sm:h-60" /> <blockquote className="max-w-[520px] rounded-[7px] bg-black/35 px-5 py-5 sm:px-6 sm:py-6 [font-family:'Merriweather',Helvetica] font-bold text-white text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3] backdrop-blur-sm">
<blockquote className="flex-1 max-w-[480px] self-end [font-family:'Merriweather',Helvetica] font-bold text-white text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3]">
&quot;Our mission is to bring about &quot;Our mission is to bring about
meaningful and positive changes in the meaningful and positive changes in the
health and well-being of people with health and well-being of people with
@ -185,6 +114,10 @@ export const Desktop = (): JSX.Element => {
<Card <Card
key={index} key={index}
className="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent" className="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
>
<a
className="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
href={card.href}
> >
<CardContent <CardContent
className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`} className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
@ -194,18 +127,19 @@ export const Desktop = (): JSX.Element => {
> >
<div className="absolute inset-0 bg-black/40" /> <div className="absolute inset-0 bg-black/40" />
<div className="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85"> <div className="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]"> <h3 className="group-hover:underline group-focus-visible:underline group-active:underline [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
{card.title} {card.title}
</h3> </h3>
</div> </div>
</CardContent> </CardContent>
</a>
</Card> </Card>
))} ))}
</div> </div>
</div> </div>
<div className="mt-8 sm:mt-[40px]"> <div className="mt-8 sm:mt-[40px]">
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-white/60 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 bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8">
<div className="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]"> <div className="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
Highland Group RDA is a member of the Highland Group RDA is a member of the
National Riding for the Disabled National Riding for the Disabled
@ -216,6 +150,12 @@ export const Desktop = (): JSX.Element => {
We are a registered Scottish Charitable We are a registered Scottish Charitable
Incorporated Organisation (SC007357). Incorporated Organisation (SC007357).
</div> </div>
<a
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
target="_blank"
rel="noreferrer"
aria-label="View Highland Group RDA on the OSCR register"
>
<img <img
className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto" className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
alt="Small mono" alt="Small mono"
@ -223,47 +163,12 @@ export const Desktop = (): JSX.Element => {
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />
</div>
</div>
</div>
</div>
<footer className="mt-0 bg-[#d6d6d6] px-4 sm:px-0 pb-8 pt-6 sm:pt-8">
<div className="w-full max-w-[1200px] mx-auto px-0 sm:px-8">
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
<p className="font-semibold">
Highland Group RDA is a registered charity
in
<br />
Scotland SCIO 2342343
</p>
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="font-semibold">
The Highland Group RDA, Culloden,
Inverness, IV2
</p>
<p className="font-semibold">
Tel: 01463 000 000 · Email:
info@highlandrda.org.uk
</p>
</div>
<p className="mt-4 font-semibold">
Privacy Policy · Safeguarding ·
Accessibility
</p>
<p className="mt-4 font-semibold">
Site designed by{" "}
<a
className="underline"
href="https://muir.in"
target="_blank"
rel="noreferrer"
>
Calum Muir
</a> </a>
</p>
</div> </div>
</div> </div>
</footer> </div>
</div>
<SiteFooter />
</section> </section>
</main> </main>
</div> </div>

28
client/src/pages/News.tsx
View file

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [ const navigationItems = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@ -32,29 +34,10 @@ const newsItems = [
export const News = (): JSX.Element => { export const News = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <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"> <SiteHeader
<div className="flex flex-row items-start justify-between gap-4"> navigationItems={navigationItems}
<img className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
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>
<main className="w-full"> <main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
@ -94,6 +77,7 @@ export const News = (): JSX.Element => {
))} ))}
</div> </div>
</section> </section>
<SiteFooter />
</main> </main>
</div> </div>
); );

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

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
const navigationItems = [ const navigationItems = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@ -11,29 +13,10 @@ const navigationItems = [
export const SupportUs = (): JSX.Element => { export const SupportUs = (): JSX.Element => {
return ( return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]"> <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"> <SiteHeader
<div className="flex flex-row items-start justify-between gap-4"> navigationItems={navigationItems}
<img className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
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>
<main className="w-full"> <main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12"> <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
@ -238,6 +221,7 @@ export const SupportUs = (): JSX.Element => {
</p> </p>
</div> </div>
</section> </section>
<SiteFooter />
</main> </main>
</div> </div>
); );