187 lines
11 KiB
TypeScript
187 lines
11 KiB
TypeScript
import React from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { SiteHeader } from "@/components/SiteHeader";
|
|
import { SiteFooter } from "@/components/SiteFooter";
|
|
import { usePageMeta } from "@/lib/seo";
|
|
|
|
const navigationItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "News", href: "/news" },
|
|
{ label: "Support Us", href: "/support" },
|
|
{ label: "Contact", href: "/contact" },
|
|
];
|
|
|
|
const cardData = [
|
|
{
|
|
title: "About Us",
|
|
imageUrl: "/about-640.webp",
|
|
imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
|
|
href: "/about",
|
|
},
|
|
{
|
|
title: "Support Us",
|
|
imageUrl: "/support-640.webp",
|
|
imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
|
|
href: "/support",
|
|
},
|
|
{
|
|
title: "Contact",
|
|
imageUrl: "/contact-640.webp",
|
|
imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
|
|
href: "/contact",
|
|
},
|
|
];
|
|
|
|
export const Desktop = (): JSX.Element => {
|
|
usePageMeta({ title: "Home", path: "/" });
|
|
return (
|
|
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
|
<main className="w-full">
|
|
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
|
|
<div className="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden">
|
|
<img
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
alt=""
|
|
src="/Samantha-and-Connolly-1280.webp"
|
|
srcSet="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
|
sizes="100vw"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
<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-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
|
|
<span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
|
|
Enriching lives through horses in
|
|
the{" "}
|
|
</span>
|
|
<span className="underline">Highlands</span>
|
|
<span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
|
|
{" "}
|
|
since{" "}
|
|
</span>
|
|
<span className="underline">1975</span>
|
|
<span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
|
|
.
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="relative pb-16 sm:pb-[42px]">
|
|
<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-[#f5f1e8] 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
|
|
physical or mental disabilities through
|
|
activities with our horses and ponies."
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<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"
|
|
>
|
|
<img
|
|
className="w-full h-full object-contain"
|
|
alt="Donate via JustGiving"
|
|
src="/Button.webp"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0">
|
|
<div className="w-full">
|
|
<div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
|
|
<div className="text-center">
|
|
<p className="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
|
|
Find out more about who we are, what we do
|
|
and how you can support us to help make a
|
|
difference.
|
|
</p>
|
|
<div className="mt-4 mx-auto h-[2px] w-16 bg-black/60" />
|
|
</div>
|
|
|
|
<div className="mt-8 sm:mt-[60px]">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
|
|
{cardData.map((card, index) => (
|
|
<Card
|
|
key={index}
|
|
className="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
|
|
>
|
|
<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}
|
|
>
|
|
<CardContent className="relative p-2.5 h-full flex flex-col overflow-hidden">
|
|
<img
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
alt={`${card.title} background`}
|
|
src={card.imageUrl}
|
|
srcSet={
|
|
card.imageSrcSet
|
|
}
|
|
sizes="(min-width: 640px) 33vw, 100vw"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<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-6 sm:mt-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
|
|
Association (RDA), and of the Grampian
|
|
and Highland Regional RDA.
|
|
<br />
|
|
<br />
|
|
We are a registered Scottish Charitable
|
|
Incorporated Organisation (SC007357).
|
|
</div>
|
|
<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.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<SiteFooter fullBleedOnMobile />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|