Merge pull request #33 from ms-club-sliit/feature/bug-applicationform

Fixed the bug in Application Form

package.json

@@ -20,14 +20,15 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.20.4",
+    "react-multi-select-component": "^4.1.14",
     "react-notifications": "^1.7.2",
     "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "react-scroll-to-top": "^1.0.5",
     "react-select": "^5.2.1",
-    "sass": "^1.43.5",
     "react-toastify": "^8.1.0",
+    "sass": "^1.43.5",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.11"

src/pages/contact/contact-form-section.tsx

@@ -40,7 +40,7 @@ const ContactFormSection: React.FC = () => {
     sendMessage(messageDetails)
       .then(() => {
         reset();
-        toastNotification("Application succesfully sent", "success");
+        toastNotification("Succesfully sent", "success");
         setIsLoading(false);
       })
       .catch(() => {

src/pages/join_us/hero-section.tsx

@@ -1,23 +1,63 @@
-import React from 'react';
+import React from "react";
 
 const HeroSection: React.FC = () => (
   <div className="container mb-5">
     <div className="hero-section-bg" />
+
     <div className="row">
       <div className="col-sm-12 col-md-7 col-lg-7">
         <h1 className="contact-us-header-title">Join with Us</h1>
         <p className="contact-us-header-description">
           Fill your application form today
         </p>
+        <div className="row">
+          <div className="col-sm-12 col-md-7 col-lg-7">
+            <div className="d-flex justify-content-start mb-2">
+              <i className="fab fa-facebook fa-2x social-icon" />
+              <span className="social-facebook-link">
+                facebook.com/msclubsliit
+              </span>
+            </div>
+            <div className="d-flex justify-content-start mb-2">
+              <i className="fab fa-instagram fa-2x social-icon" />
+              <span className="social-instagram-link">
+                instagram.com/msclub.sliit
+              </span>
+            </div>
+            <div className="d-flex justify-content-start mb-2">
+              <i className="fab fa-linkedin fa-2x social-icon" />
+              <span className="social-linkedin-link">
+                linkedin.com/msclubsliit
+              </span>
+            </div>
+            <div className="d-flex justify-content-start mb-2">
+              <i
+                className="fab fa-youtube fa-2x social-icon"
+                style={{ color: "#FF0000" }}
+              />
+              <span className="social-youtube-link">
+                youtube.com/msclubsliit
+              </span>
+            </div>
+            <div className="d-flex justify-content-start mb-2">
+              <i className="fab fa-github fa-2x social-icon" />
+              <span className="social-github-link">github.com/msclubsliit</span>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div className="col-sm-12 col-md-5 col-lg-5">
         <div className="d-felx justify-content-center">
-          <img src="/assets/join_us_header.svg" alt="home header" className="contact-us-header-img" />
+          <img
+            src="/assets/join_us_header.svg"
+            alt="home header"
+            className="contact-us-header-img"
+          />
         </div>
       </div>
     </div>
   </div>
 );
 
-export default HeroSection;
+export default HeroSection;