Update site layout, headers, footers, and assets
This commit is contained in:
Calum Muir
parent
883c52e636
commit
22d30d95af
16 changed files with 451 additions and 336 deletions
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
BIN
client/public/Breagh-bc8e70e8-2880w.webp
Normal file
BIN
client/public/Breagh-bc8e70e8-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
client/public/Harley-6ece9eca-2880w.webp
Normal file
BIN
client/public/Harley-6ece9eca-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
client/public/Samantha-sStory-2880w.webp
Normal file
BIN
client/public/Samantha-sStory-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
client/public/Star-Participants-Samantha-s-story.pdf
Normal file
BIN
client/public/Star-Participants-Samantha-s-story.pdf
Normal file
Binary file not shown.
BIN
client/public/Suede-2880w.webp
Normal file
BIN
client/public/Suede-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
client/public/Wispa-2880w.webp
Normal file
BIN
client/public/Wispa-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
client/public/connolly-73f3e69f-2880w-2.webp
Normal file
BIN
client/public/connolly-73f3e69f-2880w-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
client/public/puzzle-5de6e325-2880w.webp
Normal file
BIN
client/public/puzzle-5de6e325-2880w.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
66
client/src/components/SiteFooter.tsx
Normal file
66
client/src/components/SiteFooter.tsx
Normal 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
119
client/src/components/SiteHeader.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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
|
||||||
<div>
|
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
style={{
|
||||||
Who, why, where, when & how?
|
backgroundImage:
|
||||||
</p>
|
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
|
||||||
<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>
|
<div className="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25" />
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
<SiteHeader
|
||||||
We are located at our own premises just outside
|
navigationItems={navigationItems}
|
||||||
Kirkhill, near Inverness. We operate from Spring
|
theme="dark"
|
||||||
to Autumn 4 days per week. The majority of our
|
className="px-6 sm:px-4"
|
||||||
participants are Inverness and Ross-shire based
|
/>
|
||||||
with a reach including Glenurquhart, Dingwall
|
<div className="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
|
||||||
and Inverness.
|
<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>
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
Who, why, where, when & how?
|
||||||
We are completely self-funded and rely on income
|
</p>
|
||||||
from donations for our sessions, fundraising
|
<div className="mt-3 h-[2px] w-10 bg-white/70" />
|
||||||
from local events and available grants to fund
|
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
|
||||||
our services, upkeep of our facilities and most
|
Highland Group RDA was established in 1975.
|
||||||
importantly fund the care and training of our
|
</h1>
|
||||||
wonderful ponies.
|
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
|
||||||
</p>
|
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="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]"
|
className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
|
||||||
style={{
|
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||||
backgroundImage:
|
target="_blank"
|
||||||
"url(/Samantha-and-Connolly.jpg)",
|
rel="noreferrer"
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-black/20" />
|
<img
|
||||||
</div>
|
className="w-full h-full object-contain"
|
||||||
|
alt="Donate via JustGiving"
|
||||||
|
src="/Button.png"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
</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">
|
||||||
<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="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||||
Our Star Participants
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
</h2>
|
Our Star Participants
|
||||||
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
</h2>
|
||||||
|
<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's Story
|
Samantha'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's story and find out how
|
Read Samantha'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-black text-base sm:text-lg leading-[1.6]">
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
|
||||||
Riding helps to correct her posture and
|
Testimonials
|
||||||
protects the spine and hips while it
|
|
||||||
strengthens the muscles. More than that, it
|
|
||||||
gives a sense of achievement and of being
|
|
||||||
just as 'able-bodied' as everyone
|
|
||||||
else on the back of a horse.
|
|
||||||
</p>
|
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
|
||||||
He feels the responsibility of controlling
|
|
||||||
such a large and powerful animal and it
|
|
||||||
helps him understand life just that bit
|
|
||||||
better. It's also very calming for him,
|
|
||||||
especially at the end of a session when he
|
|
||||||
can nurture the horse by brushing her and
|
|
||||||
giving her some hay.
|
|
||||||
</p>
|
</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">
|
||||||
|
“
|
||||||
|
</span>
|
||||||
|
<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 protects the spine and hips
|
||||||
|
while it strengthens the muscles.
|
||||||
|
More than that, it gives a sense of
|
||||||
|
achievement and of being just as
|
||||||
|
'able-bodied' as everyone
|
||||||
|
else on the back of a horse.
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<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">
|
||||||
|
“
|
||||||
|
</span>
|
||||||
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
|
He feels the responsibility of
|
||||||
|
controlling such a large and
|
||||||
|
powerful animal and it helps him
|
||||||
|
understand life just that bit
|
||||||
|
better. It's also very calming
|
||||||
|
for him, especially at the end of a
|
||||||
|
session when he can nurture the
|
||||||
|
horse by brushing her and giving her
|
||||||
|
some hay.
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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]">
|
<div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
We cannot thank the team at RDA Highland enough
|
<blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
|
||||||
for what they've done for our child. To see
|
<span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
|
||||||
only the individual and the pure joy of
|
“
|
||||||
achievement, and not the disability is a
|
</span>
|
||||||
tremendous gift. Our whole family benefits from
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
these sessions. Thank you.
|
We cannot thank the team at RDA Highland
|
||||||
</p>
|
enough for what they've done for our
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
child. To see only the individual and the
|
||||||
RDA's gentle, calm and serene atmosphere
|
pure joy of achievement, and not the
|
||||||
coupled with the warm sentient creature that she
|
disability is a tremendous gift. Our whole
|
||||||
can bond with and enjoy without needing words. I
|
family benefits from these sessions. Thank
|
||||||
think it helps her to feel calm and grounded and
|
you.
|
||||||
gives a huge sense of achievement. RDA is such
|
</p>
|
||||||
an important part of our lives and each of my
|
</blockquote>
|
||||||
children take something different away.
|
<blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
|
||||||
</p>
|
<span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
|
||||||
|
“
|
||||||
|
</span>
|
||||||
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
|
RDA's gentle, calm and serene
|
||||||
|
atmosphere coupled with the warm sentient
|
||||||
|
creature that she can bond with and enjoy
|
||||||
|
without needing words. I think it helps her
|
||||||
|
to feel calm and grounded and gives a huge
|
||||||
|
sense of achievement. RDA is such an
|
||||||
|
important part of our lives and each of my
|
||||||
|
children take something different away.
|
||||||
|
</p>
|
||||||
|
</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's
|
<br />A true gentleman and everyone'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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]">
|
||||||
/>
|
<div className="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
|
||||||
<div className="flex flex-col gap-3 items-end ml-auto text-right">
|
<h1 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
|
||||||
<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>
|
|
||||||
</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]">
|
|
||||||
"Our mission is to bring about
|
"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
|
||||||
|
|
@ -186,26 +115,31 @@ export const Desktop = (): JSX.Element => {
|
||||||
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"
|
||||||
>
|
>
|
||||||
<CardContent
|
<a
|
||||||
className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
|
className="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
|
||||||
style={{
|
href={card.href}
|
||||||
backgroundImage: `url(${card.imageUrl})`,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-black/40" />
|
<CardContent
|
||||||
<div className="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
|
className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
|
||||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
|
style={{
|
||||||
{card.title}
|
backgroundImage: `url(${card.imageUrl})`,
|
||||||
</h3>
|
}}
|
||||||
</div>
|
>
|
||||||
</CardContent>
|
<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="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}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</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,54 +150,25 @@ 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>
|
||||||
<img
|
<a
|
||||||
className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
|
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
||||||
alt="Small mono"
|
target="_blank"
|
||||||
src="/small-mono.png"
|
rel="noreferrer"
|
||||||
loading="lazy"
|
aria-label="View Highland Group RDA on the OSCR register"
|
||||||
decoding="async"
|
>
|
||||||
/>
|
<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"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer className="mt-0 bg-[#d6d6d6] px-4 sm:px-0 pb-8 pt-6 sm:pt-8">
|
<SiteFooter />
|
||||||
<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>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue