Update support, contact, and facebook pages
This commit is contained in:
Calum Muir
parent
32b5c0caba
commit
0e9b25bba1
7 changed files with 398 additions and 221 deletions
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
BIN
client/public/Kenneth.jpg
Normal file
BIN
client/public/Kenneth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -12,6 +12,7 @@ import { Contact } from "@/pages/Contact";
|
|||
import { SupportUs } from "@/pages/SupportUs";
|
||||
import { Privacy } from "@/pages/Privacy";
|
||||
import { NewsArticle } from "@/pages/NewsArticle";
|
||||
import { Facebook } from "@/pages/Facebook";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
|
|
@ -21,6 +22,7 @@ function Router() {
|
|||
<Route path="/about" component={About} />
|
||||
<Route path="/news" component={News} />
|
||||
<Route path="/news/:slug" component={NewsArticle} />
|
||||
<Route path="/facebook" component={Facebook} />
|
||||
<Route path="/support" component={SupportUs} />
|
||||
<Route path="/contact" component={Contact} />
|
||||
<Route path="/privacy" component={Privacy} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { FaFacebookF } from "react-icons/fa";
|
||||
|
||||
type NavItem = {
|
||||
label: string;
|
||||
|
|
@ -9,12 +10,14 @@ type SiteHeaderProps = {
|
|||
navigationItems: NavItem[];
|
||||
theme?: "dark" | "light";
|
||||
className?: string;
|
||||
facebookHref?: string;
|
||||
};
|
||||
|
||||
export const SiteHeader = ({
|
||||
navigationItems,
|
||||
theme = "light",
|
||||
className = "",
|
||||
facebookHref = "/facebook",
|
||||
}: SiteHeaderProps): JSX.Element => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const isDark = theme === "dark";
|
||||
|
|
@ -60,6 +63,18 @@ export const SiteHeader = ({
|
|||
</a>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<a
|
||||
className="flex items-center gap-3 border-b border-black/10 pb-4"
|
||||
href={facebookHref}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
<span className="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black">
|
||||
<FaFacebookF className="h-4 w-4" />
|
||||
</span>
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -109,6 +124,15 @@ export const SiteHeader = ({
|
|||
</a>
|
||||
</li>
|
||||
))}
|
||||
<li className="hidden sm:block">
|
||||
<a
|
||||
className={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
|
||||
href={facebookHref}
|
||||
aria-label="Highland Group RDA on Facebook"
|
||||
>
|
||||
<FaFacebookF className="h-4 w-4" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,98 +13,128 @@ const navigationItems = [
|
|||
export const Contact = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
|
||||
/>
|
||||
|
||||
<main className="w-full">
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
Get in touch
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Contact Highland Group RDA
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black 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>
|
||||
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/45" />
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
|
||||
<div className="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 className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
|
||||
Get in touch
|
||||
</p>
|
||||
<div className="mt-3 h-[2px] w-10 bg-white/70" />
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Contact Highland Group RDA
|
||||
</h1>
|
||||
<p className="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>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
|
||||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Contact details
|
||||
</h2>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
The Highland Group RDA, Culloden, Inverness, IV2
|
||||
</p>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Tel: 01463 000 000
|
||||
<br />
|
||||
Email: info@highlandrda.org.uk
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a
|
||||
className="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@highlandrda.org.uk"
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
|
||||
<div>
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Contact details
|
||||
</h2>
|
||||
<p className="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 className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Tel: +447500 203226
|
||||
<br />
|
||||
Email: info@highlandgrouprda.org.uk
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a
|
||||
className="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 className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Send a message
|
||||
</h2>
|
||||
<form
|
||||
className="mt-4 space-y-4"
|
||||
action="#"
|
||||
method="post"
|
||||
>
|
||||
Email us
|
||||
</a>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
name="message"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="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"
|
||||
>
|
||||
Send message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Send a message
|
||||
</h2>
|
||||
<form
|
||||
className="mt-4 space-y-4"
|
||||
action="#"
|
||||
method="post"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="text"
|
||||
name="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-black">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
className="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
|
||||
name="message"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="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"
|
||||
>
|
||||
Send message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div className="h-px w-full bg-black/20 mb-6" />
|
||||
<div className="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"
|
||||
className="w-full h-[300px] sm:h-[380px] border-0"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
83
client/src/pages/Facebook.tsx
Normal file
83
client/src/pages/Facebook.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import React from "react";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
|
||||
const navigationItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "News", href: "/news" },
|
||||
{ label: "Support Us", href: "/support" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
const facebookPageUrl =
|
||||
"https://www.facebook.com/profile.php?id=100064729054822";
|
||||
|
||||
const facebookEmbedUrl =
|
||||
"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064729054822&tabs=timeline&width=500&height=900&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true";
|
||||
|
||||
export const Facebook = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<main className="w-full">
|
||||
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/45" />
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
facebookHref={facebookPageUrl}
|
||||
/>
|
||||
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
|
||||
<div className="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 className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
|
||||
Social
|
||||
</p>
|
||||
<div className="mt-3 h-[2px] w-10 bg-white/70" />
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
Facebook updates
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
|
||||
Follow our latest news, events, and photos
|
||||
on Facebook.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div className="mt-6 w-full max-w-[500px] mx-auto">
|
||||
<iframe
|
||||
title="Highland Group RDA Facebook feed"
|
||||
src={facebookEmbedUrl}
|
||||
width="500"
|
||||
height="900"
|
||||
className="w-full h-[700px] sm:h-[900px] border-0 rounded-[7px] bg-white"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
className="mt-6 inline-flex [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
|
||||
href={facebookPageUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Visit our Facebook page
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -13,40 +13,50 @@ const navigationItems = [
|
|||
export const SupportUs = (): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
|
||||
/>
|
||||
|
||||
<main className="w-full">
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
Support Us
|
||||
</p>
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
We are able to carry out our life-changing
|
||||
activities thanks to you.
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
||||
We couldn't do what we do without the hard work
|
||||
and dedication of our wonderful volunteers and
|
||||
fundraisers. We wouldn't be where we are
|
||||
without the kindness and generosity of our sponsors
|
||||
and donors.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
||||
We understand not everyone is in the position to be
|
||||
able to volunteer but donations are just as
|
||||
impactful. We are truly grateful for any and every
|
||||
donation received as we can only do what we do as a
|
||||
result of self-funding.
|
||||
</p>
|
||||
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style={{ backgroundImage: "url(/Kenneth.jpg)" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/45" />
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
|
||||
<div className="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 className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
|
||||
Support Us
|
||||
</p>
|
||||
<div className="mt-3 h-[2px] w-10 bg-white/70" />
|
||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
|
||||
We are able to carry out our life-changing
|
||||
activities thanks to you.
|
||||
</h1>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
||||
We couldn't do what we do without the
|
||||
hard work and dedication of our wonderful
|
||||
volunteers and fundraisers. We wouldn't
|
||||
be where we are without the kindness and
|
||||
generosity of our sponsors and donors.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
||||
We understand not everyone is in the
|
||||
position to be able to volunteer but
|
||||
donations are just as impactful. We are
|
||||
truly grateful for any and every donation
|
||||
received as we can only do what we do as a
|
||||
result of self-funding.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
|
||||
<div className="bg-[#f2e2a2] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
|
|
@ -81,73 +91,94 @@ export const SupportUs = (): JSX.Element => {
|
|||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Volunteering
|
||||
</h2>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We welcome all volunteers, you don't have to
|
||||
know anything about horses, or even like being
|
||||
around animals, there are plenty of other
|
||||
opportunities for you to get involved and help us.
|
||||
We also need lots of help with other tasks such as
|
||||
fundraising, publicity, painting, creating new
|
||||
activities for the participants and general
|
||||
maintenance.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Volunteering for sessions involves:
|
||||
</p>
|
||||
<ul className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
|
||||
<li>Grooming</li>
|
||||
<li>Tacking up the ponies</li>
|
||||
<li>
|
||||
Leading the ponies and/or walking beside the
|
||||
ponies to support the riders
|
||||
</li>
|
||||
<li>Poo picking the fields</li>
|
||||
</ul>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
To find out more about volunteering for an RDA
|
||||
centre, download our Volunteer Information Pack.
|
||||
</p>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How much time do I need to commit?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
If you are keen to work with our participants then
|
||||
you would need to be available during one of our
|
||||
session times - Tuesday - Friday mornings. If you
|
||||
can commit to helping regularly it would be great,
|
||||
but everyone understands that's not always
|
||||
possible and there are usually many other flexible
|
||||
options available - especially in summer.
|
||||
</p>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How can I apply?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You can contact us via email or phone by clicking
|
||||
here.
|
||||
</p>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How old do I need to be and what credentials do I
|
||||
need to have?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
All volunteers must be 12 or over. There is no upper
|
||||
age limit. We have Public Liability insurance and
|
||||
Trustee Indemnity for all volunteers. Volunteers
|
||||
aged between 12 and 90 also have Personal Accident
|
||||
insurance (with some restrictions for those aged
|
||||
between 80 and 90).
|
||||
</p>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You will need to provide the names and contact
|
||||
details of 2 referees who are not a relative or
|
||||
partner and who have known you for more than 1 year.
|
||||
Volunteers of 16 years of age and over who are
|
||||
actively involved with our sessions are required to
|
||||
undergo an enhanced disclosure check because they
|
||||
are volunteering with vulnerable adults and
|
||||
children.
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We welcome all volunteers, you don't
|
||||
have to know anything about horses, or even
|
||||
like being around animals, there are plenty
|
||||
of other opportunities for you to get
|
||||
involved and help us. We also need lots of
|
||||
help with other tasks such as fundraising,
|
||||
publicity, painting, creating new activities
|
||||
for the participants and general
|
||||
maintenance.
|
||||
</p>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
Volunteering for sessions involves:
|
||||
</p>
|
||||
<ul className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
|
||||
<li>Grooming</li>
|
||||
<li>Tacking up the ponies</li>
|
||||
<li>
|
||||
Leading the ponies and/or walking beside
|
||||
the ponies to support the riders
|
||||
</li>
|
||||
<li>Poo picking the fields</li>
|
||||
</ul>
|
||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
To find out more about volunteering for an
|
||||
RDA centre, download our Volunteer
|
||||
Information Pack.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How much time do I need to commit?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
If you are keen to work with our
|
||||
participants then you would need to be
|
||||
available during one of our session
|
||||
times - Tuesday - Friday mornings. If
|
||||
you can commit to helping regularly it
|
||||
would be great, but everyone understands
|
||||
that's not always possible and
|
||||
there are usually many other flexible
|
||||
options available - especially in
|
||||
summer.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How can I apply?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You can contact us via email or phone by
|
||||
clicking here.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How old do I need to be and what
|
||||
credentials do I need to have?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
All volunteers must be 12 or over. There
|
||||
is no upper age limit. We have Public
|
||||
Liability insurance and Trustee
|
||||
Indemnity for all volunteers. Volunteers
|
||||
aged between 12 and 90 also have
|
||||
Personal Accident insurance (with some
|
||||
restrictions for those aged between 80
|
||||
and 90).
|
||||
</p>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You will need to provide the names and
|
||||
contact details of 2 referees who are
|
||||
not a relative or partner and who have
|
||||
known you for more than 1 year.
|
||||
Volunteers of 16 years of age and over
|
||||
who are actively involved with our
|
||||
sessions are required to undergo an
|
||||
enhanced disclosure check because they
|
||||
are volunteering with vulnerable adults
|
||||
and children.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -156,45 +187,52 @@ export const SupportUs = (): JSX.Element => {
|
|||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||
Sponsor a pony
|
||||
</h2>
|
||||
<h3 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
Why sponsor a pony?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We currently have a school of ponies which all
|
||||
require care and attention. Our volunteers and
|
||||
coaches work hard every day all year round to ensure
|
||||
our ponies are well looked after and suitable for
|
||||
our riders. By sponsoring a pony, you are enabling
|
||||
us to enrich the lives of disabled children and
|
||||
adults throughout the Highlands.
|
||||
</p>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How much does it cost to sponsor a Highland Group
|
||||
RDA pony?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You can sponsor as little or as much as you like but
|
||||
here are some of the things we regularly need to
|
||||
look after our ponies and ensure we can keep running
|
||||
our RDA sessions.
|
||||
</p>
|
||||
<ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
|
||||
<li>£34 every 6 weeks for hoof trimming</li>
|
||||
<li>£35 for a large bale of hay</li>
|
||||
<li>£60 for a vet to visit</li>
|
||||
<li>£20 for a bag of feed</li>
|
||||
<li>£4 for a bag of carrots</li>
|
||||
<li>£30 to fund a riding session</li>
|
||||
<li>£75 to buy a riding hat</li>
|
||||
</ul>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How do I pay?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We are working on a payment method so we thank you
|
||||
for bearing with us. If you would like more
|
||||
information, please get in touch.
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
Why sponsor a pony?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We currently have a school of ponies which
|
||||
all require care and attention. Our
|
||||
volunteers and coaches work hard every day
|
||||
all year round to ensure our ponies are well
|
||||
looked after and suitable for our riders. By
|
||||
sponsoring a pony, you are enabling us to
|
||||
enrich the lives of disabled children and
|
||||
adults throughout the Highlands.
|
||||
</p>
|
||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How do I pay?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
We are working on a payment method so we
|
||||
thank you for bearing with us. If you would
|
||||
like more information, please get in touch.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||
How much does it cost to sponsor a Highland
|
||||
Group RDA pony?
|
||||
</h3>
|
||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||
You can sponsor as little or as much as you
|
||||
like but here are some of the things we
|
||||
regularly need to look after our ponies and
|
||||
ensure we can keep running our RDA sessions.
|
||||
</p>
|
||||
<ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
|
||||
<li>£34 every 6 weeks for hoof trimming</li>
|
||||
<li>£35 for a large bale of hay</li>
|
||||
<li>£60 for a vet to visit</li>
|
||||
<li>£20 for a bag of feed</li>
|
||||
<li>£4 for a bag of carrots</li>
|
||||
<li>£30 to fund a riding session</li>
|
||||
<li>£75 to buy a riding hat</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue