Update homepage layout and add about page

client/src/App.tsx

@@ -6,12 +6,14 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import NotFound from "@/pages/not-found";
 
 import { Desktop } from "@/pages/Desktop";
+import { About } from "@/pages/About";
 
 function Router() {
     return (
         <Switch>
             {/* Add pages below */}
             <Route path="/" component={Desktop} />
+            <Route path="/about" component={About} />
             {/* Fallback to 404 */}
             <Route component={NotFound} />
         </Switch>

client/src/pages/About.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+
+const navigationItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "News", href: "#" },
+    { label: "Support Us", href: "#" },
+    { label: "Contact", href: "#" },
+];
+
+export const About = (): JSX.Element => {
+    return (
+        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+            <header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
+                <div className="flex flex-row items-start justify-between gap-4">
+                    <img
+                        className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                        alt="Rdalogo"
+                        src="/figmaAssets/rdalogo-1.svg"
+                    />
+                    <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
+                        <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
+                            {navigationItems.map((item) => (
+                                <li key={item.label}>
+                                    <a className="hover:underline" href={item.href}>
+                                        {item.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                </div>
+            </header>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
+                <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
+                    <div>
+                        <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                            About Highland Group RDA
+                        </p>
+                        <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
+                            Enriching lives through horses in the Highlands since
+                            1975.
+                        </h1>
+                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
+                            Highland Group RDA is a member of the National Riding for
+                            the Disabled Association (RDA), and of the Grampian and
+                            Highland Regional RDA. We provide safe, supportive
+                            sessions that help riders build confidence, strength, and
+                            connection through equine activities.
+                        </p>
+                    </div>
+                    <div className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]" style={{ backgroundImage: "url(/Samantha-and-Connolly.jpg)" }}>
+                        <div className="absolute inset-0 bg-black/20" />
+                    </div>
+                </div>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
+                <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+                    <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">
+                            Our Mission
+                        </h2>
+                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
+                            Our mission is to bring about meaningful and positive
+                            changes in the health and well-being of people with
+                            physical or mental disabilities through activities with
+                            our horses and ponies.
+                        </p>
+                    </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">
+                            What We Do
+                        </h2>
+                        <ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] space-y-3">
+                            <li>Inclusive riding sessions for all abilities.</li>
+                            <li>Supportive, qualified volunteers and coaches.</li>
+                            <li>Community events and family engagement.</li>
+                            <li>Opportunities to grow confidence and independence.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
+                <div className="bg-[#d6d6d6] px-6 sm:px-8 py-8 sm:py-10">
+                    <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">
+                                Support the Work
+                            </h2>
+                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
+                                Your support helps us keep sessions accessible and
+                                safe. Donations go directly towards horse care,
+                                equipment, and volunteer training.
+                            </p>
+                        </div>
+                        <a
+                            className="w-full sm:w-[240px] h-[50px]"
+                            href="https://www.justgiving.com/charity/highlandgrouprda"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <img
+                                className="w-full h-full object-contain"
+                                alt="Donate via JustGiving"
+                                src="/Button.png"
+                            />
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <footer className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-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
+                        <br />
+                        Scotland SCIO 2342343
+                    </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>
+            </footer>
+        </div>
+    );
+};

client/src/pages/Desktop.tsx

@@ -1,109 +1,198 @@
-import React from "react";
+import React, { useState } from "react";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 
-const navigationItems = ["about", "home", "contact", "news"];
+const navigationItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "News", href: "#" },
+    { label: "Support Us", href: "#" },
+    { label: "Contact", href: "#" },
+];
 
 const cardData = [
     {
         title: "About Us",
         backgroundImage: "bg-cover bg-[50%_50%]",
+        imageUrl: "/Wispa-2880w-906x1536.avif",
     },
     {
         title: "Support Us",
         backgroundImage: "bg-cover bg-[50%_50%]",
+        imageUrl:
+            "/223152689_6028821187158318_7901235528269673744_n-1920w-1.webp",
     },
     {
         title: "Contact",
         backgroundImage: "bg-cover bg-[50%_50%]",
+        imageUrl:
+            "/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp",
     },
 ];
 
 export const Desktop = (): JSX.Element => {
+    const [menuOpen, setMenuOpen] = useState(false);
     return (
         <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
-      <header className="w-full max-w-[1020px] mx-auto px-4">
+            {menuOpen && (
-        <div className="flex items-end justify-between h-[108px]">
+                <div
+                    id="mobile-menu"
+                    className="fixed inset-0 z-50 flex flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
+                    role="dialog"
+                    aria-modal="true"
+                >
+                    <div className="flex items-center justify-between">
                         <img
-            className="w-[177px] h-[93px]"
+                            className="w-[140px] h-[75px]"
                             alt="Rdalogo"
                             src="/figmaAssets/rdalogo-1.svg"
                         />
-          <nav className="h-7 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal] whitespace-nowrap">
+                        <button
-            {navigationItems.join(" ")}
+                            className="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
+                            type="button"
+                            onClick={() => setMenuOpen(false)}
+                        >
+                            Close
+                        </button>
+                    </div>
+                    <nav className="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]">
+                        <ul className="flex flex-col gap-6">
+                            {navigationItems.map((item) => (
+                                <li key={item.label}>
+                                    <a
+                                        className="block border-b border-black/10 pb-4"
+                                        href={item.href}
+                                        onClick={() => setMenuOpen(false)}
+                                    >
+                                        {item.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
                     </nav>
                 </div>
-      </header>
+            )}
 
-      <section className="w-full max-w-[1020px] mx-auto px-4 py-[42px]">
+            <section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
-        <div className="flex items-end justify-between gap-4">
+                <div
-          <h1 className="flex-1 max-w-[612px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0] leading-[normal]">
+                    className="relative w-full min-h-[70vh] sm:min-h-0 bg-cover bg-[50%_50%] overflow-hidden"
-            <span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
+                    style={{
+                        backgroundImage: "url(/Samantha-and-Connolly.jpg)",
+                    }}
+                >
+                    <div className="absolute inset-0 bg-black/35" />
+                    <header className="relative w-full px-6 sm:px-4">
+                        <div className="flex flex-row items-start justify-between gap-3 pt-4 sm:pt-4 sm:h-[108px]">
+                            <img
+                                className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
+                                alt="Rdalogo"
+                                src="/figmaAssets/rdalogo-1.svg"
+                            />
+                            <div className="flex flex-col gap-3 items-end ml-auto text-right">
+                                <button
+                                    className="inline-flex items-center gap-3 rounded-full border border-white/40 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white sm:hidden"
+                                    type="button"
+                                    onClick={() => setMenuOpen(true)}
+                                    aria-haspopup="dialog"
+                                    aria-expanded={menuOpen}
+                                    aria-controls="mobile-menu"
+                                >
+                                    <span className="flex flex-col gap-1">
+                                        <span className="inline-block h-0.5 w-5 bg-white" />
+                                        <span className="inline-block h-0.5 w-5 bg-white" />
+                                        <span className="inline-block h-0.5 w-5 bg-white" />
+                                    </span>
+                                    Menu
+                                </button>
+                                <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-white text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1">
+                                    <ul className="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto">
+                                        {navigationItems.map((item) => (
+                                            <li key={item.label}>
+                                                <a
+                                                    className="hover:underline"
+                                                    href={item.href}
+                                                >
+                                                    {item.label}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </nav>
+                                <a
+                                    className="w-[200px] sm:w-[240px] h-[50px]"
+                                    href="https://www.justgiving.com/charity/highlandgrouprda"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    <img
+                                        className="w-full h-full object-contain"
+                                        alt="Donate via JustGiving"
+                                        src="/Button.png"
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </header>
+                    <div className="relative px-4 sm:px-6 pt-6 pb-6 sm:pt-[70px] sm:pb-[42px]">
+                        <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+                            <h1 className="flex-1 max-w-[612px] [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
+                                <span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
                                     Enriching lives through horses in the{" "}
                                 </span>
                                 <span className="underline">Highlands</span>
-            <span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
+                                <span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
                                     {" "}
                                     since{" "}
                                 </span>
                                 <span className="underline">1975</span>
-            <span className="[font-family:'Merriweather',Helvetica] font-bold text-black text-[52px] tracking-[0]">
+                                <span className="[font-family:'Merriweather',Helvetica] font-bold text-white">
                                     .
                                 </span>
                             </h1>
-          <div className="w-[280px] h-[50px]">
-            <Button className="w-full h-full" variant="default">
-              Learn More
-            </Button>
                         </div>
                     </div>
-      </section>
+                    <div className="relative pb-6 sm:pb-[42px]">
-
+                        <div className="flex flex-col gap-4 sm:flex-row sm:gap-2.5 bg-black/30 p-4 sm:p-5">
-      <section className="w-full max-w-[1020px] mx-auto px-4 mt-[42px]">
+                            <div className="w-full sm:w-[610px] h-40 sm:h-60" />
-        <div className="flex gap-2.5">
+                            <blockquote className="flex-1 max-w-[480px] self-end [font-family:'Merriweather',Helvetica] font-bold text-white text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3]">
-          <div className="w-[672px] h-60 rounded-[7px] bg-cover bg-[50%_50%]" />
+                                &quot;Our mission is to bring about meaningful
-          <blockquote className="flex-1 max-w-[347px] [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl text-right tracking-[0] leading-[normal]">
+                                and positive changes in the health and
-            &quot;Our mission is to bring about meaningful and positive changes
+                                well-being of people with physical or mental
-            in the health and well-being of people with physical or mental
+                                disabilities through activities with our horses
-            disabilities through activities with our horses and ponies.&quot;
+                                and ponies.&quot;
                             </blockquote>
                         </div>
-      </section>
-
-      <section className="w-full max-w-[1020px] mx-auto px-4 mt-[20px]">
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex-1 max-w-[426px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base tracking-[0] leading-[normal]">
-            Highland Group RDA is a member of the National Riding for the
-            Disabled Association (RDA), and of the Grampian and Highland
-            Regional RDA.
-            <br />
-            <br />
-            We are a registered Scottish Charitable Incorporated Organisation
-            (SC007357).
                     </div>
-          <img className="w-[121px] h-[121px] object-cover" alt="Small mono" />
                 </div>
             </section>
 
-      <section className="w-full max-w-[1020px] mx-auto px-4 mt-[60px]">
+            <section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-10 sm:pb-[60px]">
-        <p className="text-center [font-family:'Merriweather',Helvetica] font-bold text-black text-[32px] tracking-[0] leading-[normal] px-[27px]">
+                <div className="w-full">
-          Find out more about who we are, what we do and how you can support us
+                    <div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
-          to help make a difference.
+                        <div className="text-center">
+                            <p className="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
+                                Find out more about who we are, what we do and
+                                how you can support us to help make a
+                                difference.
                             </p>
-      </section>
+                            <div className="mt-4 mx-auto h-[2px] w-16 bg-black/60" />
+                        </div>
 
-      <section className="w-full max-w-[1020px] mx-auto px-4 mt-[60px]">
+                        <div className="mt-8 sm:mt-[60px]">
-        <div className="grid grid-cols-3 gap-[10px]">
+                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
                                 {cardData.map((card, index) => (
                                     <Card
                                         key={index}
-              className="w-full h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
+                                        className="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
                                     >
                                         <CardContent
-                className={`p-2.5 h-full flex flex-col ${card.backgroundImage}`}
+                                            className={`relative p-2.5 h-full flex flex-col ${card.backgroundImage} overflow-hidden`}
+                                            style={{
+                                                backgroundImage: `url(${card.imageUrl})`,
+                                            }}
                                         >
-                <div className="mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]">
+                                            <div className="absolute inset-0 bg-black/40" />
-                  <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-4xl text-center tracking-[0] leading-[normal]">
+                                            <div className="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
+                                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
                                                     {card.title}
                                                 </h3>
                                             </div>
@@ -111,17 +200,65 @@ export const Desktop = (): JSX.Element => {
                                     </Card>
                                 ))}
                             </div>
-      </section>
+                        </div>
 
-      <div className="w-full max-w-[1020px] mx-auto px-4 mt-[79px]" />
+                        <div className="mt-8 sm:mt-[40px]">
-
+                            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-white/60 px-6 sm:px-8 py-6 sm:py-8">
-      <footer className="w-full max-w-[1020px] mx-auto px-4 mt-[20px] pb-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]">
-        <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base tracking-[0] leading-[normal]">
+                                    Highland Group RDA is a member of the
+                                    National Riding for the Disabled Association
+                                    (RDA), and of the Grampian and Highland
+                                    Regional RDA.
+                                    <br />
+                                    <br />
+                                    We are a registered Scottish Charitable
+                                    Incorporated Organisation (SC007357).
+                                </div>
+                                <img
+                                    className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
+                                    alt="Small mono"
+                                    src="/small-mono.png"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <footer className="mt-0 bg-[#d6d6d6] 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="[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 SCIO 2342343
                             </p>
+                            <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                                <p className="font-semibold">
+                                    The Highland Group RDA, Culloden, Inverness,
+                                    IV2
+                                </p>
+                                <p className="font-semibold">
+                                    Tel: 01463 000 000 · Email:
+                                    info@highlandrda.org.uk
+                                </p>
+                            </div>
+                            <p className="mt-4 font-semibold">
+                                Privacy Policy · Safeguarding · Accessibility
+                            </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>
                 </footer>
+            </section>
         </div>
     );
 };