From 4bed1875e1a7549b4dc863fd7c43859ca4897513 Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 14:42:47 -0800
Subject: [PATCH 1/8] changes

---
 app/(pages)/_Contactform/Contact.jsx         | 0
 app/(pages)/_Contactform/Contact.module.scss | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/(pages)/_Contactform/Contact.jsx
 create mode 100644 app/(pages)/_Contactform/Contact.module.scss

diff --git a/app/(pages)/_Contactform/Contact.jsx b/app/(pages)/_Contactform/Contact.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/(pages)/_Contactform/Contact.module.scss b/app/(pages)/_Contactform/Contact.module.scss
new file mode 100644
index 0000000..e69de29

From 46eb226c3dfdd6568a34b4fce8d10dbb0d89724a Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 14:43:48 -0800
Subject: [PATCH 2/8] Create page.jsx

---
 app/(pages)/test/page.jsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/(pages)/test/page.jsx

diff --git a/app/(pages)/test/page.jsx b/app/(pages)/test/page.jsx
new file mode 100644
index 0000000..e69de29

From c85f2f5f43521dd4a2551e55f94cb0205d11bcd4 Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 15:21:09 -0800
Subject: [PATCH 3/8] jsx updates

---
 app/(pages)/(home)/page.jsx          |  2 +-
 app/(pages)/_Contactform/Contact.jsx | 92 ++++++++++++++++++++++++++++
 app/(pages)/test/page.jsx            |  8 +++
 3 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/app/(pages)/(home)/page.jsx b/app/(pages)/(home)/page.jsx
index 336904f..4390562 100644
--- a/app/(pages)/(home)/page.jsx
+++ b/app/(pages)/(home)/page.jsx
@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <main>
-      <div>Home</div>
+      <div></div>
     </main>
   );
 }
diff --git a/app/(pages)/_Contactform/Contact.jsx b/app/(pages)/_Contactform/Contact.jsx
index e69de29..f5be6c0 100644
--- a/app/(pages)/_Contactform/Contact.jsx
+++ b/app/(pages)/_Contactform/Contact.jsx
@@ -0,0 +1,92 @@
+"use client";
+
+import {useState} from "react";
+import styles from "./Contact.module.scss";
+
+export default function Contact() {
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName:"",
+        email: "",
+        message: "",
+    });
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+
+        setFormData((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+      };
+
+      const handleSubmit = (e) => {
+        e.preventDefault();
+
+        console.log("Form Data:", formData); //later replac this w/ API call to send form data to backend
+
+        // Reset form 
+        setFormData({
+            firstName: "",
+            lastName: "",
+            email: "",
+            message: "", 
+        });
+      };
+
+      return(
+        <section className={styles.container}>
+            <h2 className={styles.title}>Let's get in touch!</h2>
+            
+            <form onSubmit={handleSubmit} classBane={styles.form}>
+                <div className={styles.row}>
+                    <input 
+                        type="text"
+                        name="firstName"
+                        placeholder="Enter Your First Name Here"
+                        value={formData.firstName}
+                        onChange={handleChange}
+                        required
+                    />
+
+                    <input 
+                        type="text"
+                        name="lastName"
+                        placeholder="Enter Your Last Name Here"
+                        value={formData.lastName}
+                        onChange={handleChange}
+                        required
+                    />
+
+                    <input 
+                        type="email"
+                        name="email"
+                        placeholder="Enter Your E-Mail Here"
+                        value={formData.email}
+                        onChange={handleChange}
+                        required
+                    />
+
+                    <input
+                        type="text"
+                        name="subject"
+                        placeholder="Enter Your Subject Here"
+                        value={formData.subject}
+                        onChange={handleChange}
+                        required
+                    />
+
+                    <input
+                        type="text"
+                        name="message"
+                        placeholder="Enter Your Message Here"
+                        value={formData.subject}
+                        onChange={handleChange}
+                        required 
+                    />
+
+                    <button type ="submit" className={styles.submit}>Send Message</button> 
+            </form>
+        </section>
+     );
+    }
\ No newline at end of file
diff --git a/app/(pages)/test/page.jsx b/app/(pages)/test/page.jsx
index e69de29..ac24195 100644
--- a/app/(pages)/test/page.jsx
+++ b/app/(pages)/test/page.jsx
@@ -0,0 +1,8 @@
+import Contact from "./_Contactform";
+export default function ContactPage(){
+    return(
+        <main>
+            <Contact />
+        </main>
+    );
+}
\ No newline at end of file

From 9946123772b1e49d0b0d59bbaf61ab2dcdb8fb3c Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 15:47:35 -0800
Subject: [PATCH 4/8] more updates

---
 app/(pages)/_Contactform/Contact.jsx         | 11 ++++++----
 app/(pages)/_Contactform/Contact.module.scss | 23 ++++++++++++++++++++
 app/(pages)/layout.jsx                       |  1 +
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/(pages)/_Contactform/Contact.jsx b/app/(pages)/_Contactform/Contact.jsx
index f5be6c0..db7f390 100644
--- a/app/(pages)/_Contactform/Contact.jsx
+++ b/app/(pages)/_Contactform/Contact.jsx
@@ -8,6 +8,7 @@ export default function Contact() {
         firstName: "",
         lastName:"",
         email: "",
+        subject:"",
         message: "",
     });
 
@@ -23,13 +24,14 @@ export default function Contact() {
       const handleSubmit = (e) => {
         e.preventDefault();
 
-        console.log("Form Data:", formData); //later replac this w/ API call to send form data to backend
+        console.log("Form Data:", formData); //later replace this w/ API call to send form data to backend
 
         // Reset form 
         setFormData({
             firstName: "",
             lastName: "",
             email: "",
+            subject: "",
             message: "", 
         });
       };
@@ -38,7 +40,7 @@ export default function Contact() {
         <section className={styles.container}>
             <h2 className={styles.title}>Let's get in touch!</h2>
             
-            <form onSubmit={handleSubmit} classBane={styles.form}>
+            <form onSubmit={handleSubmit} className={styles.form}>
                 <div className={styles.row}>
                     <input 
                         type="text"
@@ -80,13 +82,14 @@ export default function Contact() {
                         type="text"
                         name="message"
                         placeholder="Enter Your Message Here"
-                        value={formData.subject}
+                        value={formData.message}
                         onChange={handleChange}
                         required 
                     />
 
                     <button type ="submit" className={styles.submit}>Send Message</button> 
-            </form>
+                    </div>
+                 </form>
         </section>
      );
     }
\ No newline at end of file
diff --git a/app/(pages)/_Contactform/Contact.module.scss b/app/(pages)/_Contactform/Contact.module.scss
index e69de29..e7a3e88 100644
--- a/app/(pages)/_Contactform/Contact.module.scss
+++ b/app/(pages)/_Contactform/Contact.module.scss
@@ -0,0 +1,23 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 0;
+}
+
+.title{
+    font-size: 2.5rem;
+}
+
+.form{
+
+}
+
+.row{
+
+}
+
+.submit{
+
+}
diff --git a/app/(pages)/layout.jsx b/app/(pages)/layout.jsx
index 51d0cf8..3e8b4fb 100644
--- a/app/(pages)/layout.jsx
+++ b/app/(pages)/layout.jsx
@@ -1,3 +1,4 @@
+import Contactform from "./_Contactform/Contact.jsx";
 import "./_globals/globals.scss";
 import { Oxanium } from "next/font/google";
 

From 6ca4ce13e5a70e1eec0c987f3e222a35ba4fdaca Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 15:55:52 -0800
Subject: [PATCH 5/8] Update page.jsx

---
 app/(pages)/test/page.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(pages)/test/page.jsx b/app/(pages)/test/page.jsx
