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 { fullBleedOnMobile = false } = Astro.props;
|
||||||
const outerClass = fullBleedOnMobile
|
|
||||||
? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
|
const quickLinks = [
|
||||||
: "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
|
{ 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">
|
<footer class="w-full bg-[#d6d6d6] border-t border-black/15">
|
||||||
<div class="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
|
<div class="max-w-[1280px] mx-auto px-6 sm:px-14 pt-12 pb-9">
|
||||||
<p class="font-semibold">
|
|
||||||
Highland Group RDA is a registered charity in
|
<!-- 3-column grid -->
|
||||||
<br />
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-3 sm:gap-12 mb-10">
|
||||||
Scotland
|
|
||||||
<a
|
<!-- Brand -->
|
||||||
class="underline"
|
<div>
|
||||||
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
<a href="/" aria-label="Highland Group RDA home">
|
||||||
target="_blank"
|
<img
|
||||||
rel="noreferrer"
|
src="/figmaAssets/rdalogo-1.svg"
|
||||||
>
|
alt="Highland Group RDA"
|
||||||
SC007357
|
class="h-12 mb-5 block"
|
||||||
</a>
|
loading="lazy"
|
||||||
</p>
|
decoding="async"
|
||||||
<div class="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
/>
|
||||||
<p class="font-semibold">
|
</a>
|
||||||
Highland Group RDA, Sandycroft, Reelig, Kirkhill, IV5 7PP
|
<p class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/65 leading-[1.65] max-w-[280px]">
|
||||||
</p>
|
Enriching lives through horses in the Highlands since 1975.
|
||||||
<p class="font-semibold">
|
Registered Scottish Charity
|
||||||
Email:
|
<a
|
||||||
<a
|
class="underline"
|
||||||
class="underline"
|
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
||||||
href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
|
target="_blank"
|
||||||
>
|
rel="noreferrer"
|
||||||
info@highlandgrouprda.org.uk
|
>SC007357</a>.
|
||||||
</a>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
|
||||||
<p class="mt-4 font-semibold">
|
<!-- Quick links -->
|
||||||
<a class="underline" href="/privacy">Privacy Policy</a>
|
<div>
|
||||||
·
|
<p class="[font-family:'Public_Sans',sans-serif] font-extrabold text-[13px] tracking-[0.12em] uppercase text-black mb-4">
|
||||||
<a class="underline" href="/accessibility">Accessibility</a>
|
Quick links
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-4 font-semibold">
|
<nav>
|
||||||
Site designed by
|
<ul class="flex flex-col gap-2.5">
|
||||||
<a class="underline" href="https://muir.in" target="_blank" rel="noreferrer">
|
{quickLinks.map((link) => (
|
||||||
Calum Muir
|
<li>
|
||||||
</a>
|
<a
|
||||||
</p>
|
class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/70 hover:underline"
|
||||||
|
href={link.href}
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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>
|
</div>
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -4,5 +4,6 @@ date: "2024-06-01"
|
||||||
summary: "Volunteers summer 2024"
|
summary: "Volunteers summer 2024"
|
||||||
image: "/Vols5-2880w-1024x768.avif"
|
image: "/Vols5-2880w-1024x768.avif"
|
||||||
slug: "volunteers-summer-2024"
|
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)**.
|
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"
|
summary: "Summer awards 2024"
|
||||||
image: "/Awardtime-1920w-768x1024.avif"
|
image: "/Awardtime-1920w-768x1024.avif"
|
||||||
slug: "summer-awards-2024"
|
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>
|
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"
|
summary: "Race night"
|
||||||
image: "/race-night.avif"
|
image: "/race-night.avif"
|
||||||
slug: "race-night"
|
slug: "race-night"
|
||||||
|
category: "Fundraising"
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ date: "2025-12-19"
|
||||||
summary: "Important news to share with the community."
|
summary: "Important news to share with the community."
|
||||||
image: "/important-news.png"
|
image: "/important-news.png"
|
||||||
slug: "important-news"
|
slug: "important-news"
|
||||||
|
category: "News"
|
||||||
---
|
---
|
||||||
|
|
||||||
The Highland Riding for the Disabled Group (SCIO 007357) has been operating from
|
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"
|
summary: "Important news for January 2026"
|
||||||
image: "/news/900px-logo.png"
|
image: "/news/900px-logo.png"
|
||||||
slug: "important-news-january-2026"
|
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.
|
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."
|
summary: "Four new Trustees have joined Highland RDA, bringing fresh enthusiasm as the Group looks ahead to restarting activities."
|
||||||
image: "/news.webp"
|
image: "/news.webp"
|
||||||
slug: "new-trustees"
|
slug: "new-trustees"
|
||||||
|
category: "News"
|
||||||
---
|
---
|
||||||
## A New Chapter for Highland RDA
|
## A New Chapter for Highland RDA
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,13 @@ export type NewsArticle = {
|
||||||
summary: string;
|
summary: string;
|
||||||
image?: string;
|
image?: string;
|
||||||
slug: string;
|
slug: string;
|
||||||
|
category: string;
|
||||||
body: string;
|
body: string;
|
||||||
html: string;
|
html: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Frontmatter = Partial<
|
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", {
|
const newsModules = import.meta.glob("/src/content/news/*.md", {
|
||||||
|
|
@ -53,6 +54,7 @@ export const newsArticles: NewsArticle[] = Object.entries(newsModules)
|
||||||
summary: frontmatter.summary || "",
|
summary: frontmatter.summary || "",
|
||||||
image: frontmatter.image,
|
image: frontmatter.image,
|
||||||
slug,
|
slug,
|
||||||
|
category: frontmatter.category || "News",
|
||||||
body,
|
body,
|
||||||
html: marked.parse(body) as string,
|
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",
|
"Highland Group RDA, about Highland RDA, RDA charity, volunteer-led charity Scotland, therapeutic riding, equestrian therapy Highlands",
|
||||||
canonicalPath: "/about",
|
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}>
|
<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">
|
<main class="w-full">
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
||||||
|
<!-- ── HERO ── -->
|
||||||
|
<section class="relative w-full overflow-hidden" style="min-height: 68vh;">
|
||||||
|
<img
|
||||||
|
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
|
<div
|
||||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
class="absolute inset-0"
|
||||||
style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
|
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
|
<div class="anim-fade-up" style="max-width: 700px;">
|
||||||
class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
|
<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>
|
||||||
<SiteHeader
|
</div>
|
||||||
navigationItems={navigationItems}
|
</section>
|
||||||
theme="dark"
|
|
||||||
className="px-6 sm:px-4"
|
<!-- ── 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="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
<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;">
|
||||||
<div
|
Our ponies
|
||||||
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>
|
||||||
>
|
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
||||||
<p
|
<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;">
|
||||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
|
The heart of everything we do.
|
||||||
>
|
</h2>
|
||||||
Who, why, where, when & how?
|
<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;">
|
||||||
</p>
|
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.
|
||||||
<div class="mt-3 h-[2px] w-10 bg-white/70"></div>
|
</p>
|
||||||
<h1
|
<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;">
|
||||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]"
|
You can support them directly by sponsoring a pony — covering the costs of hoof trimming, hay, vet visits, and more.
|
||||||
>
|
</p>
|
||||||
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
|
<a
|
||||||
class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
|
href="/support-us"
|
||||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
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;"
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
>
|
||||||
<img
|
Sponsor a pony
|
||||||
class="w-full h-full object-contain"
|
<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">
|
||||||
alt="Donate via JustGiving"
|
<path d="M3 8h10M9 4l4 4-4 4"/>
|
||||||
src="/Button.webp"
|
</svg>
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
<!-- ── PONY PROFILES ── -->
|
||||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||||
<div
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"
|
<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 style="padding: 18px 20px;">
|
||||||
|
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #000; margin-bottom: 6px;">
|
||||||
|
{pony.name}
|
||||||
|
</h3>
|
||||||
|
<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
|
||||||
|
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;"
|
||||||
|
>
|
||||||
|
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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 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>
|
||||||
|
<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>
|
||||||
|
<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;"
|
||||||
>
|
>
|
||||||
<h2
|
Apply to volunteer
|
||||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
<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"/>
|
||||||
Our Star Participants
|
</svg>
|
||||||
|
</a>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- ── 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>
|
</h2>
|
||||||
<p
|
<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;">
|
||||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/60"
|
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;"
|
||||||
>
|
>
|
||||||
Stories and testimonials
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center;">
|
||||||
<div
|
<a
|
||||||
class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_0.95fr]"
|
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;"
|
||||||
<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
|
|
||||||
</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>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
Full story (PDF)
|
|
||||||
</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
|
Support us
|
||||||
class="absolute -left-2 -top-7 text-[96px] leading-none text-black/20"
|
</a>
|
||||||
>“</span
|
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||||||
>
|
<img
|
||||||
<p
|
src="/Button.webp"
|
||||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
|
alt="Donate via JustGiving"
|
||||||
>
|
style="height: 46px; object-fit: contain; display: block;"
|
||||||
We cannot thank the team at RDA Highland enough
|
loading="lazy"
|
||||||
for what they've done for our child. To see
|
/>
|
||||||
only the individual and the pure joy of
|
</a>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</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
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<SiteFooter fullBleedOnMobile />
|
|
||||||
</main>
|
</main>
|
||||||
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById("site-nav");
|
||||||
|
if (nav) {
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,10 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||||
import SiteHeader from "../../components/SiteHeader.astro";
|
import SiteHeader from "../../components/SiteHeader.astro";
|
||||||
import SiteFooter from "../../components/SiteFooter.astro";
|
import SiteFooter from "../../components/SiteFooter.astro";
|
||||||
import { navigationItems } from "../../lib/navigation";
|
import { navigationItems } from "../../lib/navigation";
|
||||||
import { newsArticles, formatNewsDate } from "../../lib/news";
|
import { newsArticles } from "../../lib/news";
|
||||||
|
|
||||||
const PER_PAGE = 4;
|
const featured = newsArticles[0];
|
||||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
const rest = newsArticles.slice(1);
|
||||||
const currentPage = 1;
|
|
||||||
const pagedArticles = newsArticles.slice(0, PER_PAGE);
|
|
||||||
const pageHref = (page) => (page === 1 ? "/events" : `/events/page/${page}`);
|
|
||||||
|
|
||||||
const pageSeo = {
|
const pageSeo = {
|
||||||
title: "News",
|
title: "News",
|
||||||
|
|
@ -19,158 +16,371 @@ const pageSeo = {
|
||||||
"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, equestrian therapy news, Highlands charity events",
|
||||||
canonicalPath: "/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}>
|
<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">
|
<main class="w-full">
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
||||||
|
<!-- ── HERO ── -->
|
||||||
|
<section class="relative w-full overflow-hidden" style="min-height: 50vh;">
|
||||||
|
<img
|
||||||
|
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"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
class="absolute inset-0"
|
||||||
style="background-image: url(/news.webp);"
|
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="absolute inset-0 bg-black/45"></div>
|
<div class="anim-fade-up" style="max-width: 600px;">
|
||||||
<SiteHeader
|
<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;">
|
||||||
navigationItems={navigationItems}
|
Events & News
|
||||||
theme="dark"
|
</p>
|
||||||
className="px-6 sm:px-4"
|
<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;">
|
||||||
<div
|
What's on at Highland Group RDA.
|
||||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
</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;">
|
||||||
<div
|
Upcoming events, session news, and fundraising updates from our group.
|
||||||
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>
|
||||||
>
|
|
||||||
<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>
|
</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"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="w-full h-full object-contain"
|
|
||||||
alt="Donate via JustGiving"
|
|
||||||
src="/Button.webp"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
<!-- ── UPCOMING EVENTS ── -->
|
||||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
<section style="background: #1e2e1a; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
|
||||||
>
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
<div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap;">
|
||||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
<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;">
|
||||||
pagedArticles.map((item) => (
|
Coming up
|
||||||
<article>
|
</p>
|
||||||
<a
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; line-height: 1.2;">
|
||||||
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"
|
Upcoming events & sessions
|
||||||
href={`/events/${item.slug}`}
|
</h2>
|
||||||
aria-label={`Read ${item.title}`}
|
</div>
|
||||||
>
|
<a
|
||||||
<div class="flex flex-col gap-4">
|
href="/contact"
|
||||||
{item.image ? (
|
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;"
|
||||||
<div
|
>
|
||||||
class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
|
Get in touch
|
||||||
style={`background-image: url(${item.image});`}
|
</a>
|
||||||
/>
|
</div>
|
||||||
) : null}
|
<div style="border-top: 1px solid rgba(255,255,255,0.1);">
|
||||||
<p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
{upcomingEvents.map((ev) => (
|
||||||
{formatNewsDate(item.date)}
|
<div
|
||||||
</p>
|
class="event-row"
|
||||||
<div class="h-px w-full bg-black/20" />
|
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;"
|
||||||
<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>
|
||||||
</h2>
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #F6F1E8; line-height: 1;">
|
||||||
<p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
{ev.date}
|
||||||
{item.summary}
|
</p>
|
||||||
</p>
|
<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;">
|
||||||
<span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
|
{ev.day}
|
||||||
Read more
|
</p>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 16px; color: #F6F1E8; line-height: 1.35;">
|
||||||
</a>
|
{ev.title}
|
||||||
</article>
|
</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>
|
||||||
|
))}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<SiteFooter fullBleedOnMobile />
|
|
||||||
|
<!-- ── 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>
|
</main>
|
||||||
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</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>
|
</BaseLayout>
|
||||||
|
|
|
||||||
|
|
@ -3,188 +3,202 @@ import BaseLayout from "../../../layouts/BaseLayout.astro";
|
||||||
import SiteHeader from "../../../components/SiteHeader.astro";
|
import SiteHeader from "../../../components/SiteHeader.astro";
|
||||||
import SiteFooter from "../../../components/SiteFooter.astro";
|
import SiteFooter from "../../../components/SiteFooter.astro";
|
||||||
import { navigationItems } from "../../../lib/navigation";
|
import { navigationItems } from "../../../lib/navigation";
|
||||||
import { newsArticles, formatNewsDate } from "../../../lib/news";
|
import { newsArticles } from "../../../lib/news";
|
||||||
|
|
||||||
export function getStaticPaths() {
|
export function getStaticPaths() {
|
||||||
const PER_PAGE = 4;
|
const PER_PAGE = 6;
|
||||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||||
const pages = Array.from(
|
return Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||||
{ length: totalPages },
|
.filter((page) => page > 1)
|
||||||
(_, index) => index + 1,
|
.map((page) => ({ params: { page: String(page) } }));
|
||||||
).filter((page) => page > 1);
|
|
||||||
|
|
||||||
return pages.map((page) => ({
|
|
||||||
params: { page: String(page) },
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentPage = Number(Astro.params.page ?? "1");
|
const currentPage = Number(Astro.params.page ?? "1");
|
||||||
const PER_PAGE = 4;
|
const PER_PAGE = 6;
|
||||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||||
const start = (currentPage - 1) * PER_PAGE;
|
const start = (currentPage - 1) * PER_PAGE;
|
||||||
const pagedArticles = newsArticles.slice(start, start + 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 = {
|
const pageSeo = {
|
||||||
title: `News - Page ${currentPage}`,
|
title: `News — Page ${currentPage}`,
|
||||||
description:
|
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:
|
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}`,
|
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}>
|
<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">
|
<main class="w-full">
|
||||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
|
||||||
|
<!-- ── HERO ── -->
|
||||||
|
<section class="relative w-full overflow-hidden" style="min-height: 50vh;">
|
||||||
|
<img
|
||||||
|
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"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
class="absolute inset-0"
|
||||||
style="background-image: url(/news.webp);"
|
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="absolute inset-0 bg-black/45"></div>
|
<div style="max-width: 600px;">
|
||||||
<SiteHeader
|
<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;">
|
||||||
navigationItems={navigationItems}
|
Events & News — Page {currentPage}
|
||||||
theme="dark"
|
</p>
|
||||||
className="px-6 sm:px-4"
|
<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;">
|
||||||
<div
|
What's on at Highland Group RDA.
|
||||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
</h1>
|
||||||
>
|
|
||||||
<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>
|
</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"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="w-full h-full object-contain"
|
|
||||||
alt="Donate via JustGiving"
|
|
||||||
src="/Button.webp"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
<!-- ── ARTICLE GRID ── -->
|
||||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
||||||
>
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
<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">
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px;">
|
||||||
{
|
{pagedArticles.map((post) => (
|
||||||
pagedArticles.map((item) => (
|
<a
|
||||||
<article>
|
class="post-card"
|
||||||
<a
|
href={`/events/${post.slug}`}
|
||||||
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"
|
style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
|
||||||
href={`/events/${item.slug}`}
|
>
|
||||||
aria-label={`Read ${item.title}`}
|
<div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
|
||||||
>
|
{post.image ? (
|
||||||
<div class="flex flex-col gap-4">
|
<img
|
||||||
{item.image ? (
|
src={post.image}
|
||||||
<div
|
alt={post.title}
|
||||||
class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
|
class="post-card-img"
|
||||||
style={`background-image: url(${item.image});`}
|
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
||||||
/>
|
loading="lazy"
|
||||||
) : null}
|
decoding="async"
|
||||||
<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 style="width: 100%; height: 100%; background: #1e2e1a;" />
|
||||||
<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">
|
</div>
|
||||||
{item.title}
|
<div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
||||||
</h2>
|
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
||||||
<p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
<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;`}>
|
||||||
{item.summary}
|
{post.category}
|
||||||
</p>
|
</span>
|
||||||
<span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
|
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
|
||||||
Read more
|
{formatDate(post.date)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<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;">
|
||||||
</article>
|
{post.title}
|
||||||
))
|
</h2>
|
||||||
}
|
<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>
|
</div>
|
||||||
{
|
|
||||||
totalPages > 1 ? (
|
<!-- Pagination -->
|
||||||
<nav class="mt-8 flex flex-wrap items-center justify-center gap-2">
|
{totalPages > 1 && (
|
||||||
{currentPage > 1 ? (
|
<nav aria-label="Pagination" style="display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;">
|
||||||
<a
|
{currentPage > 1 ? (
|
||||||
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"
|
<a
|
||||||
href={pageHref(currentPage - 1)}
|
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>
|
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 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);">
|
||||||
</span>
|
Previous
|
||||||
)}
|
</span>
|
||||||
{Array.from(
|
)}
|
||||||
{ length: totalPages },
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||||
(_, index) => {
|
<a
|
||||||
const page = index + 1;
|
href={pageHref(page)}
|
||||||
const isActive = page === currentPage;
|
aria-current={page === currentPage ? "page" : undefined}
|
||||||
return (
|
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;`}
|
||||||
<a
|
>
|
||||||
class={`h-10 w-10 rounded-full border text-sm font-semibold [font-family:'Public_Sans',Helvetica] flex items-center justify-center ${
|
{page}
|
||||||
isActive
|
</a>
|
||||||
? "border-black bg-black text-white"
|
))}
|
||||||
: "border-black/20 text-black"
|
{currentPage < totalPages ? (
|
||||||
}`}
|
<a
|
||||||
href={pageHref(page)}
|
href={pageHref(currentPage + 1)}
|
||||||
aria-current={
|
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;"
|
||||||
isActive
|
>
|
||||||
? "page"
|
Next
|
||||||
: undefined
|
</a>
|
||||||
}
|
) : (
|
||||||
>
|
<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);">
|
||||||
{page}
|
Next
|
||||||
</a>
|
</span>
|
||||||
);
|
)}
|
||||||
},
|
</nav>
|
||||||
)}
|
)}
|
||||||
{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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<SiteFooter fullBleedOnMobile />
|
|
||||||
</main>
|
</main>
|
||||||
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById("site-nav");
|
||||||
|
if (nav) {
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
|
|
@ -13,39 +13,29 @@ const pageSeo = {
|
||||||
canonicalPath: "/",
|
canonicalPath: "/",
|
||||||
};
|
};
|
||||||
|
|
||||||
const cardData = [
|
const ctaCards = [
|
||||||
{
|
{
|
||||||
title: "About Us",
|
label: "Fundraising",
|
||||||
imageUrl: "/about-640.webp",
|
title: "Sponsor a pony",
|
||||||
imageSrcSet:
|
sub: "Your support keeps our ponies healthy and our sessions running — from hoof trimming to hay bales.",
|
||||||
"/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w",
|
img: "/alineofponies-1920w.webp",
|
||||||
href: "/about",
|
objectPos: "50% 50%",
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Support Us",
|
|
||||||
imageUrl: "/support-640.webp",
|
|
||||||
imageSrcSet:
|
|
||||||
"/support-320.webp 320w, /support-480.webp 480w, /support-640.webp 640w, /support-960.webp 960w",
|
|
||||||
href: "/support-us",
|
href: "/support-us",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Contact Us",
|
label: "Get involved",
|
||||||
imageUrl: "/contact-640.webp",
|
title: "Apply to volunteer",
|
||||||
imageSrcSet:
|
sub: "No horse experience needed. Sidestep walkers, groomers, fundraisers — all roles make a real difference.",
|
||||||
"/contact-320.webp 320w, /contact-480.webp 480w, /contact-640.webp 640w, /contact-960.webp 960w",
|
img: "/Vols5-2880w-1024x768.avif",
|
||||||
href: "/contact",
|
objectPos: "50% 30%",
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Apply to Volunteer",
|
|
||||||
imageUrl: "/Vols5-2880w-1024x768.avif",
|
|
||||||
imageSrcSet: "/Vols5-2880w-1024x768.avif 1024w",
|
|
||||||
href: "/volunteer-application",
|
href: "/volunteer-application",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Apply to Participate",
|
label: "Riding sessions",
|
||||||
imageUrl: "/Samantha-and-Connolly-960.webp",
|
title: "Apply to participate",
|
||||||
imageSrcSet:
|
sub: "We welcome riders and carriage drivers with a wide range of physical and mental disabilities.",
|
||||||
"/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w",
|
img: "/Samantha-and-Connolly-1280.webp",
|
||||||
|
objectPos: "50% 38%",
|
||||||
href: "/participant-application",
|
href: "/participant-application",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
@ -61,181 +51,281 @@ const cardData = [
|
||||||
imagesizes="100vw"
|
imagesizes="100vw"
|
||||||
/>
|
/>
|
||||||
</Fragment>
|
</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">
|
<main class="w-full">
|
||||||
<section
|
|
||||||
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0"
|
<!-- ── 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"
|
||||||
|
sizes="100vw"
|
||||||
|
loading="eager"
|
||||||
|
fetchpriority="high"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden"
|
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 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>
|
||||||
|
|
||||||
|
<!-- 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;"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="absolute"
|
||||||
|
style="bottom: 40px; right: 28px;"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="absolute inset-0 h-full w-full object-cover"
|
src="/Button.webp"
|
||||||
alt=""
|
alt="Donate via JustGiving"
|
||||||
src="/Samantha-and-Connolly-1280.webp"
|
style="height: 46px; object-fit: contain; display: block;"
|
||||||
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"
|
|
||||||
sizes="100vw"
|
|
||||||
loading="eager"
|
loading="eager"
|
||||||
fetchpriority="high"
|
|
||||||
decoding="async"
|
|
||||||
/>
|
/>
|
||||||
<div
|
</a>
|
||||||
class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
|
|
||||||
>
|
<!-- 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>
|
||||||
<SiteHeader
|
</div>
|
||||||
navigationItems={navigationItems}
|
</section>
|
||||||
theme="dark"
|
|
||||||
className="px-6 sm:px-4"
|
<!-- ── INTRO STRIP ── -->
|
||||||
/>
|
<section style="background: #f5d445; padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 56px);">
|
||||||
<div
|
<div style="max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
|
||||||
class="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]"
|
<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.
|
||||||
<div
|
</p>
|
||||||
class="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
|
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||||||
>
|
|
||||||
<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
|
|
||||||
>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
"Our mission is to bring about meaningful
|
|
||||||
and positive changes in the health and
|
|
||||||
well-being of people with physical or mental
|
|
||||||
disabilities through activities with our horses
|
|
||||||
and ponies."
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
class="w-full h-full object-contain"
|
|
||||||
alt="Donate via JustGiving"
|
|
||||||
src="/Button.webp"
|
src="/Button.webp"
|
||||||
|
alt="Donate via JustGiving"
|
||||||
|
style="height: 46px; object-fit: contain; display: block;"
|
||||||
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
<!-- ── CTA EDITORIAL ── -->
|
||||||
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0"
|
<div class="cta-editorial">
|
||||||
>
|
{ctaCards.map((card) => (
|
||||||
<div class="w-full">
|
<a class="cta-card" href={card.href}>
|
||||||
<div
|
<img
|
||||||
class="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]"
|
class="cta-card-img"
|
||||||
>
|
src={card.img}
|
||||||
<div class="text-center">
|
alt={card.title}
|
||||||
<p
|
style={`object-position: ${card.objectPos};`}
|
||||||
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]"
|
loading="lazy"
|
||||||
>
|
decoding="async"
|
||||||
Find out more about who we are, what we do and
|
/>
|
||||||
how you can support us to help make a
|
<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%);" />
|
||||||
difference.
|
<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>
|
</p>
|
||||||
<div class="mt-4 mx-auto h-[2px] w-16 bg-black/60">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mt-8 sm:mt-[60px]">
|
<!-- ── SPONSORS ── -->
|
||||||
<div
|
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 56px);">
|
||||||
class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]"
|
<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
|
||||||
cardData.map((card) => (
|
</p>
|
||||||
<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">
|
<div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 32px;" />
|
||||||
<a
|
<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;">
|
||||||
class="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
|
We are grateful for the generous support of our sponsors.
|
||||||
href={card.href}
|
</p>
|
||||||
>
|
<div style="display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center;">
|
||||||
<div class="relative p-2.5 h-full flex flex-col overflow-hidden">
|
{["Sponsor 1", "Sponsor 2", "Sponsor 3", "Sponsor 4", "Sponsor 5", "Sponsor 6"].map((s) => (
|
||||||
<img
|
<div class="sponsor-logo">{s}</div>
|
||||||
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"
|
|
||||||
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]">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<SiteFooter fullBleedOnMobile />
|
|
||||||
</main>
|
</main>
|
||||||
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById("site-nav");
|
||||||
|
if (nav) {
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue