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 { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
|
@ -11,79 +13,89 @@ const navigationItems = [
|
|||
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>
|
||||
|
||||
<main className="w-full">
|
||||
<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">
|
||||
Who, why, where, when & 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>
|
||||
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-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 & 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
|
||||
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)",
|
||||
}}
|
||||
<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"
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
</div>
|
||||
<img
|
||||
className="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</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">
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Our Star Participants
|
||||
</h2>
|
||||
<div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<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">
|
||||
Our Star Participants
|
||||
</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">
|
||||
<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
|
||||
</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]">
|
||||
Read Samantha's story and find out how
|
||||
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
|
||||
able to walk.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Full Story here...
|
||||
</p>
|
||||
<a
|
||||
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"
|
||||
href="/Star-Participants-Samantha-s-story.pdf"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Full story (PDF)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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]">
|
||||
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>
|
||||
<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 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">
|
||||
“
|
||||
</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 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]">
|
||||
We cannot thank the team at RDA Highland enough
|
||||
for what they'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>
|
||||
<p className="mt-4 [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>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<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">
|
||||
“
|
||||
</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'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">
|
||||
“
|
||||
</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>
|
||||
</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">
|
||||
<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
|
||||
</h2>
|
||||
<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">
|
||||
Breagh
|
||||
</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]">
|
||||
13.2hh · Mare · 15 yo
|
||||
<br />
|
||||
|
|
@ -157,6 +214,13 @@ export const About = (): JSX.Element => {
|
|||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Connolly
|
||||
</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]">
|
||||
14.2hh · Gelding · 16 yo
|
||||
<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">
|
||||
Harley
|
||||
</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]">
|
||||
15.3hh · Gelding · 15 yo
|
||||
<br />
|
||||
|
|
@ -177,6 +248,13 @@ export const About = (): JSX.Element => {
|
|||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Puzzle
|
||||
</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]">
|
||||
15.3hh · Mare · 14 yo
|
||||
<br />
|
||||
|
|
@ -187,6 +265,13 @@ export const About = (): JSX.Element => {
|
|||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Lady Suede
|
||||
</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]">
|
||||
13hh · Mare · 23 yo
|
||||
<br />
|
||||
|
|
@ -197,6 +282,13 @@ export const About = (): JSX.Element => {
|
|||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
||||
Wispa
|
||||
</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]">
|
||||
14.2hh · Gelding · 15 yo
|
||||
<br />
|
||||
|
|
@ -207,26 +299,7 @@ export const About = (): JSX.Element => {
|
|||
</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>
|
||||
<SiteFooter />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import React from "react";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
|
@ -11,29 +13,10 @@ const navigationItems = [
|
|||
export const Contact = (): 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>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
|
||||
/>
|
||||
|
||||
<main className="w-full">
|
||||
<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>
|
||||
</section>
|
||||
<SiteFooter />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
|
@ -14,64 +16,27 @@ const cardData = [
|
|||
title: "About Us",
|
||||
backgroundImage: "bg-cover bg-[50%_50%]",
|
||||
imageUrl: "/Wispa-2880w-906x1536.avif",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
title: "Support Us",
|
||||
backgroundImage: "bg-cover bg-[50%_50%]",
|
||||
imageUrl:
|
||||
"/223152689_6028821187158318_7901235528269673744_n-1920w-1.webp",
|
||||
href: "/support",
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
backgroundImage: "bg-cover bg-[50%_50%]",
|
||||
imageUrl:
|
||||
"/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp",
|
||||
href: "/contact",
|
||||
},
|
||||
];
|
||||
|
||||
export const Desktop = (): JSX.Element => {
|
||||
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>
|
||||
)}
|
||||
|
||||
<main className="w-full">
|
||||
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
|
||||
<div
|
||||
|
|
@ -80,50 +45,15 @@ export const Desktop = (): JSX.Element => {
|
|||
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-3 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>
|
||||
</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]">
|
||||
<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-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">
|
||||
<h1 className="[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{" "}
|
||||
|
|
@ -141,9 +71,8 @@ export const Desktop = (): JSX.Element => {
|
|||
</div>
|
||||
</div>
|
||||
<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="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]">
|
||||
<div className="flex justify-end px-4 sm:px-6">
|
||||
<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">
|
||||
"Our mission is to bring about
|
||||
meaningful and positive changes in the
|
||||
health and well-being of people with
|
||||
|
|
@ -186,26 +115,31 @@ export const Desktop = (): JSX.Element => {
|
|||
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})`,
|
||||
}}
|
||||
<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}
|
||||
>
|
||||
<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>
|
||||
<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="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>
|
||||
))}
|
||||
</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 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]">
|
||||
Highland Group RDA is a member of the
|
||||
National Riding for the Disabled
|
||||
|
|
@ -216,54 +150,25 @@ export const Desktop = (): JSX.Element => {
|
|||
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"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<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
|
||||
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>
|
||||
<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>
|
||||
<SiteFooter />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import React from "react";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
|
@ -32,29 +34,10 @@ const newsItems = [
|
|||
export const News = (): 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>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
|
||||
/>
|
||||
|
||||
<main className="w-full">
|
||||
<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>
|
||||
</section>
|
||||
<SiteFooter />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import React from "react";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
|
@ -11,29 +13,10 @@ const navigationItems = [
|
|||
export const SupportUs = (): 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>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
|
||||
/>
|
||||
|
||||
<main className="w-full">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue