From 12cae0137fdf14f0966a3e9e793bae7a4ae03b83 Mon Sep 17 00:00:00 2001
From: abxsnxper <abinandhrcok@gmail.com>
Date: Sat, 11 Jul 2026 07:33:44 +0000
Subject: [PATCH 1/8] Added horizontal card component for resources page that
 shows the latest resource

---
 .../components/resources-horizontal-card.tsx  | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 client/src/components/resources-horizontal-card.tsx

diff --git a/client/src/components/resources-horizontal-card.tsx b/client/src/components/resources-horizontal-card.tsx
new file mode 100644
index 0000000..f678535
--- /dev/null
+++ b/client/src/components/resources-horizontal-card.tsx
@@ -0,0 +1,87 @@
+import { ArrowRight, ImageOff } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+
+export interface HorizontalCardProps {
+  className?: string;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  description: string;
+  href: string;
+  buttonLabel?: string;
+  author?: string;
+  dateTime?: string;
+}
+
+export function HorizontalCard({
+  className,
+  imageSrc,
+  imageAlt,
+  title,
+  description,
+  href,
+  buttonLabel = "View More",
+  author,
+  dateTime,
+}: HorizontalCardProps) {
+  const meta = [author, dateTime].filter(Boolean).join(" • ");
+
+  return (
+    <article
+      className={cn(
+        "group flex w-full flex-col overflow-hidden rounded-[var(--radius)] border border-border/60 bg-card text-card-foreground shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg md:min-h-[clamp(18rem,26vw,23rem)] md:flex-row",
+        className,
+      )}
+    >
+      <div className="relative aspect-[16/10] w-full shrink-0 overflow-hidden bg-muted md:aspect-auto md:w-1/2 md:self-stretch">
+        {imageSrc ? (
+          <Image
+            alt={imageAlt}
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+            src={imageSrc}
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+            <ImageOff
+              className="size-[clamp(2rem,7vw,4rem)]"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-1 flex-col gap-[clamp(0.5rem,1.5vw,1rem)] p-[clamp(1.25rem,2.5vw,2rem)]">
+        {meta ? (
+          <p className="text-[clamp(0.8rem,1.6vw,0.9rem)] font-semibold text-primary">
+            {meta}
+          </p>
+        ) : null}
+
+        <h3 className="overflow-hidden text-[clamp(1.5rem,3.2vw,2.25rem)] font-bold leading-tight tracking-tight text-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]">
+          {title}
+        </h3>
+
+        <p className="overflow-hidden text-[clamp(0.9rem,1.8vw,1.05rem)] leading-relaxed text-muted-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:3] [display:-webkit-box]">
+          {description}
+        </p>
+
+        <Link
+          aria-label={buttonLabel}
+          className="mt-1 inline-flex w-fit items-center gap-[clamp(0.25rem,0.8vw,0.375rem)] text-[clamp(0.85rem,1.7vw,0.95rem)] font-semibold text-primary transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          href={href}
+        >
+          <span>{buttonLabel}</span>
+          <ArrowRight
+            className="size-[clamp(1rem,1.9vw,1.15rem)]"
+            aria-hidden="true"
+          />
+        </Link>
+      </div>
+    </article>
+  );
+}

From 2aaa2aa7db4e0fd8be9a44a942813d447ec322bb Mon Sep 17 00:00:00 2001
From: abxsnxper <abinandhrcok@gmail.com>
Date: Sat, 11 Jul 2026 07:35:15 +0000
Subject: [PATCH 2/8] Added mock data for resources horizontal card

---
 client/src/hooks/resources.ts | 57 +++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 client/src/hooks/resources.ts

diff --git a/client/src/hooks/resources.ts b/client/src/hooks/resources.ts
new file mode 100644
index 0000000..9b71ea4
--- /dev/null
+++ b/client/src/hooks/resources.ts
@@ -0,0 +1,57 @@
+import { useQuery } from "@tanstack/react-query";
+
+export interface Resource {
+  id: string;
+  date_made: string;
+  author: string;
+  image: string | null;
+  name: string;
+  slug: string;
+  summary: string;
+  type: "page" | "file";
+  body: string;
+  file_url: string;
+  file_name: string;
+}
+
+const MOCK_RESOURCES: Resource[] = [
+  {
+    id: "1",
+    date_made: "2022-02-04",
+    author: "John Doe",
+    image: null,
+    name: "New feature available on Devias",
+    slug: "new-feature",
+    summary:
+      "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+    type: "page",
+    body: "",
+    file_url: "",
+    file_name: "",
+  },
+  {
+    id: "2",
+    date_made: "2023-08-15",
+    author: "Jane Smith",
+    image: null,
+    name: "How to electrify your home",
+    slug: "electrify-your-home",
+    summary: "A practical guide to going all-electric in Western Australia.",
+    type: "page",
+    body: "",
+    file_url: "",
+    file_name: "",
+  },
+];
+
+export function useResources() {
+  return useQuery({
+    queryKey: ["resources"],
+    queryFn: async (): Promise<Resource[]> => {
+      // Swap this block for the real fetch once the endpoint lands:
+      // const res = await fetch("/api/resources/");
+      // return res.json();
+      return MOCK_RESOURCES;
+    },
+  });
+}

From b3d2b4484d2db0f8be7cf9e82e4a14f49a1e5483 Mon Sep 17 00:00:00 2001
From: JillStingray1 <jerryhouau@gmail.com>
Date: Mon, 13 Jul 2026 15:00:57 +0800
Subject: [PATCH 3/8] create savings card

---
 client/src/components/savings-card.tsx        | 95 +++++++++++++++++++
 .../styles/components/savings_card.module.css | 62 ++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 client/src/components/savings-card.tsx
 create mode 100644 client/src/styles/components/savings_card.module.css

diff --git a/client/src/components/savings-card.tsx b/client/src/components/savings-card.tsx
new file mode 100644
index 0000000..771dcc8
--- /dev/null
+++ b/client/src/components/savings-card.tsx
@@ -0,0 +1,95 @@
+import styles from "../styles/components/savings_card.module.css";
+
+export interface SavingCardProp {
+  heading: string;
+  body: string;
+  savings: string;
+  data: Record<string, Record<string, number>>;
+}
+
+const ROW_DOT_CLASSES = [
+  "bg-emerald-500",
+  "bg-destructive",
+  "bg-foreground",
+  "bg-violet-500",
+];
+
+export default function SavingHorizontalCard({
+  heading,
+  body,
+  savings,
+  data,
+}: SavingCardProp) {
+  const columns = Object.keys(data);
+  // row labels come from the inner keys — assumes every column has the same set of rows
+  const rows = columns.length > 0 ? Object.keys(data[columns[0]]) : [];
+
+  const columnTotal = (col: string) =>
+    rows.reduce((sum, row) => sum + (data[col][row] ?? 0), 0);
+
+  return (
+    <main className={styles.card}>
+      <div
+        className={`${styles.leftPanel} rounded-2xl border-2 border-primary bg-card p-6 text-card-foreground`}
+      >
+        <div>
+          <h1 className="mb-3 text-xl font-semibold">{heading}</h1>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {body}
+          </p>
+        </div>
+        <div className="mt-6 rounded-xl bg-amber-100 p-4 text-amber-900">
+          <p className="mb-1 text-xs">You could save</p>
+          <p className="mb-1 text-2xl font-bold">${savings}</p>
+          <p className="text-xs">over 15 years</p>
+        </div>
+      </div>
+
+      <div
+        className={`${styles.rightPanel} rounded-2xl bg-card text-card-foreground`}
+      >
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.headerCell}></th>
+              {columns.map((col) => (
+                <th
+                  key={col}
+                  className={`${styles.headerCell} border-b border-border`}
+                >
+                  <div
+                    className={`${styles.headerColumnLabel} text-muted-foreground`}
+                  >
+                    {col}
+                  </div>
+                  <div
+                    className={`${styles.headerColumnTotal} text-foreground`}
+                  >
+                    ${columnTotal(col).toLocaleString()}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => (
+              <tr key={row}>
+                <td className={`${styles.rowLabel} text-foreground`}>
+                  <span
+                    className={`${styles.dot} ${ROW_DOT_CLASSES[i % ROW_DOT_CLASSES.length]}`}
+                  />
+                  {row}
+                </td>
+                {columns.map((col) => (
+                  <td key={col} className={`${styles.cell} text-foreground`}>
+                    ${data[col][row].toLocaleString()}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}
diff --git a/client/src/styles/components/savings_card.module.css b/client/src/styles/components/savings_card.module.css
new file mode 100644
index 0000000..1ca3220
--- /dev/null
+++ b/client/src/styles/components/savings_card.module.css
@@ -0,0 +1,62 @@
+.card {
+  display: flex;
+  gap: 1rem;
+  max-width: 720px;
+  font-family: sans-serif;
+}
+ 
+.leftPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+ 
+.rightPanel {
+  flex: 1.2;
+  padding: 1.5rem 0.5rem;
+}
+ 
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+  table-layout: fixed;
+}
+ 
+.headerCell {
+  text-align: center;
+  padding: 6px 8px;
+}
+ 
+.headerColumnLabel {
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+ 
+.headerColumnTotal {
+  font-size: 1rem;
+  font-weight: 700;
+}
+ 
+.rowLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  white-space: nowrap;
+}
+ 
+.cell {
+  text-align: center;
+  padding: 6px 8px;
+}
+ 
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+ 

From d9ce40690e3451a041e10da29940cd18c81d2630 Mon Sep 17 00:00:00 2001
From: JillStingray1 <jerryhouau@gmail.com>
Date: Fri, 17 Jul 2026 10:21:00 +0800
Subject: [PATCH 4/8] add mobile responsiveness to savings card

---
 client/src/components/savings-card.tsx        | 57 +++++++++++--------
 .../styles/components/savings_card.module.css | 49 +++++++---------
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/client/src/components/savings-card.tsx b/client/src/components/savings-card.tsx
index 771dcc8..415f39b 100644
--- a/client/src/components/savings-card.tsx
+++ b/client/src/components/savings-card.tsx
@@ -1,4 +1,4 @@
-import styles from "../styles/components/savings_card.module.css";
+import styles from "@/styles/components/savings_card.module.css";
 
 export interface SavingCardProp {
   heading: string;
@@ -7,11 +7,14 @@ export interface SavingCardProp {
   data: Record<string, Record<string, number>>;
 }
 
+// Your theme only defines primary/secondary/muted/accent/destructive — no green or
+// purple token, so those two fall back to plain Tailwind colors. Swap in your own
+// tokens here if you add them later.
 const ROW_DOT_CLASSES = [
-  "bg-emerald-500",
+  "bg-emerald-500", // no theme equivalent
   "bg-destructive",
   "bg-foreground",
-  "bg-violet-500",
+  "bg-violet-500", // no theme equivalent
 ];
 
 export default function SavingHorizontalCard({
@@ -28,43 +31,46 @@ export default function SavingHorizontalCard({
     rows.reduce((sum, row) => sum + (data[col][row] ?? 0), 0);
 
   return (
-    <main className={styles.card}>
+    <main className={`${styles.card} mx-auto max-w-4xl font-sans`}>
+      {/* left panel */}
       <div
-        className={`${styles.leftPanel} rounded-2xl border-2 border-primary bg-card p-6 text-card-foreground`}
+        className={`${styles.leftPanel} rounded-2xl border-2 border-primary bg-card p-5 text-card-foreground sm:p-6 md:p-8`}
       >
         <div>
-          <h1 className="mb-3 text-xl font-semibold">{heading}</h1>
-          <p className="text-sm leading-relaxed text-muted-foreground">
+          <h1 className="mb-3 text-xl font-semibold sm:text-2xl md:text-3xl">
+            {heading}
+          </h1>
+          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
             {body}
           </p>
         </div>
-        <div className="mt-6 rounded-xl bg-amber-100 p-4 text-amber-900">
-          <p className="mb-1 text-xs">You could save</p>
-          <p className="mb-1 text-2xl font-bold">${savings}</p>
-          <p className="text-xs">over 15 years</p>
+        {/* no "warning"/amber token in the theme, so this uses plain amber rather than a css var */}
+        <div className="mt-6 rounded-xl bg-amber-100 p-4 text-amber-900 sm:p-5">
+          <p className="mb-1 text-xs sm:text-sm">You could save</p>
+          <p className="mb-1 text-2xl font-bold sm:text-3xl md:text-4xl">
+            ${savings}
+          </p>
+          <p className="text-xs sm:text-sm">over 15 years</p>
         </div>
       </div>
 
+      {/* right panel — table replaces the bar chart */}
       <div
-        className={`${styles.rightPanel} rounded-2xl bg-card text-card-foreground`}
+        className={`${styles.rightPanel} rounded-2xl bg-card p-5 text-card-foreground sm:p-6 md:p-8`}
       >
-        <table className={styles.table}>
+        <table className={`${styles.table} min-w-[420px] sm:min-w-0`}>
           <thead>
             <tr>
-              <th className={styles.headerCell}></th>
+              <th className="p-2 text-center sm:p-3"></th>
               {columns.map((col) => (
                 <th
                   key={col}
-                  className={`${styles.headerCell} border-b border-border`}
+                  className="border-b border-border p-2 text-center sm:p-3"
                 >
-                  <div
-                    className={`${styles.headerColumnLabel} text-muted-foreground`}
-                  >
+                  <div className="text-xs font-normal text-muted-foreground sm:text-sm">
                     {col}
                   </div>
-                  <div
-                    className={`${styles.headerColumnTotal} text-foreground`}
-                  >
+                  <div className="text-base font-bold text-foreground sm:text-lg md:text-xl">
                     ${columnTotal(col).toLocaleString()}
                   </div>
                 </th>
@@ -74,14 +80,19 @@ export default function SavingHorizontalCard({
           <tbody>
             {rows.map((row, i) => (
               <tr key={row}>
-                <td className={`${styles.rowLabel} text-foreground`}>
+                <td
+                  className={`${styles.rowLabel} gap-2 whitespace-nowrap p-2 text-sm text-foreground sm:p-3 sm:text-base`}
+                >
                   <span
                     className={`${styles.dot} ${ROW_DOT_CLASSES[i % ROW_DOT_CLASSES.length]}`}
                   />
                   {row}
                 </td>
                 {columns.map((col) => (
-                  <td key={col} className={`${styles.cell} text-foreground`}>
+                  <td
+                    key={col}
+                    className="p-2 text-center text-sm text-foreground sm:p-3 sm:text-base"
+                  >
                     ${data[col][row].toLocaleString()}
                   </td>
                 ))}
diff --git a/client/src/styles/components/savings_card.module.css b/client/src/styles/components/savings_card.module.css
index 1ca3220..0a08797 100644
--- a/client/src/styles/components/savings_card.module.css
+++ b/client/src/styles/components/savings_card.module.css
@@ -1,8 +1,9 @@
+Savinghorizontalcard.module · CSS
 .card {
   display: flex;
+  flex-direction: column;
   gap: 1rem;
-  max-width: 720px;
-  font-family: sans-serif;
+  width: 100%;
 }
  
 .leftPanel {
@@ -13,43 +14,19 @@
 }
  
 .rightPanel {
-  flex: 1.2;
-  padding: 1.5rem 0.5rem;
+  flex: 1;
+  overflow-x: auto;
 }
  
 .table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.8125rem;
   table-layout: fixed;
 }
  
-.headerCell {
-  text-align: center;
-  padding: 6px 8px;
-}
- 
-.headerColumnLabel {
-  font-size: 0.75rem;
-  font-weight: 400;
-}
- 
-.headerColumnTotal {
-  font-size: 1rem;
-  font-weight: 700;
-}
- 
 .rowLabel {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  white-space: nowrap;
-}
- 
-.cell {
-  text-align: center;
-  padding: 6px 8px;
 }
  
 .dot {
@@ -60,3 +37,19 @@
   flex-shrink: 0;
 }
  
+@media (min-width: 640px) {
+  .card {
+    flex-direction: row;
+    gap: 1.5rem;
+  }
+ 
+  .rightPanel {
+    flex: 1.2;
+  }
+ 
+  .dot {
+    width: 10px;
+    height: 10px;
+  }
+}
+ 

From 02c878f5702935d89ec617b7ad89e3cd821b143c Mon Sep 17 00:00:00 2001
From: JillStingray1 <jerryhouau@gmail.com>
Date: Fri, 17 Jul 2026 10:24:58 +0800
Subject: [PATCH 5/8] fix formatting

---
 .../styles/components/savings_card.module.css | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/client/src/styles/components/savings_card.module.css b/client/src/styles/components/savings_card.module.css
index 0a08797..fdbd381 100644
--- a/client/src/styles/components/savings_card.module.css
+++ b/client/src/styles/components/savings_card.module.css
@@ -1,34 +1,33 @@
-Savinghorizontalcard.module · CSS
-.card {
+Savinghorizontalcard.module · CSS .card {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
 }
- 
+
 .leftPanel {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
- 
+
 .rightPanel {
   flex: 1;
   overflow-x: auto;
 }
- 
+
 .table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
- 
+
 .rowLabel {
   display: flex;
   align-items: center;
 }
- 
+
 .dot {
   width: 8px;
   height: 8px;
@@ -36,20 +35,19 @@ Savinghorizontalcard.module · CSS
   display: inline-block;
   flex-shrink: 0;
 }
- 
+
 @media (min-width: 640px) {
   .card {
     flex-direction: row;
     gap: 1.5rem;
   }
- 
+
   .rightPanel {
     flex: 1.2;
   }
- 
+
   .dot {
     width: 10px;
     height: 10px;
   }
 }
- 

From 330bdc755b78b63e542551fb00ff32159b884534 Mon Sep 17 00:00:00 2001
From: JillStingray1 <jerryhouau@gmail.com>
Date: Fri, 17 Jul 2026 10:30:56 +0800
Subject: [PATCH 6/8] add module declaration

---
 client/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/tsconfig.json b/client/tsconfig.json
index 5845367..a00c77b 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -17,6 +17,6 @@
     },
     "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "declarations.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

From 45ae9b892aaaa12ce9dde09a8a157813e30b5369 Mon Sep 17 00:00:00 2001
From: JillStingray1 <jerryhouau@gmail.com>
Date: Fri, 17 Jul 2026 10:35:35 +0800
Subject: [PATCH 7/8] add type declaration for css modules

---
 client/declarations.d.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 client/declarations.d.ts

diff --git a/client/declarations.d.ts b/client/declarations.d.ts
new file mode 100644
index 0000000..f2d12bb
--- /dev/null
+++ b/client/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

From 1b792ed86d74a84791e8808fec039722ae294ebe Mon Sep 17 00:00:00 2001
From: Katariah <kittykatz1344@ucc.asn.au>
Date: Sat, 18 Jul 2026 07:39:29 +0000
Subject: [PATCH 8/8] Fixed View More button to use accent colour

---
 client/src/components/content-card.tsx              | 2 +-
 client/src/components/resources-horizontal-card.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/content-card.tsx b/client/src/components/content-card.tsx
index 630186d..b6ba9e6 100644
--- a/client/src/components/content-card.tsx
+++ b/client/src/components/content-card.tsx
@@ -88,7 +88,7 @@ export function ContentCard({
             <div className="flex items-center justify-between gap-[clamp(0.25rem,0.8vw,0.375rem)]">
               <Link
                 aria-label={buttonLabel}
-                className="inline-flex w-fit items-center gap-[clamp(0.25rem,0.8vw,0.375rem)] text-[clamp(0.75rem,1.7vw,0.875rem)] font-semibold text-muted-foreground transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                className="inline-flex w-fit items-center gap-[clamp(0.25rem,0.8vw,0.375rem)] text-[clamp(0.75rem,1.7vw,0.875rem)] font-semibold text-muted-foreground transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 href={href}
               >
                 <span>{buttonLabel}</span>
diff --git a/client/src/components/resources-horizontal-card.tsx b/client/src/components/resources-horizontal-card.tsx
index f678535..602fd5f 100644
--- a/client/src/components/resources-horizontal-card.tsx
+++ b/client/src/components/resources-horizontal-card.tsx
@@ -72,7 +72,7 @@ export function HorizontalCard({
 
         <Link
           aria-label={buttonLabel}
-          className="mt-1 inline-flex w-fit items-center gap-[clamp(0.25rem,0.8vw,0.375rem)] text-[clamp(0.85rem,1.7vw,0.95rem)] font-semibold text-primary transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          className="mt-1 inline-flex w-fit items-center gap-[clamp(0.25rem,0.8vw,0.375rem)] text-[clamp(0.85rem,1.7vw,0.95rem)] font-semibold text-accent transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           href={href}
         >
           <span>{buttonLabel}</span>