index ac24195..455b251 100644
--- a/app/(pages)/test/page.jsx
+++ b/app/(pages)/test/page.jsx
@@ -1,8 +1,8 @@
-import Contact from "./_Contactform";
-export default function ContactPage(){
+import Contactform from "./_Contactform/Contact.jsx";
+export default function Page(){
     return(
         <main>
-            <Contact />
+            <Contactform />
         </main>
     );
 }
\ No newline at end of file

From 16667281e9b43c39a8d9d5f55e7932155a8b85d2 Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Thu, 12 Feb 2026 17:35:59 -0800
Subject: [PATCH 6/8] more updates

---
 app/(pages)/_Contactform/Contact.module.scss | 33 +++++++++++++++++---
 app/(pages)/layout.jsx                       |  1 -
 app/(pages)/test/page.jsx                    |  4 +--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/(pages)/_Contactform/Contact.module.scss b/app/(pages)/_Contactform/Contact.module.scss
index e7a3e88..75038c2 100644
--- a/app/(pages)/_Contactform/Contact.module.scss
+++ b/app/(pages)/_Contactform/Contact.module.scss
@@ -1,23 +1,46 @@
 .container{
     display: flex;
+    width: 77.625rem;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 4rem 0;
+    max-width:1000px;
+    margin: 6rem auto;
+    padding: 3rem;
+    background-color: var(--white);
+    box-shadow: 0 5px 50px rgba(0,0,0,0.08);
+    border-radius: 1.5rem;
 }
 
 .title{
-    font-size: 2.5rem;
+    font-family: Oxanium; 
+    color: var(--Navy);
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .form{
-
+    display: flex;
+    flex-direction: column; 
+    align-items: flex-end;
+    gap: 3.5rem;
+    align-self: stretch;
 }
 
 .row{
+    display:flex;
+    align-items: center;
+    gap: 1.5rem; 
 
+    input{
+        flex: 1; 
+    }
 }
 
+input, 
+textarea{ 
+    
+}
 .submit{
 
 }
diff --git a/app/(pages)/layout.jsx b/app/(pages)/layout.jsx
index 3e8b4fb..51d0cf8 100644
--- a/app/(pages)/layout.jsx
+++ b/app/(pages)/layout.jsx
@@ -1,4 +1,3 @@
-import Contactform from "./_Contactform/Contact.jsx";
 import "./_globals/globals.scss";
 import { Oxanium } from "next/font/google";
 
diff --git a/app/(pages)/test/page.jsx b/app/(pages)/test/page.jsx
index 455b251..2b09ddb 100644
--- a/app/(pages)/test/page.jsx
+++ b/app/(pages)/test/page.jsx
@@ -1,8 +1,8 @@
-import Contactform from "./_Contactform/Contact.jsx";
+import Contact from "../_Contactform/Contact.jsx";
 export default function Page(){
     return(
         <main>
-            <Contactform />
+            <Contact />
         </main>
     );
 }
\ No newline at end of file

From 6df2c8e06c7680e7b7c973fce7e7bd795da816fa Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Wed, 18 Feb 2026 23:42:42 -0800
Subject: [PATCH 7/8] draft

---
 app/(pages)/_Contactform/Contact.jsx         | 30 ++++++++--
 app/(pages)/_Contactform/Contact.module.scss | 61 ++++++++++++++------
 2 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/app/(pages)/_Contactform/Contact.jsx b/app/(pages)/_Contactform/Contact.jsx
index db7f390..538fbb8 100644
--- a/app/(pages)/_Contactform/Contact.jsx
+++ b/app/(pages)/_Contactform/Contact.jsx
@@ -41,7 +41,10 @@ export default function Contact() {
             <h2 className={styles.title}>Let's get in touch!</h2>
             
             <form onSubmit={handleSubmit} className={styles.form}>
+                {/* Row 1 */}
                 <div className={styles.row}>
+                   <div className={styles.field}>
+                    <label>First Name</label>
                     <input 
                         type="text"
                         name="firstName"
@@ -50,7 +53,10 @@ export default function Contact() {
                         onChange={handleChange}
                         required
                     />
+                  </div>
 
+                  <div className={styles.field}>
+                    <label>Last Name</label>
                     <input 
                         type="text"
                         name="lastName"
@@ -59,7 +65,13 @@ export default function Contact() {
                         onChange={handleChange}
                         required
                     />
+                   </div> 
+                </div>
 
+                    {/* Row 2 */}
+                <div className={styles.row}>
+                   <div className={styles.field}>
+                    <label>E-mail Address</label>
                     <input 
                         type="email"
                         name="email"
@@ -68,7 +80,10 @@ export default function Contact() {
                         onChange={handleChange}
                         required
                     />
+                   </div>
 
+                   <div className={styles.field}>
+                    <label>Subject</label>
                     <input
                         type="text"
                         name="subject"
@@ -76,19 +91,24 @@ export default function Contact() {
                         value={formData.subject}
                         onChange={handleChange}
                         required
-                    />
+                      />
+                    </div>
+                </div>
 
-                    <input
-                        type="text"
+                 {/* Message */}
+                  <div className={styles.field}>
+                    <label>Message</label>
+                    <textarea
                         name="message"
                         placeholder="Enter Your Message Here"
                         value={formData.message}
                         onChange={handleChange}
                         required 
                     />
+                </div>
 
-                    <button type ="submit" className={styles.submit}>Send Message</button> 
-                    </div>
+                    <button type ="submit" className={styles.submit}>
+                        Send Message</button> 
                  </form>
         </section>
      );
diff --git a/app/(pages)/_Contactform/Contact.module.scss b/app/(pages)/_Contactform/Contact.module.scss
index 75038c2..4c658e4 100644
--- a/app/(pages)/_Contactform/Contact.module.scss
+++ b/app/(pages)/_Contactform/Contact.module.scss
@@ -1,46 +1,71 @@
 .container{
-    display: flex;
-    width: 77.625rem;
-    flex-direction: column;
+    width: 100%;
     max-width:1000px;
     margin: 6rem auto;
     padding: 3rem;
-    background-color: var(--white);
-    box-shadow: 0 5px 50px rgba(0,0,0,0.08);
-    border-radius: 1.5rem;
 }
 
 .title{
     font-family: Oxanium; 
     color: var(--Navy);
-    font-size: 3rem;
+    font-size: 2rem;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    margin-bottom: 2rem;
 }
 
 .form{
     display: flex;
     flex-direction: column; 
-    align-items: flex-end;
-    gap: 3.5rem;
-    align-self: stretch;
+    gap: 1rem;
 }
 
 .row{
-    display:flex;
-    align-items: center;
+    display:grid;
+    grid-template-columns: 1fr 1fr;
     gap: 1.5rem; 
+  }
 
-    input{
-        flex: 1; 
-    }
+.field{
+    display: flex;
+    flex-direction: column; 
+    gap: 0.4rem;
 }
 
-input, 
-textarea{ 
-    
+.field label {
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 0.7rem;
+    font-weight: 300;
+    color: var(--dark-gray);
 }
+.form input,
+.form textarea{
+    width: 100%;
+    padding: 1rem; 
+    border-radius: 0.6rem; 
+    border: 1px solid #dcdcdc;
+    font-family: "Space Grotesk", sans-serif;
+    color: var(--light-gray);
+    font-size: 0.8rem;
+    font-weight:200;
+  }
+
+  .form textarea{
+    min-height: 140px;
+    resize: vertical;
+  }
+
+
 .submit{
+    align-self: flex-end;
+    padding: 0.7rem 2.2rem;
+    border-radius: 0.6rem;
+    border: 0.5px solid var(--light-gray);
+    background: rgba(87,87, 87, 0.80); 
+    color: white; 
+    margin-top: 1.2rem;
+    cursor: pointer;
+    
 
 }

From b492a760e984e1e76c612425137849fb9e57c44c Mon Sep 17 00:00:00 2001
From: Kayla Yu Chen <kayla.chen03@gmail.com>
Date: Wed, 18 Feb 2026 23:48:55 -0800
Subject: [PATCH 8/8] final draft-02/18/26

---
 app/(pages)/_Contactform/Contact.module.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/(pages)/_Contactform/Contact.module.scss b/app/(pages)/_Contactform/Contact.module.scss
index 4c658e4..a456483 100644
--- a/app/(pages)/_Contactform/Contact.module.scss
+++ b/app/(pages)/_Contactform/Contact.module.scss
@@ -8,11 +8,11 @@
 .title{
     font-family: Oxanium; 
     color: var(--Navy);
-    font-size: 2rem;
+    font-size: 2.1rem;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
 }
 
 .form{
@@ -24,13 +24,14 @@
 .row{
     display:grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1.5rem; 
+    gap: 1.6rem; 
   }
 
 .field{
     display: flex;
     flex-direction: column; 
     gap: 0.4rem;
+    
 }
 
 .field label {
@@ -44,7 +45,7 @@
     width: 100%;
     padding: 1rem; 
     border-radius: 0.6rem; 
-    border: 1px solid #dcdcdc;
+    border: 1px solid var(--light-gray);
     font-family: "Space Grotesk", sans-serif;
     color: var(--light-gray);
     font-size: 0.8rem;