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 { SupportUs } from "@/pages/SupportUs";
|
||||||
import { Privacy } from "@/pages/Privacy";
|
import { Privacy } from "@/pages/Privacy";
|
||||||
import { NewsArticle } from "@/pages/NewsArticle";
|
import { NewsArticle } from "@/pages/NewsArticle";
|
||||||
|
import { Facebook } from "@/pages/Facebook";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -21,6 +22,7 @@ function Router() {
|
||||||
<Route path="/about" component={About} />
|
<Route path="/about" component={About} />
|
||||||
<Route path="/news" component={News} />
|
<Route path="/news" component={News} />
|
||||||
<Route path="/news/:slug" component={NewsArticle} />
|
<Route path="/news/:slug" component={NewsArticle} />
|
||||||
|
<Route path="/facebook" component={Facebook} />
|
||||||
<Route path="/support" component={SupportUs} />
|
<Route path="/support" component={SupportUs} />
|
||||||
<Route path="/contact" component={Contact} />
|
<Route path="/contact" component={Contact} />
|
||||||
<Route path="/privacy" component={Privacy} />
|
<Route path="/privacy" component={Privacy} />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import { FaFacebookF } from "react-icons/fa";
|
||||||
|
|
||||||
type NavItem = {
|
type NavItem = {
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -9,12 +10,14 @@ type SiteHeaderProps = {
|
||||||
navigationItems: NavItem[];
|
navigationItems: NavItem[];
|
||||||
theme?: "dark" | "light";
|
theme?: "dark" | "light";
|
||||||
className?: string;
|
className?: string;
|
||||||
|
facebookHref?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SiteHeader = ({
|
export const SiteHeader = ({
|
||||||
navigationItems,
|
navigationItems,
|
||||||
theme = "light",
|
theme = "light",
|
||||||
className = "",
|
className = "",
|
||||||
|
facebookHref = "/facebook",
|
||||||
}: SiteHeaderProps): JSX.Element => {
|
}: SiteHeaderProps): JSX.Element => {
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
const isDark = theme === "dark";
|
const isDark = theme === "dark";
|
||||||
|
|
@ -60,6 +63,18 @@ export const SiteHeader = ({
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,6 +124,15 @@ export const SiteHeader = ({
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,98 +13,128 @@ const navigationItems = [
|
||||||
export const Contact = (): JSX.Element => {
|
export const Contact = (): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
<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">
|
<main className="w-full">
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||||
<div>
|
<div
|
||||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||||
Get in touch
|
style={{
|
||||||
</p>
|
backgroundImage:
|
||||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
"url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
|
||||||
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]">
|
<div className="absolute inset-0 bg-black/45" />
|
||||||
We would love to hear from you about sessions,
|
<SiteHeader
|
||||||
volunteering, or ways to support the group. Reach
|
navigationItems={navigationItems}
|
||||||
out and we will get back to you as soon as we can.
|
theme="dark"
|
||||||
</p>
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">
|
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
|
||||||
<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">
|
||||||
<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]">
|
||||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
<div>
|
||||||
Contact details
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
</h2>
|
Contact details
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
</h2>
|
||||||
The Highland Group RDA, Culloden, Inverness, IV2
|
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
</p>
|
Highland Group RDA, Sandycroft, Reelig,
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
Kirkhill, IV5 7PP
|
||||||
Tel: 01463 000 000
|
</p>
|
||||||
<br />
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
Email: info@highlandrda.org.uk
|
Tel: +447500 203226
|
||||||
</p>
|
<br />
|
||||||
<div className="mt-6">
|
Email: info@highlandgrouprda.org.uk
|
||||||
<a
|
</p>
|
||||||
className="inline-flex items-center rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
|
<div className="mt-6">
|
||||||
href="mailto:info@highlandrda.org.uk"
|
<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
|
<div>
|
||||||
</a>
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
|
</section>
|
||||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
|
||||||
Send a message
|
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||||
</h2>
|
<div className="h-px w-full bg-black/20 mb-6" />
|
||||||
<form
|
<div className="overflow-hidden rounded-[7px] border border-black/10">
|
||||||
className="mt-4 space-y-4"
|
<iframe
|
||||||
action="#"
|
title="Highland Group RDA location"
|
||||||
method="post"
|
src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
|
||||||
>
|
className="w-full h-[300px] sm:h-[380px] border-0"
|
||||||
<div>
|
loading="lazy"
|
||||||
<label className="block text-sm font-semibold text-black">
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
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>
|
</div>
|
||||||
</section>
|
</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 => {
|
export const SupportUs = (): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
<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">
|
<main className="w-full">
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||||
<div>
|
<div
|
||||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||||
Support Us
|
style={{ backgroundImage: "url(/Kenneth.jpg)" }}
|
||||||
</p>
|
>
|
||||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
<div className="absolute inset-0 bg-black/45" />
|
||||||
We are able to carry out our life-changing
|
<SiteHeader
|
||||||
activities thanks to you.
|
navigationItems={navigationItems}
|
||||||
</h1>
|
theme="dark"
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
className="px-6 sm:px-4"
|
||||||
We couldn't do what we do without the hard work
|
/>
|
||||||
and dedication of our wonderful volunteers and
|
<div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
|
||||||
fundraisers. We wouldn't be where we are
|
<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">
|
||||||
without the kindness and generosity of our sponsors
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
|
||||||
and donors.
|
Support Us
|
||||||
</p>
|
</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]">
|
<div className="mt-3 h-[2px] w-10 bg-white/70" />
|
||||||
We understand not everyone is in the position to be
|
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
|
||||||
able to volunteer but donations are just as
|
We are able to carry out our life-changing
|
||||||
impactful. We are truly grateful for any and every
|
activities thanks to you.
|
||||||
donation received as we can only do what we do as a
|
</h1>
|
||||||
result of self-funding.
|
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
|
||||||
</p>
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
|
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
|
||||||
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
<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 className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
<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">
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
Volunteering
|
Volunteering
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||||
We welcome all volunteers, you don't have to
|
<div>
|
||||||
know anything about horses, or even like being
|
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
around animals, there are plenty of other
|
We welcome all volunteers, you don't
|
||||||
opportunities for you to get involved and help us.
|
have to know anything about horses, or even
|
||||||
We also need lots of help with other tasks such as
|
like being around animals, there are plenty
|
||||||
fundraising, publicity, painting, creating new
|
of other opportunities for you to get
|
||||||
activities for the participants and general
|
involved and help us. We also need lots of
|
||||||
maintenance.
|
help with other tasks such as fundraising,
|
||||||
</p>
|
publicity, painting, creating new activities
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
for the participants and general
|
||||||
Volunteering for sessions involves:
|
maintenance.
|
||||||
</p>
|
</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">
|
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
<li>Grooming</li>
|
Volunteering for sessions involves:
|
||||||
<li>Tacking up the ponies</li>
|
</p>
|
||||||
<li>
|
<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">
|
||||||
Leading the ponies and/or walking beside the
|
<li>Grooming</li>
|
||||||
ponies to support the riders
|
<li>Tacking up the ponies</li>
|
||||||
</li>
|
<li>
|
||||||
<li>Poo picking the fields</li>
|
Leading the ponies and/or walking beside
|
||||||
</ul>
|
the ponies to support the riders
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
</li>
|
||||||
To find out more about volunteering for an RDA
|
<li>Poo picking the fields</li>
|
||||||
centre, download our Volunteer Information Pack.
|
</ul>
|
||||||
</p>
|
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
To find out more about volunteering for an
|
||||||
How much time do I need to commit?
|
RDA centre, download our Volunteer
|
||||||
</h3>
|
Information Pack.
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
</p>
|
||||||
If you are keen to work with our participants then
|
</div>
|
||||||
you would need to be available during one of our
|
<div className="space-y-6">
|
||||||
session times - Tuesday - Friday mornings. If you
|
<div>
|
||||||
can commit to helping regularly it would be great,
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
but everyone understands that's not always
|
How much time do I need to commit?
|
||||||
possible and there are usually many other flexible
|
</h3>
|
||||||
options available - especially in summer.
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
</p>
|
If you are keen to work with our
|
||||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
participants then you would need to be
|
||||||
How can I apply?
|
available during one of our session
|
||||||
</h3>
|
times - Tuesday - Friday mornings. If
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
you can commit to helping regularly it
|
||||||
You can contact us via email or phone by clicking
|
would be great, but everyone understands
|
||||||
here.
|
that's not always possible and
|
||||||
</p>
|
there are usually many other flexible
|
||||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
options available - especially in
|
||||||
How old do I need to be and what credentials do I
|
summer.
|
||||||
need to have?
|
</p>
|
||||||
</h3>
|
</div>
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
<div>
|
||||||
All volunteers must be 12 or over. There is no upper
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
age limit. We have Public Liability insurance and
|
How can I apply?
|
||||||
Trustee Indemnity for all volunteers. Volunteers
|
</h3>
|
||||||
aged between 12 and 90 also have Personal Accident
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
insurance (with some restrictions for those aged
|
You can contact us via email or phone by
|
||||||
between 80 and 90).
|
clicking here.
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
</div>
|
||||||
You will need to provide the names and contact
|
<div>
|
||||||
details of 2 referees who are not a relative or
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
partner and who have known you for more than 1 year.
|
How old do I need to be and what
|
||||||
Volunteers of 16 years of age and over who are
|
credentials do I need to have?
|
||||||
actively involved with our sessions are required to
|
</h3>
|
||||||
undergo an enhanced disclosure check because they
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
are volunteering with vulnerable adults and
|
All volunteers must be 12 or over. There
|
||||||
children.
|
is no upper age limit. We have Public
|
||||||
</p>
|
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>
|
</div>
|
||||||
</section>
|
</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">
|
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
Sponsor a pony
|
Sponsor a pony
|
||||||
</h2>
|
</h2>
|
||||||
<h3 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||||
Why sponsor a pony?
|
<div>
|
||||||
</h3>
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
Why sponsor a pony?
|
||||||
We currently have a school of ponies which all
|
</h3>
|
||||||
require care and attention. Our volunteers and
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
coaches work hard every day all year round to ensure
|
We currently have a school of ponies which
|
||||||
our ponies are well looked after and suitable for
|
all require care and attention. Our
|
||||||
our riders. By sponsoring a pony, you are enabling
|
volunteers and coaches work hard every day
|
||||||
us to enrich the lives of disabled children and
|
all year round to ensure our ponies are well
|
||||||
adults throughout the Highlands.
|
looked after and suitable for our riders. By
|
||||||
</p>
|
sponsoring a pony, you are enabling us to
|
||||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
enrich the lives of disabled children and
|
||||||
How much does it cost to sponsor a Highland Group
|
adults throughout the Highlands.
|
||||||
RDA pony?
|
</p>
|
||||||
</h3>
|
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
How do I pay?
|
||||||
You can sponsor as little or as much as you like but
|
</h3>
|
||||||
here are some of the things we regularly need to
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
look after our ponies and ensure we can keep running
|
We are working on a payment method so we
|
||||||
our RDA sessions.
|
thank you for bearing with us. If you would
|
||||||
</p>
|
like more information, please get in touch.
|
||||||
<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">
|
</p>
|
||||||
<li>£34 every 6 weeks for hoof trimming</li>
|
</div>
|
||||||
<li>£35 for a large bale of hay</li>
|
<div>
|
||||||
<li>£60 for a vet to visit</li>
|
<h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
||||||
<li>£20 for a bag of feed</li>
|
How much does it cost to sponsor a Highland
|
||||||
<li>£4 for a bag of carrots</li>
|
Group RDA pony?
|
||||||
<li>£30 to fund a riding session</li>
|
</h3>
|
||||||
<li>£75 to buy a riding hat</li>
|
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
||||||
</ul>
|
You can sponsor as little or as much as you
|
||||||
<h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
|
like but here are some of the things we
|
||||||
How do I pay?
|
regularly need to look after our ponies and
|
||||||
</h3>
|
ensure we can keep running our RDA sessions.
|
||||||
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
|
</p>
|
||||||
We are working on a payment method so we thank you
|
<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">
|
||||||
for bearing with us. If you would like more
|
<li>£34 every 6 weeks for hoof trimming</li>
|
||||||
information, please get in touch.
|
<li>£35 for a large bale of hay</li>
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue