Update homepage layout and add about page
This commit is contained in:
Calum Muir
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
BIN
client/public/Button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
client/public/Samantha-and-Connolly.jpg
Normal file
BIN
client/public/Samantha-and-Connolly.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
client/public/Wispa-2880w-906x1536.avif
Normal file
BIN
client/public/Wispa-2880w-906x1536.avif
Normal file
Binary file not shown.
BIN
client/public/small-mono.png
Normal file
BIN
client/public/small-mono.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -6,27 +6,29 @@ 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} />
|
||||
{/* Fallback to 404 */}
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
return (
|
||||
<Switch>
|
||||
{/* Add pages below */}
|
||||
<Route path="/" component={Desktop} />
|
||||
<Route path="/about" component={About} />
|
||||
{/* Fallback to 404 */}
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
137
client/src/pages/About.tsx
Normal file
137
client/src/pages/About.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,127 +1,264 @@
|
|||
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%]",
|
||||
},
|
||||
{
|
||||
title: "Support Us",
|
||||
backgroundImage: "bg-cover bg-[50%_50%]",
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
backgroundImage: "bg-cover bg-[50%_50%]",
|
||||
},
|
||||
{
|
||||
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 => {
|
||||
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]">
|
||||
<img
|
||||
className="w-[177px] h-[93px]"
|
||||
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(" ")}
|
||||
</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]">
|
||||
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]">
|
||||
{" "}
|
||||
since{" "}
|
||||
</span>
|
||||
<span className="underline">1975</span>
|
||||
<span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
|
||||
.
|
||||
</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]">
|
||||
"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."
|
||||
</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.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1020px] mx-auto px-4 mt-[60px]">
|
||||
<div className="grid grid-cols-3 gap-[10px]">
|
||||
{cardData.map((card, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="w-full h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
|
||||
>
|
||||
<CardContent
|
||||
className={`p-2.5 h-full flex flex-col ${card.backgroundImage}`}
|
||||
>
|
||||
<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]">
|
||||
{card.title}
|
||||
</h3>
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
return (
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
)}
|
||||
|
||||
<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-white">
|
||||
{" "}
|
||||
since{" "}
|
||||
</span>
|
||||
<span className="underline">1975</span>
|
||||
<span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
|
||||
.
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<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]">
|
||||
"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."
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div className="mt-4 mx-auto h-[2px] w-16 bg-black/60" />
|
||||
</div>
|
||||
|
||||
<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-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
|
||||
>
|
||||
<CardContent
|
||||
className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
|
||||
style={{
|
||||
backgroundImage: `url(${card.imageUrl})`,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<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]">
|
||||
Highland Group RDA is a registered charity in
|
||||
<br />
|
||||
Scotland SCIO 2342343
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue