Apply v3 redesign to Contact page
Full-width hero, two-column contact section (details + form), styled radio button enquiry type picker, phone and referral source fields, Quick Links dark-green card strip, map iframe retained. Form backend integration (Turnstile + contact-form.js) preserved. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir
parent
474da4f3a3
commit
a6e1069fb4
1 changed files with 344 additions and 181 deletions
|
|
@ -5,11 +5,11 @@ import SiteFooter from "../components/SiteFooter.astro";
|
|||
import { navigationItems } from "../lib/navigation";
|
||||
|
||||
const pageSeo = {
|
||||
title: "Contact",
|
||||
title: "Contact Us",
|
||||
description:
|
||||
"Contact Highland Group RDA for bookings, volunteering, or enquiries. We're here to help you connect with our team and activities in the Highlands.",
|
||||
"Contact Highland Group RDA for volunteering, participating, sponsoring a pony, or any general enquiry. We'd love to hear from you.",
|
||||
keywords:
|
||||
"Highland Group RDA contact, RDA enquiries, book RDA session, volunteer at RDA, RDA Highlands contact details, disability riding information",
|
||||
"Highland Group RDA contact, RDA enquiries, volunteer, participate, sponsor a pony, Highlands disability riding",
|
||||
canonicalPath: "/contact",
|
||||
};
|
||||
|
||||
|
|
@ -17,208 +17,371 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
|
|||
---
|
||||
|
||||
<BaseLayout {...pageSeo}>
|
||||
{
|
||||
turnstileSiteKey && (
|
||||
<Fragment slot="head">
|
||||
<script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
||||
async
|
||||
defer
|
||||
/>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
{turnstileSiteKey && (
|
||||
<Fragment slot="head">
|
||||
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
|
||||
</Fragment>
|
||||
)}
|
||||
<Fragment slot="head">
|
||||
<script src="/contact-form.js" defer data-cfasync="false"></script>
|
||||
<script src="/contact-form.js" defer data-cfasync="false" />
|
||||
</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); }
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
border: 1.5px solid rgba(0,0,0,0.18);
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
appearance: none;
|
||||
}
|
||||
.field-input:focus {
|
||||
border-color: #7DA371;
|
||||
box-shadow: 0 0 0 3px rgba(125,163,113,0.18);
|
||||
}
|
||||
.field-input::placeholder { color: rgba(0,0,0,0.35); font-weight: 600; }
|
||||
|
||||
/* Custom radio buttons */
|
||||
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.radio-label {
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
cursor: pointer; padding: 12px 16px; border-radius: 6px;
|
||||
border: 1.5px solid rgba(0,0,0,0.15); background: #fff;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.radio-label:hover { border-color: #7DA371; }
|
||||
.radio-label input[type="radio"] { display: none; }
|
||||
.radio-label input[type="radio"]:checked ~ .radio-custom { border-color: #7DA371; background: #7DA371; }
|
||||
.radio-label:has(input:checked) { border-color: #7DA371; background: rgba(125,163,113,0.07); }
|
||||
.radio-custom {
|
||||
width: 18px; height: 18px; border-radius: 9999px;
|
||||
border: 2px solid rgba(0,0,0,0.25); flex-shrink: 0; margin-top: 1px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
.radio-custom::after {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.radio-label input[type="radio"]:checked ~ .radio-custom::after {
|
||||
content: '';
|
||||
width: 7px; height: 7px; border-radius: 9999px;
|
||||
background: #fff;
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.radio-text { font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #000; line-height: 1.4; }
|
||||
|
||||
/* Select arrow */
|
||||
select.field-input {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 16px center;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* Quick link cards */
|
||||
.ql-card { position: relative; height: 240px; border-radius: 6px; overflow: hidden; display: block; cursor: pointer; }
|
||||
.ql-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
|
||||
.ql-card:hover .ql-card-img { transform: scale(1.05); }
|
||||
.ql-card-band { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(125,163,113,0.9); backdrop-filter: blur(4px); padding: 14px 18px; }
|
||||
.ql-card-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #fff; line-height: 1.2; }
|
||||
.ql-card:hover .ql-card-title { text-decoration: underline; }
|
||||
.ql-card-sub { margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.82); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.contact-grid { grid-template-columns: 1fr !important; }
|
||||
.name-email-row { grid-template-columns: 1fr !important; }
|
||||
.radio-group { grid-template-columns: 1fr !important; }
|
||||
.phone-field { max-width: 100% !important; }
|
||||
.ql-grid { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.contact-section { padding: 48px 24px !important; }
|
||||
.ql-section { padding: 48px 24px !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
||||
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="relative w-full overflow-hidden" style="min-height: 52vh;">
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
style="object-position: 50% 45%;"
|
||||
alt=""
|
||||
src="/contact-960.webp"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
<div
|
||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
|
||||
class="absolute inset-0"
|
||||
style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.55) 100%);"
|
||||
/>
|
||||
<div
|
||||
class="relative flex flex-col justify-end"
|
||||
style="min-height: 52vh; padding: 120px 28px 64px;"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div
|
||||
class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 sm:pt-8"
|
||||
>
|
||||
<div
|
||||
class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
|
||||
>
|
||||
<p
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
|
||||
>
|
||||
Get in touch
|
||||
</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]"
|
||||
>
|
||||
Contact 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-[720px]"
|
||||
>
|
||||
We would love to hear from you about sessions,
|
||||
volunteering, or ways to support the group.
|
||||
Reach out and we will get back to you as soon as
|
||||
we can.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 600px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
||||
Contact 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(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
|
||||
We'd love to hear from you.
|
||||
</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;">
|
||||
Whether you're looking to volunteer, apply as a participant, sponsor a pony, or just want to know more — get in touch and we'll get back to you soon.
|
||||
</p>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]"
|
||||
>
|
||||
<div>
|
||||
<h2
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
||||
>
|
||||
Contact details
|
||||
</h2>
|
||||
<p
|
||||
class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
|
||||
>
|
||||
Highland Group RDA, Sandycroft, Reelig,
|
||||
Kirkhill, IV5 7PP
|
||||
</p>
|
||||
<p
|
||||
class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
|
||||
>
|
||||
Email: info@highlandgrouprda.org.uk
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="inline-flex items-center rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
|
||||
href="mailto:info@highlandgrouprda.org.uk"
|
||||
>
|
||||
Email us
|
||||
</a>
|
||||
</div>
|
||||
<!-- ── CONTACT SECTION ── -->
|
||||
<section class="contact-section" style="background: #d6d6d6; padding: clamp(48px, 8vw, 88px) clamp(24px, 6vw, 72px);">
|
||||
<div class="contact-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start;">
|
||||
|
||||
<!-- Left: details -->
|
||||
<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: 14px;">Get in touch</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 24px;" />
|
||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); color: #000; line-height: 1.2; margin-bottom: 28px;">
|
||||
We'll get back to you as soon as we can.
|
||||
</h2>
|
||||
|
||||
<div style="margin-bottom: 28px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Email</p>
|
||||
<a href="mailto:info@highlandgrouprda.org.uk" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); text-decoration: underline; line-height: 1.6;">
|
||||
info@highlandgrouprda.org.uk
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
||||
<h2
|
||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
||||
<div style="margin-bottom: 28px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Address</p>
|
||||
<address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.8;">
|
||||
Sandycroft, Reelig<br />Kirkhill<br />IV5 7PP
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 36px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Sessions</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||||
Tuesday to Friday mornings<br />Sandycroft, Reelig, Kirkhill
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.12); margin-bottom: 36px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px;">Follow us</p>
|
||||
<a
|
||||
href="https://www.facebook.com/HighlandGroupRDA"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
|
||||
onmouseover="this.style.textDecoration='underline'"
|
||||
onmouseout="this.style.textDecoration='none'"
|
||||
>
|
||||
Send a message
|
||||
</h2>
|
||||
<form
|
||||
class="mt-4 space-y-4"
|
||||
action="/api/contact"
|
||||
method="post"
|
||||
data-contact-form
|
||||
>
|
||||
{
|
||||
!turnstileSiteKey && (
|
||||
<p class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900">
|
||||
Turnstile is not configured. Set
|
||||
PUBLIC_TURNSTILE_SITE_KEY and
|
||||
redeploy to enable the form.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-semibold text-black"
|
||||
>Name</label
|
||||
>
|
||||
<input
|
||||
class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="text"
|
||||
name="name"
|
||||
autocomplete="name"
|
||||
required
|
||||
/>
|
||||
<span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="15" height="15" 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>
|
||||
</span>
|
||||
Facebook
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<div style="border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
|
||||
<iframe
|
||||
title="Highland Group RDA location"
|
||||
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
|
||||
style="width: 100%; height: 220px; border: 0; display: block;"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: form -->
|
||||
<div style="background: #e2e2e2; border-radius: 7px; padding: clamp(32px, 4vw, 52px);">
|
||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 22px; color: #000; margin-bottom: 6px;">Send us a message</p>
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.5); margin-bottom: 28px;">
|
||||
Fields marked <span style="color: #7DA371;">*</span> are required.
|
||||
</p>
|
||||
|
||||
{!turnstileSiteKey && (
|
||||
<p style="border-radius: 6px; border: 1px solid #fbbf24; background: #fffbeb; padding: 10px 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: #92400e; margin-bottom: 20px;">
|
||||
Turnstile is not configured. Set PUBLIC_TURNSTILE_SITE_KEY and redeploy to enable the form.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form
|
||||
action="/api/contact"
|
||||
method="post"
|
||||
data-contact-form
|
||||
style="display: flex; flex-direction: column; gap: 22px;"
|
||||
>
|
||||
<!-- Name + Email -->
|
||||
<div class="name-email-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label for="cf-name" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
Your name <span style="color: #7DA371;">*</span>
|
||||
</label>
|
||||
<input id="cf-name" class="field-input" type="text" name="name" placeholder="Jane Smith" autocomplete="name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-semibold text-black"
|
||||
>Email</label
|
||||
>
|
||||
<input
|
||||
class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label for="cf-email" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
Email address <span style="color: #7DA371;">*</span>
|
||||
</label>
|
||||
<input id="cf-email" class="field-input" type="email" name="email" placeholder="jane@example.com" autocomplete="email" required />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-semibold text-black"
|
||||
>Message</label
|
||||
>
|
||||
<textarea
|
||||
class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
name="message"
|
||||
rows="4"
|
||||
required></textarea>
|
||||
</div>
|
||||
<div
|
||||
class="cf-turnstile"
|
||||
data-sitekey={turnstileSiteKey}
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-semibold text-black"
|
||||
data-form-message
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label for="cf-phone" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
Phone number <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
|
||||
</label>
|
||||
<input id="cf-phone" class="field-input phone-field" type="tel" name="phone" placeholder="Optional" autocomplete="tel" style="max-width: 50%;" />
|
||||
</div>
|
||||
|
||||
<!-- Enquiry type -->
|
||||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
What is your enquiry about? <span style="color: #7DA371;">*</span>
|
||||
</p>
|
||||
<div class="radio-group">
|
||||
{[
|
||||
{ value: "general", label: "General enquiry" },
|
||||
{ value: "volunteer", label: "Volunteering" },
|
||||
{ value: "participate", label: "Applying to participate" },
|
||||
{ value: "sponsor", label: "Sponsoring a pony" },
|
||||
{ value: "donate", label: "Donating / fundraising" },
|
||||
{ value: "media", label: "Press / media" },
|
||||
].map(opt => (
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="enquiry" value={opt.value} />
|
||||
<span class="radio-custom" />
|
||||
<span class="radio-text">{opt.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label for="cf-message" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
Message <span style="color: #7DA371;">*</span>
|
||||
</label>
|
||||
<textarea id="cf-message" class="field-input" name="message" rows="5" placeholder="Tell us a bit about what you'd like to know…" style="resize: vertical; line-height: 1.6;" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- How did you hear -->
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<label for="cf-hear" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
|
||||
How did you hear about us? <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
|
||||
</label>
|
||||
<select id="cf-hear" class="field-input" name="hear">
|
||||
<option value="">Select an option…</option>
|
||||
<option value="search">Search engine</option>
|
||||
<option value="social">Social media</option>
|
||||
<option value="word">Word of mouth</option>
|
||||
<option value="nhs">NHS / healthcare referral</option>
|
||||
<option value="school">School or college</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Turnstile -->
|
||||
{turnstileSiteKey && (
|
||||
<div class="cf-turnstile" data-sitekey={turnstileSiteKey} />
|
||||
)}
|
||||
|
||||
<!-- Submit -->
|
||||
<div style="padding-top: 4px;">
|
||||
<button
|
||||
class="inline-flex items-center rounded-full border border-black/20 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-black"
|
||||
type="submit"
|
||||
data-form-submit
|
||||
style="display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 15px 32px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s ease;"
|
||||
onmouseover="this.style.opacity='0.88'"
|
||||
onmouseout="this.style.opacity='1'"
|
||||
>
|
||||
Send message
|
||||
<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>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<p data-form-message style="margin-top: 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #4a7040; line-height: 1.6;"></p>
|
||||
<p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.4); line-height: 1.6;">
|
||||
We aim to respond within a few working days.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── QUICK LINKS ── -->
|
||||
<section class="ql-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;">
|
||||
More from us
|
||||
</p>
|
||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 36px;" />
|
||||
<div class="ql-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
|
||||
<a class="ql-card" href="/volunteer-application">
|
||||
<img class="ql-card-img" src="/Vols5-2880w-1024x768.avif" alt="Volunteers at Highland Group RDA" loading="lazy" decoding="async" />
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
|
||||
<div class="ql-card-band">
|
||||
<p class="ql-card-title">Apply to volunteer</p>
|
||||
<p class="ql-card-sub">Fill in our volunteer application form.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="ql-card" href="/participant-application">
|
||||
<img class="ql-card-img" src="/Samantha-and-Connolly-1280.webp" alt="Participant riding at Highland Group RDA" loading="lazy" decoding="async" />
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
|
||||
<div class="ql-card-band">
|
||||
<p class="ql-card-title">Apply to participate</p>
|
||||
<p class="ql-card-sub">Find out how to join our sessions.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="ql-card" href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
||||
<img class="ql-card-img" src="/alineofponies-1920w.webp" alt="Ponies at Highland Group RDA" loading="lazy" decoding="async" />
|
||||
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
|
||||
<div class="ql-card-band">
|
||||
<p class="ql-card-title">Donate</p>
|
||||
<p class="ql-card-sub">Support us via JustGiving.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="h-px w-full bg-black/20 mb-6"></div>
|
||||
<div
|
||||
class="overflow-hidden rounded-[7px] border border-black/10"
|
||||
>
|
||||
<iframe
|
||||
title="Highland Group RDA location"
|
||||
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
|
||||
class="w-full h-[300px] sm:h-[380px] border-0"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
|
||||
</main>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById("site-nav");
|
||||
if (nav) {
|
||||
window.addEventListener("scroll", () => {
|
||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
}
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue