GirlScript · musk101 · Mar 30, 2021 · Mar 31, 2021
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,9 +9,11 @@
     "bootstrap": "^5.0.0-alpha1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "semantic-ui-css": "^2.4.1",
+    "simple-react-footer": "^1.0.2",
     "styled-components": "^5.2.1",
     "web-vitals": "^1.1.1"
   },

diff --git a/frontend/src/Components/Footer/Button.css b/frontend/src/Components/Footer/Button.css
@@ -0,0 +1,43 @@
+:root {
+    --primary: #fff;
+  }
+
+  .btn {
+    padding: 8px 20px;
+    border-radius: 2px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  .btn--primary {
+    background-color: var(--primary);
+    color: #242424;
+    border: 1px solid var(--primary);
+  }
+
+  .btn--outline {
+    background-color: transparent;
+    color: #fff;
+    padding: 8px 20px;
+    border: 1px solid var(--primary);
+    transition: all 0.3s ease-out;
+  }
+
+  .btn--medium {
+    padding: 8px 20px;
+    font-size: 18px;
+  }
+
+  .btn--large {
+    padding: 12px 26px;
+    font-size: 20px;
+  }
+
+  .btn--large:hover,
+  .btn--medium:hover {
+    transition: all 0.3s ease-out;
+    background: #fff;
+    color: #242424;
+    transition: 250ms;
+  }
diff --git a/frontend/src/Components/Footer/Button.js b/frontend/src/Components/Footer/Button.js
@@ -0,0 +1,45 @@
+// import React from 'react';
+// import './Button.css';
+// import { Link } from 'react-router-dom';
+
+// export function Button() {
+//   return (
+//     <Link to='sign-up'>
+//       <button className='btn'>Sign Up</button>
+//     </Link>
+//   );
+// }
+
+import React from 'react';
+import './Button.css';
+import { Link } from 'react-router-dom';
+
+const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
+
+const SIZES = ['btn--medium', 'btn--large'];
+
+export const Button = ({
+  children,
+  type,
+  onClick,
+  buttonStyle,
+  buttonSize
+}) => {
+  const checkButtonStyle = STYLES.includes(buttonStyle)
+    ? buttonStyle
+    : STYLES[0];
+
+  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
+
+  return (
+    <Link to='/sign-up' className='btn-mobile'>
+      <button
+        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
+        onClick={onClick}
+        type={type}
+      >
+        {children}
+      </button>
+    </Link>
+  );
+};
diff --git a/frontend/src/Components/Footer/Footer.css b/frontend/src/Components/Footer/Footer.css
@@ -0,0 +1,163 @@
+.footer-container {
+    background-color: #864000;
+    padding: 4rem 0 2rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .footer-subscription {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    margin-bottom: 24px;
+    padding: 24px;
+    color: #fff;
+  }
+
+  .footer-subscription > p {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+      'Lucida Sans', Arial, sans-serif;
+  }
+
+  .footer-subscription-heading {
+    margin-bottom: 24px;
+    font-size: 24px;
+  }
+
+  .footer-subscription-text {
+    margin-bottom: 24px;
+    font-size: 20px;
+  }
+
+  .footer-input {
+    padding: 8px 20px;
+    border-radius: 2px;
+    margin-right: 10px;
+    outline: none;
+    border: none;
+    font-size: 18px;
+    margin-bottom: 16px;
+    border: 1px solid #fff;
+  }
+
+  .footer-links {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .footer-link-wrapper {
+    display: flex;
+  }
+
+  .footer-link-items {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 16px;
+    text-align: left;
+    width: 160px;
+    box-sizing: border-box;
+  }
+
+  .footer-link-items h2 {
+    margin-bottom: 16px;
+  }
+
+  .footer-link-items > h2 {
+    color: #fff;
+  }
+
+  .footer-link-items a {
+    color: #fff;
+    text-decoration: none;
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-link-items a:hover {
+    color: #e9e9e9;
+    transition: 0.3s ease-out;
+  }
+
+  .footer-email-form h2 {
+    margin-bottom: 2rem;
+  }
+
+  .footer-input::placeholder {
+    color: #b1b1b1;
+  }
+
+  /* Social Icons */
+  .social-icon-link {
+    color: #fff;
+    font-size: 24px;
+  }
+
+  .social-media {
+    max-width: 1000px;
+    width: 100%;
+  }
+
+  .social-media-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 90%;
+    max-width: 1000px;
+    margin: 40px auto 0 auto;
+  }
+
+  .social-icons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 240px;
+  }
+
+  .social-logo {
+    color: #fff;
+    justify-self: start;
+    margin-left: 20px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .website-rights {
+    color: #fff;
+    margin-bottom: 16px;
+  }
+
+  @media screen and (max-width: 820px) {
+    .footer-links {
+      padding-top: 2rem;
+    }
+
+    .footer-input {
+      width: 100%;
+    }
+
+    .btn {
+      width: 100%;
+    }
+
+    .footer-link-wrapper {
+      flex-direction: column;
+    }
+
+    .social-media-wrap {
+      flex-direction: column;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+  }
diff --git a/frontend/src/Components/Footer/Footer.js b/frontend/src/Components/Footer/Footer.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import './Footer.css';
+import { Button } from './Button';
+import { Link } from 'react-router-dom';
+import images from "../../images/gs_new.png";
+
+function Footer() {
+  return (
+    <div className='footer-container'>
+      <section className='footer-subscription'>
+        <p className='footer-subscription-heading'>
+        <img src={images} alt="img" height="45px" width="260px"/>
+        </p>
+        <p className='footer-subscription-text'>
+          EDUCATION FIRST
+        </p>
+        <div className='input-areas'>
+          <form>
+            <input
+              className='footer-input'
+              name='email'
+              type='email'
+              placeholder='Your Email'
+            />
+            <Button buttonStyle='btn--outline'>Subscribe</Button>
+          </form>
+        </div>
+      </section>
+      <div class='footer-links'>
+        <div className='footer-link-wrapper'>
+          <div class='footer-link-items'>
+            <h2>About Us</h2>
+            <Link to='/sign-up'>How it works</Link>
+            <Link to='/'>Testimonials</Link>
+            <Link to='/'>Careers</Link>
+            <Link to='/'>Investors</Link>
+            <Link to='/'>Terms of Service</Link>
+          </div>
+          <div class='footer-link-items'>
+            <h2>Contact Us</h2>
+            <Link to='/'>Contact</Link>
+            <Link to='/'>Support</Link>
+            <Link to='/'>Destinations</Link>
+            <Link to='/'>Sponsorships</Link>
+          </div>
+        </div>
+        <div className='footer-link-wrapper'>
+          <div class='footer-link-items'>
+            <h2>Videos</h2>
+            <Link to='/'>Submit Video</Link>
+            <Link to='/'>Ambassadors</Link>
+            <Link to='/'>Agency</Link>
+            <Link to='/'>Influencer</Link>
+          </div>
+          <div class='footer-link-items'>
+            <h2>Social Media</h2>
+            <Link to='/'>Instagram</Link>
+            <Link to='/'>Facebook</Link>
+            <Link to='/'>Youtube</Link>
+            <Link to='/'>Twitter</Link>
+          </div>
+        </div>
+      </div>
+      <section class='social-media'>
+        <div class='social-media-wrap'>
+          <div class='footer-logo'>
+            <Link to='/' className='social-logo'>
+
+              <i class='fab fa-typo3' />
+            </Link>
+          </div>
+          <small class='website-rights'>Made with ❤ by GirlScript India</small>
+          <div class='social-icons'>
+            <Link
+              class='social-icon-link facebook'
+              to='/'
+              target='_blank'
+              aria-label='Facebook'
+            >
+              <i class='fab fa-facebook-f' />
+            </Link>
+            <Link
+              class='social-icon-link instagram'
+              to='/'
+              target='_blank'
+              aria-label='Instagram'
+            >
+              <i class='fab fa-instagram' />
+            </Link>
+            <Link
+              class='social-icon-link youtube'
+              to='/'
+              target='_blank'
+              aria-label='Youtube'
+            >
+              <i class='fab fa-youtube' />
+            </Link>
+            <Link
+              class='social-icon-link twitter'
+              to='/'
+              target='_blank'
+              aria-label='Twitter'
+            >
+              <i class='fab fa-twitter' />
+            </Link>
+            <Link
+              class='social-icon-link twitter'
+              to='/'
+              target='_blank'
+              aria-label='LinkedIn'
+            >
+              <i class='fab fa-linkedin' />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Footer;