Issue 2 create home page

client/declarations.d.ts

@@ -0,0 +1,14 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.png" {
+  const content: {
+    src: string;
+    height: number;
+    width: number;
+    blurDataURL?: string;
+  };
+  export default content;
+}

client/src/components/ui/card.tsx

@@ -0,0 +1,32 @@
+import Image, { StaticImageData } from "next/image";
+
+import styles from "@/styles/components/card.module.css";
+
+/**
+ * Interface that contains fields for a card.
+ */
+export interface CardProp {
+  image: StaticImageData;
+  alt: string;
+  title: string;
+  body: string;
+}
+
+/** A Placeholder Card component for the front page.
+ *
+ * @param param0 CardProp which contain fields for the card
+ * @returns
+ */
+export default function Card({ image, alt, title, body }: CardProp) {
+  return (
+    <div className={styles["card"]}>
+      <div className={styles["card-img"]}>
+        <Image src={image} alt={alt} />
+      </div>
+      <div className={styles["card-body"]}>
+        <h1 className="text-4xl font-bold text-gray-900">{title}</h1>
+        <p>{body}</p>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/card_container.tsx

@@ -0,0 +1,48 @@
+import { useRef } from "react";
+
+import styles from "@/styles/components/card_container.module.css";
+
+import { ContentCard, ContentCardProps } from "../content-card";
+
+/** Horizontally scrolling container for cards, On widescreen resolutions, scrolls with side buttons
+ * mobile scrolling is done with pointer.
+ *
+ * @param param0 An Array of ContentCardProps which represents the cards to be displayed
+ * @returns
+ */
+export default function CardContainer({
+  cards,
+}: {
+  cards: Array<ContentCardProps>;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: "left" | "right") => {
+    if (containerRef.current) {
+      containerRef.current.scrollBy({
+        left: direction === "right" ? 400 : -400,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <div className={styles["wrapper"]}>
+      <button className={styles["arrow"]} onClick={() => scroll("left")}>
+        &#8592;
+      </button>
+      <div className={styles["card-container"]} ref={containerRef}>
+        {cards.map((card_prop) => (
+          <ContentCard
+            key={card_prop.href}
+            {...card_prop}
+            className="w-[clamp(18rem,30vw,24rem)] shrink-0 snap-start"
+          />
+        ))}
+      </div>
+      <button className={styles["arrow"]} onClick={() => scroll("right")}>
+        &#8594;
+      </button>
+    </div>
+  );
+}

client/src/pages/_app.tsx

@@ -9,7 +9,7 @@ import Navbar from "@/components/ui/Navbar";
 
 const montserrat = Montserrat({
   subsets: ["latin"],
-  variable: "--font-sans",
+  variable: "--font-montserrat",
   weight: ["400", "500", "600", "700", "800"],
 });
 

client/src/pages/index.tsx

@@ -1,36 +1,118 @@
-import { Inter as FontSans } from "next/font/google";
-import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
 
-import { usePings } from "@/hooks/pings";
+import { ContentCard, ContentCardProps } from "@/components/content-card";
+import CardContainer from "@/components/ui/card_container";
 import { cn } from "@/lib/utils";
+import hero_image from "@/public/hero_img.png";
+import styles from "@/styles/index.module.css";
 
 import { Button } from "../components/ui/button";
 
-const fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
+/**
+ * Returns a list of upcoming events as ContentCardProps to display
+ *
+ * @returns List of events sorted in order
+ */
+function getEvents(): Array<ContentCardProps> {
+  // Currently a mock function, doesn't do anything other than make some stuff to display
+  // TODO: replace with a real fetch against the Events endpoint once #3 is closed
+  const mockEvents = [
+    { title: "Community Solar Info Night", dateTime: "12 Jul 2026" },
+    { title: "Electrify Your Home Workshop", dateTime: "19 Jul 2026" },
+    { title: "EV Test Drive Day", dateTime: "26 Jul 2026" },
+    { title: "Heat Pump Q&A Session", dateTime: "2 Aug 2026" },
+    { title: "Battery Storage Info Session", dateTime: "9 Aug 2026" },
+  ];
+
+  return mockEvents.map((event, index) => ({
+    imageSrc: hero_image.src,
+    imageAlt: event.title,
+    title: event.title,
+    description:
+      "Join us to learn how to electrify your home and cut your energy bills.",
+    dateTime: event.dateTime,
+    href: `/events/${index + 1}`,
+  }));
+}
+
+/**
+ * Returns the three quick-link tiles (WA Savings, News, Resources) shown
+ * below the hero, linking out to their respective pages.
+ *
+ * @returns List of quick-link tiles
+ */
+function getQuickLinks(): Array<ContentCardProps> {
+  return [
+    {
+      imageSrc: hero_image.src,
+      imageAlt: "WA Savings",
+      title: "WA Savings",
+      description:
+        "See how much you could save by switching to electric appliances and solar in WA.",
+      href: "/wa-savings",
+    },
+    {
+      imageSrc: hero_image.src,
+      imageAlt: "News",
+      title: "News",
+      description:
+        "Read the latest updates from Electrify Everything WA and our community.",
+      href: "/news",
+    },
+    {
+      imageSrc: hero_image.src,
+      imageAlt: "Resources",
+      title: "Resources",
+      description:
+        "Explore guides and resources to help you electrify your home.",
+      href: "/resources",
+    },
+  ];
+}
 
 export default function Home() {
-  const [clicked, setClicked] = useState(false);
-  const { data, isLoading } = usePings({
-    enabled: clicked,
-  });
+  const router = useRouter();
+  const events = getEvents();
+  const quickLinks = getQuickLinks();
 
   return (
     <main
       className={cn(
         "flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
-        fontSans.variable,
       )}
     >
-      <h1 className="text-3xl text-primary">Test title</h1>
-      <Button onClick={() => setClicked(true)}>
-        {isLoading ? "Loading" : "Ping"}
-      </Button>
-      <p>
-        Response from server: <span>{data as string}</span>
-      </p>
+      <div className={styles["hero"]}>
+        <div className={styles["hero-body"]}>
+          <div className={styles["hero-text"]}>
+            Electrifying our households to build a safer, more sustainable
+            future.
+          </div>
+          <Button
+            className={styles["hero-button"]}
+            onClick={() => router.push("/get-involved")}
+          >
+            Get Involved <span className={styles["arrow"]}>▸</span>
+          </Button>
+        </div>
+        <div className={styles["hero-img"]}>
+          <Image
+            src={hero_image}
+            alt={
+              "Image of a house with electric alternative to fossil fuel products"
+            }
+          />
+        </div>
+      </div>
+      <div className={styles["news-and-events"]}>
+        <div className="flex justify-center">
+          <CardContainer cards={quickLinks} />
+        </div>
+        <h1 className="m-5 text-5xl font-bold">Upcoming Events</h1>
+        <div className="flex justify-center">
+          <CardContainer cards={events} />
+        </div>
+      </div>
     </main>
   );
 }

client/src/styles/components/card.module.css

@@ -0,0 +1,37 @@
+.card {
+  width: 32%;
+  aspect-ratio: 1 / 1;
+  margin: 0.5%;
+  outline: 2px solid black;
+  border-radius: 10px;
+  background-color: white;
+  filter: drop-shadow(4px 5px 4px lightgrey);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.card-img {
+  height: 40%;
+  width: auto;
+  align-items: center;
+}
+.card-body {
+  height: 60%;
+  padding: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card {
+    width: 80%;
+    aspect-ratio: 4 / 5;
+    margin: 0 2%;
+  }
+
+  .card-body h1 {
+    font-size: 1.25rem !important;
+  }
+
+  .card-body p {
+    font-size: 0.9rem;
+  }
+}

client/src/styles/components/card_container.module.css

@@ -0,0 +1,72 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-container {
+  display: flex;
+  overflow-x: auto;
+  gap: 1rem;
+  padding: 0rem;
+  /* Cap the row so roughly 3 full-width cards show at once, with a peek of the
+     next one hinting there's more to scroll to -- without this, a wide enough
+     screen can fit every card and the arrows do nothing. */
+  max-width: 74rem;
+  scroll-behavior: smooth;
+  /* Snap to the start of each card so a scroll click never leaves a card
+     half-visible -- the browser handles alignment natively instead of us
+     guessing a pixel amount in JS that would drift out of sync with the
+     card's responsive width. */
+  scroll-snap-type: x mandatory;
+  /* hide scrollbar */
+  scrollbar-width: none;
+}
+
+.card-container::-webkit-scrollbar {
+  display: none;
+}
+
+.arrow {
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 999px;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.25rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.arrow:hover {
+  background: hsl(var(--accent));
+}
+
+@media (min-width: 52rem) and (max-width: 82rem) {
+  .arrow {
+    display: none;
+  }
+
+  .wrapper {
+    gap: 0;
+  }
+
+  .card-container {
+    max-width: calc(2 * clamp(18rem, 30vw, 24rem) + 1rem);
+  }
+}
+
+@media (max-width: 51rem) {
+  .arrow {
+    display: none;
+  }
+
+  .wrapper {
+    gap: 0;
+  }
+
+  .card-container {
+    max-width: calc(1 * clamp(18rem, 30vw, 24rem) + 1rem);
+  }
+}