Merge pull request #71 from WildCodeSchool-2023-09/S03-US08

S03 US08 - Onglet contact
WildCodeSchool-2023-09 · Nov 6, 2023 · 7138409 · 7138409
2 parents 88b492f + fc71044
commit 7138409
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 11 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -197,6 +197,20 @@ footer {
     font-size: 0.5rem;
   }
 }
+.buttonContact {
+  border-color: black;
+  padding: 0.1vw 2vw 0.1vw 2vw;
+  margin-left: 2rem;
+  font-family: Montserrat;
+  border-radius: 2rem;
+  border-width: 2px;
+  background-color: #9666d1;
+  margin-bottom: 0;
+  &:hover {
+    background-color: #d9c8ee;
+    color: black;
+  }
+}
 .buttonLogin {
   border-color: black;
   padding: 0.1vw 2vw 0.1vw 2vw;
@@ -351,3 +365,6 @@ footer {
     }
   }
 }
+.bonus {
+  justify-content: center;
+}
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -1,29 +1,47 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
-import Login from "./Modal/Login";
+import Contact from "./Modal/Contact";
+import Modal from "./Modal/Login";
 
 function Footer() {
   const [openModal, setOpenModal] = useState(false);
+  const [openContact, setOpenContact] = useState(false);
   return (
     <footer>
       <p>Copyright @ 2023 Team VOGUE MERRY Tous droits réservés.</p>
-      <button
-        className="buttonLogin"
-        type="button"
-        onClick={() => {
-          setOpenModal(true);
-        }}
-      >
-        Login
-      </button>
+      <div className="bonus">
+        <button
+          className="buttonContact"
+          type="button"
+          onClick={() => {
+            setOpenContact(true);
+          }}
+        >
+          contact us
+        </button>
+        <button
+          className="buttonLogin"
+          type="button"
+          onClick={() => {
+            setOpenModal(true);
+          }}
+        >
+          Login
+        </button>
+      </div>
+      {openContact && (
+        <div className="blur-background">
+          <Contact closeModal={setOpenContact} />
+        </div>
+      )}
       {openModal && (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           className="blur-background flex items-center justify-center"
         >
-          <Login closeModal={() => setOpenModal(false)} />
+          <Modal closeModal={() => setOpenModal(false)} />
         </motion.div>
       )}
     </footer>

diff --git a/frontend/src/components/Modal/Contact.jsx b/frontend/src/components/Modal/Contact.jsx
@@ -0,0 +1,100 @@
+import PropTypes from "prop-types";
+
+function Contact({ closeModal }) {
+  return (
+    <section className="mx-auto w-screen px-5 py-16">
+      <section className="mx-auto max-w-xl bg-purple-heart-100 px-8 pb-12 pt-2 text-center rounded-xl text-sm text-[#636262]">
+        <button
+          className="text-[#636262] text-2xl"
+          type="button"
+          onClick={() => closeModal(false)}
+        >
+          <p> X </p>
+        </button>
+        <div className="mx-auto max-w-7xl px-5 py-16 text-center md:px-10 md:py-2 lg:py-2">
+          <h2 className="text-3xl font-bold md:text-5xl">Contact Form</h2>
+          <p className="mx-auto mb-8 mt-4 max-w-lg text-[#636262] md:mb-12 lg:mb-16">
+            Lorem ipsum dolor sit amet consectetur adipiscing elit ut
+            aliquam,purus sit amet luctus magna fringilla urna
+          </p>
+          <form
+            name="wf-form-name"
+            method="get"
+            className="mx-auto mb-4 text-left sm:px-4 md:px-20"
+          >
+            <div className="mb-4 grid w-full grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="name-2" className="mb-1 font-medium">
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  className="mb-4 block h-9 w-full rounded-md border border-solid border-black px-3 py-6 text-sm text-[#333333]"
+                  placeholder=""
+                  required=""
+                />
+              </div>
+              <div>
+                <label htmlFor="name-3" className="mb-1 font-medium">
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  className="mb-4 block h-9 w-full rounded-md border border-solid border-black px-3 py-6 text-sm text-[#333333]"
+                  placeholder=""
+                  required=""
+                />
+              </div>
+            </div>
+            <div className="mb-4 text-center">
+              <label htmlFor="field" className="mb-1 font-medium">
+                Email
+              </label>
+              <input
+                type="text"
+                className="mb-4 block h-9 w-full rounded-md border border-solid border-black px-3 py-6 text-sm text-[#333333]"
+              />
+            </div>
+            <div className="mb-5 md:mb-6 lg:mb-8 text-center">
+              <label htmlFor="field" className="mb-1 font-medium">
+                Message
+              </label>
+              <textarea
+                placeholder=""
+                maxLength="5000"
+                name="field"
+                className="mb-2.5 block h-auto min-h-[186px] w-full rounded-md border border-solid border-black px-3 py-2 text-sm text-[#333333]"
+              >
+                {" "}
+              </textarea>
+            </div>
+            <label className="font-mediume mb-1 flex items-center justify-start pb-4 pl-5">
+              <input
+                type="checkbox"
+                name="checkbox-2"
+                className="-ml-[20px] mt-1"
+              />
+              <span
+                className="ml-4 inline-block cursor-pointer text-sm"
+                htmlFor="checkbox-2"
+              >
+                By selecting this, you agree to the
+                <p href="#"> Privacy Policy</p>
+              </span>
+            </label>
+            <input
+              type="submit"
+              value="Submit your message"
+              className="mt-4 inline-block w-full cursor-pointer items-center rounded-md bg-purple-heart-500 px-6 py-3 text-center font-semibold text-white"
+            />
+          </form>
+        </div>
+      </section>
+    </section>
+  );
+}
+Contact.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+};
+
+export default Contact;