Add files via upload

src/components/contact/Contact.jsx

@@ -0,0 +1,72 @@
+import React, { useRef, useState } from "react";
+import emailjs from "@emailjs/browser";
+import { MdOutlineEmail } from "react-icons/md";
+import "./contact.css";
+
+const Contact = () => {
+  const [message, setMessage] = useState(false);
+  const formRef = useRef();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setMessage(true);
+    emailjs
+      .sendForm(
+        "service_1vo171f",
+        "template_j4f8ube",
+        formRef.current,
+        "opJ3qUDGzyJUxDt5j"
+      )
+      .then(
+        (result) => {
+          console.log(result.text);
+        },
+        (error) => {
+          console.log(error.text);
+        }
+      );
+
+    e.target.reset();
+  };
+  return (
+    <section id="contact">
+      <h5>Get In Touch</h5>
+      <h2>Contact Me</h2>
+      <div className="container contact__container">
+        <div className="contact__options">
+          <article className="contact__option">
+            <MdOutlineEmail className="contact__option-icon" />
+            <h4>Email</h4>
+            <h5>dyzulkdeveloper@gmail.com</h5>
+            <a href="mailto:dyzulkdeveloper@gmail.com">Send a message</a>
+          </article>
+        </div>
+        <form ref={formRef} onSubmit={handleSubmit}>
+          <input
+            type="text"
+            placeholder="Your Full Name"
+            name="user_name"
+            required
+          />
+          <input
+            type="text"
+            placeholder="Your Email"
+            name="user_email"
+            required
+          />
+          <textarea
+            placeholder="Your message"
+            rows="7"
+            name="message"
+            required
+          ></textarea>
+          <button type="submit" className="btn btn-primary">
+            Send Message
+          </button>
+          {message && <span>Thanks, I'll reply ASAP :)</span>}
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;