From 0a81f35c780c221262c72f61d58546735f99a854 Mon Sep 17 00:00:00 2001
From: Andrew Daniel Janong <111191141+AndrewJanong@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:46:01 +0800
Subject: [PATCH] Created contact us page and component template (#7)

The contact us page and component has no functionality and minimal styling, but responsive.
Things to note:
* The message textarea was made non-resizable, but can scroll
* Scroll bar for textarea covers border on the right
---
 app/components/contact-form.tsx | 47 +++++++++++++++++++++++++++++++++
 app/contact-us/page.tsx         |  9 +++++++
 2 files changed, 56 insertions(+)
 create mode 100644 app/components/contact-form.tsx
 create mode 100644 app/contact-us/page.tsx

diff --git a/app/components/contact-form.tsx b/app/components/contact-form.tsx
new file mode 100644
index 0000000..794b862
--- /dev/null
+++ b/app/components/contact-form.tsx
@@ -0,0 +1,47 @@
+export default function ContactForm() {
+    return (
+        <div className="w-full flex flex-col gap-y-4">
+            <div>
+                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Contact Us</h2>
+                <p className="text-md sm:text-lg my-4">Feel free to reach out through the form below!</p>
+            </div>
+            <form action="#" className="w-full xl:w-8/12">
+                <div className="grid grid-cols-2 gap-x-8 gap-y-6">
+                    <div>
+                        <label htmlFor="first-name" className="text-md sm:text-lg">First Name</label>
+                        <div className="mt-2.5">
+                            <input type="text" className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="last-name" className="text-md sm:text-lg">Last Name</label>
+                        <div className="mt-2.5">
+                            <input type="text" className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="email" className="text-md sm:text-lg">Email</label>
+                        <div className="mt-2.5"> 
+                            <input type="text" className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="phone-number" className="text-md sm:text-lg">Phone Number</label>
+                        <div className="mt-2.5">
+                            <input type="text" className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"/>
+                        </div>
+                    </div>
+                    <div className="col-span-2">
+                        <label htmlFor="message" className="text-md sm:text-lg">Message</label>
+                        <div>
+                            <textarea name="message" id="message" className="resize-none block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-10">
+                    <button className="block w-full sm:w-48 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Submit</button>
+                </div>
+            </form>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
new file mode 100644
index 0000000..c870921
--- /dev/null
+++ b/app/contact-us/page.tsx
@@ -0,0 +1,9 @@
+import ContactForm from "../components/contact-form";
+
+export default function ContactPage() {
+    return (
+        <div className="flex bg-white h-screen items-center px-4 md:px-12 lg:px-16">
+            <ContactForm></ContactForm>
+        </div>
+    )
+}
\ No newline at end of file