233 lines
14 KiB
TypeScript
233 lines
14 KiB
TypeScript
import React from "react";
|
|
|
|
const navigationItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "News", href: "/news" },
|
|
{ label: "Support Us", href: "/support" },
|
|
{ label: "Contact", href: "/contact" },
|
|
];
|
|
|
|
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>
|
|
</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="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="bg-white/70 px-6 py-6">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
|
Samantha's Story
|
|
</h3>
|
|
<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
|
|
physical and mental wellbeing, but helped
|
|
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>
|
|
</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>
|
|
</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>
|
|
</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-6 sm:py-8">
|
|
<h2 className="[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">
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Breagh
|
|
</h3>
|
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
|
13.2hh · Mare · 15 yo
|
|
<br />
|
|
She is very willing and independent
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Connolly
|
|
</h3>
|
|
<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
|
|
friend
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Harley
|
|
</h3>
|
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
|
15.3hh · Gelding · 15 yo
|
|
<br />
|
|
He is the boss but very obliging
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Puzzle
|
|
</h3>
|
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
|
15.3hh · Mare · 14 yo
|
|
<br />
|
|
She is very sensitive and gentle
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Lady Suede
|
|
</h3>
|
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
|
13hh · Mare · 23 yo
|
|
<br />
|
|
RIP October 2024
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/70 px-5 py-5">
|
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
|
|
Wispa
|
|
</h3>
|
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
|
14.2hh · Gelding · 15 yo
|
|
<br />
|
|
Wispa is cute and very cheeky!
|
|
</p>
|
|
</div>
|
|
</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>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|