Add news hero and about video section
This commit is contained in:
Calum Muir
parent
22d30d95af
commit
d5f58e0b43
6 changed files with 95 additions and 70 deletions
BIN
client/public/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4
Normal file
BIN
client/public/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4
Normal file
Binary file not shown.
BIN
client/public/news.webp
Normal file
BIN
client/public/news.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
|
|
@ -3,62 +3,60 @@ import React from "react";
|
||||||
export const SiteFooter = (): JSX.Element => {
|
export const SiteFooter = (): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<footer className="mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8">
|
<footer className="mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8">
|
||||||
<div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-4 sm:px-0 pb-8 pt-6 sm:pt-8">
|
<div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8">
|
||||||
<div className="w-full max-w-[1200px] mx-auto px-0 sm:px-8">
|
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
|
||||||
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
|
<p className="font-semibold">
|
||||||
|
Highland Group RDA is a registered charity in
|
||||||
|
<br />
|
||||||
|
Scotland{" "}
|
||||||
|
<a
|
||||||
|
className="underline"
|
||||||
|
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
SC007357
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<p className="font-semibold">
|
<p className="font-semibold">
|
||||||
Highland Group RDA is a registered charity in
|
Highland Group RDA, Sandycroft, Reelig, Kirkhill,
|
||||||
<br />
|
IV5 7PP
|
||||||
Scotland{" "}
|
</p>
|
||||||
|
<p className="font-semibold">
|
||||||
|
Tel: +447500 203226 · Email:{" "}
|
||||||
<a
|
<a
|
||||||
className="underline"
|
className="underline"
|
||||||
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
|
href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
>
|
||||||
SC007357
|
info@highlandgrouprda.org.uk
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
||||||
<p className="font-semibold">
|
|
||||||
Highland Group RDA, Sandycroft, Reelig,
|
|
||||||
Kirkhill, IV5 7PP
|
|
||||||
</p>
|
|
||||||
<p className="font-semibold">
|
|
||||||
Tel: +447500 203226 · Email:{" "}
|
|
||||||
<a
|
|
||||||
className="underline"
|
|
||||||
href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
|
|
||||||
>
|
|
||||||
info@highlandgrouprda.org.uk
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p className="mt-4 font-semibold">
|
|
||||||
<a className="underline" href="/privacy">
|
|
||||||
Privacy Policy
|
|
||||||
</a>{" "}
|
|
||||||
·{" "}
|
|
||||||
<a className="underline" href="/safeguarding">
|
|
||||||
Safeguarding
|
|
||||||
</a>{" "}
|
|
||||||
·{" "}
|
|
||||||
<a className="underline" href="/accessibility">
|
|
||||||
Accessibility
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p className="mt-4 font-semibold">
|
|
||||||
Site designed by{" "}
|
|
||||||
<a
|
|
||||||
className="underline"
|
|
||||||
href="https://muir.in"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
Calum Muir
|
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="mt-4 font-semibold">
|
||||||
|
<a className="underline" href="/privacy">
|
||||||
|
Privacy Policy
|
||||||
|
</a>{" "}
|
||||||
|
·{" "}
|
||||||
|
<a className="underline" href="/safeguarding">
|
||||||
|
Safeguarding
|
||||||
|
</a>{" "}
|
||||||
|
·{" "}
|
||||||
|
<a className="underline" href="/accessibility">
|
||||||
|
Accessibility
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="mt-4 font-semibold">
|
||||||
|
Site designed by{" "}
|
||||||
|
<a
|
||||||
|
className="underline"
|
||||||
|
href="https://muir.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
Calum Muir
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -299,6 +299,23 @@ export const About = (): JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<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="h-px w-24 bg-black/20" />
|
||||||
|
<h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
|
||||||
|
Apple foraging
|
||||||
|
</h2>
|
||||||
|
<div className="mt-6 overflow-hidden rounded-[7px] bg-black">
|
||||||
|
<video
|
||||||
|
className="w-full h-auto"
|
||||||
|
src="/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4"
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<SiteFooter />
|
<SiteFooter />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@ export const Desktop = (): JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-10 sm:pb-[60px]">
|
<section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
|
<div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
|
|
@ -138,7 +138,7 @@ export const Desktop = (): JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 sm:mt-[40px]">
|
<div className="mt-6 sm:mt-8">
|
||||||
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-[#d6d6d6] border-t border-black/20 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 bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8">
|
||||||
<div className="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
|
<div className="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
|
||||||
Highland Group RDA is a member of the
|
Highland Group RDA is a member of the
|
||||||
|
|
@ -168,8 +168,8 @@ export const Desktop = (): JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<SiteFooter />
|
|
||||||
</section>
|
</section>
|
||||||
|
<SiteFooter />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -34,25 +34,35 @@ const newsItems = [
|
||||||
export const News = (): JSX.Element => {
|
export const News = (): 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 className="flex flex-col gap-6">
|
<div
|
||||||
<div>
|
className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||||
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
style={{
|
||||||
Latest News
|
backgroundImage: "url(/news.webp)",
|
||||||
</p>
|
}}
|
||||||
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
|
>
|
||||||
Updates from Highland Group RDA
|
<div className="absolute inset-0 bg-black/45" />
|
||||||
</h1>
|
<SiteHeader
|
||||||
<p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[700px]">
|
navigationItems={navigationItems}
|
||||||
Stories, milestones, and updates from the yard,
|
theme="dark"
|
||||||
our riders, volunteers, and supporters.
|
className="px-6 sm:px-4"
|
||||||
</p>
|
/>
|
||||||
|
<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">
|
||||||
|
Latest News
|
||||||
|
</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]">
|
||||||
|
Updates from 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-[700px]">
|
||||||
|
Stories, milestones, and updates from the
|
||||||
|
yard, our riders, volunteers, and
|
||||||
|
supporters.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue