Apply v3 redesign to homepage, about, events, and footer
- index.astro: full redesign — fixed sticky nav, new hero with kicker/green accent, video section, yellow intro strip, editorial CTA cards with hover expansion, sponsors section - about.astro: redesign — mission blockquote, who/what two-col, stats cards, ponies panel + profiles grid, testimonials, volunteers panel, location, CTA strip - events/index.astro: redesign — hero, upcoming events strip, news feed with live category filter pills, newsletter section; adds category to all 6 articles - events/page/[page].astro: updated to match new card grid visual - SiteFooter.astro: three-column layout (brand / quick links / find us) with bottom copyright bar - news.ts: adds category field to NewsArticle type, defaults to "News" - news/*.md: adds category frontmatter to all articles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir
parent
780e5cd00d
commit
cdec660d10
12 changed files with 1299 additions and 867 deletions
|
|
@ -1,50 +1,115 @@
|
|||
---
|
||||
const { fullBleedOnMobile = false } = Astro.props;
|
||||
const outerClass = fullBleedOnMobile
|
||||
? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
|
||||
: "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
|
||||
|
||||
const quickLinks = [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Support Us", href: "/support-us" },
|
||||
{ label: "Volunteer Application", href: "/volunteer-application" },
|
||||
{ label: "Participant Application", href: "/participant-application" },
|
||||
{ label: "News", href: "/events" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Accessibility", href: "/accessibility" },
|
||||
{ label: "Privacy", href: "/privacy" },
|
||||
];
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
<footer class={outerClass}>
|
||||
<div class="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8">
|
||||
<div class="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
|
||||
<p class="font-semibold">
|
||||
Highland Group RDA is a registered charity in
|
||||
<br />
|
||||
Scotland
|
||||
|
||||
<footer class="w-full bg-[#d6d6d6] border-t border-black/15">
|
||||
<div class="max-w-[1280px] mx-auto px-6 sm:px-14 pt-12 pb-9">
|
||||
|
||||
<!-- 3-column grid -->
|
||||
<div class="grid grid-cols-1 gap-10 sm:grid-cols-3 sm:gap-12 mb-10">
|
||||
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<a href="/" aria-label="Highland Group RDA home">
|
||||
<img
|
||||
src="/figmaAssets/rdalogo-1.svg"
|
||||
alt="Highland Group RDA"
|
||||
class="h-12 mb-5 block"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
<p class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/65 leading-[1.65] max-w-[280px]">
|
||||
Enriching lives through horses in the Highlands since 1975.
|
||||
Registered Scottish Charity
|
||||
<a
|
||||
class="underline"
|
||||
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>SC007357</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick links -->
|
||||
<div>
|
||||
<p class="[font-family:'Public_Sans',sans-serif] font-extrabold text-[13px] tracking-[0.12em] uppercase text-black mb-4">
|
||||
Quick links
|
||||
</p>
|
||||
<nav>
|
||||
<ul class="flex flex-col gap-2.5">
|
||||
{quickLinks.map((link) => (
|
||||
<li>
|
||||
<a
|
||||
class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/70 hover:underline"
|
||||
href={link.href}
|
||||
>
|
||||
SC007357
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Find us -->
|
||||
<div>
|
||||
<p class="[font-family:'Public_Sans',sans-serif] font-extrabold text-[13px] tracking-[0.12em] uppercase text-black mb-4">
|
||||
Find us
|
||||
</p>
|
||||
<div class="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="font-semibold">
|
||||
Highland Group RDA, Sandycroft, Reelig, Kirkhill, IV5 7PP
|
||||
</p>
|
||||
<p class="font-semibold">
|
||||
Email:
|
||||
<address class="not-italic [font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/70 leading-[1.8]">
|
||||
Sandycroft, Reelig<br />
|
||||
Kirkhill, IV5 7PP<br />
|
||||
<br />
|
||||
<a
|
||||
class="underline"
|
||||
href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
|
||||
>
|
||||
info@highlandgrouprda.org.uk
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-4 font-semibold">
|
||||
<a class="underline" href="/privacy">Privacy Policy</a>
|
||||
·
|
||||
<a class="underline" href="/accessibility">Accessibility</a>
|
||||
</p>
|
||||
<p class="mt-4 font-semibold">
|
||||
Site designed by
|
||||
<a class="underline" href="https://muir.in" target="_blank" rel="noreferrer">
|
||||
Calum Muir
|
||||
</address>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<a
|
||||
href="/facebook"
|
||||
aria-label="Highland Group RDA on Facebook"
|
||||
class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/25 text-black hover:border-black/50 transition-colors"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="border-t border-black/15 pt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between flex-wrap">
|
||||
<p class="[font-family:'Public_Sans',sans-serif] font-semibold text-[13px] text-black/45">
|
||||
© {year} Highland Group RDA · SC007357 · Member of National RDA & Grampian and Highland Regional RDA
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<a class="[font-family:'Public_Sans',sans-serif] font-semibold text-[13px] text-black/45 underline hover:text-black/65" href="/accessibility">
|
||||
Accessibility
|
||||
</a>
|
||||
<a class="[font-family:'Public_Sans',sans-serif] font-semibold text-[13px] text-black/45 underline hover:text-black/65" href="/privacy">
|
||||
Privacy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@ date: "2024-06-01"
|
|||
summary: "Volunteers summer 2024"
|
||||
image: "/Vols5-2880w-1024x768.avif"
|
||||
slug: "volunteers-summer-2024"
|
||||
category: "News"
|
||||
---
|
||||
We welcomed a group of our volunteers to the centre for a catch up and discussion about upcoming events. It’s always great to get together! Find out how you can help out by **[Volunteering for us](/support-us)**.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: "2024-07-01"
|
|||
summary: "Summer awards 2024"
|
||||
image: "/Awardtime-1920w-768x1024.avif"
|
||||
slug: "summer-awards-2024"
|
||||
category: "Events"
|
||||
---
|
||||
Last week we had the pleasure of our awards ceremony. It’s always fantastic to see the progress of our riders, ponies and everyone involved in Highland Group RDA. Samantha received an award for.., read <a href="/Star-Participants-Samantha-s-story.pdf" target="_blank" rel="noreferrer">Samantha's story</a>
|
||||
.
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@ date: "2024-10-01"
|
|||
summary: "Race night"
|
||||
image: "/race-night.avif"
|
||||
slug: "race-night"
|
||||
category: "Fundraising"
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: "2025-12-19"
|
|||
summary: "Important news to share with the community."
|
||||
image: "/important-news.png"
|
||||
slug: "important-news"
|
||||
category: "News"
|
||||
---
|
||||
|
||||
The Highland Riding for the Disabled Group (SCIO 007357) has been operating from
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: "2026-01-12"
|
|||
summary: "Important news for January 2026"
|
||||
image: "/news/900px-logo.png"
|
||||
slug: "important-news-january-2026"
|
||||
category: "News"
|
||||
---
|
||||
Reelig Estate accepted Highland RDA Group SCIO's decision to terminate the Group's lease agreement at Sandycroft with effect from the end of December 2025. They agreed to enter into a temporary agreement for a grazing licence until the end of February, enabling the group to continue negotiations with an alternative venue. Since exploring that venue other ways forward have all proved unviable. The current Trustees recognise that in order to secure the Group's future, a refreshed Board of Trustees should be formed as soon as practicable with a view to taking Highland Group forward. Once the new Trustees are in place and with the support of the landlords (Reelig Estate), the Group could be in a position to discuss future lease arrangements.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: "2026-03-01"
|
|||
summary: "Four new Trustees have joined Highland RDA, bringing fresh enthusiasm as the Group looks ahead to restarting activities."
|
||||
image: "/news.webp"
|
||||
slug: "new-trustees"
|
||||
category: "News"
|
||||
---
|
||||
## A New Chapter for Highland RDA
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,13 @@ export type NewsArticle = {
|
|||
summary: string;
|
||||
image?: string;
|
||||
slug: string;
|
||||
category: string;
|
||||
body: string;
|
||||
html: string;
|
||||
};
|
||||
|
||||
type Frontmatter = Partial<
|
||||
Pick<NewsArticle, "title" | "date" | "summary" | "image" | "slug">
|
||||
Pick<NewsArticle, "title" | "date" | "summary" | "image" | "slug" | "category">
|
||||
>;
|
||||
|
||||
const newsModules = import.meta.glob("/src/content/news/*.md", {
|
||||
|
|
@ -53,6 +54,7 @@ export const newsArticles: NewsArticle[] = Object.entries(newsModules)
|
|||
summary: frontmatter.summary || "",
|
||||
image: frontmatter.image,
|
||||
slug,
|
||||
category: frontmatter.category || "News",
|
||||
body,
|
||||
html: marked.parse(body) as string,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,372 +12,417 @@ const pageSeo = {
|
|||
"Highland Group RDA, about Highland RDA, RDA charity, volunteer-led charity Scotland, therapeutic riding, equestrian therapy Highlands",
|
||||
canonicalPath: "/about",
|
||||
};
|
||||
|
||||
const stats = [
|
||||
{ number: "1975", label: "Founded" },
|
||||
{ number: "50+", label: "Years serving the Highlands" },
|
||||
{ number: "Free", label: "Sessions for all participants" },
|
||||
{ number: "Tue–Fri", label: "Morning sessions" },
|
||||
];
|
||||
|
||||
const ponies = [
|
||||
{ name: "Breagh", img: "/Breagh-bc8e70e8-2880w.webp", details: "13.2hh · Mare · 15 yo", desc: "She is very willing and independent", pos: "50% 50%" },
|
||||
{ name: "Connolly", img: "/connolly-73f3e69f-2880w-2.webp", details: "14.2hh · Gelding · 16 yo", desc: "A true gentleman and everyone's friend", pos: "50% 50%" },
|
||||
{ name: "Harley", img: "/Harley-6ece9eca-2880w.webp", details: "15.3hh · Gelding · 15 yo", desc: "He is the boss but very obliging", pos: "50% 50%" },
|
||||
{ name: "Puzzle", img: "/puzzle-5de6e325-2880w.webp", details: "15.3hh · Mare · 14 yo", desc: "She is very sensitive and gentle", pos: "50% 50%" },
|
||||
{ name: "Lady Suede", img: "/Suede-2880w.webp", details: "13hh · Mare · 23 yo", desc: "RIP October 2024", pos: "50% 50%", memorial: true },
|
||||
{ name: "Wispa", img: "/Wispa-2880w.webp", details: "14.2hh · Gelding · 15 yo", desc: "RIP 2025", pos: "50% 20%", memorial: true },
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
"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.",
|
||||
"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.",
|
||||
"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.",
|
||||
"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.",
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout {...pageSeo}>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<Fragment slot="head">
|
||||
<link
|
||||
rel="preload"
|
||||
as="image"
|
||||
href="/about-960.webp"
|
||||
imagesrcset="/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w"
|
||||
imagesizes="100vw"
|
||||
/>
|
||||
</Fragment>
|
||||
|
||||
<style>
|
||||
#site-nav {
|
||||
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
||||
}
|
||||
#site-nav.scrolled {
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.anim-fade-up { animation: fadeUp 0.9s ease both; }
|
||||
|
||||
.panel-img { transition: transform 0.55s ease; }
|
||||
.panel-wrap:hover .panel-img { transform: scale(1.03); }
|
||||
|
||||
.stat-card { transition: transform 0.25s ease; }
|
||||
.stat-card:hover { transform: translateY(-3px); }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.split-panel { flex-direction: column !important; }
|
||||
.split-panel-img { flex: none !important; height: 260px; }
|
||||
.split-panel-text { padding: 40px 24px !important; }
|
||||
.who-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||||
.location-grid { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Fixed nav -->
|
||||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
|
||||
>
|
||||
</div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div
|
||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
||||
>
|
||||
<div
|
||||
class="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
|
||||
class="[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 class="mt-3 h-[2px] w-10 bg-white/70"></div>
|
||||
<h1
|
||||
class="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
|
||||
class="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
|
||||
class="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>
|
||||
<a
|
||||
class="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"
|
||||
>
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="relative w-full overflow-hidden" style="min-height: 68vh;">
|
||||
<img
|
||||
class="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.webp"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
style="object-position: 50% 42%;"
|
||||
alt=""
|
||||
src="/about-960.webp"
|
||||
srcset="/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w"
|
||||
sizes="100vw"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
style="background: linear-gradient(160deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.55) 100%);"
|
||||
/>
|
||||
<div
|
||||
class="relative flex flex-col justify-end"
|
||||
style="min-height: 68vh; padding: 120px 28px 64px;"
|
||||
>
|
||||
<div class="anim-fade-up" style="max-width: 700px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
||||
About Us
|
||||
</p>
|
||||
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
||||
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 58px); color: #F6F1E8; line-height: 1.1;">
|
||||
Enriching lives through horses in the Highlands since 1975.
|
||||
</h1>
|
||||
<p style="margin-top: 22px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.85); line-height: 1.65; max-width: 580px;">
|
||||
We are a voluntary organisation based at Sandycroft, Reelig, Kirkhill — providing free therapeutic and recreational riding for people with disabilities across the Highlands.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── MISSION ── -->
|
||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 860px; margin: 0 auto; text-align: center;">
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 28px;" />
|
||||
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: #F6F1E8; line-height: 1.55;">
|
||||
"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 style="width: 36px; height: 2px; background: #7DA371; margin: 28px auto 0;" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── WHO WE ARE / WHAT WE DO ── -->
|
||||
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||
<div class="who-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px;">
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">Who we are</p>
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||||
A community of volunteers, coaches, and horses.
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
|
||||
Highland Group RDA is entirely self-funded and run by committed volunteers and qualified coaches. We have been part of the community for over five decades, welcoming riders with a wide range of physical and mental disabilities.
|
||||
</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||||
We are a member of the national Riding for the Disabled Association (RDA) and the Grampian and Highland Regional RDA, and a registered Scottish Charitable Incorporated Organisation (<a href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357" target="_blank" rel="noreferrer" style="text-decoration: underline;">SC007357</a>).
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">What we do</p>
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||||
Riding, carriage driving, and so much more.
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
|
||||
We provide free riding and carriage driving sessions for participants with a wide range of disabilities. Working with horses improves balance, coordination, confidence, and provides a uniquely meaningful interaction with animals.
|
||||
</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||||
Sessions run Tuesday to Friday mornings from our base at Sandycroft. Each session is supported by trained volunteers and supervised by qualified coaches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── STATS ── -->
|
||||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1100px; margin: 0 auto;">
|
||||
<div class="stats-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;">
|
||||
{stats.map((s) => (
|
||||
<div class="stat-card" style="background: #d6d6d6; border-radius: 7px; padding: 36px 28px; text-align: center;">
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(28px, 3vw, 42px); color: #7DA371; line-height: 1;">
|
||||
{s.number}
|
||||
</p>
|
||||
<p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.6); letter-spacing: 0.05em; text-transform: uppercase;">
|
||||
{s.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── OUR PONIES (image left, dark text right) ── -->
|
||||
<section class="split-panel" style="display: flex; width: 100%; min-height: 480px; overflow: hidden;">
|
||||
<div class="panel-wrap split-panel-img" style="flex: 0 0 55%; position: relative; overflow: hidden;">
|
||||
<img
|
||||
class="panel-img"
|
||||
src="/alineofponies-1920w.webp"
|
||||
alt="Our ponies"
|
||||
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="split-panel-text" style="flex: 1 1 0; background: #1e2e1a; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
|
||||
Our ponies
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #F6F1E8; line-height: 1.15; margin-bottom: 20px;">
|
||||
The heart of everything we do.
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 16px;">
|
||||
Our ponies are carefully selected and trained to work safely with riders of all abilities. They are well cared for, happy, and central to the therapeutic experience we offer.
|
||||
</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 32px;">
|
||||
You can support them directly by sponsoring a pony — covering the costs of hoof trimming, hay, vet visits, and more.
|
||||
</p>
|
||||
<a
|
||||
href="/support-us"
|
||||
style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Sponsor a pony
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div
|
||||
class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"
|
||||
>
|
||||
<h2
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
||||
>
|
||||
Our Star Participants
|
||||
</h2>
|
||||
<p
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/60"
|
||||
>
|
||||
Stories and testimonials
|
||||
<!-- ── PONY PROFILES ── -->
|
||||
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||||
Meet the ponies
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;">
|
||||
{ponies.map((pony) => (
|
||||
<div style={`background: ${pony.memorial ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.55)'}; border-radius: 7px; overflow: hidden;`}>
|
||||
<div style="position: relative; height: 180px; overflow: hidden;">
|
||||
<img
|
||||
src={pony.img}
|
||||
alt={pony.name}
|
||||
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos}; ${pony.memorial ? 'filter: grayscale(40%);' : ''}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_0.95fr]"
|
||||
>
|
||||
<div class="bg-white/70 px-6 py-6">
|
||||
<p
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70"
|
||||
>
|
||||
Featured story
|
||||
</p>
|
||||
<h3
|
||||
class="mt-2 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl"
|
||||
>
|
||||
Samantha's Story
|
||||
<div style="padding: 18px 20px;">
|
||||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #000; margin-bottom: 6px;">
|
||||
{pony.name}
|
||||
</h3>
|
||||
<div
|
||||
class="mt-4 h-[200px] sm:h-[260px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/Samantha-sStory-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 style={`font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: ${pony.memorial ? 'rgba(0,0,0,0.4)' : '#7DA371'}; margin-bottom: 4px;`}>
|
||||
{pony.details}
|
||||
</p>
|
||||
<p style={`font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: ${pony.memorial ? 'rgba(0,0,0,0.45)' : 'rgba(0,0,0,0.65)'}; line-height: 1.5;`}>
|
||||
{pony.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── TESTIMONIALS ── -->
|
||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
|
||||
What families say
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
|
||||
{testimonials.map((quote) => (
|
||||
<blockquote style="background: rgba(255,255,255,0.07); border-radius: 7px; padding: 28px; position: relative;">
|
||||
<div style="width: 24px; height: 2px; background: #7DA371; margin-bottom: 16px;" />
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 15px; color: rgba(246,241,232,0.85); line-height: 1.65;">
|
||||
"{quote}"
|
||||
</p>
|
||||
</blockquote>
|
||||
))}
|
||||
</div>
|
||||
<div style="margin-top: 40px; padding: 28px 32px; background: rgba(255,255,255,0.05); border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 10px;">Featured story</p>
|
||||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #F6F1E8; line-height: 1.2; margin-bottom: 10px;">Samantha's Story</h3>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(246,241,232,0.75); line-height: 1.6; max-width: 560px;">
|
||||
Read how Samantha's RDA sessions have not only improved her physical and mental wellbeing, but helped her overcome her prognosis of never being able to walk.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="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"
|
||||
style="flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Full story (PDF)
|
||||
Read her story (PDF)
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/70 px-6 py-6">
|
||||
<p
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70"
|
||||
>
|
||||
Testimonials
|
||||
</p>
|
||||
<div class="mt-4 space-y-4">
|
||||
<blockquote
|
||||
class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm"
|
||||
>
|
||||
<span
|
||||
class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20"
|
||||
>“</span
|
||||
>
|
||||
<p
|
||||
class="[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
|
||||
class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm"
|
||||
>
|
||||
<span
|
||||
class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20"
|
||||
>“</span
|
||||
>
|
||||
<p
|
||||
class="[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 class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<blockquote
|
||||
class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm"
|
||||
>
|
||||
<span
|
||||
class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20"
|
||||
>“</span
|
||||
>
|
||||
<p
|
||||
class="[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
|
||||
class="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm"
|
||||
>
|
||||
<span
|
||||
class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20"
|
||||
>“</span
|
||||
>
|
||||
<p
|
||||
class="[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
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pt-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="h-px w-24 bg-black/20"></div>
|
||||
<h2
|
||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
||||
>
|
||||
Meet the ponies
|
||||
<!-- ── OUR VOLUNTEERS (text left, image right) ── -->
|
||||
<section class="split-panel" style="display: flex; width: 100%; min-height: 420px; overflow: hidden;">
|
||||
<div class="split-panel-text" style="flex: 1 1 0; background: #d6d6d6; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||||
Volunteers & coaches
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||||
We couldn't do it without you.
|
||||
</h2>
|
||||
<div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||
<div class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Breagh
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/Breagh-bc8e70e8-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 16px;">
|
||||
Our sessions are made possible by a dedicated team of volunteers — side walkers, horse leaders, groomers, and more. You don't need any horse experience to join us.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Connolly
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/connolly-73f3e69f-2880w-2.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 32px;">
|
||||
Qualified RDA coaches supervise all sessions and provide ongoing training and support for our volunteer team.
|
||||
</p>
|
||||
<a
|
||||
href="/volunteer-application"
|
||||
style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Apply to volunteer
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Harley
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/Harley-6ece9eca-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Puzzle
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/puzzle-5de6e325-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Lady Suede
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
|
||||
style="background-image: url(/Suede-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="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 class="bg-white/70 px-5 py-5">
|
||||
<h3
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl"
|
||||
>
|
||||
Wispa
|
||||
</h3>
|
||||
<div
|
||||
class="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_20%]"
|
||||
style="background-image: url(/Wispa-2880w.webp);"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"
|
||||
>
|
||||
14.2hh · Gelding · 15 yo
|
||||
<br />
|
||||
RIP 2025
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-wrap split-panel-img" style="flex: 0 0 50%; position: relative; overflow: hidden;">
|
||||
<img
|
||||
class="panel-img"
|
||||
src="/Vols5-2880w-1024x768.avif"
|
||||
alt="Our volunteers"
|
||||
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="h-px w-24 bg-black/20"></div>
|
||||
<h2
|
||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
||||
>
|
||||
Apple foraging video
|
||||
<!-- ── LOCATION ── -->
|
||||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||
<div class="location-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;">
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||||
Find us
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #000; line-height: 1.15; margin-bottom: 20px;">
|
||||
Based at Sandycroft, Reelig.
|
||||
</h2>
|
||||
<div class="mt-6 overflow-hidden rounded-[7px] bg-black">
|
||||
<video
|
||||
class="w-full h-auto"
|
||||
src="/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4"
|
||||
controls
|
||||
preload="metadata"></video>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 8px;">
|
||||
We are based at Sandycroft, Reelig, Kirkhill — on the outskirts of Inverness.
|
||||
</p>
|
||||
<address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.8; margin-bottom: 20px;">
|
||||
Sandycroft, Reelig<br />
|
||||
Kirkhill<br />
|
||||
IV5 7PP
|
||||
</address>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.6;">
|
||||
Sessions: Tuesday to Friday mornings
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
style="margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #7DA371; color: #000; border-radius: 9999px; padding: 12px 26px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Contact us
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="https://maps.google.com/?q=Sandycroft,Reelig,Kirkhill,IV5+7PP"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="Open location in Google Maps"
|
||||
style="position: relative; height: 340px; border-radius: 7px; overflow: hidden; background: #d6d6d6; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border: 1px solid rgba(0,0,0,0.1); text-decoration: none;"
|
||||
>
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#7DA371" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.5); letter-spacing: 0.06em; text-transform: uppercase;">View on Google Maps</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.35); text-align: center; max-width: 220px;">Sandycroft, Reelig, Kirkhill, IV5 7PP</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── CTA STRIP ── -->
|
||||
<section style="background: #f5d445; padding: clamp(36px, 6vw, 52px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;">
|
||||
<div style="max-width: 640px;">
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); color: #000; line-height: 1.3; margin-bottom: 8px;">
|
||||
We are able to carry out our life-changing activities thanks to you.
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.65); line-height: 1.6;">
|
||||
Donate, volunteer, or sponsor a pony — every contribution makes a real difference.
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center;">
|
||||
<a
|
||||
href="/support-us"
|
||||
style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: white; border-radius: 9999px; padding: 14px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Support us
|
||||
</a>
|
||||
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||||
<img
|
||||
src="/Button.webp"
|
||||
alt="Donate via JustGiving"
|
||||
style="height: 46px; object-fit: contain; display: block;"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</main>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById("site-nav");
|
||||
if (nav) {
|
||||
window.addEventListener("scroll", () => {
|
||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
}
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,10 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
|
|||
import SiteHeader from "../../components/SiteHeader.astro";
|
||||
import SiteFooter from "../../components/SiteFooter.astro";
|
||||
import { navigationItems } from "../../lib/navigation";
|
||||
import { newsArticles, formatNewsDate } from "../../lib/news";
|
||||
import { newsArticles } from "../../lib/news";
|
||||
|
||||
const PER_PAGE = 4;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const currentPage = 1;
|
||||
const pagedArticles = newsArticles.slice(0, PER_PAGE);
|
||||
const pageHref = (page) => (page === 1 ? "/events" : `/events/page/${page}`);
|
||||
const featured = newsArticles[0];
|
||||
const rest = newsArticles.slice(1);
|
||||
|
||||
const pageSeo = {
|
||||
title: "News",
|
||||
|
|
@ -19,158 +16,371 @@ const pageSeo = {
|
|||
"Highland RDA news, RDA events, disability riding stories, RDA updates, equestrian therapy news, Highlands charity events",
|
||||
canonicalPath: "/events",
|
||||
};
|
||||
|
||||
const categoryColors: Record<string, { bg: string; text: string }> = {
|
||||
News: { bg: "#e8f0e7", text: "#4a7040" },
|
||||
Events: { bg: "#e7eaf5", text: "#3a4a80" },
|
||||
Fundraising: { bg: "#fdf3cc", text: "#7a6010" },
|
||||
};
|
||||
|
||||
function formatDate(date: string) {
|
||||
const d = new Date(date);
|
||||
if (isNaN(d.getTime())) return date;
|
||||
return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
|
||||
}
|
||||
|
||||
const upcomingEvents = [
|
||||
{ date: "Spring 2026", day: "TBC", title: "Sessions restart at new venue", time: "TBC", type: "Sessions" },
|
||||
{ date: "Summer 2026", day: "TBC", title: "Open Day — venue to be confirmed", time: "TBC", type: "Events" },
|
||||
{ date: "Summer 2026", day: "TBC", title: "Fundraising coffee morning", time: "TBC", type: "Fundraising" },
|
||||
];
|
||||
|
||||
const typeColors: Record<string, string> = {
|
||||
Events: "#7DA371",
|
||||
Sessions: "#5b8fbe",
|
||||
Fundraising: "#b8962e",
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout {...pageSeo}>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<style>
|
||||
#site-nav {
|
||||
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
||||
}
|
||||
#site-nav.scrolled {
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.anim-fade-up { animation: fadeUp 0.9s ease both; }
|
||||
|
||||
.filter-pill {
|
||||
padding: 9px 22px;
|
||||
border-radius: 9999px;
|
||||
border: 1.5px solid rgba(0,0,0,0.18);
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: #000;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.filter-pill:hover { border-color: #7DA371; color: #7DA371; }
|
||||
.filter-pill.active { background: #7DA371; border-color: #7DA371; color: #fff; }
|
||||
|
||||
.post-card { transition: transform 0.28s ease; }
|
||||
.post-card:hover { transform: translateY(-4px); }
|
||||
.post-card:hover .post-title { text-decoration: underline; }
|
||||
.post-card-img { transition: transform 0.5s ease; }
|
||||
.post-card:hover .post-card-img { transform: scale(1.05); }
|
||||
|
||||
.event-row { transition: background 0.2s ease; }
|
||||
.event-row:hover { background: rgba(125,163,113,0.09) !important; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.events-grid { grid-template-columns: 80px 1fr !important; }
|
||||
.events-grid-time, .events-grid-badge { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Fixed nav -->
|
||||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style="background-image: url(/news.webp);"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div
|
||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
||||
>
|
||||
<div
|
||||
class="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
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
|
||||
>
|
||||
Latest News
|
||||
</p>
|
||||
<div class="mt-3 h-[2px] w-10 bg-white/70"></div>
|
||||
<h1
|
||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]"
|
||||
>
|
||||
Updates from Highland Group RDA
|
||||
</h1>
|
||||
<p
|
||||
class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[700px]"
|
||||
>
|
||||
Stories, milestones, and updates from the yard,
|
||||
our riders, volunteers, and supporters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="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"
|
||||
>
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="relative w-full overflow-hidden" style="min-height: 50vh;">
|
||||
<img
|
||||
class="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.webp"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
style="object-position: 50% 30%;"
|
||||
alt=""
|
||||
src="/news.webp"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);"
|
||||
/>
|
||||
<div
|
||||
class="relative flex flex-col justify-end"
|
||||
style="min-height: 50vh; padding: 120px 28px 64px;"
|
||||
>
|
||||
<div class="anim-fade-up" style="max-width: 600px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
||||
Events & News
|
||||
</p>
|
||||
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
||||
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
|
||||
What's on at Highland Group RDA.
|
||||
</h1>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
|
||||
Upcoming events, session news, and fundraising updates from our group.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{
|
||||
pagedArticles.map((item) => (
|
||||
<article>
|
||||
<a
|
||||
class="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
|
||||
href={`/events/${item.slug}`}
|
||||
aria-label={`Read ${item.title}`}
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
{item.image ? (
|
||||
<div
|
||||
class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
|
||||
style={`background-image: url(${item.image});`}
|
||||
/>
|
||||
) : null}
|
||||
<p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
{formatNewsDate(item.date)}
|
||||
<!-- ── UPCOMING EVENTS ── -->
|
||||
<section style="background: #1e2e1a; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
<div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap;">
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 10px;">
|
||||
Coming up
|
||||
</p>
|
||||
<div class="h-px w-full bg-black/20" />
|
||||
<h2 class="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
|
||||
{item.title}
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; line-height: 1.2;">
|
||||
Upcoming events & sessions
|
||||
</h2>
|
||||
<p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
{item.summary}
|
||||
</div>
|
||||
<a
|
||||
href="/contact"
|
||||
style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: rgba(246,241,232,0.6); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; flex-shrink: 0;"
|
||||
>
|
||||
Get in touch
|
||||
</a>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(255,255,255,0.1);">
|
||||
{upcomingEvents.map((ev) => (
|
||||
<div
|
||||
class="event-row"
|
||||
style="display: grid; grid-template-columns: 120px 1fr auto auto; gap: 24px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 6px;"
|
||||
>
|
||||
<div>
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #F6F1E8; line-height: 1;">
|
||||
{ev.date}
|
||||
</p>
|
||||
<span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
|
||||
Read more
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(246,241,232,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;">
|
||||
{ev.day}
|
||||
</p>
|
||||
</div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 16px; color: #F6F1E8; line-height: 1.35;">
|
||||
{ev.title}
|
||||
</p>
|
||||
<p class="events-grid-time" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(246,241,232,0.55); white-space: nowrap;">
|
||||
{ev.time}
|
||||
</p>
|
||||
<span
|
||||
class="events-grid-badge"
|
||||
style={`padding: 5px 14px; border-radius: 9999px; background: rgba(255,255,255,0.07); border: 1px solid ${typeColors[ev.type] || "#7DA371"}40; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${typeColors[ev.type] || "#7DA371"}; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;`}
|
||||
>
|
||||
{ev.type}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
{
|
||||
totalPages > 1 ? (
|
||||
<nav class="mt-8 flex flex-wrap items-center justify-center gap-2">
|
||||
{currentPage > 1 ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Previous
|
||||
</span>
|
||||
)}
|
||||
{Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => {
|
||||
const page = index + 1;
|
||||
const isActive = page === currentPage;
|
||||
return (
|
||||
<a
|
||||
class={`h-10 w-10 rounded-full border text-sm font-semibold [font-family:'Public_Sans',Helvetica] flex items-center justify-center ${
|
||||
isActive
|
||||
? "border-black bg-black text-white"
|
||||
: "border-black/20 text-black"
|
||||
}`}
|
||||
href={pageHref(page)}
|
||||
aria-current={
|
||||
isActive
|
||||
? "page"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{currentPage < totalPages ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Next
|
||||
</span>
|
||||
)}
|
||||
</nav>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</main>
|
||||
|
||||
<!-- ── NEWS FEED ── -->
|
||||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
|
||||
<!-- Header + filter pills -->
|
||||
<div style="display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 24px; flex-wrap: wrap;">
|
||||
<div>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin-bottom: 10px;">
|
||||
Latest
|
||||
</p>
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15;">
|
||||
News & updates
|
||||
</h2>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;" id="filter-pills">
|
||||
{["All", "News", "Events", "Fundraising"].map((cat) => (
|
||||
<button class={`filter-pill${cat === "All" ? " active" : ""}`} data-filter={cat}>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured post -->
|
||||
{featured && (
|
||||
<a
|
||||
id="featured-card"
|
||||
class="post-card"
|
||||
href={`/events/${featured.slug}`}
|
||||
data-category={featured.category}
|
||||
style="position: relative; height: 420px; border-radius: 7px; overflow: hidden; margin-bottom: 16px; display: block;"
|
||||
>
|
||||
{featured.image ? (
|
||||
<img
|
||||
src={featured.image}
|
||||
alt={featured.title}
|
||||
class="post-card-img"
|
||||
style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
) : (
|
||||
<div style="position: absolute; inset: 0; background: #1e2e1a;" />
|
||||
)}
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 65%);" />
|
||||
<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 40px;">
|
||||
<div style="display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;">
|
||||
<span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[featured.category]?.bg ?? "#d6d6d6"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[featured.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
|
||||
{featured.category}
|
||||
</span>
|
||||
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.55);">
|
||||
{formatDate(featured.date)}
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: white; line-height: 1.2; max-width: 700px; margin-bottom: 12px;">
|
||||
{featured.title}
|
||||
</h3>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.65; max-width: 620px;">
|
||||
{featured.summary}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<!-- Article grid -->
|
||||
<div id="post-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
|
||||
{rest.map((post) => (
|
||||
<a
|
||||
class="post-card"
|
||||
href={`/events/${post.slug}`}
|
||||
data-category={post.category}
|
||||
style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
|
||||
>
|
||||
<div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
|
||||
{post.image ? (
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
class="post-card-img"
|
||||
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
) : (
|
||||
<div style="width: 100%; height: 100%; background: #1e2e1a;" />
|
||||
)}
|
||||
</div>
|
||||
<div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
||||
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
||||
<span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[post.category]?.bg ?? "#c8c8c8"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[post.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
|
||||
{post.category}
|
||||
</span>
|
||||
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
|
||||
{formatDate(post.date)}
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #000; line-height: 1.3;">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.65; flex: 1;">
|
||||
{post.summary}
|
||||
</p>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #7DA371; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;">
|
||||
Read more
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Empty state (hidden by default, shown by JS) -->
|
||||
<div id="empty-state" style="display: none; text-align: center; padding: 60px 0;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.4);">
|
||||
No posts in this category yet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── NEWSLETTER ── -->
|
||||
<section style="background: #f5d445; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 780px; margin: 0 auto; text-align: center;">
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 30px); color: #000; line-height: 1.2; margin-bottom: 12px;">
|
||||
Stay up to date.
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.6); line-height: 1.65; margin-bottom: 28px;">
|
||||
Follow us on Facebook or get in touch directly — we share news, events, and updates with our community.
|
||||
</p>
|
||||
<div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
|
||||
<a
|
||||
href="/facebook"
|
||||
style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||||
</svg>
|
||||
Follow on Facebook
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
style="display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #000; border: 2px solid #000; border-radius: 9999px; padding: 11px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
||||
>
|
||||
Contact us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Scroll nav
|
||||
const nav = document.getElementById("site-nav");
|
||||
if (nav) {
|
||||
window.addEventListener("scroll", () => {
|
||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// Category filter pills
|
||||
const pills = document.querySelectorAll<HTMLButtonElement>(".filter-pill");
|
||||
const featured = document.getElementById("featured-card");
|
||||
const gridCards = document.querySelectorAll<HTMLElement>("#post-grid .post-card");
|
||||
const emptyState = document.getElementById("empty-state");
|
||||
|
||||
pills.forEach((pill) => {
|
||||
pill.addEventListener("click", () => {
|
||||
const filter = pill.dataset.filter ?? "All";
|
||||
|
||||
pills.forEach((p) => p.classList.remove("active"));
|
||||
pill.classList.add("active");
|
||||
|
||||
let visible = 0;
|
||||
|
||||
if (filter === "All") {
|
||||
if (featured) { (featured as HTMLElement).style.display = ""; visible++; }
|
||||
gridCards.forEach((c) => { c.style.display = ""; visible++; });
|
||||
} else {
|
||||
if (featured) {
|
||||
const show = (featured as HTMLElement).dataset.category === filter;
|
||||
(featured as HTMLElement).style.display = show ? "" : "none";
|
||||
if (show) visible++;
|
||||
}
|
||||
gridCards.forEach((c) => {
|
||||
const show = c.dataset.category === filter;
|
||||
c.style.display = show ? "" : "none";
|
||||
if (show) visible++;
|
||||
});
|
||||
}
|
||||
|
||||
if (emptyState) emptyState.style.display = visible === 0 ? "block" : "none";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -3,188 +3,202 @@ import BaseLayout from "../../../layouts/BaseLayout.astro";
|
|||
import SiteHeader from "../../../components/SiteHeader.astro";
|
||||
import SiteFooter from "../../../components/SiteFooter.astro";
|
||||
import { navigationItems } from "../../../lib/navigation";
|
||||
import { newsArticles, formatNewsDate } from "../../../lib/news";
|
||||
import { newsArticles } from "../../../lib/news";
|
||||
|
||||
export function getStaticPaths() {
|
||||
const PER_PAGE = 4;
|
||||
const PER_PAGE = 6;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const pages = Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => index + 1,
|
||||
).filter((page) => page > 1);
|
||||
|
||||
return pages.map((page) => ({
|
||||
params: { page: String(page) },
|
||||
}));
|
||||
return Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||
.filter((page) => page > 1)
|
||||
.map((page) => ({ params: { page: String(page) } }));
|
||||
}
|
||||
|
||||
const currentPage = Number(Astro.params.page ?? "1");
|
||||
const PER_PAGE = 4;
|
||||
const PER_PAGE = 6;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const start = (currentPage - 1) * PER_PAGE;
|
||||
const pagedArticles = newsArticles.slice(start, start + PER_PAGE);
|
||||
const pageHref = (page) => (page === 1 ? "/events" : `/events/page/${page}`);
|
||||
const pageHref = (page: number) => (page === 1 ? "/events" : `/events/page/${page}`);
|
||||
|
||||
const pageSeo = {
|
||||
title: `News - Page ${currentPage}`,
|
||||
title: `News — Page ${currentPage}`,
|
||||
description:
|
||||
"Stay updated with Highland Group RDA news, events, and stories. Discover how our riders, volunteers, and community are making a difference every day.",
|
||||
"Stay updated with Highland Group RDA news, events, and stories.",
|
||||
keywords:
|
||||
"Highland RDA news, RDA events, disability riding stories, RDA updates, equestrian therapy news, Highlands charity events",
|
||||
"Highland RDA news, RDA events, disability riding stories, RDA updates",
|
||||
canonicalPath: `/events/page/${currentPage}`,
|
||||
};
|
||||
|
||||
const categoryColors: Record<string, { bg: string; text: string }> = {
|
||||
News: { bg: "#e8f0e7", text: "#4a7040" },
|
||||
Events: { bg: "#e7eaf5", text: "#3a4a80" },
|
||||
Fundraising: { bg: "#fdf3cc", text: "#7a6010" },
|
||||
};
|
||||
|
||||
function formatDate(date: string) {
|
||||
const d = new Date(date);
|
||||
if (isNaN(d.getTime())) return date;
|
||||
return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
|
||||
}
|
||||
---
|
||||
|
||||
<BaseLayout {...pageSeo}>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<style>
|
||||
#site-nav {
|
||||
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
||||
}
|
||||
#site-nav.scrolled {
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.post-card { transition: transform 0.28s ease; }
|
||||
.post-card:hover { transform: translateY(-4px); }
|
||||
.post-card:hover .post-title { text-decoration: underline; }
|
||||
.post-card-img { transition: transform 0.5s ease; }
|
||||
.post-card:hover .post-card-img { transform: scale(1.05); }
|
||||
</style>
|
||||
|
||||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style="background-image: url(/news.webp);"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div
|
||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
||||
>
|
||||
<div
|
||||
class="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
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
|
||||
>
|
||||
Latest News
|
||||
</p>
|
||||
<div class="mt-3 h-[2px] w-10 bg-white/70"></div>
|
||||
<h1
|
||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]"
|
||||
>
|
||||
Updates from Highland Group RDA
|
||||
</h1>
|
||||
<p
|
||||
class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[700px]"
|
||||
>
|
||||
Stories, milestones, and updates from the yard,
|
||||
our riders, volunteers, and supporters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="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"
|
||||
>
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="relative w-full overflow-hidden" style="min-height: 50vh;">
|
||||
<img
|
||||
class="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.webp"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
style="object-position: 50% 30%;"
|
||||
alt=""
|
||||
src="/news.webp"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);"
|
||||
/>
|
||||
<div
|
||||
class="relative flex flex-col justify-end"
|
||||
style="min-height: 50vh; padding: 120px 28px 64px;"
|
||||
>
|
||||
<div style="max-width: 600px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
||||
Events & News — Page {currentPage}
|
||||
</p>
|
||||
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
||||
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1;">
|
||||
What's on at Highland Group RDA.
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{
|
||||
pagedArticles.map((item) => (
|
||||
<article>
|
||||
<!-- ── ARTICLE GRID ── -->
|
||||
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||
<div style="max-width: 1200px; margin: 0 auto;">
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px;">
|
||||
{pagedArticles.map((post) => (
|
||||
<a
|
||||
class="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
|
||||
href={`/events/${item.slug}`}
|
||||
aria-label={`Read ${item.title}`}
|
||||
class="post-card"
|
||||
href={`/events/${post.slug}`}
|
||||
style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
{item.image ? (
|
||||
<div
|
||||
class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
|
||||
style={`background-image: url(${item.image});`}
|
||||
<div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
|
||||
{post.image ? (
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
class="post-card-img"
|
||||
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
) : null}
|
||||
<p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
{formatNewsDate(item.date)}
|
||||
</p>
|
||||
<div class="h-px w-full bg-black/20" />
|
||||
<h2 class="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
|
||||
{item.title}
|
||||
) : (
|
||||
<div style="width: 100%; height: 100%; background: #1e2e1a;" />
|
||||
)}
|
||||
</div>
|
||||
<div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
||||
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
||||
<span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[post.category]?.bg ?? "#c8c8c8"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[post.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
|
||||
{post.category}
|
||||
</span>
|
||||
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
|
||||
{formatDate(post.date)}
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #000; line-height: 1.3;">
|
||||
{post.title}
|
||||
</h2>
|
||||
<p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
{item.summary}
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.65; flex: 1;">
|
||||
{post.summary}
|
||||
</p>
|
||||
<span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #7DA371; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;">
|
||||
Read more
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
{
|
||||
totalPages > 1 ? (
|
||||
<nav class="mt-8 flex flex-wrap items-center justify-center gap-2">
|
||||
|
||||
<!-- Pagination -->
|
||||
{totalPages > 1 && (
|
||||
<nav aria-label="Pagination" style="display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;">
|
||||
{currentPage > 1 ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage - 1)}
|
||||
style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
<span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
|
||||
Previous
|
||||
</span>
|
||||
)}
|
||||
{Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => {
|
||||
const page = index + 1;
|
||||
const isActive = page === currentPage;
|
||||
return (
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<a
|
||||
class={`h-10 w-10 rounded-full border text-sm font-semibold [font-family:'Public_Sans',Helvetica] flex items-center justify-center ${
|
||||
isActive
|
||||
? "border-black bg-black text-white"
|
||||
: "border-black/20 text-black"
|
||||
}`}
|
||||
href={pageHref(page)}
|
||||
aria-current={
|
||||
isActive
|
||||
? "page"
|
||||
: undefined
|
||||
}
|
||||
aria-current={page === currentPage ? "page" : undefined}
|
||||
style={`width: 40px; height: 40px; border-radius: 9999px; border: 1.5px solid ${page === currentPage ? "#000" : "rgba(0,0,0,0.2)"}; background: ${page === currentPage ? "#000" : "transparent"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: ${page === currentPage ? "#fff" : "#000"}; display: flex; align-items: center; justify-content: center; text-decoration: none;`}
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
)}
|
||||
))}
|
||||
{currentPage < totalPages ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage + 1)}
|
||||
style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
<span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
|
||||
Next
|
||||
</span>
|
||||
)}
|
||||
</nav>
|
||||
) : null
|
||||
}
|
||||
)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
|
||||
</main>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById("site-nav");
|
||||
if (nav) {
|
||||
window.addEventListener("scroll", () => {
|
||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
}
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -13,39 +13,29 @@ const pageSeo = {
|
|||
canonicalPath: "/",
|
||||
};
|
||||
|
||||
const cardData = [
|
||||
const ctaCards = [
|
||||
{
|
||||
title: "About Us",
|
||||
imageUrl: "/about-640.webp",
|
||||
imageSrcSet:
|
||||
"/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
title: "Support Us",
|
||||
imageUrl: "/support-640.webp",
|
||||
imageSrcSet:
|
||||
"/support-320.webp 320w, /support-480.webp 480w, /support-640.webp 640w, /support-960.webp 960w",
|
||||
label: "Fundraising",
|
||||
title: "Sponsor a pony",
|
||||
sub: "Your support keeps our ponies healthy and our sessions running — from hoof trimming to hay bales.",
|
||||
img: "/alineofponies-1920w.webp",
|
||||
objectPos: "50% 50%",
|
||||
href: "/support-us",
|
||||
},
|
||||
{
|
||||
title: "Contact Us",
|
||||
imageUrl: "/contact-640.webp",
|
||||
imageSrcSet:
|
||||
"/contact-320.webp 320w, /contact-480.webp 480w, /contact-640.webp 640w, /contact-960.webp 960w",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
title: "Apply to Volunteer",
|
||||
imageUrl: "/Vols5-2880w-1024x768.avif",
|
||||
imageSrcSet: "/Vols5-2880w-1024x768.avif 1024w",
|
||||
label: "Get involved",
|
||||
title: "Apply to volunteer",
|
||||
sub: "No horse experience needed. Sidestep walkers, groomers, fundraisers — all roles make a real difference.",
|
||||
img: "/Vols5-2880w-1024x768.avif",
|
||||
objectPos: "50% 30%",
|
||||
href: "/volunteer-application",
|
||||
},
|
||||
{
|
||||
title: "Apply to Participate",
|
||||
imageUrl: "/Samantha-and-Connolly-960.webp",
|
||||
imageSrcSet:
|
||||
"/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w",
|
||||
label: "Riding sessions",
|
||||
title: "Apply to participate",
|
||||
sub: "We welcome riders and carriage drivers with a wide range of physical and mental disabilities.",
|
||||
img: "/Samantha-and-Connolly-1280.webp",
|
||||
objectPos: "50% 38%",
|
||||
href: "/participant-application",
|
||||
},
|
||||
];
|
||||
|
|
@ -61,16 +51,108 @@ const cardData = [
|
|||
imagesizes="100vw"
|
||||
/>
|
||||
</Fragment>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
|
||||
<style>
|
||||
#site-nav {
|
||||
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
||||
}
|
||||
#site-nav.scrolled {
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.anim-fade-up { animation: fadeUp 1s ease both; }
|
||||
.anim-fade-up2 { animation: fadeUp 1s ease both 0.2s; }
|
||||
|
||||
.cta-editorial {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 520px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cta-card {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cta-card:hover { flex: 1.3 1 0; }
|
||||
.cta-card-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.cta-card:hover .cta-card-img { transform: scale(1.04); }
|
||||
.cta-sub, .cta-more {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.cta-card:hover .cta-sub { opacity: 1; }
|
||||
.cta-card:hover .cta-more { opacity: 1; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.cta-editorial { flex-direction: column; height: auto; }
|
||||
.cta-card { flex: none; height: 200px; }
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.video-embed iframe {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sponsor-logo {
|
||||
width: 140px;
|
||||
height: 64px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.scroll-indicator { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Fixed nav wrapper — transparent until scrolled -->
|
||||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section
|
||||
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0"
|
||||
>
|
||||
<div
|
||||
class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden"
|
||||
>
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="relative w-full overflow-hidden" style="min-height: 63vh;">
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
style="object-position: 50% 38%;"
|
||||
alt=""
|
||||
src="/Samantha-and-Connolly-1280.webp"
|
||||
srcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||
|
|
@ -80,162 +162,170 @@ const cardData = [
|
|||
decoding="async"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
|
||||
>
|
||||
</div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
class="absolute inset-0"
|
||||
style="background: linear-gradient(160deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.52) 100%);"
|
||||
/>
|
||||
|
||||
<!-- Hero content -->
|
||||
<div
|
||||
class="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]"
|
||||
>
|
||||
<div
|
||||
class="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
|
||||
>
|
||||
<h1
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]"
|
||||
>
|
||||
<span
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
|
||||
>
|
||||
Enriching lives through horses in the
|
||||
</span>
|
||||
<span class="underline">Highlands</span>
|
||||
<span
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
|
||||
>
|
||||
since
|
||||
</span>
|
||||
<span class="underline">1975</span>
|
||||
<span
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
|
||||
>.</span
|
||||
class="relative flex flex-col"
|
||||
style="min-height: 63vh; padding: 120px 28px 72px;"
|
||||
>
|
||||
<!-- Headline block -->
|
||||
<div class="anim-fade-up" style="max-width: 640px; margin-top: 16px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.75);">
|
||||
Highland Group RDA · Since 1975
|
||||
</p>
|
||||
<div style="margin-top: 14px; width: 48px; height: 2px; background: #7DA371;" />
|
||||
<h1 style="margin-top: 18px; font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 62px); color: #F6F1E8; line-height: 1.12;">
|
||||
Enriching lives through horses in the Highlands.
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-16 sm:pb-[42px]">
|
||||
<div class="flex justify-end px-4 sm:px-6">
|
||||
<blockquote
|
||||
class="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"
|
||||
|
||||
<!-- Mission blockquote -->
|
||||
<div
|
||||
class="anim-fade-up2"
|
||||
style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
|
||||
>
|
||||
"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."
|
||||
<div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
|
||||
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: #F6F1E8; line-height: 1.55; margin: 0;">
|
||||
"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>
|
||||
|
||||
<!-- Donate button (absolute) -->
|
||||
<a
|
||||
class="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"
|
||||
class="absolute"
|
||||
style="bottom: 40px; right: 28px;"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.webp"
|
||||
alt="Donate via JustGiving"
|
||||
style="height: 46px; object-fit: contain; display: block;"
|
||||
loading="eager"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<!-- Scroll indicator (absolute, hidden on mobile) -->
|
||||
<div
|
||||
class="scroll-indicator absolute"
|
||||
style="bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.6;"
|
||||
>
|
||||
<div style="width: 1px; height: 36px; background: white;" />
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: white;">
|
||||
Scroll
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── VIDEO ── -->
|
||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 56px);">
|
||||
<div style="max-width: 960px; margin: 0 auto;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; margin-bottom: 12px;">
|
||||
Our Story
|
||||
</p>
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 3vw, 38px); color: #F6F1E8; margin-bottom: 20px; line-height: 1.2; max-width: 600px;">
|
||||
What is Riding for the Disabled?
|
||||
</h2>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.65; max-width: 680px; margin-bottom: 40px;">
|
||||
Across the Highlands, we provide free riding and carriage driving sessions to people with a wide range of physical and mental disabilities — connecting them with our ponies in a way that's therapeutic, joyful, and life-changing.
|
||||
</p>
|
||||
<div class="video-embed" style="max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/eWOQN_mhA_k?rel=0&modestbranding=1"
|
||||
title="What is Riding for the Disabled Association (RDA)?"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── INTRO STRIP ── -->
|
||||
<section style="background: #f5d445; padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 56px);">
|
||||
<div style="max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
|
||||
Find out more about who we are, what we do, and how you can support us to help make a difference.
|
||||
</p>
|
||||
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||||
<img
|
||||
src="/Button.webp"
|
||||
alt="Donate via JustGiving"
|
||||
style="height: 46px; object-fit: contain; display: block;"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0"
|
||||
>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]"
|
||||
>
|
||||
<div class="text-center">
|
||||
<p
|
||||
class="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 class="mt-4 mx-auto h-[2px] w-16 bg-black/60">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:mt-[60px]">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]"
|
||||
>
|
||||
{
|
||||
cardData.map((card) => (
|
||||
<div class="w-full max-w-[320px] h-[220px] sm:max-w-none sm:h-[273px] mx-auto overflow-hidden rounded-[6px] border-0 shadow-none bg-transparent">
|
||||
<a
|
||||
class="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 class="relative p-2.5 h-full flex flex-col overflow-hidden">
|
||||
<!-- ── CTA EDITORIAL ── -->
|
||||
<div class="cta-editorial">
|
||||
{ctaCards.map((card) => (
|
||||
<a class="cta-card" href={card.href}>
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt={`${card.title} background`}
|
||||
src={card.imageUrl}
|
||||
srcset={
|
||||
card.imageSrcSet
|
||||
}
|
||||
sizes="(min-width: 1024px) 20vw, (min-width: 640px) 50vw, 320px"
|
||||
class="cta-card-img"
|
||||
src={card.img}
|
||||
alt={card.title}
|
||||
style={`object-position: ${card.objectPos};`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/40" />
|
||||
<div class="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
|
||||
<h3 class="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]">
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);" />
|
||||
<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
|
||||
{card.label}
|
||||
</p>
|
||||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); color: white; line-height: 1.2; margin-bottom: 10px;">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p class="cta-sub" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 260px;">
|
||||
{card.sub}
|
||||
</p>
|
||||
<div class="cta-more" style="margin-top: 16px; display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: white; letter-spacing: 0.08em; text-transform: uppercase;">
|
||||
Find out more
|
||||
</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-8">
|
||||
<div
|
||||
class="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
|
||||
class="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
|
||||
class="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>
|
||||
<!-- ── SPONSORS ── -->
|
||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 56px);">
|
||||
<div style="max-width: 1100px; margin: 0 auto;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; text-align: center; margin-bottom: 10px;">
|
||||
Supporters & Sponsors
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 32px;" />
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; text-align: center; margin-bottom: 48px; line-height: 1.2;">
|
||||
We are grateful for the generous support of our sponsors.
|
||||
</p>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center;">
|
||||
{["Sponsor 1", "Sponsor 2", "Sponsor 3", "Sponsor 4", "Sponsor 5", "Sponsor 6"].map((s) => (
|
||||
<div class="sponsor-logo">{s}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
|
||||
</main>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById("site-nav");
|
||||
if (nav) {
|
||||
window.addEventListener("scroll", () => {
|
||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
}
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue