From a405019f64ebe147bb78a937d048e79d068abc6a Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Mon, 19 Jan 2026 19:43:48 +1100
Subject: [PATCH 01/20] feat(email): add email template and send API route

---
 .env.example                 |   3 +
 app/api/send/route.ts        |  27 ++
 components/EmailTemplate.tsx |  19 ++
 package-lock.json            | 523 ++++++++++++++++++++++++++++++++++-
 package.json                 |   3 +
 5 files changed, 574 insertions(+), 1 deletion(-)
 create mode 100644 app/api/send/route.ts
 create mode 100644 components/EmailTemplate.tsx

diff --git a/.env.example b/.env.example
index 610b379..f2d2221 100644
--- a/.env.example
+++ b/.env.example
@@ -2,3 +2,6 @@
 NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
 NEXT_PUBLIC_SANITY_DATASET=production
 NEXT_PUBLIC_SANITY_API_VERSION=2024-01-18
+
+# Resend Configuration
+RESEND_API_KEY=your_resend_api_key
\ No newline at end of file
diff --git a/app/api/send/route.ts b/app/api/send/route.ts
new file mode 100644
index 0000000..1c4786a
--- /dev/null
+++ b/app/api/send/route.ts
@@ -0,0 +1,27 @@
+import { EmailTemplate } from '../../../components/EmailTemplate';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(req: Request) {
+  try {
+    // Get the form data from the request
+    const { name, emailAddress, phone, subject, message } = await req.json();
+
+    const { data, error } = await resend.emails.send({
+      from: emailAddress,
+      to: 'coding@monashclubs.org',
+      subject: subject || 'New Message from Monash Coding Site', 
+      react: EmailTemplate({ name, emailAddress, phone, message }),
+    });
+
+    if (error) {
+      return Response.json({ error }, { status: 500 });
+    }
+
+    return Response.json(data);
+  } catch (error) {
+    console.error('Catch error:', error);
+    return Response.json({ error: String(error) }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/components/EmailTemplate.tsx b/components/EmailTemplate.tsx
new file mode 100644
index 0000000..28df180
--- /dev/null
+++ b/components/EmailTemplate.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface EmailTemplateProps {
+  name: string;
+  emailAddress: string;
+  phone?: string;
+  message: string;
+}
+
+export function EmailTemplate({ name, emailAddress, phone, message }: EmailTemplateProps) {
+  return (
+    <div>
+      <h1>Welcome, {name}!</h1>
+      <p>Email: {emailAddress}</p>
+      {phone && <p>Phone: {phone}</p>}
+      <p>Message: {message}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index de56470..6280912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@portabletext/react": "^6.0.2",
+        "@react-email/components": "^1.0.4",
+        "@react-email/render": "^2.0.2",
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.5.0",
         "@sanity/image-url": "^2.0.3",
@@ -26,6 +28,7 @@
         "ogl": "^1.0.11",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "resend": "^6.7.0",
         "sanity": "^5.4.0",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
@@ -7731,6 +7734,337 @@
         "node": ">=20.19 <22 || >=22.12"
       }
     },
+    "node_modules/@react-email/body": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/body/-/body-0.2.1.tgz",
+      "integrity": "sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/button": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/button/-/button-0.2.1.tgz",
+      "integrity": "sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/code-block": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/code-block/-/code-block-0.2.1.tgz",
+      "integrity": "sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==",
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "^1.30.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/code-inline": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@react-email/code-inline/-/code-inline-0.0.6.tgz",
+      "integrity": "sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/column": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@react-email/column/-/column-0.0.14.tgz",
+      "integrity": "sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/components": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@react-email/components/-/components-1.0.4.tgz",
+      "integrity": "sha512-XpSs/mN0APMD9E3TYZnj8N6kRXqb6WBl9WrE+IHyB4PdgLNqXe7uZ5+5oZkKSE8Tskzw/K2vDJUqSZ2v+sRjUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-email/body": "0.2.1",
+        "@react-email/button": "0.2.1",
+        "@react-email/code-block": "0.2.1",
+        "@react-email/code-inline": "0.0.6",
+        "@react-email/column": "0.0.14",
+        "@react-email/container": "0.0.16",
+        "@react-email/font": "0.0.10",
+        "@react-email/head": "0.0.13",
+        "@react-email/heading": "0.0.16",
+        "@react-email/hr": "0.0.12",
+        "@react-email/html": "0.0.12",
+        "@react-email/img": "0.0.12",
+        "@react-email/link": "0.0.13",
+        "@react-email/markdown": "0.0.18",
+        "@react-email/preview": "0.0.14",
+        "@react-email/render": "2.0.2",
+        "@react-email/row": "0.0.13",
+        "@react-email/section": "0.0.17",
+        "@react-email/tailwind": "2.0.3",
+        "@react-email/text": "0.1.6"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/container": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@react-email/container/-/container-0.0.16.tgz",
+      "integrity": "sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/font": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@react-email/font/-/font-0.0.10.tgz",
+      "integrity": "sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/head": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/head/-/head-0.0.13.tgz",
+      "integrity": "sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/heading": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@react-email/heading/-/heading-0.0.16.tgz",
+      "integrity": "sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/hr": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/hr/-/hr-0.0.12.tgz",
+      "integrity": "sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/html": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/html/-/html-0.0.12.tgz",
+      "integrity": "sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/img": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/img/-/img-0.0.12.tgz",
+      "integrity": "sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/link": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/link/-/link-0.0.13.tgz",
+      "integrity": "sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/markdown": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@react-email/markdown/-/markdown-0.0.18.tgz",
+      "integrity": "sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg==",
+      "license": "MIT",
+      "dependencies": {
+        "marked": "^15.0.12"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/preview": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@react-email/preview/-/preview-0.0.14.tgz",
+      "integrity": "sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/render": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@react-email/render/-/render-2.0.2.tgz",
+      "integrity": "sha512-AGuNo86TP9Y2JBUwFcT+z0frPDML4WLIFlnCi7laCPYJA+43kdim0y+qRNPxRxZkJiUz1JMPnE2M5HaNYhWwIg==",
+      "license": "MIT",
+      "dependencies": {
+        "html-to-text": "^9.0.5",
+        "prettier": "^3.5.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/row": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/row/-/row-0.0.13.tgz",
+      "integrity": "sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/section": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@react-email/section/-/section-0.0.17.tgz",
+      "integrity": "sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/tailwind": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@react-email/tailwind/-/tailwind-2.0.3.tgz",
+      "integrity": "sha512-URXb/T2WS4RlNGM5QwekYnivuiVUcU87H0y5sqLl6/Oi3bMmgL0Bmw/W9GeJylC+876Vw+E6NkE0uRiUFIQwGg==",
+      "license": "MIT",
+      "dependencies": {
+        "tailwindcss": "^4.1.18"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@react-email/body": "0.2.1",
+        "@react-email/button": "0.2.1",
+        "@react-email/code-block": "0.2.1",
+        "@react-email/code-inline": "0.0.6",
+        "@react-email/container": "0.0.16",
+        "@react-email/heading": "0.0.16",
+        "@react-email/hr": "0.0.12",
+        "@react-email/img": "0.0.12",
+        "@react-email/link": "0.0.13",
+        "@react-email/preview": "0.0.14",
+        "@react-email/text": "0.1.6",
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/body": {
+          "optional": true
+        },
+        "@react-email/button": {
+          "optional": true
+        },
+        "@react-email/code-block": {
+          "optional": true
+        },
+        "@react-email/code-inline": {
+          "optional": true
+        },
+        "@react-email/container": {
+          "optional": true
+        },
+        "@react-email/heading": {
+          "optional": true
+        },
+        "@react-email/hr": {
+          "optional": true
+        },
+        "@react-email/img": {
+          "optional": true
+        },
+        "@react-email/link": {
+          "optional": true
+        },
+        "@react-email/preview": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-email/text": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@react-email/text/-/text-0.1.6.tgz",
+      "integrity": "sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@react-three/drei": {
       "version": "10.7.7",
       "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
@@ -12776,6 +13110,19 @@
         "node": ">=18.2"
       }
     },
+    "node_modules/@selderee/plugin-htmlparser2": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
+      "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "selderee": "^0.11.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/@sentry-internal/browser-utils": {
       "version": "8.55.0",
       "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.0.tgz",
@@ -13050,6 +13397,12 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -17240,7 +17593,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -18639,6 +18991,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -20205,6 +20563,41 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html-to-text": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
+      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@selderee/plugin-htmlparser2": "^0.11.0",
+        "deepmerge": "^4.3.1",
+        "dom-serializer": "^2.0.0",
+        "htmlparser2": "^8.0.2",
+        "selderee": "^0.11.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -21780,6 +22173,15 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leac": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
+      "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/lerna": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-9.0.3.tgz",
@@ -22740,6 +23142,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22760,6 +23163,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22780,6 +23184,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22800,6 +23205,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22820,6 +23226,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22840,6 +23247,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22860,6 +23268,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22880,6 +23289,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22900,6 +23310,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22920,6 +23331,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -22940,6 +23352,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -23323,6 +23736,18 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/marked": {
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -25664,6 +26089,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/parseley": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
+      "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
+      "license": "MIT",
+      "dependencies": {
+        "leac": "^0.6.0",
+        "peberminta": "^0.9.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -25736,6 +26174,15 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
+    "node_modules/peberminta": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
+      "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -26230,6 +26677,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
@@ -27136,6 +27592,26 @@
       "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
+    "node_modules/resend": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.7.0.tgz",
+      "integrity": "sha512-2ZV0NDZsh4Gh+Nd1hvluZIitmGJ59O4+OxMufymG6Y8uz1Jgt2uS1seSENnkIUlmwg7/dwmfIJC9rAufByz7wA==",
+      "license": "MIT",
+      "dependencies": {
+        "svix": "1.84.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -28332,6 +28808,18 @@
       "integrity": "sha512-UkEHHOV6j5cE3IsObQRK6vO4twSuhE4vtLD4UmX+doHgrtg2jRwXkz4O6cz0jcoxK5NGU7rFjyvLcWHzw7eQ5A==",
       "license": "MIT"
     },
+    "node_modules/selderee": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
+      "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
+      "license": "MIT",
+      "dependencies": {
+        "parseley": "^0.12.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -28953,6 +29441,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
     "node_modules/stats-gl": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
@@ -29421,6 +29919,29 @@
         "react": ">=17.0"
       }
     },
+    "node_modules/svix": {
+      "version": "1.84.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.84.1.tgz",
+      "integrity": "sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
+    "node_modules/svix/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 09a34b0..81aa69c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
   "homepage": "https://github.com/monashcoding/monashcoding-site#readme",
   "dependencies": {
     "@portabletext/react": "^6.0.2",
+    "@react-email/components": "^1.0.4",
+    "@react-email/render": "^2.0.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@sanity/image-url": "^2.0.3",
@@ -40,6 +42,7 @@
     "ogl": "^1.0.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "resend": "^6.7.0",
     "sanity": "^5.4.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

From fc654b8c63cb84c141fd6c8a2a9e18ecc8cabebf Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Mon, 19 Jan 2026 20:52:47 +1100
Subject: [PATCH 02/20] chore(MAC-239): small tailwind change

---
 components/ContactPageClient.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index b42b97e..5273784 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -77,7 +77,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
 
   return (
     <main className="min-h-screen bg-linear-to-b from-background to-secondary pt-32 flex flex-col items-center justify-center">
-      <div className="max-w-[600px] w-full py-16 px-8 text-center">
+      <div className="max-w-150 w-full py-16 px-8 text-center">
         <motion.h1
           className="text-[clamp(2.5rem,5vw,4rem)] font-extrabold text-foreground mb-4"
           initial={{ opacity: 0, y: 40 }}
@@ -104,7 +104,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.2 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                 <polyline points="22,6 12,13 2,6" />
@@ -126,7 +126,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.3 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
               </svg>
@@ -147,7 +147,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.4 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                 <circle cx="12" cy="10" r="3" />
@@ -174,7 +174,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
                 href={link.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-[50px] h-[50px] bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-black/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
+                className="w-12.5 h-12.5 bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-black/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
                 aria-label={link.platform}
               >
                 <SocialIcon platform={link.platform} />

From 13587924b6a801005554627e23ad7b8bd9bb9333 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Mon, 19 Jan 2026 19:43:48 +1100
Subject: [PATCH 03/20] feat(email): add email template and send API route

---
 .env.example                 |   6 +-
 app/api/send/route.ts        |  27 ++
 components/EmailTemplate.tsx |  19 ++
 package-lock.json            | 512 ++++++++++++++++++++++++++++++++++-
 package.json                 |   3 +
 5 files changed, 562 insertions(+), 5 deletions(-)
 create mode 100644 app/api/send/route.ts
 create mode 100644 components/EmailTemplate.tsx

diff --git a/.env.example b/.env.example
index 8b28778..3b87098 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,5 @@ NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
 NEXT_PUBLIC_SANITY_DATASET=production
 NEXT_PUBLIC_SANITY_API_VERSION=2024-01-18
 
-# Sanity CMS Configuration (Sanity CLI: dev, deploy)
-SANITY_STUDIO_PROJECT_ID=your_project_id
-SANITY_STUDIO_DATASET=production
-SANITY_STUDIO_API_VERSION=2024-01-18
+# Resend Configuration
+RESEND_API_KEY=your_resend_api_key
diff --git a/app/api/send/route.ts b/app/api/send/route.ts
new file mode 100644
index 0000000..1c4786a
--- /dev/null
+++ b/app/api/send/route.ts
@@ -0,0 +1,27 @@
+import { EmailTemplate } from '../../../components/EmailTemplate';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(req: Request) {
+  try {
+    // Get the form data from the request
+    const { name, emailAddress, phone, subject, message } = await req.json();
+
+    const { data, error } = await resend.emails.send({
+      from: emailAddress,
+      to: 'coding@monashclubs.org',
+      subject: subject || 'New Message from Monash Coding Site', 
+      react: EmailTemplate({ name, emailAddress, phone, message }),
+    });
+
+    if (error) {
+      return Response.json({ error }, { status: 500 });
+    }
+
+    return Response.json(data);
+  } catch (error) {
+    console.error('Catch error:', error);
+    return Response.json({ error: String(error) }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/components/EmailTemplate.tsx b/components/EmailTemplate.tsx
new file mode 100644
index 0000000..28df180
--- /dev/null
+++ b/components/EmailTemplate.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface EmailTemplateProps {
+  name: string;
+  emailAddress: string;
+  phone?: string;
+  message: string;
+}
+
+export function EmailTemplate({ name, emailAddress, phone, message }: EmailTemplateProps) {
+  return (
+    <div>
+      <h1>Welcome, {name}!</h1>
+      <p>Email: {emailAddress}</p>
+      {phone && <p>Phone: {phone}</p>}
+      <p>Message: {message}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7f16cac..cc1dda8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@portabletext/react": "^6.0.2",
+        "@react-email/components": "^1.0.4",
+        "@react-email/render": "^2.0.2",
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.5.0",
         "@sanity/image-url": "^2.0.3",
@@ -26,6 +28,7 @@
         "ogl": "^1.0.11",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "resend": "^6.7.0",
         "sanity": "^5.4.0",
         "styled-components": "^6.3.8",
         "tailwind-merge": "^3.4.0",
@@ -7729,6 +7732,337 @@
         "node": ">=20.19 <22 || >=22.12"
       }
     },
+    "node_modules/@react-email/body": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/body/-/body-0.2.1.tgz",
+      "integrity": "sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/button": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/button/-/button-0.2.1.tgz",
+      "integrity": "sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/code-block": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@react-email/code-block/-/code-block-0.2.1.tgz",
+      "integrity": "sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==",
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "^1.30.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/code-inline": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@react-email/code-inline/-/code-inline-0.0.6.tgz",
+      "integrity": "sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/column": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@react-email/column/-/column-0.0.14.tgz",
+      "integrity": "sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/components": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@react-email/components/-/components-1.0.4.tgz",
+      "integrity": "sha512-XpSs/mN0APMD9E3TYZnj8N6kRXqb6WBl9WrE+IHyB4PdgLNqXe7uZ5+5oZkKSE8Tskzw/K2vDJUqSZ2v+sRjUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-email/body": "0.2.1",
+        "@react-email/button": "0.2.1",
+        "@react-email/code-block": "0.2.1",
+        "@react-email/code-inline": "0.0.6",
+        "@react-email/column": "0.0.14",
+        "@react-email/container": "0.0.16",
+        "@react-email/font": "0.0.10",
+        "@react-email/head": "0.0.13",
+        "@react-email/heading": "0.0.16",
+        "@react-email/hr": "0.0.12",
+        "@react-email/html": "0.0.12",
+        "@react-email/img": "0.0.12",
+        "@react-email/link": "0.0.13",
+        "@react-email/markdown": "0.0.18",
+        "@react-email/preview": "0.0.14",
+        "@react-email/render": "2.0.2",
+        "@react-email/row": "0.0.13",
+        "@react-email/section": "0.0.17",
+        "@react-email/tailwind": "2.0.3",
+        "@react-email/text": "0.1.6"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/container": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@react-email/container/-/container-0.0.16.tgz",
+      "integrity": "sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/font": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@react-email/font/-/font-0.0.10.tgz",
+      "integrity": "sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/head": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/head/-/head-0.0.13.tgz",
+      "integrity": "sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/heading": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@react-email/heading/-/heading-0.0.16.tgz",
+      "integrity": "sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/hr": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/hr/-/hr-0.0.12.tgz",
+      "integrity": "sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/html": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/html/-/html-0.0.12.tgz",
+      "integrity": "sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/img": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@react-email/img/-/img-0.0.12.tgz",
+      "integrity": "sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/link": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/link/-/link-0.0.13.tgz",
+      "integrity": "sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/markdown": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@react-email/markdown/-/markdown-0.0.18.tgz",
+      "integrity": "sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg==",
+      "license": "MIT",
+      "dependencies": {
+        "marked": "^15.0.12"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/preview": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@react-email/preview/-/preview-0.0.14.tgz",
+      "integrity": "sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/render": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@react-email/render/-/render-2.0.2.tgz",
+      "integrity": "sha512-AGuNo86TP9Y2JBUwFcT+z0frPDML4WLIFlnCi7laCPYJA+43kdim0y+qRNPxRxZkJiUz1JMPnE2M5HaNYhWwIg==",
+      "license": "MIT",
+      "dependencies": {
+        "html-to-text": "^9.0.5",
+        "prettier": "^3.5.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/row": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@react-email/row/-/row-0.0.13.tgz",
+      "integrity": "sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/section": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@react-email/section/-/section-0.0.17.tgz",
+      "integrity": "sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@react-email/tailwind": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@react-email/tailwind/-/tailwind-2.0.3.tgz",
+      "integrity": "sha512-URXb/T2WS4RlNGM5QwekYnivuiVUcU87H0y5sqLl6/Oi3bMmgL0Bmw/W9GeJylC+876Vw+E6NkE0uRiUFIQwGg==",
+      "license": "MIT",
+      "dependencies": {
+        "tailwindcss": "^4.1.18"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@react-email/body": "0.2.1",
+        "@react-email/button": "0.2.1",
+        "@react-email/code-block": "0.2.1",
+        "@react-email/code-inline": "0.0.6",
+        "@react-email/container": "0.0.16",
+        "@react-email/heading": "0.0.16",
+        "@react-email/hr": "0.0.12",
+        "@react-email/img": "0.0.12",
+        "@react-email/link": "0.0.13",
+        "@react-email/preview": "0.0.14",
+        "@react-email/text": "0.1.6",
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/body": {
+          "optional": true
+        },
+        "@react-email/button": {
+          "optional": true
+        },
+        "@react-email/code-block": {
+          "optional": true
+        },
+        "@react-email/code-inline": {
+          "optional": true
+        },
+        "@react-email/container": {
+          "optional": true
+        },
+        "@react-email/heading": {
+          "optional": true
+        },
+        "@react-email/hr": {
+          "optional": true
+        },
+        "@react-email/img": {
+          "optional": true
+        },
+        "@react-email/link": {
+          "optional": true
+        },
+        "@react-email/preview": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-email/text": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@react-email/text/-/text-0.1.6.tgz",
+      "integrity": "sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@react-three/drei": {
       "version": "10.7.7",
       "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
@@ -12767,6 +13101,19 @@
         "node": ">=18.2"
       }
     },
+    "node_modules/@selderee/plugin-htmlparser2": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
+      "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "selderee": "^0.11.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/@sentry-internal/browser-utils": {
       "version": "8.55.0",
       "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.0.tgz",
@@ -13041,6 +13388,12 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -17227,7 +17580,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -18626,6 +18978,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -20192,6 +20550,41 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html-to-text": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
+      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@selderee/plugin-htmlparser2": "^0.11.0",
+        "deepmerge": "^4.3.1",
+        "dom-serializer": "^2.0.0",
+        "htmlparser2": "^8.0.2",
+        "selderee": "^0.11.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -21767,6 +22160,15 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leac": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
+      "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/lerna": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-9.0.3.tgz",
@@ -23321,6 +23723,18 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/marked": {
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -25655,6 +26069,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/parseley": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
+      "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
+      "license": "MIT",
+      "dependencies": {
+        "leac": "^0.6.0",
+        "peberminta": "^0.9.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -25727,6 +26154,15 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
+    "node_modules/peberminta": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
+      "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -26221,6 +26657,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
@@ -27127,6 +27572,26 @@
       "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
+    "node_modules/resend": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.7.0.tgz",
+      "integrity": "sha512-2ZV0NDZsh4Gh+Nd1hvluZIitmGJ59O4+OxMufymG6Y8uz1Jgt2uS1seSENnkIUlmwg7/dwmfIJC9rAufByz7wA==",
+      "license": "MIT",
+      "dependencies": {
+        "svix": "1.84.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -28323,6 +28788,18 @@
       "integrity": "sha512-UkEHHOV6j5cE3IsObQRK6vO4twSuhE4vtLD4UmX+doHgrtg2jRwXkz4O6cz0jcoxK5NGU7rFjyvLcWHzw7eQ5A==",
       "license": "MIT"
     },
+    "node_modules/selderee": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
+      "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
+      "license": "MIT",
+      "dependencies": {
+        "parseley": "^0.12.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -28943,6 +29420,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
     "node_modules/stats-gl": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
@@ -29408,6 +29895,29 @@
         "react": ">=17.0"
       }
     },
+    "node_modules/svix": {
+      "version": "1.84.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.84.1.tgz",
+      "integrity": "sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
+    "node_modules/svix/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 68b0ca6..83ef5b0 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
   "homepage": "https://github.com/monashcoding/monashcoding-site#readme",
   "dependencies": {
     "@portabletext/react": "^6.0.2",
+    "@react-email/components": "^1.0.4",
+    "@react-email/render": "^2.0.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@sanity/image-url": "^2.0.3",
@@ -40,6 +42,7 @@
     "ogl": "^1.0.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "resend": "^6.7.0",
     "sanity": "^5.4.0",
     "styled-components": "^6.3.8",
     "tailwind-merge": "^3.4.0",

From 392f61446e109c40e0e072e0d25463bf2838b694 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Mon, 19 Jan 2026 20:52:47 +1100
Subject: [PATCH 04/20] chore(MAC-239): small tailwind change

---
 components/ContactPageClient.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index b42b97e..5273784 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -77,7 +77,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
 
   return (
     <main className="min-h-screen bg-linear-to-b from-background to-secondary pt-32 flex flex-col items-center justify-center">
-      <div className="max-w-[600px] w-full py-16 px-8 text-center">
+      <div className="max-w-150 w-full py-16 px-8 text-center">
         <motion.h1
           className="text-[clamp(2.5rem,5vw,4rem)] font-extrabold text-foreground mb-4"
           initial={{ opacity: 0, y: 40 }}
@@ -104,7 +104,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.2 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                 <polyline points="22,6 12,13 2,6" />
@@ -126,7 +126,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.3 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
               </svg>
@@ -147,7 +147,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
             transition={{ duration: 0.4, delay: 0.4 }}
             whileHover={{ scale: 1.02 }}
           >
-            <div className="w-[50px] h-[50px] bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
+            <div className="w-12.5 h-12.5 bg-gold-700/10 rounded-2xl flex items-center justify-center shrink-0">
               <svg className="w-6 h-6 text-gold-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                 <circle cx="12" cy="10" r="3" />
@@ -174,7 +174,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
                 href={link.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-[50px] h-[50px] bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-black/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
+                className="w-12.5 h-12.5 bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-black/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
                 aria-label={link.platform}
               >
                 <SocialIcon platform={link.platform} />

From aa9a6594665fd53659101df098540ebaf71d66a1 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Tue, 20 Jan 2026 23:56:42 +1100
Subject: [PATCH 05/20] feat(MAC-239): setup basic form for testing and
 temporarily using onobard email

---
 app/api/send/route.ts            |   7 +-
 components/ContactPageClient.tsx | 190 +++++++++++++++++++++++++++++++
 2 files changed, 195 insertions(+), 2 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index 1c4786a..0d714c0 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -9,13 +9,16 @@ export async function POST(req: Request) {
     const { name, emailAddress, phone, subject, message } = await req.json();
 
     const { data, error } = await resend.emails.send({
-      from: emailAddress,
-      to: 'coding@monashclubs.org',
+      from: 'onboarding@resend.dev', // Use Resend's testing email for development
+      // to: 'coding@monashclubs.org',
+      to: 'projects@monashcoding.com',
+      replyTo: emailAddress, // User's email will be set as reply-to
       subject: subject || 'New Message from Monash Coding Site', 
       react: EmailTemplate({ name, emailAddress, phone, message }),
     });
 
     if (error) {
+      console.error('Resend API error:', error);
       return Response.json({ error }, { status: 500 });
     }
 
diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 5273784..39b1138 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { motion } from "framer-motion";
 import { ContactPageData, ContactSocialLink } from "@/lib/sanity/types";
+import { EmailTemplate } from "./EmailTemplate";
+
 
 // Platform icon components
 const SocialIcon = ({ platform }: { platform: ContactSocialLink["platform"] }) => {
@@ -65,6 +68,15 @@ interface ContactPageClientProps {
 }
 
 export default function ContactPageClient({ data }: ContactPageClientProps) {
+  // Form state
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: '',
+  });
+
   // Use Sanity data or fallbacks
   const pageTitle = data?.pageTitle || "Get in Touch";
   const pageSubtitle = data?.pageSubtitle || "Have a question or want to collaborate? We'd love to hear from you.";
@@ -75,6 +87,61 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const locationMapLink = data?.locationMapLink || "https://maps.google.com/?q=Monash+University+Clayton";
   const socialLinks = data?.socialLinks || defaultSocialLinks;
 
+  // Handle form input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  // Handler function to send email with form data to the /api/send endpoint
+  const handleSendMockEmail = async (e?: React.FormEvent) => {
+    if (e) {
+      e.preventDefault();
+    }
+
+    try {
+      // Send POST request to /api/send with form data
+      const response = await fetch('/api/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: formData.name,
+          emailAddress: formData.email,
+          phone: formData.phone,
+          subject: formData.subject,
+          message: formData.message,
+        }),
+      });
+      
+      // Show success/error alert based on response status
+      if (response.ok) {
+        alert('Email sent successfully!');
+        // Reset form
+        setFormData({
+          name: '',
+          email: '',
+          phone: '',
+          subject: '',
+          message: '',
+        });
+      } else {
+        console.log('Failed response:', response);
+        alert('Failed to send email');
+      }
+    } catch (error) {
+      // Handle network or request errors
+      console.error('Error sending email:', error);
+      alert('Error sending email');
+    }
+  };
+
+
+
   return (
     <main className="min-h-screen bg-linear-to-b from-background to-secondary pt-32 flex flex-col items-center justify-center">
       <div className="max-w-150 w-full py-16 px-8 text-center">
@@ -95,6 +162,129 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           {pageSubtitle}
         </motion.p>
 
+        {/* Contact Form */}
+        <motion.form
+          onSubmit={handleSendMockEmail}
+          className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 }}
+        >
+          <div className="grid grid-cols-1 gap-4 mb-6">
+            {/* Name Input */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-black/70 mb-2">
+                Name *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Your name"
+              />
+            </div>
+
+            {/* Email Input */}
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-black/70 mb-2">
+                Email *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="your@email.com"
+              />
+            </div>
+
+            {/* Phone Input */}
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-black/70 mb-2">
+                Phone
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone}
+                onChange={handleInputChange}
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Your phone number"
+              />
+            </div>
+
+            {/* Subject Input */}
+            <div>
+              <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
+                Subject *
+              </label>
+              <input
+                type="text"
+                id="subject"
+                name="subject"
+                value={formData.subject}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Subject of your message"
+              />
+            </div>
+
+            {/* Message Textarea */}
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-black/70 mb-2">
+                Message *
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                value={formData.message}
+                onChange={handleInputChange}
+                required
+                rows={5}
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all resize-none"
+                placeholder="Your message here..."
+              />
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <motion.button
+            type="submit"
+            className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            Send Message
+          </motion.button>
+        </motion.form>
+
+        {/* Test button to send mock email data to the /api/send endpoint */}
+        {/* This allows testing the email functionality with sample contact form data */}
+        <motion.button
+          onClick={handleSendMockEmail}
+          className="mb-12 py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 }}
+          whileHover={{ scale: 1.05 }}
+        >
+          Send Test Email
+        </motion.button>
+
+        {/* Have the contact methods side by side */}
+        <div className="flex flex-row gap-6 mb-12">
+          
+        </div>
+
         <div className="flex flex-col gap-6">
           <motion.a
             href={`mailto:${email}`}

From f080e06d00b36932f8f7c0a70e7a9e017b2b11fa Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:30:47 +1100
Subject: [PATCH 06/20] feat(MAC-239): created email-template for nicer gmail
 view

---
 components/EmailTemplate.tsx | 224 +++++++++++++++++++++++++++++++++--
 1 file changed, 217 insertions(+), 7 deletions(-)

diff --git a/components/EmailTemplate.tsx b/components/EmailTemplate.tsx
index 28df180..7ee9f47 100644
--- a/components/EmailTemplate.tsx
+++ b/components/EmailTemplate.tsx
@@ -3,17 +3,227 @@ import * as React from 'react';
 export interface EmailTemplateProps {
   name: string;
   emailAddress: string;
-  phone?: string;
+  subject?: string;
   message: string;
 }
 
-export function EmailTemplate({ name, emailAddress, phone, message }: EmailTemplateProps) {
+export function EmailTemplate({ name, emailAddress, subject, message }: EmailTemplateProps) {
   return (
-    <div>
-      <h1>Welcome, {name}!</h1>
-      <p>Email: {emailAddress}</p>
-      {phone && <p>Phone: {phone}</p>}
-      <p>Message: {message}</p>
+    <div style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f8f7f4', padding: '0', margin: '0' }}>
+      {/* Main Container */}
+      <table width="100%" cellPadding="0" cellSpacing="0" style={{ backgroundColor: '#f8f7f4' }}>
+        <tbody>
+          {/* Header with Gradient */}
+          <tr>
+            <td align="center" style={{ padding: '40px 20px' }}>
+              <table width="600" cellPadding="0" cellSpacing="0" style={{ maxWidth: '600px' }}>
+                <tbody>
+                  <tr>
+                    <td style={{
+                      background: 'linear-gradient(135deg, #b8860b 0%, #daa520 100%)',
+                      padding: '40px 30px',
+                      borderRadius: '12px 12px 0 0',
+                      textAlign: 'center'
+                    }}>
+                      <h1 style={{
+                        color: '#ffffff',
+                        margin: '0',
+                        fontSize: '28px',
+                        fontWeight: '700',
+                        letterSpacing: '0.5px'
+                      }}>
+                        New Message Received
+                      </h1>
+                      <p style={{
+                        color: 'rgba(255,255,255,0.9)',
+                        margin: '10px 0 0 0',
+                        fontSize: '14px'
+                      }}>
+                        Someone wants to connect with you
+                      </p>
+                    </td>
+                  </tr>
+
+                  {/* Content Section */}
+                  <tr>
+                    <td style={{
+                      backgroundColor: '#ffffff',
+                      padding: '40px 30px',
+                      borderRadius: '0 0 12px 12px'
+                    }}>
+                      {/* Greeting */}
+                      <p style={{
+                        color: '#1a1a1a',
+                        fontSize: '16px',
+                        lineHeight: '1.6',
+                        margin: '0 0 25px 0'
+                      }}>
+                        Hi there, you have a new contact form submission:
+                      </p>
+
+                      {/* Contact Details Card */}
+                      <div style={{
+                        backgroundColor: '#f8f7f4',
+                        borderLeft: '4px solid #b8860b',
+                        padding: '20px',
+                        borderRadius: '6px',
+                        marginBottom: '25px'
+                      }}>
+                        {/* Name */}
+                        <div style={{ marginBottom: '15px' }}>
+                          <span style={{
+                            display: 'block',
+                            color: '#b8860b',
+                            fontSize: '12px',
+                            fontWeight: '700',
+                            textTransform: 'uppercase',
+                            letterSpacing: '1px',
+                            marginBottom: '4px'
+                          }}>
+                            From
+                          </span>
+                          <span style={{
+                            color: '#1a1a1a',
+                            fontSize: '16px',
+                            fontWeight: '600'
+                          }}>
+                            {name}
+                          </span>
+                        </div>
+
+                        {/* Email */}
+                        <div style={{ marginBottom: '15px' }}>
+                          <span style={{
+                            display: 'block',
+                            color: '#b8860b',
+                            fontSize: '12px',
+                            fontWeight: '700',
+                            textTransform: 'uppercase',
+                            letterSpacing: '1px',
+                            marginBottom: '4px'
+                          }}>
+                            Email
+                          </span>
+                          <a href={`mailto:${emailAddress}`} style={{
+                            color: '#0066cc',
+                            fontSize: '14px',
+                            textDecoration: 'none',
+                            borderBottom: '1px solid #0066cc'
+                          }}>
+                            {emailAddress}
+                          </a>
+                        </div>
+
+                        {/* Subject (if provided) */}
+                        {subject && (
+                          <div>
+                            <span style={{
+                              display: 'block',
+                              color: '#b8860b',
+                              fontSize: '12px',
+                              fontWeight: '700',
+                              textTransform: 'uppercase',
+                              letterSpacing: '1px',
+                              marginBottom: '4px'
+                            }}>
+                              Subject
+                            </span>
+                            <span style={{
+                              color: '#1a1a1a',
+                              fontSize: '14px',
+                              fontWeight: '600'
+                            }}>
+                              {subject}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Message Section */}
+                      <div style={{ marginBottom: '25px' }}>
+                        <span style={{
+                          display: 'block',
+                          color: '#b8860b',
+                          fontSize: '12px',
+                          fontWeight: '700',
+                          textTransform: 'uppercase',
+                          letterSpacing: '1px',
+                          marginBottom: '10px'
+                        }}>
+                          Message
+                        </span>
+                        <div style={{
+                          backgroundColor: '#f8f7f4',
+                          padding: '20px',
+                          borderRadius: '6px',
+                          color: '#1a1a1a',
+                          lineHeight: '1.8',
+                          fontSize: '14px',
+                          whiteSpace: 'pre-wrap',
+                          wordWrap: 'break-word'
+                        }}>
+                          {message}
+                        </div>
+                      </div>
+
+                      {/* Call to Action Button */}
+                      <div style={{ textAlign: 'center', marginBottom: '30px' }}>
+                        <a href={`mailto:${emailAddress}`} style={{
+                          display: 'inline-block',
+                          backgroundColor: '#b8860b',
+                          color: '#ffffff',
+                          padding: '14px 32px',
+                          borderRadius: '6px',
+                          textDecoration: 'none',
+                          fontSize: '14px',
+                          fontWeight: '600',
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.5px',
+                          transition: 'background-color 0.3s ease'
+                        }}>
+                          Reply to {name.split(' ')[0]}
+                        </a>
+                      </div>
+
+                      {/* Footer Note */}
+                      <p style={{
+                        color: '#666666',
+                        fontSize: '12px',
+                        lineHeight: '1.6',
+                        textAlign: 'center',
+                        borderTop: '1px solid #e0e0e0',
+                        paddingTop: '20px',
+                        margin: '0'
+                      }}>
+                        This email was sent from your Monash Coding contact form.<br />
+                        <span style={{ color: '#999999' }}>Please reply directly to this email or contact {emailAddress}</span>
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+
+          {/* Bottom Brand Section */}
+          <tr>
+            <td align="center" style={{ padding: '30px 20px' }}>
+              <p style={{
+                color: '#999999',
+                fontSize: '12px',
+                margin: '0',
+                textAlign: 'center'
+              }}>
+                <strong style={{ color: '#b8860b' }}>Monash Coding</strong><br />
+                Monash University, Clayton VIC<br />
+                <a href="https://monashcoding.com" style={{ color: '#b8860b', textDecoration: 'none' }}>
+                  monashcoding.com
+                </a>
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   );
 }
\ No newline at end of file

From 2ac7c7ca87ff0e0917cee0f7569fa1f15a176e56 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:31:20 +1100
Subject: [PATCH 07/20] fix(MAC-239): removed phone fields from form

---
 app/api/send/route.ts            |  6 +++---
 components/ContactPageClient.tsx | 31 +------------------------------
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index 0d714c0..b1fe7d9 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -6,15 +6,15 @@ const resend = new Resend(process.env.RESEND_API_KEY);
 export async function POST(req: Request) {
   try {
     // Get the form data from the request
-    const { name, emailAddress, phone, subject, message } = await req.json();
+    const { name, emailAddress, subject, message } = await req.json();
 
     const { data, error } = await resend.emails.send({
-      from: 'onboarding@resend.dev', // Use Resend's testing email for development
+      from: 'noreply@monashcoding.com', 
       // to: 'coding@monashclubs.org',
       to: 'projects@monashcoding.com',
       replyTo: emailAddress, // User's email will be set as reply-to
       subject: subject || 'New Message from Monash Coding Site', 
-      react: EmailTemplate({ name, emailAddress, phone, message }),
+      react: EmailTemplate({ name, emailAddress, subject, message }),
     });
 
     if (error) {
diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 39b1138..5ded4e9 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -204,23 +204,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
                 placeholder="your@email.com"
               />
             </div>
-
-            {/* Phone Input */}
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-black/70 mb-2">
-                Phone
-              </label>
-              <input
-                type="tel"
-                id="phone"
-                name="phone"
-                value={formData.phone}
-                onChange={handleInputChange}
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Your phone number"
-              />
-            </div>
-
+            
             {/* Subject Input */}
             <div>
               <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
@@ -267,19 +251,6 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           </motion.button>
         </motion.form>
 
-        {/* Test button to send mock email data to the /api/send endpoint */}
-        {/* This allows testing the email functionality with sample contact form data */}
-        <motion.button
-          onClick={handleSendMockEmail}
-          className="mb-12 py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.15 }}
-          whileHover={{ scale: 1.05 }}
-        >
-          Send Test Email
-        </motion.button>
-
         {/* Have the contact methods side by side */}
         <div className="flex flex-row gap-6 mb-12">
           

From 3ddd1c1ff607acaaaf719347cf261d264bab84f6 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:52:14 +1100
Subject: [PATCH 08/20] fix(MAC-239): custom error handling because default
 look ugly

---
 components/ContactPageClient.tsx | 332 +++++++++++++++++++------------
 1 file changed, 202 insertions(+), 130 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 5ded4e9..a660330 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { ContactPageData, ContactSocialLink } from "@/lib/sanity/types";
 import { EmailTemplate } from "./EmailTemplate";
 
 
+
 // Platform icon components
 const SocialIcon = ({ platform }: { platform: ContactSocialLink["platform"] }) => {
   switch (platform) {
@@ -72,11 +73,14 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const [formData, setFormData] = useState({
     name: '',
     email: '',
-    phone: '',
     subject: '',
     message: '',
   });
 
+  // Error state
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+
   // Use Sanity data or fallbacks
   const pageTitle = data?.pageTitle || "Get in Touch";
   const pageSubtitle = data?.pageSubtitle || "Have a question or want to collaborate? We'd love to hear from you.";
@@ -87,59 +91,74 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const locationMapLink = data?.locationMapLink || "https://maps.google.com/?q=Monash+University+Clayton";
   const socialLinks = data?.socialLinks || defaultSocialLinks;
 
-  // Handle form input changes
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  // Handle form input changes. Clears errors on change.
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
+
+    setFormData((prev) => ({
       ...prev,
       [name]: value,
     }));
+
+    setErrors((prev) => ({
+      ...prev,
+      [name]: "",
+    }));
   };
 
-  // Handler function to send email with form data to the /api/send endpoint
-  const handleSendMockEmail = async (e?: React.FormEvent) => {
-    if (e) {
-      e.preventDefault();
-    }
 
-    try {
-      // Send POST request to /api/send with form data
-      const response = await fetch('/api/send', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          name: formData.name,
-          emailAddress: formData.email,
-          phone: formData.phone,
-          subject: formData.subject,
-          message: formData.message,
-        }),
-      });
-      
-      // Show success/error alert based on response status
-      if (response.ok) {
-        alert('Email sent successfully!');
-        // Reset form
-        setFormData({
-          name: '',
-          email: '',
-          phone: '',
-          subject: '',
-          message: '',
-        });
-      } else {
-        console.log('Failed response:', response);
-        alert('Failed to send email');
-      }
-    } catch (error) {
-      // Handle network or request errors
-      console.error('Error sending email:', error);
-      alert('Error sending email');
+  // Validate form fields
+const validate = () => {
+  const newErrors: Record<string, string> = {};
+
+  if (!formData.name.trim()) newErrors.name = "Name is required";
+  if (!formData.email.trim()) newErrors.email = "Email is required";
+  if (!formData.subject.trim()) newErrors.subject = "Subject is required";
+  if (!formData.message.trim()) newErrors.message = "Message is required";
+
+  setErrors(newErrors);
+  return Object.keys(newErrors).length === 0;
+};
+
+const handleSendEmail = async (
+  e: React.FormEvent<HTMLFormElement>
+) => {
+  e.preventDefault();
+  if (!validate()) return;
+
+  try {
+    const response = await fetch("/api/send", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        name: formData.name,
+        emailAddress: formData.email,
+        subject: formData.subject,
+        message: formData.message,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to send email");
     }
-  };
 
+    alert("Email sent successfully!");
+
+    setFormData({
+      name: "",
+      email: "",
+      subject: "",
+      message: "",
+    });
+  } catch (error) {
+    console.error("Error sending email:", error);
+    alert("Error sending email");
+  }
+};
 
 
   return (
@@ -162,94 +181,147 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           {pageSubtitle}
         </motion.p>
 
-        {/* Contact Form */}
         <motion.form
-          onSubmit={handleSendMockEmail}
-          className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.15 }}
-        >
-          <div className="grid grid-cols-1 gap-4 mb-6">
-            {/* Name Input */}
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-black/70 mb-2">
-                Name *
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Your name"
-              />
-            </div>
+      noValidate
+      onSubmit={handleSendEmail}
+      className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay: 0.15 }}
+    >
+      <div className="grid grid-cols-1 gap-4 mb-6">
 
-            {/* Email Input */}
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-black/70 mb-2">
-                Email *
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="your@email.com"
-              />
-            </div>
-            
-            {/* Subject Input */}
-            <div>
-              <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
-                Subject *
-              </label>
-              <input
-                type="text"
-                id="subject"
-                name="subject"
-                value={formData.subject}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Subject of your message"
-              />
-            </div>
+        {/* NAME */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Name
+          </label>
+          <input
+            name="name"
+            value={formData.name}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.name
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Your name"
+          />
+          <AnimatePresence>
+            {errors.name && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.name}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
 
-            {/* Message Textarea */}
-            <div>
-              <label htmlFor="message" className="block text-sm font-medium text-black/70 mb-2">
-                Message *
-              </label>
-              <textarea
-                id="message"
-                name="message"
-                value={formData.message}
-                onChange={handleInputChange}
-                required
-                rows={5}
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all resize-none"
-                placeholder="Your message here..."
-              />
-            </div>
-          </div>
+        {/* EMAIL */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Email
+          </label>
+          <input
+            name="email"
+            value={formData.email}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.email
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="your@email.com"
+          />
+          <AnimatePresence>
+            {errors.email && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.email}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
 
-          {/* Submit Button */}
-          <motion.button
-            type="submit"
-            className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            Send Message
-          </motion.button>
-        </motion.form>
+        {/* SUBJECT */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Subject
+          </label>
+          <input
+            name="subject"
+            value={formData.subject}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.subject
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Subject of your message"
+          />
+          <AnimatePresence>
+            {errors.subject && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.subject}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* MESSAGE */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Message
+          </label>
+          <textarea
+            name="message"
+            rows={5}
+            value={formData.message}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 resize-none transition-all
+              ${errors.message
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Your message here..."
+          />
+          <AnimatePresence>
+            {errors.message && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.message}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      <motion.button
+        type="submit"
+        className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium hover:bg-gold-800 active:scale-95"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        Send Message
+      </motion.button>
+    </motion.form>
 
         {/* Have the contact methods side by side */}
         <div className="flex flex-row gap-6 mb-12">

From 984096030d4f954b7b3b96c8c16ac46f28c5e33f Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Tue, 20 Jan 2026 23:56:42 +1100
Subject: [PATCH 09/20] feat(MAC-239): setup basic form for testing and
 temporarily using onobard email

---
 app/api/send/route.ts            |   7 +-
 components/ContactPageClient.tsx | 190 +++++++++++++++++++++++++++++++
 2 files changed, 195 insertions(+), 2 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index 1c4786a..0d714c0 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -9,13 +9,16 @@ export async function POST(req: Request) {
     const { name, emailAddress, phone, subject, message } = await req.json();
 
     const { data, error } = await resend.emails.send({
-      from: emailAddress,
-      to: 'coding@monashclubs.org',
+      from: 'onboarding@resend.dev', // Use Resend's testing email for development
+      // to: 'coding@monashclubs.org',
+      to: 'projects@monashcoding.com',
+      replyTo: emailAddress, // User's email will be set as reply-to
       subject: subject || 'New Message from Monash Coding Site', 
       react: EmailTemplate({ name, emailAddress, phone, message }),
     });
 
     if (error) {
+      console.error('Resend API error:', error);
       return Response.json({ error }, { status: 500 });
     }
 
diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 5273784..39b1138 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { motion } from "framer-motion";
 import { ContactPageData, ContactSocialLink } from "@/lib/sanity/types";
+import { EmailTemplate } from "./EmailTemplate";
+
 
 // Platform icon components
 const SocialIcon = ({ platform }: { platform: ContactSocialLink["platform"] }) => {
@@ -65,6 +68,15 @@ interface ContactPageClientProps {
 }
 
 export default function ContactPageClient({ data }: ContactPageClientProps) {
+  // Form state
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: '',
+  });
+
   // Use Sanity data or fallbacks
   const pageTitle = data?.pageTitle || "Get in Touch";
   const pageSubtitle = data?.pageSubtitle || "Have a question or want to collaborate? We'd love to hear from you.";
@@ -75,6 +87,61 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const locationMapLink = data?.locationMapLink || "https://maps.google.com/?q=Monash+University+Clayton";
   const socialLinks = data?.socialLinks || defaultSocialLinks;
 
+  // Handle form input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  // Handler function to send email with form data to the /api/send endpoint
+  const handleSendMockEmail = async (e?: React.FormEvent) => {
+    if (e) {
+      e.preventDefault();
+    }
+
+    try {
+      // Send POST request to /api/send with form data
+      const response = await fetch('/api/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: formData.name,
+          emailAddress: formData.email,
+          phone: formData.phone,
+          subject: formData.subject,
+          message: formData.message,
+        }),
+      });
+      
+      // Show success/error alert based on response status
+      if (response.ok) {
+        alert('Email sent successfully!');
+        // Reset form
+        setFormData({
+          name: '',
+          email: '',
+          phone: '',
+          subject: '',
+          message: '',
+        });
+      } else {
+        console.log('Failed response:', response);
+        alert('Failed to send email');
+      }
+    } catch (error) {
+      // Handle network or request errors
+      console.error('Error sending email:', error);
+      alert('Error sending email');
+    }
+  };
+
+
+
   return (
     <main className="min-h-screen bg-linear-to-b from-background to-secondary pt-32 flex flex-col items-center justify-center">
       <div className="max-w-150 w-full py-16 px-8 text-center">
@@ -95,6 +162,129 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           {pageSubtitle}
         </motion.p>
 
+        {/* Contact Form */}
+        <motion.form
+          onSubmit={handleSendMockEmail}
+          className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 }}
+        >
+          <div className="grid grid-cols-1 gap-4 mb-6">
+            {/* Name Input */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-black/70 mb-2">
+                Name *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Your name"
+              />
+            </div>
+
+            {/* Email Input */}
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-black/70 mb-2">
+                Email *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="your@email.com"
+              />
+            </div>
+
+            {/* Phone Input */}
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-black/70 mb-2">
+                Phone
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone}
+                onChange={handleInputChange}
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Your phone number"
+              />
+            </div>
+
+            {/* Subject Input */}
+            <div>
+              <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
+                Subject *
+              </label>
+              <input
+                type="text"
+                id="subject"
+                name="subject"
+                value={formData.subject}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
+                placeholder="Subject of your message"
+              />
+            </div>
+
+            {/* Message Textarea */}
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-black/70 mb-2">
+                Message *
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                value={formData.message}
+                onChange={handleInputChange}
+                required
+                rows={5}
+                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all resize-none"
+                placeholder="Your message here..."
+              />
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <motion.button
+            type="submit"
+            className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            Send Message
+          </motion.button>
+        </motion.form>
+
+        {/* Test button to send mock email data to the /api/send endpoint */}
+        {/* This allows testing the email functionality with sample contact form data */}
+        <motion.button
+          onClick={handleSendMockEmail}
+          className="mb-12 py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 }}
+          whileHover={{ scale: 1.05 }}
+        >
+          Send Test Email
+        </motion.button>
+
+        {/* Have the contact methods side by side */}
+        <div className="flex flex-row gap-6 mb-12">
+          
+        </div>
+
         <div className="flex flex-col gap-6">
           <motion.a
             href={`mailto:${email}`}

From f3dda9b4a617bf1367b0781ff6ff5777e2b234ea Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:30:47 +1100
Subject: [PATCH 10/20] feat(MAC-239): created email-template for nicer gmail
 view

---
 components/EmailTemplate.tsx | 224 +++++++++++++++++++++++++++++++++--
 1 file changed, 217 insertions(+), 7 deletions(-)

diff --git a/components/EmailTemplate.tsx b/components/EmailTemplate.tsx
index 28df180..7ee9f47 100644
--- a/components/EmailTemplate.tsx
+++ b/components/EmailTemplate.tsx
@@ -3,17 +3,227 @@ import * as React from 'react';
 export interface EmailTemplateProps {
   name: string;
   emailAddress: string;
-  phone?: string;
+  subject?: string;
   message: string;
 }
 
-export function EmailTemplate({ name, emailAddress, phone, message }: EmailTemplateProps) {
+export function EmailTemplate({ name, emailAddress, subject, message }: EmailTemplateProps) {
   return (
-    <div>
-      <h1>Welcome, {name}!</h1>
-      <p>Email: {emailAddress}</p>
-      {phone && <p>Phone: {phone}</p>}
-      <p>Message: {message}</p>
+    <div style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f8f7f4', padding: '0', margin: '0' }}>
+      {/* Main Container */}
+      <table width="100%" cellPadding="0" cellSpacing="0" style={{ backgroundColor: '#f8f7f4' }}>
+        <tbody>
+          {/* Header with Gradient */}
+          <tr>
+            <td align="center" style={{ padding: '40px 20px' }}>
+              <table width="600" cellPadding="0" cellSpacing="0" style={{ maxWidth: '600px' }}>
+                <tbody>
+                  <tr>
+                    <td style={{
+                      background: 'linear-gradient(135deg, #b8860b 0%, #daa520 100%)',
+                      padding: '40px 30px',
+                      borderRadius: '12px 12px 0 0',
+                      textAlign: 'center'
+                    }}>
+                      <h1 style={{
+                        color: '#ffffff',
+                        margin: '0',
+                        fontSize: '28px',
+                        fontWeight: '700',
+                        letterSpacing: '0.5px'
+                      }}>
+                        New Message Received
+                      </h1>
+                      <p style={{
+                        color: 'rgba(255,255,255,0.9)',
+                        margin: '10px 0 0 0',
+                        fontSize: '14px'
+                      }}>
+                        Someone wants to connect with you
+                      </p>
+                    </td>
+                  </tr>
+
+                  {/* Content Section */}
+                  <tr>
+                    <td style={{
+                      backgroundColor: '#ffffff',
+                      padding: '40px 30px',
+                      borderRadius: '0 0 12px 12px'
+                    }}>
+                      {/* Greeting */}
+                      <p style={{
+                        color: '#1a1a1a',
+                        fontSize: '16px',
+                        lineHeight: '1.6',
+                        margin: '0 0 25px 0'
+                      }}>
+                        Hi there, you have a new contact form submission:
+                      </p>
+
+                      {/* Contact Details Card */}
+                      <div style={{
+                        backgroundColor: '#f8f7f4',
+                        borderLeft: '4px solid #b8860b',
+                        padding: '20px',
+                        borderRadius: '6px',
+                        marginBottom: '25px'
+                      }}>
+                        {/* Name */}
+                        <div style={{ marginBottom: '15px' }}>
+                          <span style={{
+                            display: 'block',
+                            color: '#b8860b',
+                            fontSize: '12px',
+                            fontWeight: '700',
+                            textTransform: 'uppercase',
+                            letterSpacing: '1px',
+                            marginBottom: '4px'
+                          }}>
+                            From
+                          </span>
+                          <span style={{
+                            color: '#1a1a1a',
+                            fontSize: '16px',
+                            fontWeight: '600'
+                          }}>
+                            {name}
+                          </span>
+                        </div>
+
+                        {/* Email */}
+                        <div style={{ marginBottom: '15px' }}>
+                          <span style={{
+                            display: 'block',
+                            color: '#b8860b',
+                            fontSize: '12px',
+                            fontWeight: '700',
+                            textTransform: 'uppercase',
+                            letterSpacing: '1px',
+                            marginBottom: '4px'
+                          }}>
+                            Email
+                          </span>
+                          <a href={`mailto:${emailAddress}`} style={{
+                            color: '#0066cc',
+                            fontSize: '14px',
+                            textDecoration: 'none',
+                            borderBottom: '1px solid #0066cc'
+                          }}>
+                            {emailAddress}
+                          </a>
+                        </div>
+
+                        {/* Subject (if provided) */}
+                        {subject && (
+                          <div>
+                            <span style={{
+                              display: 'block',
+                              color: '#b8860b',
+                              fontSize: '12px',
+                              fontWeight: '700',
+                              textTransform: 'uppercase',
+                              letterSpacing: '1px',
+                              marginBottom: '4px'
+                            }}>
+                              Subject
+                            </span>
+                            <span style={{
+                              color: '#1a1a1a',
+                              fontSize: '14px',
+                              fontWeight: '600'
+                            }}>
+                              {subject}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Message Section */}
+                      <div style={{ marginBottom: '25px' }}>
+                        <span style={{
+                          display: 'block',
+                          color: '#b8860b',
+                          fontSize: '12px',
+                          fontWeight: '700',
+                          textTransform: 'uppercase',
+                          letterSpacing: '1px',
+                          marginBottom: '10px'
+                        }}>
+                          Message
+                        </span>
+                        <div style={{
+                          backgroundColor: '#f8f7f4',
+                          padding: '20px',
+                          borderRadius: '6px',
+                          color: '#1a1a1a',
+                          lineHeight: '1.8',
+                          fontSize: '14px',
+                          whiteSpace: 'pre-wrap',
+                          wordWrap: 'break-word'
+                        }}>
+                          {message}
+                        </div>
+                      </div>
+
+                      {/* Call to Action Button */}
+                      <div style={{ textAlign: 'center', marginBottom: '30px' }}>
+                        <a href={`mailto:${emailAddress}`} style={{
+                          display: 'inline-block',
+                          backgroundColor: '#b8860b',
+                          color: '#ffffff',
+                          padding: '14px 32px',
+                          borderRadius: '6px',
+                          textDecoration: 'none',
+                          fontSize: '14px',
+                          fontWeight: '600',
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.5px',
+                          transition: 'background-color 0.3s ease'
+                        }}>
+                          Reply to {name.split(' ')[0]}
+                        </a>
+                      </div>
+
+                      {/* Footer Note */}
+                      <p style={{
+                        color: '#666666',
+                        fontSize: '12px',
+                        lineHeight: '1.6',
+                        textAlign: 'center',
+                        borderTop: '1px solid #e0e0e0',
+                        paddingTop: '20px',
+                        margin: '0'
+                      }}>
+                        This email was sent from your Monash Coding contact form.<br />
+                        <span style={{ color: '#999999' }}>Please reply directly to this email or contact {emailAddress}</span>
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+
+          {/* Bottom Brand Section */}
+          <tr>
+            <td align="center" style={{ padding: '30px 20px' }}>
+              <p style={{
+                color: '#999999',
+                fontSize: '12px',
+                margin: '0',
+                textAlign: 'center'
+              }}>
+                <strong style={{ color: '#b8860b' }}>Monash Coding</strong><br />
+                Monash University, Clayton VIC<br />
+                <a href="https://monashcoding.com" style={{ color: '#b8860b', textDecoration: 'none' }}>
+                  monashcoding.com
+                </a>
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   );
 }
\ No newline at end of file

From 1f7cdb39121b32517405e9d8f35dce7848d3ba4e Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:31:20 +1100
Subject: [PATCH 11/20] fix(MAC-239): removed phone fields from form

---
 app/api/send/route.ts            |  6 +++---
 components/ContactPageClient.tsx | 31 +------------------------------
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index 0d714c0..b1fe7d9 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -6,15 +6,15 @@ const resend = new Resend(process.env.RESEND_API_KEY);
 export async function POST(req: Request) {
   try {
     // Get the form data from the request
-    const { name, emailAddress, phone, subject, message } = await req.json();
+    const { name, emailAddress, subject, message } = await req.json();
 
     const { data, error } = await resend.emails.send({
-      from: 'onboarding@resend.dev', // Use Resend's testing email for development
+      from: 'noreply@monashcoding.com', 
       // to: 'coding@monashclubs.org',
       to: 'projects@monashcoding.com',
       replyTo: emailAddress, // User's email will be set as reply-to
       subject: subject || 'New Message from Monash Coding Site', 
-      react: EmailTemplate({ name, emailAddress, phone, message }),
+      react: EmailTemplate({ name, emailAddress, subject, message }),
     });
 
     if (error) {
diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 39b1138..5ded4e9 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -204,23 +204,7 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
                 placeholder="your@email.com"
               />
             </div>
-
-            {/* Phone Input */}
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-black/70 mb-2">
-                Phone
-              </label>
-              <input
-                type="tel"
-                id="phone"
-                name="phone"
-                value={formData.phone}
-                onChange={handleInputChange}
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Your phone number"
-              />
-            </div>
-
+            
             {/* Subject Input */}
             <div>
               <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
@@ -267,19 +251,6 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           </motion.button>
         </motion.form>
 
-        {/* Test button to send mock email data to the /api/send endpoint */}
-        {/* This allows testing the email functionality with sample contact form data */}
-        <motion.button
-          onClick={handleSendMockEmail}
-          className="mb-12 py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.15 }}
-          whileHover={{ scale: 1.05 }}
-        >
-          Send Test Email
-        </motion.button>
-
         {/* Have the contact methods side by side */}
         <div className="flex flex-row gap-6 mb-12">
           

From 5b9a4bb1f71c017d2ba4186dd09f1027e078a069 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Thu, 22 Jan 2026 17:52:14 +1100
Subject: [PATCH 12/20] fix(MAC-239): custom error handling because default
 look ugly

---
 components/ContactPageClient.tsx | 332 +++++++++++++++++++------------
 1 file changed, 202 insertions(+), 130 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 5ded4e9..a660330 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { ContactPageData, ContactSocialLink } from "@/lib/sanity/types";
 import { EmailTemplate } from "./EmailTemplate";
 
 
+
 // Platform icon components
 const SocialIcon = ({ platform }: { platform: ContactSocialLink["platform"] }) => {
   switch (platform) {
@@ -72,11 +73,14 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const [formData, setFormData] = useState({
     name: '',
     email: '',
-    phone: '',
     subject: '',
     message: '',
   });
 
+  // Error state
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+
   // Use Sanity data or fallbacks
   const pageTitle = data?.pageTitle || "Get in Touch";
   const pageSubtitle = data?.pageSubtitle || "Have a question or want to collaborate? We'd love to hear from you.";
@@ -87,59 +91,74 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
   const locationMapLink = data?.locationMapLink || "https://maps.google.com/?q=Monash+University+Clayton";
   const socialLinks = data?.socialLinks || defaultSocialLinks;
 
-  // Handle form input changes
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  // Handle form input changes. Clears errors on change.
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
+
+    setFormData((prev) => ({
       ...prev,
       [name]: value,
     }));
+
+    setErrors((prev) => ({
+      ...prev,
+      [name]: "",
+    }));
   };
 
-  // Handler function to send email with form data to the /api/send endpoint
-  const handleSendMockEmail = async (e?: React.FormEvent) => {
-    if (e) {
-      e.preventDefault();
-    }
 
-    try {
-      // Send POST request to /api/send with form data
-      const response = await fetch('/api/send', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          name: formData.name,
-          emailAddress: formData.email,
-          phone: formData.phone,
-          subject: formData.subject,
-          message: formData.message,
-        }),
-      });
-      
-      // Show success/error alert based on response status
-      if (response.ok) {
-        alert('Email sent successfully!');
-        // Reset form
-        setFormData({
-          name: '',
-          email: '',
-          phone: '',
-          subject: '',
-          message: '',
-        });
-      } else {
-        console.log('Failed response:', response);
-        alert('Failed to send email');
-      }
-    } catch (error) {
-      // Handle network or request errors
-      console.error('Error sending email:', error);
-      alert('Error sending email');
+  // Validate form fields
+const validate = () => {
+  const newErrors: Record<string, string> = {};
+
+  if (!formData.name.trim()) newErrors.name = "Name is required";
+  if (!formData.email.trim()) newErrors.email = "Email is required";
+  if (!formData.subject.trim()) newErrors.subject = "Subject is required";
+  if (!formData.message.trim()) newErrors.message = "Message is required";
+
+  setErrors(newErrors);
+  return Object.keys(newErrors).length === 0;
+};
+
+const handleSendEmail = async (
+  e: React.FormEvent<HTMLFormElement>
+) => {
+  e.preventDefault();
+  if (!validate()) return;
+
+  try {
+    const response = await fetch("/api/send", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        name: formData.name,
+        emailAddress: formData.email,
+        subject: formData.subject,
+        message: formData.message,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to send email");
     }
-  };
 
+    alert("Email sent successfully!");
+
+    setFormData({
+      name: "",
+      email: "",
+      subject: "",
+      message: "",
+    });
+  } catch (error) {
+    console.error("Error sending email:", error);
+    alert("Error sending email");
+  }
+};
 
 
   return (
@@ -162,94 +181,147 @@ export default function ContactPageClient({ data }: ContactPageClientProps) {
           {pageSubtitle}
         </motion.p>
 
-        {/* Contact Form */}
         <motion.form
-          onSubmit={handleSendMockEmail}
-          className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.15 }}
-        >
-          <div className="grid grid-cols-1 gap-4 mb-6">
-            {/* Name Input */}
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-black/70 mb-2">
-                Name *
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Your name"
-              />
-            </div>
+      noValidate
+      onSubmit={handleSendEmail}
+      className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay: 0.15 }}
+    >
+      <div className="grid grid-cols-1 gap-4 mb-6">
 
-            {/* Email Input */}
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-black/70 mb-2">
-                Email *
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="your@email.com"
-              />
-            </div>
-            
-            {/* Subject Input */}
-            <div>
-              <label htmlFor="subject" className="block text-sm font-medium text-black/70 mb-2">
-                Subject *
-              </label>
-              <input
-                type="text"
-                id="subject"
-                name="subject"
-                value={formData.subject}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all"
-                placeholder="Subject of your message"
-              />
-            </div>
+        {/* NAME */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Name
+          </label>
+          <input
+            name="name"
+            value={formData.name}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.name
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Your name"
+          />
+          <AnimatePresence>
+            {errors.name && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.name}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
 
-            {/* Message Textarea */}
-            <div>
-              <label htmlFor="message" className="block text-sm font-medium text-black/70 mb-2">
-                Message *
-              </label>
-              <textarea
-                id="message"
-                name="message"
-                value={formData.message}
-                onChange={handleInputChange}
-                required
-                rows={5}
-                className="w-full px-4 py-2 border border-black/10 rounded-lg bg-white/80 text-foreground focus:outline-none focus:border-gold-700 focus:ring-2 focus:ring-gold-700/20 transition-all resize-none"
-                placeholder="Your message here..."
-              />
-            </div>
-          </div>
+        {/* EMAIL */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Email
+          </label>
+          <input
+            name="email"
+            value={formData.email}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.email
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="your@email.com"
+          />
+          <AnimatePresence>
+            {errors.email && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.email}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
 
-          {/* Submit Button */}
-          <motion.button
-            type="submit"
-            className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium transition-all duration-300 hover:bg-gold-800 hover:shadow-lg active:scale-95"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            Send Message
-          </motion.button>
-        </motion.form>
+        {/* SUBJECT */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Subject
+          </label>
+          <input
+            name="subject"
+            value={formData.subject}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+              ${errors.subject
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Subject of your message"
+          />
+          <AnimatePresence>
+            {errors.subject && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.subject}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* MESSAGE */}
+        <div>
+          <label className="block text-sm font-medium text-black/70 mb-2">
+            Message
+          </label>
+          <textarea
+            name="message"
+            rows={5}
+            value={formData.message}
+            onChange={handleInputChange}
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 resize-none transition-all
+              ${errors.message
+                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+            `}
+            placeholder="Your message here..."
+          />
+          <AnimatePresence>
+            {errors.message && (
+              <motion.p
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                className="mt-1 text-sm text-red-600"
+              >
+                {errors.message}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      <motion.button
+        type="submit"
+        className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium hover:bg-gold-800 active:scale-95"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        Send Message
+      </motion.button>
+    </motion.form>
 
         {/* Have the contact methods side by side */}
         <div className="flex flex-row gap-6 mb-12">

From edf595755bdde7391cf9100c528d2d171a7e5a4b Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Sun, 25 Jan 2026 15:50:39 +1100
Subject: [PATCH 13/20] fix(MAC-239): fix colouring to match new colours

---
 components/ContactPageClient.tsx | 98 ++++++++++++++++----------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 1517147..9bb103d 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -162,10 +162,10 @@ const handleSendEmail = async (
   return (
     <RibbonAwareSection
       as="main"
-      backgroundClassName="bg-linear-to-b from-background to-secondary"
+      backgroundClassName=""
       contentClassName="min-h-screen pt-32 flex flex-col items-center justify-center"
     >
-      <div className="max-w-[600px] w-full py-16 px-8 text-center">
+      <div className="max-w-150 w-full py-16 px-8 text-center">
         <motion.h1
           className="text-[clamp(2.5rem,5vw,4rem)] font-extrabold text-foreground mb-4"
           initial={{ opacity: 0, y: 40 }}
@@ -175,7 +175,7 @@ const handleSendEmail = async (
           {pageTitle}
         </motion.h1>
         <motion.p
-          className="text-lg text-white/60 mb-12 leading-relaxed"
+          className="text-lg text-white/80 mb-12 leading-relaxed"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.1 }}
@@ -184,55 +184,55 @@ const handleSendEmail = async (
         </motion.p>
 
         <motion.form
-      noValidate
-      onSubmit={handleSendEmail}
-      className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.6, delay: 0.15 }}
-    >
-      <div className="grid grid-cols-1 gap-4 mb-6">
-
-        {/* NAME */}
-        <div>
-          <label className="block text-sm font-medium text-black/70 mb-2">
-            Name
-          </label>
-          <input
-            name="name"
-            value={formData.name}
-            onChange={handleInputChange}
-            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
-              ${errors.name
-                ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
-                : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
-            `}
-            placeholder="Your name"
-          />
-          <AnimatePresence>
-            {errors.name && (
-              <motion.p
-                initial={{ opacity: 0, y: -4 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -4 }}
-                className="mt-1 text-sm text-red-600"
-              >
-                {errors.name}
-              </motion.p>
-            )}
-          </AnimatePresence>
-        </div>
+          noValidate
+          onSubmit={handleSendEmail}
+          className="mb-12 p-8 bg-white/50 border border-black/10 rounded-2xl w-full max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 }}
+        >
+          <div className="grid grid-cols-1 gap-4 mb-6">
+
+            {/* NAME */}
+            <div>
+              <label className="block text-sm font-medium text-background mb-2">
+                Name
+              </label>
+              <input
+                name="name"
+                value={formData.name}
+                onChange={handleInputChange}
+                className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all placeholder:text-black/40
+                  ${errors.name
+                    ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
+                    : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
+                `}
+                placeholder="Your name"
+            />
+            <AnimatePresence>
+              {errors.name && (
+                <motion.p
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  className="mt-1 text-sm text-red-600"
+                >
+                  {errors.name}
+                </motion.p>
+              )}
+            </AnimatePresence>
+          </div>
 
         {/* EMAIL */}
         <div>
-          <label className="block text-sm font-medium text-black/70 mb-2">
+          <label className="block text-sm font-medium text-background mb-2">
             Email
           </label>
           <input
             name="email"
             value={formData.email}
             onChange={handleInputChange}
-            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all placeholder:text-black/40
               ${errors.email
                 ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
                 : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
@@ -255,14 +255,14 @@ const handleSendEmail = async (
 
         {/* SUBJECT */}
         <div>
-          <label className="block text-sm font-medium text-black/70 mb-2">
+          <label className="block text-sm font-medium text-background mb-2">
             Subject
           </label>
           <input
             name="subject"
             value={formData.subject}
             onChange={handleInputChange}
-            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 transition-all placeholder:text-black/40
               ${errors.subject
                 ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
                 : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
@@ -285,7 +285,7 @@ const handleSendEmail = async (
 
         {/* MESSAGE */}
         <div>
-          <label className="block text-sm font-medium text-black/70 mb-2">
+          <label className="block text-sm font-medium text-background mb-2">
             Message
           </label>
           <textarea
@@ -293,7 +293,7 @@ const handleSendEmail = async (
             rows={5}
             value={formData.message}
             onChange={handleInputChange}
-            className={`w-full px-4 py-2 rounded-lg bg-white/80 resize-none transition-all
+            className={`w-full px-4 py-2 rounded-lg bg-white/80 resize-none transition-all placeholder:text-black/40
               ${errors.message
                 ? "border border-red-500 focus:ring-2 focus:ring-red-500/30"
                 : "border border-black/10 focus:ring-2 focus:ring-gold-700/20"}
@@ -317,7 +317,7 @@ const handleSendEmail = async (
 
       <motion.button
         type="submit"
-        className="w-full py-3 px-6 bg-gold-700 text-white rounded-lg font-medium hover:bg-gold-800 active:scale-95"
+        className="w-full py-3 px-6 bg-gold-700 text-background rounded-lg font-medium hover:bg-gold-800 active:scale-95"
         whileHover={{ scale: 1.02 }}
         whileTap={{ scale: 0.98 }}
       >
@@ -409,7 +409,7 @@ const handleSendEmail = async (
                 href={link.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-12.5 h-12.5 bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-black/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
+                className="w-12.5 h-12.5 bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-background/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
                 aria-label={link.platform}
               >
                 <SocialIcon platform={link.platform} />

From b9086582cd16f3f4cdf2bcd34b865f6ffc1da3dc Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Sun, 25 Jan 2026 15:52:48 +1100
Subject: [PATCH 14/20] fix(MAC-239): .env.example was wrong

---
 .env.example | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.env.example b/.env.example
index 981dd1f..01953e2 100644
--- a/.env.example
+++ b/.env.example
@@ -6,5 +6,3 @@ NEXT_PUBLIC_SANITY_API_VERSION=2024-01-18
 # Resend Configuration
 RESEND_API_KEY=your_resend_api_key
 
-# Resend Configuration
-RESEND_API_KEY=your_resend_api_key
\ No newline at end of file

From 37a08ec2b68013addb069788737c1e2e63f8f817 Mon Sep 17 00:00:00 2001
From: Steven <153497842+stevenphanny@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:26:44 +1100
Subject: [PATCH 15/20] Update app/api/send/route.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 app/api/send/route.ts | 70 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index b1fe7d9..a3b3452 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -3,18 +3,80 @@ import { Resend } from 'resend';
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
+function isNonEmptyString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function isValidEmail(value: unknown): value is string {
+  if (typeof value !== 'string') return false;
+  const email = value.trim();
+  // Basic email pattern; not exhaustive but sufficient for simple validation
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return email.length > 0 && emailRegex.test(email);
+}
+
 export async function POST(req: Request) {
   try {
     // Get the form data from the request
-    const { name, emailAddress, subject, message } = await req.json();
+    const body = await req.json();
+
+    if (!body || typeof body !== 'object') {
+      return Response.json(
+        { error: 'Invalid request body; expected JSON object.' },
+        { status: 400 },
+      );
+    }
+
+    const {
+      name,
+      emailAddress,
+      subject,
+      message,
+    } = body as {
+      name?: unknown;
+      emailAddress?: unknown;
+      subject?: unknown;
+      message?: unknown;
+    };
+
+    if (!isNonEmptyString(name)) {
+      return Response.json(
+        { error: 'Field "name" is required and must be a non-empty string.' },
+        { status: 400 },
+      );
+    }
+
+    if (!isValidEmail(emailAddress)) {
+      return Response.json(
+        { error: 'Field "emailAddress" is required and must be a valid email address.' },
+        { status: 400 },
+      );
+    }
+
+    if (!isNonEmptyString(message)) {
+      return Response.json(
+        { error: 'Field "message" is required and must be a non-empty string.' },
+        { status: 400 },
+      );
+    }
+
+    const normalizedSubject =
+      typeof subject === 'string' && subject.trim().length > 0
+        ? subject
+        : 'New Message from Monash Coding Site';
 
     const { data, error } = await resend.emails.send({
       from: 'noreply@monashcoding.com', 
       // to: 'coding@monashclubs.org',
       to: 'projects@monashcoding.com',
-      replyTo: emailAddress, // User's email will be set as reply-to
-      subject: subject || 'New Message from Monash Coding Site', 
-      react: EmailTemplate({ name, emailAddress, subject, message }),
+      replyTo: (emailAddress as string).trim(), // User's email will be set as reply-to
+      subject: normalizedSubject, 
+      react: EmailTemplate({
+        name: (name as string).trim(),
+        emailAddress: (emailAddress as string).trim(),
+        subject: normalizedSubject,
+        message: (message as string).trim(),
+      }),
     });
 
     if (error) {

From b01440bc52602c9545e43588f6b2282b3693443a Mon Sep 17 00:00:00 2001
From: Steven <153497842+stevenphanny@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:27:31 +1100
Subject: [PATCH 16/20] Update package.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index 6cff210..3e2720a 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,6 @@
   "homepage": "https://github.com/monashcoding/monashcoding-site#readme",
   "dependencies": {
     "@portabletext/react": "^6.0.2",
-    "@react-email/components": "^1.0.4",
-    "@react-email/render": "^2.0.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@react-three/postprocessing": "^3.0.4",

From 7bf9e03c4adb0e8e1979e2b5683d7ca457ecfac1 Mon Sep 17 00:00:00 2001
From: Steven <153497842+stevenphanny@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:28:50 +1100
Subject: [PATCH 17/20] Update components/ContactPageClient.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/ContactPageClient.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 9bb103d..71b2ecd 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -325,11 +325,6 @@ const handleSendEmail = async (
       </motion.button>
     </motion.form>
 
-        {/* Have the contact methods side by side */}
-        <div className="flex flex-row gap-6 mb-12">
-          
-        </div>
-
         <div className="flex flex-col gap-6">
           <motion.a
             href={`mailto:${email}`}

From ef48664842eb028388c75ab226e019b208c5d70b Mon Sep 17 00:00:00 2001
From: Steven <153497842+stevenphanny@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:30:02 +1100
Subject: [PATCH 18/20] Update .env.example

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .env.example | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.env.example b/.env.example
index 01953e2..ee82653 100644
--- a/.env.example
+++ b/.env.example
@@ -4,5 +4,6 @@ NEXT_PUBLIC_SANITY_DATASET=production
 NEXT_PUBLIC_SANITY_API_VERSION=2024-01-18
 
 # Resend Configuration
+# Required: used to send contact form emails via Resend
 RESEND_API_KEY=your_resend_api_key
 

From e5855906ac62a0c72ded3fa26d09c1ca4690fe18 Mon Sep 17 00:00:00 2001
From: Steven <153497842+stevenphanny@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:30:14 +1100
Subject: [PATCH 19/20] Update components/ContactPageClient.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/ContactPageClient.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index 71b2ecd..e42c54f 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -165,7 +165,7 @@ const handleSendEmail = async (
       backgroundClassName=""
       contentClassName="min-h-screen pt-32 flex flex-col items-center justify-center"
     >
-      <div className="max-w-150 w-full py-16 px-8 text-center">
+      <div className="max-w-[600px] w-full py-16 px-8 text-center">
         <motion.h1
           className="text-[clamp(2.5rem,5vw,4rem)] font-extrabold text-foreground mb-4"
           initial={{ opacity: 0, y: 40 }}

From e679c5fca8e6c65a7b218b1e11638909477710d6 Mon Sep 17 00:00:00 2001
From: steven <spha0034@student.monash.edu>
Date: Sun, 25 Jan 2026 16:49:44 +1100
Subject: [PATCH 20/20] fix(MAC-239): adding resend api key check and fixing
 css on contact page

---
 app/api/send/route.ts            | 10 +++++++++-
 components/ContactPageClient.tsx |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/api/send/route.ts b/app/api/send/route.ts
index a3b3452..7f990ea 100644
--- a/app/api/send/route.ts
+++ b/app/api/send/route.ts
@@ -1,7 +1,15 @@
 import { EmailTemplate } from '../../../components/EmailTemplate';
 import { Resend } from 'resend';
 
-const resend = new Resend(process.env.RESEND_API_KEY);
+// Validate RESEND_API_KEY is configured
+const apiKey = process.env.RESEND_API_KEY;
+if (!apiKey || apiKey.trim().length === 0) {
+  throw new Error(
+    'RESEND_API_KEY is not configured. Please set the RESEND_API_KEY environment variable.'
+  );
+}
+
+const resend = new Resend(apiKey);
 
 function isNonEmptyString(value: unknown): value is string {
   return typeof value === 'string' && value.trim().length > 0;
diff --git a/components/ContactPageClient.tsx b/components/ContactPageClient.tsx
index e42c54f..e4ebc04 100644
--- a/components/ContactPageClient.tsx
+++ b/components/ContactPageClient.tsx
@@ -404,7 +404,7 @@ const handleSendEmail = async (
                 href={link.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-12.5 h-12.5 bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-background/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
+                className="w-[50px] h-[50px] bg-white/50 border border-black/10 rounded-2xl flex items-center justify-center text-background/50 transition-all duration-300 hover:bg-gold-700/10 hover:border-gold-700/30 hover:text-gold-700"
                 aria-label={link.platform}
               >
                 <SocialIcon platform={link.platform} />