Kayla contact form

app/(pages)/_Contactform/Contact.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+import {useState} from "react";
+import styles from "./Contact.module.scss";
+
+export default function Contact() {
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName:"",
+        email: "",
+        subject:"",
+        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 replace this w/ API call to send form data to backend
+
+        // Reset form 
+        setFormData({
+            firstName: "",
+            lastName: "",
+            email: "",
+            subject: "",
+            message: "", 
+        });
+      };
+
+      return(
+        <section className={styles.container}>
+            <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"
+                        placeholder="Enter Your First Name Here"
+                        value={formData.firstName}
+                        onChange={handleChange}
+                        required
+                    />
+                  </div>
+
+                  <div className={styles.field}>
+                    <label>Last Name</label>
+                    <input 
+                        type="text"
+                        name="lastName"
+                        placeholder="Enter Your Last Name Here"
+                        value={formData.lastName}
+                        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"
+                        placeholder="Enter Your E-Mail Here"
+                        value={formData.email}
+                        onChange={handleChange}
+                        required
+                    />
+                   </div>
+
+                   <div className={styles.field}>
+                    <label>Subject</label>
+                    <input
+                        type="text"
+                        name="subject"
+                        placeholder="Enter Your Subject Here"
+                        value={formData.subject}
+                        onChange={handleChange}
+                        required
+                      />
+                    </div>
+                </div>
+
+                 {/* 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> 
+                 </form>
+        </section>
+     );
+    }

app/(pages)/_Contactform/Contact.module.scss

@@ -0,0 +1,72 @@
+.container{
+    width: 100%;
+    max-width:1000px;
+    margin: 6rem auto;
+    padding: 3rem;
+}
+
+.title{
+    font-family: Oxanium; 
+    color: var(--Navy);
+    font-size: 2.1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin-bottom: 1.5rem;
+}
+
+.form{
+    display: flex;
+    flex-direction: column; 
+    gap: 1rem;
+}
+
+.row{
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.6rem; 
+  }
+
+.field{
+    display: flex;
+    flex-direction: column; 
+    gap: 0.4rem;
+
+}
+
+.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 var(--light-gray);
+    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;
+
+
+}

app/(pages)/test/page.jsx

@@ -0,0 +1,8 @@
+import Contact from "../_Contactform/Contact.jsx";
+export default function Page(){
+    return(
+        <main>
+            <Contact />
+        </main>
+    );
+}