From b270cecee2badca5e4d7963ee2c3316e08d91a50 Mon Sep 17 00:00:00 2001
From: minahil saqib <mao@wifi-172-23-60-189.uoa-wifi.auckland.ac.nz>
Date: Thu, 23 Apr 2026 14:17:46 +1200
Subject: [PATCH 1/3] feat: create contact page

---
 client/src/main.tsx          | 2 ++
 client/src/pages/Contact.tsx | 3 +++
 2 files changed, 5 insertions(+)
 create mode 100644 client/src/pages/Contact.tsx

diff --git a/client/src/main.tsx b/client/src/main.tsx
index 718c1e1..8b3f3cb 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -7,6 +7,7 @@ import ProjectTeam from "./pages/Project-Team";
 import Alanna from "./pages/project-team/Alanna";
 import "./index.css";
 import Pruna from "./pages/project-team/Pruna";
+import Contact from "./pages/Contact";
 
 {/* here's where we set up all our routing */}
 const router = createBrowserRouter([
@@ -18,6 +19,7 @@ const router = createBrowserRouter([
       { path: "project-team", element: <ProjectTeam /> },
       { path: "alanna", element: <Alanna /> },
       { path: "pruna", element: <Pruna /> },
+      { path: "contact", element: <Contact /> },
     ],
   },
 ]);
diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx
new file mode 100644
index 0000000..2a8484f
--- /dev/null
+++ b/client/src/pages/Contact.tsx
@@ -0,0 +1,3 @@
+export default function Contact(){
+   
+}
\ No newline at end of file

From c9b86509768d219cddf4e1f31c82b7d17869c04e Mon Sep 17 00:00:00 2001
From: minahil saqib <mao@wifi-172-23-60-189.uoa-wifi.auckland.ac.nz>
Date: Thu, 23 Apr 2026 14:54:32 +1200
Subject: [PATCH 2/3] Added links to insta and facebook page as well as an
 email link, currently its my personal email

---
 client/src/pages/Contact.tsx              | 33 ++++++++++++++++++--
 client/src/pages/project-team/Minahil.tsx | 38 +++++++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 client/src/pages/project-team/Minahil.tsx

diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx
index 2a8484f..3b8778a 100644
--- a/client/src/pages/Contact.tsx
+++ b/client/src/pages/Contact.tsx
@@ -1,3 +1,32 @@
-export default function Contact(){
-   
+import { FaInstagram, FaFacebook, FaEnvelope } from "react-icons/fa";
+
+export default function Contact() {
+  return (
+    <>
+      <div className="bg-[#000000] w-full p-20 items-center justify-center rounded-lg">
+        <h1 className="text-4xl font-bold text-white">Contact us!</h1>
+      </div>
+
+      <div>
+        <h1 className="text-3xl mt-10 mb-5 font-bold italic text-left">
+          Find us online! (╭ರ_•́)
+        </h1>
+
+        <div className="flex gap-4 mt-4">
+          <a href="https://www.instagram.com/umsanz/" target="_blank" rel="noopener noreferrer">
+            <FaInstagram className="text-3xl text-pink-300 hover:text-white" />
+          </a>
+
+          <a href="https://www.facebook.com/umsanz/" target="_blank" rel="noopener noreferrer">
+            <FaFacebook className="text-3xl text-pink-300 hover:text-white" />
+          </a>
+    
+          <a href="mailto:minahil12323@gmail.com?subject=Contact%20from%20website">
+            <FaEnvelope className="text-3xl text-pink-300 hover:text-white" />
+        </a>
+          
+        </div>
+      </div>
+    </>
+  );
 }
\ No newline at end of file
diff --git a/client/src/pages/project-team/Minahil.tsx b/client/src/pages/project-team/Minahil.tsx
new file mode 100644
index 0000000..5c82915
--- /dev/null
+++ b/client/src/pages/project-team/Minahil.tsx
@@ -0,0 +1,38 @@
+import MinahilPhoto from "../../assets/about-us/minahil.jpg"; 
+import MemberStatsTable from "../../components/StatsTable"; 
+
+export default function Minahil() {
+    return (
+        <>  
+        <div className="bg-[#8C7AA9] w-full p-20 item-center justify-center rounded-lg">
+            <h1 className="text-4xl font-bold text-white">HI! My name is Minahil ⸜(｡˃ ᵕ ˂ )⸝♡ </h1>
+
+            <p>hi!</p>
+            
+            <img 
+            src={MinahilPhoto} 
+            className="col-span-1 object-cover md:mb-1 mb-2 h-full rounded-2xl"
+            /> 
+        </div>
+        <div className="col-span-2 max-w-md bg-pink-900 p-6 item-center justify-center rounded-lg">
+        
+                        <MemberStatsTable 
+                        stats={{
+                            fullName: "Minahil Saqib",
+                            age: 20,
+                            ethnicity: "Pakistani",
+                            year: "Second year",
+                            degree: "compsci and biotech",
+                            typingSpeed: "150 wpm",
+                            favouritePaper: "biosci 106",
+                            favouriteFood: "Pasta",
+        
+                        }}
+                        />
+        
+                    </div>
+        </>
+        
+        
+
+    )}
\ No newline at end of file

From 043a86989cd73bb7de59d0bd73c14f151a15f22c Mon Sep 17 00:00:00 2001
From: minahil saqib <mao@wifi-172-23-50-225.uoa-wifi.auckland.ac.nz>
Date: Thu, 7 May 2026 15:20:33 +1200
Subject: [PATCH 3/3] feat: Added a form to the cont act page to directly send
 a message to connected email.

---
 client/src/pages/Contact.tsx | 73 ++++++++++++++++++++++++++++++++----
 1 file changed, 66 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx
index 3b8778a..a592dc5 100644
--- a/client/src/pages/Contact.tsx
+++ b/client/src/pages/Contact.tsx
@@ -1,28 +1,87 @@
+import { useState } from "react";
 import { FaInstagram, FaFacebook, FaEnvelope } from "react-icons/fa";
 
 export default function Contact() {
+  const [formData, setFormData] = useState({ name: "", email: "", message: "" });
+  const [ status, setStatus ] = useState("");
+
+  const handleSubmit = async () => {
+    setStatus("Sending");
+      const res = await fetch("https://formspree.io/f/xvzlqwkg", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(formData)
+    });
+    if (res.ok) {
+      setStatus("Message sent!");
+      setFormData({ name: "", email: "", message: "" });
+    } else {
+      setStatus("Error sending message.");
+    }
+  };
   return (
     <>
       <div className="bg-[#000000] w-full p-20 items-center justify-center rounded-lg">
-        <h1 className="text-4xl font-bold text-white">Contact us!</h1>
+        <h1 className="text-4xl font-bold text-white">Contact us</h1>
+        <p className="text-white text-center mt-10">
+          Have questions or want to get in touch? We&apos;d love to hear from you!
+        </p>
+        <p className="text-white text-center mt-5">
+          Fill out the form below or reach out to us on social media. We look forward to connecting with you! (｡˃ ᵕ ˂ )⸝♡
+        </p>
+      </div>
+      
+      <div className="flex flex-col gap-5 max-w-2xl mx-auto mt-1 px-8">
+        <input
+          type="text"
+          placeholder="Enter your Name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="bg-transparent border-2 border-blue rounded-2xl px-6 py-4 text-white placeholder-gray-400 outline-none focus:border-blue-300 transition"
+        />
+        <input
+          type="email"
+          placeholder="Enter your Email"
+          value={formData.email}
+          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          className="bg-transparent border-2 border-blue rounded-2xl px-6 py-4 text-white placeholder-gray-400 outline-none focus:border-blue-300 transition"
+        />
+        <textarea
+          placeholder="Enter your Message"
+          rows={5}
+          value={formData.message}
+          onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+          className="bg-transparent border-2 border-blue rounded-2xl px-6 py-5 text-white placeholder-gray-400 outline-none focus:border-blue-300 transition"
+        />  
+        <button
+          onClick={handleSubmit}
+          className="bg-blue-300 text-black font-bold py-3 px-6 rounded-full hover:bg-pink-400 transition"
+        >
+          Send Message
+        </button>
+        {status === "sending" && <p className="text-gray-400">Sending...</p>}
+        {status === "success" && <p className="text-green-400">Message sent!</p>}
+        {status === "error" && <p className="text-red-400">Something went wrong, please try again.</p>}
       </div>
 
       <div>
-        <h1 className="text-3xl mt-10 mb-5 font-bold italic text-left">
-          Find us online! (╭ರ_•́)
+        <h1 className="text-3xl mt-10 mb-5 font-bold italic text-center">
+          Find us online! (╭ರ_•́)~
         </h1>
 
-        <div className="flex gap-4 mt-4">
+        <div className="flex justify-center gap-4 mt-4">
           <a href="https://www.instagram.com/umsanz/" target="_blank" rel="noopener noreferrer">
-            <FaInstagram className="text-3xl text-pink-300 hover:text-white" />
+            <FaInstagram className="text-3xl text-blue-300 hover:text-white" />
           </a>
 
           <a href="https://www.facebook.com/umsanz/" target="_blank" rel="noopener noreferrer">
-            <FaFacebook className="text-3xl text-pink-300 hover:text-white" />
+            <FaFacebook className="text-3xl text-blue-300 hover:text-white" />
           </a>
     
           <a href="mailto:minahil12323@gmail.com?subject=Contact%20from%20website">
-            <FaEnvelope className="text-3xl text-pink-300 hover:text-white" />
+            <FaEnvelope className="text-3xl text-blue-300 hover:text-white" />
         </a>
           
         </div>