From 1664ff7c1ffc1e63a5b0a5d662d07bb184387731 Mon Sep 17 00:00:00 2001 From: vtoriam Date: Tue, 7 Jul 2026 14:47:37 +0000 Subject: [PATCH 1/4] created info cards and team member cards --- client/src/components/ui/AboutHero.tsx | 34 +++++++++++++++++ client/src/components/ui/InfoCard.tsx | 13 +++++++ client/src/components/ui/TeamMemberCard.tsx | 38 +++++++++++++++++++ client/src/components/ui/TeamSection.tsx | 42 +++++++++++++++++++++ client/src/pages/_app.tsx | 5 +++ 5 files changed, 132 insertions(+) create mode 100644 client/src/components/ui/AboutHero.tsx create mode 100644 client/src/components/ui/InfoCard.tsx create mode 100644 client/src/components/ui/TeamMemberCard.tsx create mode 100644 client/src/components/ui/TeamSection.tsx diff --git a/client/src/components/ui/AboutHero.tsx b/client/src/components/ui/AboutHero.tsx new file mode 100644 index 0000000..e4dd18f --- /dev/null +++ b/client/src/components/ui/AboutHero.tsx @@ -0,0 +1,34 @@ +import InfoCard from "@/components/ui/InfoCard"; + +const cards = [ + { + title: "VISION", + description: + "Widespread and just electrification of households, businesses, and transport throughout our communities to reduce energy costs, carbon emissions and build a safer future.", + }, + { + title: "VALUES", + description: + "Collaboration, respect, optimism, positive action, and inclusivity.", + }, + { + title: "MISSION", + description: + "To advocate, promote and celebrate the just electrification of Western Australia.", + }, +]; + +export default function AboutHero() { + return ( +
+ {cards.map((card) => ( + + ))} +
+
+ ); +} diff --git a/client/src/components/ui/InfoCard.tsx b/client/src/components/ui/InfoCard.tsx new file mode 100644 index 0000000..f372ba3 --- /dev/null +++ b/client/src/components/ui/InfoCard.tsx @@ -0,0 +1,13 @@ +interface InfoCardProps { + title: string; + description: string; +} + +export default function InfoCard({ title, description }: InfoCardProps) { + return ( +
+

{title}

+

{description}

+
+ ); +} diff --git a/client/src/components/ui/TeamMemberCard.tsx b/client/src/components/ui/TeamMemberCard.tsx new file mode 100644 index 0000000..144919d --- /dev/null +++ b/client/src/components/ui/TeamMemberCard.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; + +interface TeamMemberCardProps { + name: string; + role: string; + bio: string; + email: string; + image: string; +} + +export default function TeamMemberCard({ + name, + role, + bio, + email, + image, +}: TeamMemberCardProps) { + return ( +
+ {/* Photo */} +
+ {name} +
+ + {/* Content */} +
+

{name}

+

+ {role} +

+

{bio}

+ + {email} + +
+
+ ); +} diff --git a/client/src/components/ui/TeamSection.tsx b/client/src/components/ui/TeamSection.tsx new file mode 100644 index 0000000..ece02d2 --- /dev/null +++ b/client/src/components/ui/TeamSection.tsx @@ -0,0 +1,42 @@ +import TeamMemberCard from "@/components/ui//TeamMemberCard"; + +const members = [ + // replace with real people + { + name: "John Smith", + role: "Director", + bio: "Lorem ipsum dolor sit amet...", + email: "johnsmith@email.com", + image: "/images/john-smith.png", + }, + + { + name: "John Smith", + role: "Director", + bio: "Lorem ipsum dolor sit amet...", + email: "johnsmith@email.com", + image: "/images/john-smith.png", + }, + + { + name: "John Smith", + role: "Director", + bio: "Lorem ipsum dolor sit amet...", + email: "johnsmith@email.com", + image: "/images/john-smith.png", + }, +]; + +export default function TeamSection() { + return ( +
+

Meet the Team

+
+
+ {members.map((member) => ( + + ))} +
+
+ ); +} diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 628e9f2..96b450d 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -4,6 +4,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import type { AppProps } from "next/app"; +import AboutHero from "@/components/ui/AboutHero"; +import TeamSection from "@/components/ui/TeamSection"; + const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { @@ -11,6 +14,8 @@ export default function App({ Component, pageProps }: AppProps) { + + ); } From 01b1240053fb39069f45d3204329e0058cc820cc Mon Sep 17 00:00:00 2001 From: vtoriam Date: Tue, 7 Jul 2026 14:58:47 +0000 Subject: [PATCH 2/4] centered team member cards with fixed width --- client/src/components/ui/TeamSection.tsx | 18 ++++++++++-------- client/src/pages/_app.tsx | 2 -- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/src/components/ui/TeamSection.tsx b/client/src/components/ui/TeamSection.tsx index ece02d2..362a481 100644 --- a/client/src/components/ui/TeamSection.tsx +++ b/client/src/components/ui/TeamSection.tsx @@ -29,14 +29,16 @@ const members = [ export default function TeamSection() { return ( -
-

Meet the Team

-
-
- {members.map((member) => ( - - ))} +
+
+

Meet the Team

+
+
+ {members.map((member) => ( + + ))} +
-
+
); } diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 96b450d..8d11ff6 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -14,8 +14,6 @@ export default function App({ Component, pageProps }: AppProps) { - - ); } From 37e558974d1d2fb2a65382aa5914eda4ba375bc1 Mon Sep 17 00:00:00 2001 From: sumishsamina Date: Sat, 18 Jul 2026 07:04:46 +0000 Subject: [PATCH 3/4] combining components to create about us page --- client/src/components/ui/AboutHero.tsx | 34 ---- client/src/components/ui/InfoCard.tsx | 13 -- client/src/components/ui/TeamMemberCard.tsx | 7 +- client/src/components/ui/TeamSection.tsx | 20 ++- client/src/components/ui/footer.tsx | 168 ++++++++++++++++++++ client/src/pages/AboutPage.tsx | 120 ++++++++++++++ client/src/pages/_app.tsx | 3 - 7 files changed, 301 insertions(+), 64 deletions(-) delete mode 100644 client/src/components/ui/AboutHero.tsx delete mode 100644 client/src/components/ui/InfoCard.tsx create mode 100644 client/src/components/ui/footer.tsx create mode 100644 client/src/pages/AboutPage.tsx diff --git a/client/src/components/ui/AboutHero.tsx b/client/src/components/ui/AboutHero.tsx deleted file mode 100644 index e4dd18f..0000000 --- a/client/src/components/ui/AboutHero.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import InfoCard from "@/components/ui/InfoCard"; - -const cards = [ - { - title: "VISION", - description: - "Widespread and just electrification of households, businesses, and transport throughout our communities to reduce energy costs, carbon emissions and build a safer future.", - }, - { - title: "VALUES", - description: - "Collaboration, respect, optimism, positive action, and inclusivity.", - }, - { - title: "MISSION", - description: - "To advocate, promote and celebrate the just electrification of Western Australia.", - }, -]; - -export default function AboutHero() { - return ( -
- {cards.map((card) => ( - - ))} -
-
- ); -} diff --git a/client/src/components/ui/InfoCard.tsx b/client/src/components/ui/InfoCard.tsx deleted file mode 100644 index f372ba3..0000000 --- a/client/src/components/ui/InfoCard.tsx +++ /dev/null @@ -1,13 +0,0 @@ -interface InfoCardProps { - title: string; - description: string; -} - -export default function InfoCard({ title, description }: InfoCardProps) { - return ( -
-

{title}

-

{description}

-
- ); -} diff --git a/client/src/components/ui/TeamMemberCard.tsx b/client/src/components/ui/TeamMemberCard.tsx index 144919d..1918a2c 100644 --- a/client/src/components/ui/TeamMemberCard.tsx +++ b/client/src/components/ui/TeamMemberCard.tsx @@ -1,3 +1,6 @@ +/* ---------------------------------- */ +/* Team member card + section */ +/* ---------------------------------- */ import Image from "next/image"; interface TeamMemberCardProps { @@ -16,13 +19,11 @@ export default function TeamMemberCard({ image, }: TeamMemberCardProps) { return ( -
- {/* Photo */} +
{name}
- {/* Content */}

{name}

diff --git a/client/src/components/ui/TeamSection.tsx b/client/src/components/ui/TeamSection.tsx index 362a481..0bfb544 100644 --- a/client/src/components/ui/TeamSection.tsx +++ b/client/src/components/ui/TeamSection.tsx @@ -1,28 +1,26 @@ import TeamMemberCard from "@/components/ui//TeamMemberCard"; const members = [ - // replace with real people + // TODO: replace with real people + real images in public/images/ { name: "John Smith", role: "Director", - bio: "Lorem ipsum dolor sit amet...", + bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", email: "johnsmith@email.com", image: "/images/john-smith.png", }, - { name: "John Smith", role: "Director", - bio: "Lorem ipsum dolor sit amet...", - email: "johnsmith@email.com", + bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + email: "johnsmith2@email.com", image: "/images/john-smith.png", }, - { name: "John Smith", role: "Director", - bio: "Lorem ipsum dolor sit amet...", - email: "johnsmith@email.com", + bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + email: "johnsmith3@email.com", image: "/images/john-smith.png", }, ]; @@ -33,9 +31,9 @@ export default function TeamSection() {

Meet the Team

-
- {members.map((member) => ( - +
+ {members.map((member, index) => ( + ))}
diff --git a/client/src/components/ui/footer.tsx b/client/src/components/ui/footer.tsx new file mode 100644 index 0000000..c9a2171 --- /dev/null +++ b/client/src/components/ui/footer.tsx @@ -0,0 +1,168 @@ +"use client"; + +import { ChevronsUp } from "lucide-react"; +import { Inter } from "next/font/google"; +import Image from "next/image"; +import * as React from "react"; +import { BsFacebook,BsInstagram, BsLinkedin } from "react-icons/bs"; + +import { Button } from "./button"; + +const inter = Inter({ subsets: ["latin"] }); + +// --------------------------------------------------------------------------- +// Site map data +// --------------------------------------------------------------------------- +const siteMapLinks = [ + { label: "home", href: "/" }, + { label: "about us", href: "/about" }, + { label: "news", href: "/news" }, + { label: "events", href: "/events" }, + { label: "wa savings", href: "/wa-savings" }, + { label: "resources", href: "/resources" }, + { label: "contact", href: "/contact" }, +] as const; + +const socialLinks = [ + { label: "Instagram", href: "https://instagram.com", Icon: BsInstagram }, + { label: "LinkedIn", href: "https://linkedin.com", Icon: BsLinkedin }, + { label: "Facebook", href: "https://facebook.com", Icon: BsFacebook }, +] as const; + +export default function Footer() { + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + return ( +
+ {/* faint house + plug watermark, matches the background graphic in the design */} + + +
+
+ {/* ---------------------------------------------------------------- */} + {/* Left column: logo, blurb, socials, back-to-top, charity badge */} + {/* ---------------------------------------------------------------- */} +
+
+ Electrify Everything WA logo +

+ Electrify Everything WA +

+
+ +

+ Advocating for the switch from fossil-fuel based electricity + reliance to renewable sources in Western Australia. +

+ + {/* socials */} +
+ {socialLinks.map(({ label, href, Icon }) => ( + + + + ))} +
+ + {/* back to top + charity badge */} +
+ + + +
+
+ + {/* ---------------------------------------------------------------- */} + {/* Right column: site map */} + {/* ---------------------------------------------------------------- */} + +
+
+ + {/* copyright bar */} +
+

+ Copyright © {new Date().getFullYear()}, electrifyeverythingwa.org, + All Rights Reserved. +

+
+
+ ); +} + +// --------------------------------------------------------------------------- +// Charity badge +// --------------------------------------------------------------------------- +function CharityBadge() { + return ( + + ACNC Registered Charity Tick + + ); +} + +// Faint background + +function HouseWatermark() { + return ( + + ); +} diff --git a/client/src/pages/AboutPage.tsx b/client/src/pages/AboutPage.tsx new file mode 100644 index 0000000..ce863dc --- /dev/null +++ b/client/src/pages/AboutPage.tsx @@ -0,0 +1,120 @@ +import Image from "next/image"; + +import TeamSection from "@/components/ui/TeamSection"; + +/* ---------------------------------- */ +/* Intro text (top of page) */ +/* ---------------------------------- */ + +function AboutIntro() { + return ( +
+

+ Electrify Everything WA is a volunteer-run, non-aligned, not-for-profit, + incorporated organisation representing community groups across WA. +

+
+

+ We aim to accelerate the electrification of households and communities, + replacing fossil fuels with efficient electric technologies powered by + renewable energy. We advocate for a fair and equitable transition to an + all-electric future. +

+
+ ); +} + +/* ---------------------------------- */ +/* Vision / Values / Mission cards */ +/* ---------------------------------- */ + +interface InfoCardProps { + title: string; + description: string; +} + +function InfoCard({ title, description }: InfoCardProps) { + return ( +
+

{title}

+

{description}

+
+ ); +} + +const cards: InfoCardProps[] = [ + { + title: "VISION", + description: + "Widespread and just electrification of households, businesses, and transport throughout our communities to reduce energy costs, carbon emissions and build a safer future.", + }, + { + title: "VALUES", + description: + "Collaboration, respect, optimism, positive action, and inclusivity.", + }, + { + title: "MISSION", + description: + "To advocate, promote and celebrate the just electrification of Western Australia.", + }, +]; + +function InfoCards() { + return ( +
+ {cards.map((card) => ( + + ))} +
+ ); +} + +/* ---------------------------------- */ +/* Our History (dark image section) */ +/* ---------------------------------- */ + +function HistorySection() { + return ( +
+ {/* Background image — add solar-panels.jpg to public/images/ */} +
+ {/* Dark overlay so text stays readable */} +
+ +
+

Our History

+
+

+ {/* TODO: replace with real history copy */} + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+ ); +} + +export default function AboutPage() { + return ( +
+ {/* Cream → yellow gradient wraps intro + cards, like the mockup */} +
+ +
+ +
+
+ + + +
+ ); +} diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 8d11ff6..628e9f2 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -4,9 +4,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import type { AppProps } from "next/app"; -import AboutHero from "@/components/ui/AboutHero"; -import TeamSection from "@/components/ui/TeamSection"; - const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { From 65005ec52c01e2c8f0d24ea64dc857095d2a52d8 Mon Sep 17 00:00:00 2001 From: sumishsamina Date: Sun, 19 Jul 2026 12:52:45 +0000 Subject: [PATCH 4/4] style: update divider line color and width on about page and background color of page --- .vscode/settings.json | 3 ++- client/src/pages/AboutPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 8cbd32b..aa464aa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,5 +9,6 @@ "typescript.tsdk": "${workspaceFolder}/client/node_modules/typescript/lib", "shellcheck.ignorePatterns": { "**/.env*": true - } + }, + "python-envs.defaultEnvManager": "ms-python.python:system" } diff --git a/client/src/pages/AboutPage.tsx b/client/src/pages/AboutPage.tsx index ce863dc..fa68ec0 100644 --- a/client/src/pages/AboutPage.tsx +++ b/client/src/pages/AboutPage.tsx @@ -13,7 +13,7 @@ function AboutIntro() { Electrify Everything WA is a volunteer-run, non-aligned, not-for-profit, incorporated organisation representing community groups across WA.

-
+

We aim to accelerate the electrification of households and communities, replacing fossil fuels with efficient electric technologies powered by @@ -106,7 +106,7 @@ export default function AboutPage() { return (

{/* Cream → yellow gradient wraps intro + cards, like the mockup */} -
+