390 lines
22 KiB
Text
390 lines
22 KiB
Text
---
|
|
import BaseLayout from "../../layouts/BaseLayout.astro";
|
|
import SiteHeader from "../../components/SiteHeader.astro";
|
|
import SiteFooter from "../../components/SiteFooter.astro";
|
|
import { navigationItems } from "../../lib/navigation";
|
|
import { getArticles } from "../../lib/news";
|
|
|
|
const allArticles = await getArticles();
|
|
const featured = allArticles[0];
|
|
const rest = allArticles.slice(1);
|
|
|
|
const pageSeo = {
|
|
title: "News",
|
|
description:
|
|
"Stay updated with Highland Group RDA news, events, and stories. Discover how our riders, volunteers, and community are making a difference every day.",
|
|
keywords:
|
|
"Highland RDA news, RDA events, disability riding stories, RDA updates, equestrian therapy news, Highlands charity events",
|
|
canonicalPath: "/events",
|
|
};
|
|
|
|
const categoryColors: Record<string, { bg: string; text: string }> = {
|
|
News: { bg: "#e8f0e7", text: "#4a7040" },
|
|
Events: { bg: "#e7eaf5", text: "#3a4a80" },
|
|
Fundraising: { bg: "#fdf3cc", text: "#7a6010" },
|
|
};
|
|
|
|
function formatDate(date: string) {
|
|
const d = new Date(date);
|
|
if (isNaN(d.getTime())) return date;
|
|
return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
|
|
}
|
|
|
|
const upcomingEvents = [
|
|
{ date: "Spring 2026", day: "TBC", title: "Sessions restart at new venue", time: "TBC", type: "Sessions" },
|
|
{ date: "Summer 2026", day: "TBC", title: "Open Day — venue to be confirmed", time: "TBC", type: "Events" },
|
|
{ date: "Summer 2026", day: "TBC", title: "Fundraising coffee morning", time: "TBC", type: "Fundraising" },
|
|
];
|
|
|
|
const typeColors: Record<string, string> = {
|
|
Events: "#7DA371",
|
|
Sessions: "#5b8fbe",
|
|
Fundraising: "#b8962e",
|
|
};
|
|
---
|
|
|
|
<BaseLayout {...pageSeo}>
|
|
<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); }
|
|
|
|
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
|
@media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
|
|
|
|
.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">
|
|
|
|
<!-- ── 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="/hero-events.webp"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
<div
|
|
class="absolute inset-0"
|
|
style="background: linear-gradient(160deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.72) 100%);"
|
|
/>
|
|
<div
|
|
class="relative flex flex-col justify-end"
|
|
style="min-height: 50vh; padding: 120px 28px 64px;"
|
|
>
|
|
<div class="anim-fade-up" style="max-width: 600px;">
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
|
Events & News
|
|
</p>
|
|
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
|
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
|
|
What's on at Highland Group RDA.
|
|
</h1>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
|
|
Upcoming events, session news, and fundraising updates from our group.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── UPCOMING EVENTS ── -->
|
|
<section style="background: #1e2e1a; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
<div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap;">
|
|
<div>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 10px;">
|
|
Coming up
|
|
</p>
|
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; line-height: 1.2;">
|
|
Upcoming events & sessions
|
|
</h2>
|
|
</div>
|
|
<a
|
|
href="/contact"
|
|
style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: rgba(246,241,232,0.6); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; flex-shrink: 0;"
|
|
>
|
|
Get in touch
|
|
</a>
|
|
</div>
|
|
<div style="border-top: 1px solid rgba(255,255,255,0.1);">
|
|
{upcomingEvents.map((ev) => (
|
|
<div
|
|
class="event-row"
|
|
style="display: grid; grid-template-columns: 120px 1fr auto auto; gap: 24px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 6px;"
|
|
>
|
|
<div>
|
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #F6F1E8; line-height: 1;">
|
|
{ev.date}
|
|
</p>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(246,241,232,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;">
|
|
{ev.day}
|
|
</p>
|
|
</div>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 16px; color: #F6F1E8; line-height: 1.35;">
|
|
{ev.title}
|
|
</p>
|
|
<p class="events-grid-time" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(246,241,232,0.55); white-space: nowrap;">
|
|
{ev.time}
|
|
</p>
|
|
<span
|
|
class="events-grid-badge"
|
|
style={`padding: 5px 14px; border-radius: 9999px; background: rgba(255,255,255,0.07); border: 1px solid ${typeColors[ev.type] || "#7DA371"}40; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${typeColors[ev.type] || "#7DA371"}; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;`}
|
|
>
|
|
{ev.type}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── 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" class="post-grid">
|
|
{rest.map((post) => (
|
|
<a
|
|
class="post-card"
|
|
href={`/events/${post.slug}`}
|
|
data-category={post.category}
|
|
style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
|
|
>
|
|
<div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
|
|
{post.image ? (
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
class="post-card-img"
|
|
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
) : (
|
|
<div style="width: 100%; height: 100%; background: #1e2e1a;" />
|
|
)}
|
|
</div>
|
|
<div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
|
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
|
<span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[post.category]?.bg ?? "#c8c8c8"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[post.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
|
|
{post.category}
|
|
</span>
|
|
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
|
|
{formatDate(post.date)}
|
|
</span>
|
|
</div>
|
|
<h3 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #000; line-height: 1.3;">
|
|
{post.title}
|
|
</h3>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.65; flex: 1;">
|
|
{post.summary}
|
|
</p>
|
|
<span style="display: inline-flex; align-items: center; gap: 6px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #7DA371; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;">
|
|
Read more
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M3 8h10M9 4l4 4-4 4"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Empty state (hidden by default, shown by JS) -->
|
|
<div id="empty-state" style="display: none; text-align: center; padding: 60px 0;">
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.4);">
|
|
No posts in this category yet.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── NEWSLETTER ── -->
|
|
<section style="background: #f5d445; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
|
|
<div style="max-width: 780px; margin: 0 auto; text-align: center;">
|
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 30px); color: #000; line-height: 1.2; margin-bottom: 12px;">
|
|
Stay up to date.
|
|
</h2>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.6); line-height: 1.65; margin-bottom: 28px;">
|
|
Follow us on Facebook or get in touch directly — we share news, events, and updates with our community.
|
|
</p>
|
|
<div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
|
|
<a
|
|
href="/facebook"
|
|
style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
|
</svg>
|
|
Follow on Facebook
|
|
</a>
|
|
<a
|
|
href="/contact"
|
|
style="display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #000; border: 2px solid #000; border-radius: 9999px; padding: 11px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
|
>
|
|
Contact us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<SiteFooter fullBleedOnMobile />
|
|
</div>
|
|
|
|
<script>
|
|
// Scroll nav
|
|
const nav = document.getElementById("site-nav");
|
|
if (nav) {
|
|
window.addEventListener("scroll", () => {
|
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
|
}, { passive: true });
|
|
}
|
|
|
|
// Category filter pills
|
|
const pills = document.querySelectorAll<HTMLButtonElement>(".filter-pill");
|
|
const featured = document.getElementById("featured-card");
|
|
const gridCards = document.querySelectorAll<HTMLElement>("#post-grid .post-card");
|
|
const emptyState = document.getElementById("empty-state");
|
|
|
|
pills.forEach((pill) => {
|
|
pill.addEventListener("click", () => {
|
|
const filter = pill.dataset.filter ?? "All";
|
|
|
|
pills.forEach((p) => p.classList.remove("active"));
|
|
pill.classList.add("active");
|
|
|
|
let visible = 0;
|
|
|
|
if (filter === "All") {
|
|
if (featured) { (featured as HTMLElement).style.display = ""; visible++; }
|
|
gridCards.forEach((c) => { c.style.display = ""; visible++; });
|
|
} else {
|
|
if (featured) {
|
|
const show = (featured as HTMLElement).dataset.category === filter;
|
|
(featured as HTMLElement).style.display = show ? "" : "none";
|
|
if (show) visible++;
|
|
}
|
|
gridCards.forEach((c) => {
|
|
const show = c.dataset.category === filter;
|
|
c.style.display = show ? "" : "none";
|
|
if (show) visible++;
|
|
});
|
|
}
|
|
|
|
if (emptyState) emptyState.style.display = visible === 0 ? "block" : "none";
|
|
});
|
|
});
|
|
</script>
|
|
</BaseLayout>
|