calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add news hero and about video section

Browse source
This commit is contained in:
Calum Muir 2025-12-21 16:45:38 +00:00
parent 22d30d95af
commit d5f58e0b43
6 changed files with 95 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4 Normal file
View file

Binary file not shown.

BIN
client/public/news.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

8
client/src/components/SiteFooter.tsx
View file

@ -3,8 +3,7 @@ import React from "react";
export const SiteFooter = (): JSX.Element => {
return (
<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="w-full max-w-[1200px] mx-auto px-0 sm:px-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="[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
@ -21,8 +20,8 @@ export const SiteFooter = (): JSX.Element => {
</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
Highland Group RDA, Sandycroft, Reelig, Kirkhill,
IV5 7PP
</p>
<p className="font-semibold">
Tel: +447500 203226 · Email:{" "}
@ -60,7 +59,6 @@ export const SiteFooter = (): JSX.Element => {
</p>
</div>
</div>
</div>
</footer>
);
};

17
client/src/pages/About.tsx
View file

@ -299,6 +299,23 @@ export const About = (): JSX.Element => {
</div>
</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 />
</main>
</div>

6
client/src/pages/Desktop.tsx
View file

@ -96,7 +96,7 @@ export const Desktop = (): JSX.Element => {
</div>
</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="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
<div className="text-center">
@ -138,7 +138,7 @@ export const Desktop = (): JSX.Element => {
</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-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
@ -168,8 +168,8 @@ export const Desktop = (): JSX.Element => {
</div>
</div>
</div>
<SiteFooter />
</section>
<SiteFooter />
</main>
</div>
);

32
client/src/pages/News.tsx
View file

@ -34,27 +34,37 @@ const newsItems = [
export const News = (): 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(/news.webp)",
}}
>
<div className="absolute inset-0 bg-black/45" />
<SiteHeader
navigationItems={navigationItems}
className="w-full max-w-[1200px] mx-auto px-4 sm:px-8"
theme="dark"
className="px-6 sm:px-4"
/>
<main className="w-full">
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
<div className="flex flex-col gap-6">
<div>
<p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
<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>
<h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
<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-black text-base sm:text-lg leading-[1.6] max-w-[700px]">
Stories, milestones, and updates from the yard,
our riders, volunteers, and supporters.
<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>
</section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12 pb-10">