From b81407bf57344566a18eeba45bdc9cfcc4d9ff2e Mon Sep 17 00:00:00 2001
From: Connor <connorbernard@berkeley.edu>
Date: Mon, 9 Dec 2024 10:45:38 -0800
Subject: [PATCH] feat: add get in touch element (#3)

---
 .../src/components/get-in-touch/Button.jsx    | 12 +++++
 .../components/get-in-touch/GetInTouch.jsx    | 52 +++++++++++++++++++
 .../components/get-in-touch/InputField.jsx    | 12 +++++
 .../src/components/get-in-touch/TextArea.jsx  | 11 ++++
 4 files changed, 87 insertions(+)
 create mode 100644 frontend/src/components/get-in-touch/Button.jsx
 create mode 100644 frontend/src/components/get-in-touch/GetInTouch.jsx
 create mode 100644 frontend/src/components/get-in-touch/InputField.jsx
 create mode 100644 frontend/src/components/get-in-touch/TextArea.jsx

diff --git a/frontend/src/components/get-in-touch/Button.jsx b/frontend/src/components/get-in-touch/Button.jsx
new file mode 100644
index 0000000..283fb8a
--- /dev/null
+++ b/frontend/src/components/get-in-touch/Button.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Button({ children }) {
+    return (
+        <button
+            type="submit"
+            className="gap-2.5 px-7 py-3 text-white rounded-md bg-[linear-gradient(93deg,#FF9898_0.48%,#8054FF_100%)]"
+        >
+            {children}
+        </button>
+    );
+}
diff --git a/frontend/src/components/get-in-touch/GetInTouch.jsx b/frontend/src/components/get-in-touch/GetInTouch.jsx
new file mode 100644
index 0000000..8760974
--- /dev/null
+++ b/frontend/src/components/get-in-touch/GetInTouch.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import InputField from './InputField';
+import TextArea from './TextArea';
+import Button from './Button';
+
+export default function GetInTouch() {
+    return (
+        <section className='flex flex-col rounded-none'>
+            <div className="flex flex-col items-start px-16 pt-72 pb-20 w-full bg-black max-md:px-5 max-md:pt-24 max-md:max-w-full">
+                <div className="w-full max-w-[1083px] max-md:max-w-full">
+                    <div className="flex gap-5 max-md:flex-col">
+                        <div className="flex flex-col w-6/12 max-md:ml-0 max-md:w-full">
+                            <img
+                                loading="lazy"
+                                src="https://cdn.builder.io/api/v1/image/assets/0a7524ba7fb14db381bea79b3ad860c0/ee8473bac2c38243506f214f206bf2453058a2ada4932007fddc9f9e45c894cc?apiKey=0a7524ba7fb14db381bea79b3ad860c0&"
+                                alt="Get in touch illustration"
+                                className="object-contain w-full aspect-square max-md:mt-10 max-md:max-w-full"
+                            />
+                        </div>
+                        <div className="flex flex-col ml-5 w-6/12 max-md:ml-0 max-md:w-full">
+                            <div className="flex flex-col items-start w-full text-sm leading-none text-neutral-400 max-md:mt-10 max-md:max-w-full">
+                                <h2 className="text-5xl font-semibold leading-loose text-center text-white max-md:text-4xl">
+                                    Get In Touch
+                                </h2>
+                                <p className="self-stretch text-lg leading-7 text-neutral-400 max-md:max-w-full">
+                                    A good design is not only aesthetically pleasing, but also functional. It should be able to solve the problem
+                                </p>
+                                <form className="w-full mt-12 max-md:mt-10">
+                                    <InputField
+                                        type="email"
+                                        placeholder="Your Email"
+                                        className="mb-5"
+                                    />
+                                    <InputField
+                                        type="text"
+                                        placeholder="Name"
+                                        className="mb-5"
+                                    />
+                                    <TextArea
+                                        placeholder="Message"
+                                        className="mb-5"
+                                    />
+                                    <Button>Get in Touch</Button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/frontend/src/components/get-in-touch/InputField.jsx b/frontend/src/components/get-in-touch/InputField.jsx
new file mode 100644
index 0000000..f518542
--- /dev/null
+++ b/frontend/src/components/get-in-touch/InputField.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function InputField({ type, placeholder, className }) {
+    return (
+        <input
+            type={type}
+            placeholder={placeholder}
+            className={`gap-2.5 px-7 py-3 w-full rounded-md bg-zinc-900 text-neutral-400 ${className}`}
+            aria-label={placeholder}
+        />
+    );
+}
diff --git a/frontend/src/components/get-in-touch/TextArea.jsx b/frontend/src/components/get-in-touch/TextArea.jsx
new file mode 100644
index 0000000..64483ad
--- /dev/null
+++ b/frontend/src/components/get-in-touch/TextArea.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function TextArea({ placeholder, className }) {
+    return (
+        <textarea
+            placeholder={placeholder}
+            className={`flex flex-col gap-2.5 px-7 pt-3 pb-32 w-full whitespace-nowrap rounded-md bg-zinc-900 min-h-[156px] text-neutral-400 ${className}`}
+            aria-label={placeholder}
+        />
+    );
+}