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/components/ui/TeamMemberCard.tsx b/client/src/components/ui/TeamMemberCard.tsx new file mode 100644 index 0000000..1918a2c --- /dev/null +++ b/client/src/components/ui/TeamMemberCard.tsx @@ -0,0 +1,39 @@ +/* ---------------------------------- */ +/* Team member card + section */ +/* ---------------------------------- */ +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 ( +
+
+ {name} +
+ +
+

{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..0bfb544 --- /dev/null +++ b/client/src/components/ui/TeamSection.tsx @@ -0,0 +1,42 @@ +import TeamMemberCard from "@/components/ui//TeamMemberCard"; + +const members = [ + // TODO: replace with real people + real images in public/images/ + { + name: "John Smith", + role: "Director", + 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, consectetur adipiscing elit.", + email: "johnsmith2@email.com", + image: "/images/john-smith.png", + }, + { + name: "John Smith", + role: "Director", + bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + email: "johnsmith3@email.com", + image: "/images/john-smith.png", + }, +]; + +export default function TeamSection() { + return ( +
+
+

Meet the Team

+
+
+ {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 ( + + ); +} + +// --------------------------------------------------------------------------- +// 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..fa68ec0 --- /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 */} +
+ +
+ +
+
+ + + +
+ ); +}