Update homepage layout and add about page

This commit is contained in:
Calum Muir 2025-12-21 13:17:49 +00:00
parent 1ae29e8076
commit 6b3168cb1d
9 changed files with 409 additions and 133 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

BIN
client/public/Button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -6,12 +6,14 @@ import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/not-found";
import { Desktop } from "@/pages/Desktop";
import { About } from "@/pages/About";
function Router() {
return (
<Switch>
{/* Add pages below */}
<Route path="/" component={Desktop} />
<Route path="/about" component={About} />
{/* Fallback to 404 */}
<Route component={NotFound} />
</Switch>

137
client/src/pages/About.tsx Normal file
View file

@ -0,0 +1,137 @@
import React from "react";
const navigationItems = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "News", href: "#" },
{ label: "Support Us", href: "#" },
{ label: "Contact", href: "#" },
];
export const About = (): 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="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
<div>
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
About Highland Group RDA
</p>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
Enriching lives through horses in the Highlands since
1975.
</h1>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
Highland Group RDA is a member of the National Riding for
the Disabled Association (RDA), and of the Grampian and
Highland Regional RDA. We provide safe, supportive
sessions that help riders build confidence, strength, and
connection through equine activities.
</p>
</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="absolute inset-0 bg-black/20" />
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Our Mission
</h2>
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
Our mission is to bring about meaningful and positive
changes in the health and well-being of people with
physical or mental disabilities through activities with
our horses and ponies.
</p>
</div>
<div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
What We Do
</h2>
<ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] space-y-3">
<li>Inclusive riding sessions for all abilities.</li>
<li>Supportive, qualified volunteers and coaches.</li>
<li>Community events and family engagement.</li>
<li>Opportunities to grow confidence and independence.</li>
</ul>
</div>
</div>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-8 sm:py-10">
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Support the Work
</h2>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
Your support helps us keep sessions accessible and
safe. Donations go directly towards horse care,
equipment, and volunteer training.
</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>
<footer className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-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>
<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>
</div>
);
};

View file

@ -1,109 +1,198 @@
import React from "react";
import { Button } from "@/components/ui/button";
import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
const navigationItems = ["about", "home", "contact", "news"];
const navigationItems = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "News", href: "#" },
{ label: "Support Us", href: "#" },
{ label: "Contact", href: "#" },
];
const cardData = [
{
title: "About Us",
backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl: "/Wispa-2880w-906x1536.avif",
},
{
title: "Support Us",
backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl:
"/223152689_6028821187158318_7901235528269673744_n-1920w-1.webp",
},
{
title: "Contact",
backgroundImage: "bg-cover bg-[50%_50%]",
imageUrl:
"/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp",
},
];
export const Desktop = (): JSX.Element => {
const [menuOpen, setMenuOpen] = useState(false);
return (
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<header className="w-full max-w-[1020px] mx-auto px-4">
<div className="flex items-end justify-between h-[108px]">
{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-[177px] h-[93px]"
className="w-[140px] h-[75px]"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/>
<nav className="h-7 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal] whitespace-nowrap">
{navigationItems.join(" ")}
<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>
)}
<section className="w-full max-w-[1020px] mx-auto px-4 py-[42px]">
<div className="flex items-end justify-between gap-4">
<h1 className="flex-1 max-w-[612px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0] leading-[normal]">
<span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
<div
className="relative w-full min-h-[70vh] sm:min-h-0 bg-cover bg-[50%_50%] overflow-hidden"
style={{
backgroundImage: "url(/Samantha-and-Connolly.jpg)",
}}
>
<div className="absolute inset-0 bg-black/35" />
<header className="relative w-full px-6 sm:px-4">
<div className="flex flex-row items-start justify-between gap-3 pt-4 sm:pt-4 sm:h-[108px]">
<img
className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
alt="Rdalogo"
src="/figmaAssets/rdalogo-1.svg"
/>
<div className="flex flex-col gap-3 items-end ml-auto text-right">
<button
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"
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>
<a
className="w-[200px] 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>
</header>
<div className="relative px-4 sm:px-6 pt-6 pb-6 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">
Enriching lives through horses in the{" "}
</span>
<span className="underline">Highlands</span>
<span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
<span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
{" "}
since{" "}
</span>
<span className="underline">1975</span>
<span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
<span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
.
</span>
</h1>
<div className="w-[280px] h-[50px]">
<Button className="w-full h-full" variant="default">
Learn More
</Button>
</div>
</div>
</section>
<section className="w-full max-w-[1020px] mx-auto px-4 mt-[42px]">
<div className="flex gap-2.5">
<div className="w-[672px] h-60 rounded-[7px] bg-cover bg-[50%_50%]" />
<blockquote className="flex-1 max-w-[347px] [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl text-right tracking-[0] leading-[normal]">
&quot;Our mission is to bring about meaningful and positive changes
in the health and well-being of people with physical or mental
disabilities through activities with our horses and ponies.&quot;
<div className="relative pb-6 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="w-full sm:w-[610px] h-40 sm:h-60" />
<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 meaningful
and positive changes in the health and
well-being of people with physical or mental
disabilities through activities with our horses
and ponies.&quot;
</blockquote>
</div>
</section>
<section className="w-full max-w-[1020px] mx-auto px-4 mt-[20px]">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 max-w-[426px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base tracking-[0] leading-[normal]">
Highland Group RDA is a member of the National Riding for the
Disabled Association (RDA), and of the Grampian and Highland
Regional RDA.
<br />
<br />
We are a registered Scottish Charitable Incorporated Organisation
(SC007357).
</div>
<img className="w-[121px] h-[121px] object-cover" alt="Small mono" />
</div>
</section>
<section className="w-full max-w-[1020px] mx-auto px-4 mt-[60px]">
<p className="text-center [font-family:'Merriweather',Helvetica] font-bold text-black text-[32px] tracking-[0] leading-[normal] px-[27px]">
Find out more about who we are, what we do and how you can support us
to help make a difference.
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-10 sm:pb-[60px]">
<div className="w-full">
<div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
<div className="text-center">
<p className="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
Find out more about who we are, what we do and
how you can support us to help make a
difference.
</p>
</section>
<div className="mt-4 mx-auto h-[2px] w-16 bg-black/60" />
</div>
<section className="w-full max-w-[1020px] mx-auto px-4 mt-[60px]">
<div className="grid grid-cols-3 gap-[10px]">
<div className="mt-8 sm:mt-[60px]">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
{cardData.map((card, index) => (
<Card
key={index}
className="w-full 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"
>
<CardContent
className={`p-2.5 h-full flex flex-col ${card.backgroundImage}`}
className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
style={{
backgroundImage: `url(${card.imageUrl})`,
}}
>
<div className="mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]">
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-4xl text-center tracking-[0] leading-[normal]">
<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">
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
{card.title}
</h3>
</div>
@ -111,17 +200,65 @@ export const Desktop = (): JSX.Element => {
</Card>
))}
</div>
</section>
</div>
<div className="w-full max-w-[1020px] mx-auto px-4 mt-[79px]" />
<footer className="w-full max-w-[1020px] mx-auto px-4 mt-[20px] pb-8">
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base tracking-[0] leading-[normal]">
<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-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
National Riding for the Disabled Association
(RDA), and of the Grampian and Highland
Regional RDA.
<br />
<br />
We are a registered Scottish Charitable
Incorporated Organisation (SC007357).
</div>
<img
className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
alt="Small mono"
src="/small-mono.png"
/>
</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>
</p>
</div>
</div>
</footer>
</section>
</div>
);
};