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";
|
import { navigationItems } from "../lib/navigation";
|
||||||
|
|
||||||
const pageSeo = {
|
const pageSeo = {
|
||||||
title: "Contact",
|
title: "Contact Us",
|
||||||
description:
|
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:
|
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",
|
canonicalPath: "/contact",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -17,208 +17,371 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout {...pageSeo}>
|
<BaseLayout {...pageSeo}>
|
||||||
{
|
{turnstileSiteKey && (
|
||||||
turnstileSiteKey && (
|
<Fragment slot="head">
|
||||||
<Fragment slot="head">
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
|
||||||
<script
|
</Fragment>
|
||||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
)}
|
||||||
async
|
|
||||||
defer
|
|
||||||
/>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<Fragment slot="head">
|
<Fragment slot="head">
|
||||||
<script src="/contact-form.js" defer data-cfasync="false"></script>
|
<script src="/contact-form.js" defer data-cfasync="false" />
|
||||||
</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); }
|
||||||
|
|
||||||
|
.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">
|
<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
|
<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.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>
|
<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}
|
Contact Us
|
||||||
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
|
We'd love to hear from you.
|
||||||
class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 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
|
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.
|
||||||
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"
|
|
||||||
>
|
|
||||||
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>
|
</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
|
<!-- ── CONTACT SECTION ── -->
|
||||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
<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;">
|
||||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
|
||||||
<div
|
<!-- Left: details -->
|
||||||
class="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]"
|
<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>
|
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 24px;" />
|
||||||
<h2
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); color: #000; line-height: 1.2; margin-bottom: 28px;">
|
||||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
We'll get back to you as soon as we can.
|
||||||
>
|
</h2>
|
||||||
Contact details
|
|
||||||
</h2>
|
<div style="margin-bottom: 28px;">
|
||||||
<p
|
<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>
|
||||||
class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
|
<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
|
||||||
Highland Group RDA, Sandycroft, Reelig,
|
</a>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
<div style="margin-bottom: 28px;">
|
||||||
<h2
|
<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>
|
||||||
class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
|
<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
|
<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;">
|
||||||
</h2>
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
<form
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||||||
class="mt-4 space-y-4"
|
</svg>
|
||||||
action="/api/contact"
|
</span>
|
||||||
method="post"
|
Facebook
|
||||||
data-contact-form
|
</a>
|
||||||
>
|
</div>
|
||||||
{
|
|
||||||
!turnstileSiteKey && (
|
<!-- Map -->
|
||||||
<p class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900">
|
<div style="border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
|
||||||
Turnstile is not configured. Set
|
<iframe
|
||||||
PUBLIC_TURNSTILE_SITE_KEY and
|
title="Highland Group RDA location"
|
||||||
redeploy to enable the form.
|
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
|
||||||
</p>
|
style="width: 100%; height: 220px; border: 0; display: block;"
|
||||||
)
|
loading="lazy"
|
||||||
}
|
referrerpolicy="no-referrer-when-downgrade"
|
||||||
<div>
|
></iframe>
|
||||||
<label
|
</div>
|
||||||
class="block text-sm font-semibold text-black"
|
</div>
|
||||||
>Name</label
|
|
||||||
>
|
<!-- Right: form -->
|
||||||
<input
|
<div style="background: #e2e2e2; border-radius: 7px; padding: clamp(32px, 4vw, 52px);">
|
||||||
class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 22px; color: #000; margin-bottom: 6px;">Send us a message</p>
|
||||||
type="text"
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.5); margin-bottom: 28px;">
|
||||||
name="name"
|
Fields marked <span style="color: #7DA371;">*</span> are required.
|
||||||
autocomplete="name"
|
</p>
|
||||||
required
|
|
||||||
/>
|
{!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>
|
||||||
<div>
|
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||||
<label
|
<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;">
|
||||||
class="block text-sm font-semibold text-black"
|
Email address <span style="color: #7DA371;">*</span>
|
||||||
>Email</label
|
</label>
|
||||||
>
|
<input id="cf-email" class="field-input" type="email" name="email" placeholder="jane@example.com" autocomplete="email" required />
|
||||||
<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>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<label
|
|
||||||
class="block text-sm font-semibold text-black"
|
<!-- Phone -->
|
||||||
>Message</label
|
<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;">
|
||||||
<textarea
|
Phone number <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
|
||||||
class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
</label>
|
||||||
name="message"
|
<input id="cf-phone" class="field-input phone-field" type="tel" name="phone" placeholder="Optional" autocomplete="tel" style="max-width: 50%;" />
|
||||||
rows="4"
|
</div>
|
||||||
required></textarea>
|
|
||||||
</div>
|
<!-- Enquiry type -->
|
||||||
<div
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||||||
class="cf-turnstile"
|
<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;">
|
||||||
data-sitekey={turnstileSiteKey}
|
What is your enquiry about? <span style="color: #7DA371;">*</span>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="text-sm font-semibold text-black"
|
|
||||||
data-form-message
|
|
||||||
>
|
|
||||||
</p>
|
</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
|
<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"
|
type="submit"
|
||||||
data-form-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
|
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>
|
</button>
|
||||||
</form>
|
<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>
|
||||||
</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</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