created contact us components and page

WCSAorientation · Jul 10, 2023 · 0446159 · 0446159
1 parent 16147d4
commit 0446159
Show file tree

Hide file tree

Showing 37,719 changed files with 4,812,360 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -4,6 +4,7 @@ import { NotFound } from "./pages/NotFound";
 import { Home } from "./pages/Home";
 import Team from "./pages/Team";
 import { Sponsors } from './pages/Sponsors';
+import ContactUs from './pages/ContactUs';
 import FAQ from './pages/FAQ';
 
 function App() {
@@ -25,6 +26,7 @@ function App() {
             <Route path="/sponsors" element={<Sponsors/>} />
             <Route path="/team" element={<Team />} />
             <Route path="/faq" element={<FAQ />} />
+            <Route path="/contact" element={<ContactUs />} />
 
             <Route path="*" element={<NotFound/>}/>
           </Routes>

diff --git a/frontend/src/components/ContactUsForm.js b/frontend/src/components/ContactUsForm.js
@@ -0,0 +1,64 @@
+import React, { useRef } from "react";
+import emailjs from "@emailjs/browser";
+
+const ContactUsForm = () => {
+  const form = useRef();
+
+  const sendEmail = (e) => {
+    e.preventDefault();
+
+    emailjs
+      .sendForm(
+        "service_vumi9cq",
+        "template_zyncr77",
+        form.current,
+        "5jrc7bEYkHuuZ45VE"
+      )
+      .then(
+        (result) => {
+          console.log(result.text);
+          console.log("message sent");
+        },
+        (error) => {
+          console.log(error.text);
+        }
+      );
+  };
+
+  return (
+    <div className="flex justify-center">
+      <div className="w-96">
+        <form
+          ref={form}
+          onSubmit={sendEmail}
+          className="flex flex-col justify-between items-center"
+        >
+          <label className="mt-4 text-2xl font-semibold text-white">Name</label>
+          <input
+            type="text"
+            name="user_name"
+            className="w-full h-9 p-2 outline-none rounded-md border border-gray-300 focus:border-green-500"
+          />
+          <label className="mt-4 text-2xl font-semibold text-white">Email</label>
+          <input
+            type="email"
+            name="user_email"
+            className="w-full h-9 p-2 outline-none rounded-md border border-gray-300 focus:border-green-500"
+          />
+          <label className="mt-4 text-2xl font-semibold text-white">Message</label>
+          <textarea
+            name="message"
+            className="w-full h-24 p-2 outline-none rounded-md border border-gray-300 focus:border-green-500"
+          ></textarea>
+          <input
+            type="submit"
+            value="Send"
+            className="text-center mt-5 py-2 mx-auto w-2/4 relative bg-[#F0D8A6] rounded-[30px] tracking-[.05em] text-[#182e2e]  font-bold text-lg cursor-pointer"
+          />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ContactUsForm;
diff --git a/frontend/src/components/NavBar.js b/frontend/src/components/NavBar.js
@@ -15,7 +15,9 @@ export function NavBar({ isDark }) {
         <a href={'/schedule'}><h1 className='hover:cursor-pointer'>schedule</h1></a>
         <a href={'/team'}><h1 className='hover:cursor-pointer'>team</h1></a>
         <a href={'/sponsors'}><h1 className='hover:cursor-pointer'>sponsors</h1></a>
-        <a href={'/faq'}><h1 className='hover:cursor-pointer'>FAQ</h1></a>
+        <a href={'/faq'}><h1 className='hover:cursor-pointer'>faq</h1></a>
+        <a href={'/contact'}><h1 className='hover:cursor-pointer'>contact</h1></a>
+
       </div>
     </div>
     </>

diff --git a/frontend/src/pages/ContactUs.js b/frontend/src/pages/ContactUs.js
@@ -0,0 +1,26 @@
+import { NavBar } from "../components/NavBar";
+import ContactUsForm from '../components/ContactUsForm';
+
+export default function ContactUs() {
+    return (
+        <>
+            <body className="bg-[#182E2E]">
+                <NavBar isDark={true} />
+                <div className='columns-2 gap-8 px-[5%] py-[7%]'>
+                    <div className=''>
+                        <h1 className='mb-[-5%] col-1 text-[87px]   first-letter:font-extrabold font-bold text-[#f0d8a6]'>Connect</h1>
+                        <h1 className='mb-[-5%] col-1 text-[87px]   first-letter:font-extrabold font-bold text-white'>With Us!</h1>
+
+                    </div>
+                    <img src='./pawprint.svg' alt='pawprint' />
+                </div>
+                <main className="grid place-items-centre pb-10">
+                    <div className='w-1065/1440'>
+                        <ContactUsForm />
+                    </div>
+
+                </main>
+            </body>
+        </>
+    );
+}
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1 @@
+{}
diff --git a/react-accordian/node_modules/.bin/acorn b/react-accordian/node_modules/.bin/acorn
diff --git a/react-accordian/node_modules/.bin/ansi-html b/react-accordian/node_modules/.bin/ansi-html
diff --git a/react-accordian/node_modules/.bin/autoprefixer b/react-accordian/node_modules/.bin/autoprefixer
diff --git a/react-accordian/node_modules/.bin/browserslist b/react-accordian/node_modules/.bin/browserslist
diff --git a/react-accordian/node_modules/.bin/css-blank-pseudo b/react-accordian/node_modules/.bin/css-blank-pseudo
diff --git a/react-accordian/node_modules/.bin/css-has-pseudo b/react-accordian/node_modules/.bin/css-has-pseudo
diff --git a/react-accordian/node_modules/.bin/css-prefers-color-scheme b/react-accordian/node_modules/.bin/css-prefers-color-scheme
diff --git a/react-accordian/node_modules/.bin/cssesc b/react-accordian/node_modules/.bin/cssesc
diff --git a/react-accordian/node_modules/.bin/detect b/react-accordian/node_modules/.bin/detect
diff --git a/react-accordian/node_modules/.bin/detect-port b/react-accordian/node_modules/.bin/detect-port
diff --git a/react-accordian/node_modules/.bin/ejs b/react-accordian/node_modules/.bin/ejs
diff --git a/react-accordian/node_modules/.bin/escodegen b/react-accordian/node_modules/.bin/escodegen
diff --git a/react-accordian/node_modules/.bin/esgenerate b/react-accordian/node_modules/.bin/esgenerate
diff --git a/react-accordian/node_modules/.bin/eslint b/react-accordian/node_modules/.bin/eslint
diff --git a/react-accordian/node_modules/.bin/esparse b/react-accordian/node_modules/.bin/esparse
diff --git a/react-accordian/node_modules/.bin/esvalidate b/react-accordian/node_modules/.bin/esvalidate
diff --git a/react-accordian/node_modules/.bin/he b/react-accordian/node_modules/.bin/he
diff --git a/react-accordian/node_modules/.bin/html-minifier-terser b/react-accordian/node_modules/.bin/html-minifier-terser
diff --git a/react-accordian/node_modules/.bin/import-local-fixture b/react-accordian/node_modules/.bin/import-local-fixture
diff --git a/react-accordian/node_modules/.bin/is-docker b/react-accordian/node_modules/.bin/is-docker
diff --git a/react-accordian/node_modules/.bin/jake b/react-accordian/node_modules/.bin/jake
diff --git a/react-accordian/node_modules/.bin/jest b/react-accordian/node_modules/.bin/jest
diff --git a/react-accordian/node_modules/.bin/jiti b/react-accordian/node_modules/.bin/jiti
diff --git a/react-accordian/node_modules/.bin/js-yaml b/react-accordian/node_modules/.bin/js-yaml
diff --git a/react-accordian/node_modules/.bin/jsesc b/react-accordian/node_modules/.bin/jsesc
diff --git a/react-accordian/node_modules/.bin/json5 b/react-accordian/node_modules/.bin/json5
diff --git a/react-accordian/node_modules/.bin/loose-envify b/react-accordian/node_modules/.bin/loose-envify
diff --git a/react-accordian/node_modules/.bin/lz-string b/react-accordian/node_modules/.bin/lz-string
diff --git a/react-accordian/node_modules/.bin/mime b/react-accordian/node_modules/.bin/mime
diff --git a/react-accordian/node_modules/.bin/mkdirp b/react-accordian/node_modules/.bin/mkdirp
diff --git a/react-accordian/node_modules/.bin/multicast-dns b/react-accordian/node_modules/.bin/multicast-dns
diff --git a/react-accordian/node_modules/.bin/nanoid b/react-accordian/node_modules/.bin/nanoid
diff --git a/react-accordian/node_modules/.bin/node-which b/react-accordian/node_modules/.bin/node-which
diff --git a/react-accordian/node_modules/.bin/parser b/react-accordian/node_modules/.bin/parser
diff --git a/react-accordian/node_modules/.bin/react-scripts b/react-accordian/node_modules/.bin/react-scripts
diff --git a/react-accordian/node_modules/.bin/regjsparser b/react-accordian/node_modules/.bin/regjsparser
diff --git a/react-accordian/node_modules/.bin/resolve b/react-accordian/node_modules/.bin/resolve
diff --git a/react-accordian/node_modules/.bin/rimraf b/react-accordian/node_modules/.bin/rimraf
diff --git a/react-accordian/node_modules/.bin/rollup b/react-accordian/node_modules/.bin/rollup
diff --git a/react-accordian/node_modules/.bin/semver b/react-accordian/node_modules/.bin/semver
diff --git a/react-accordian/node_modules/.bin/sucrase b/react-accordian/node_modules/.bin/sucrase
diff --git a/react-accordian/node_modules/.bin/sucrase-node b/react-accordian/node_modules/.bin/sucrase-node
diff --git a/react-accordian/node_modules/.bin/svgo b/react-accordian/node_modules/.bin/svgo
diff --git a/react-accordian/node_modules/.bin/tailwind b/react-accordian/node_modules/.bin/tailwind
diff --git a/react-accordian/node_modules/.bin/tailwindcss b/react-accordian/node_modules/.bin/tailwindcss
diff --git a/react-accordian/node_modules/.bin/terser b/react-accordian/node_modules/.bin/terser
diff --git a/react-accordian/node_modules/.bin/tsc b/react-accordian/node_modules/.bin/tsc
diff --git a/react-accordian/node_modules/.bin/tsserver b/react-accordian/node_modules/.bin/tsserver
diff --git a/react-accordian/node_modules/.bin/update-browserslist-db b/react-accordian/node_modules/.bin/update-browserslist-db
diff --git a/react-accordian/node_modules/.bin/uuid b/react-accordian/node_modules/.bin/uuid
diff --git a/react-accordian/node_modules/.bin/webpack b/react-accordian/node_modules/.bin/webpack
diff --git a/react-accordian/node_modules/.bin/webpack-dev-server b/react-accordian/node_modules/.bin/webpack-dev-server