Merge branch 'development' into hacktoberfest

package.json

@@ -14,7 +14,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI= react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -1,11 +1,16 @@
 import { BrowserRouter, Route } from "react-router-dom";
-// import Footer from "./components/section-components/Footer";
+import Footer from "./components/section-components/Footer";
 import Header from "./components/section-components/Header";
 import './styles/index.css';
 import Careers from "./views/Careers";
+import Discord from "./views/Redirect/Discord";
 import LandingPage from "./views/LandingPage";
 import Products from "./views/Products";
 import Team from "./views/Team";
+import Twitter from "./views/Redirect/Twitter";
+import GitHub from "./views/Redirect/GitHub";
+import LinkedIn from "./views/Redirect/Linkedin";
+import PersonalLinks from "./views/PersonalLinks";
 
 function App() {
   return (
@@ -18,9 +23,15 @@ function App() {
         <Route path="/team" exact component={Team} />
         <Route path="/products" exact component={Products} />
         <Route path="/careers" exact component={Careers} />
+        {/* routes for re-direction to external links */}
+        <Route path="/discord" exact component={Discord} />
+        <Route path="/twitter" exact component={Twitter} />
+        <Route path="/github" exact component={GitHub} />
+        <Route path="/linkedin" exact component={LinkedIn} />
+        <Route path="/yash" exact component={() => PersonalLinks('yash')} />
       </BrowserRouter>
       {/* footer component */}
-      {/* <Footer /> */}
+      <Footer />
     </div>
   );
 }

src/components/section-components/Footer/__usefulLinks.json

@@ -0,0 +1,14 @@
+[
+  {
+    "Home": "/",
+    "Career": "/careers",
+    "Team": "/team",
+    "Contact": "/contact-us",
+    "Eccentrictouch": "/products",
+
+    "LinkedIn": "https://www.linkedin.com/company/designsystemsoss/",
+    "GitHub": "https://github.com/DesignSystemsOSS",
+    "Twitter": "https://twitter.com/TDesignsystems",
+    "Discord": "https://discord.gg/VcmnY4HTEc"
+  }
+]

src/components/section-components/Footer/index.js

@@ -1,21 +1,153 @@
-import React from 'react';
-import './style.footer.css';
+import React from "react";
+import { useState } from "react";
+import "./style.footer.css";
+import LinksData from "./__usefulLinks.json";
+import Button from "../../widgets/Button";
 
 export default function Footer() {
+  const [footerLinksDetails] = useState(LinksData);
   return (
     <div className="footer">
-      {/* <div className="logo-wrapper">
-        <h1 className="demo-logo-icon">DS</h1>
-        <p className="logo-title">The DesignSystems</p>
+      <div className="footer-row-1">
+        <div className="logo-container color-change-4x">
+          <h1 className="demo-logo-icon">DS</h1>
+          <p className="logo-title">The DesignSystems</p>
+        </div>
+
+        <div className="footer-col-1">
+          <div className="useful-links-section">
+            <p className="useful-links-title links-title">
+              <b>Useful links</b>
+            </p>
+            <div className="useful-links-list">
+              {footerLinksDetails.map((data, index) => (
+                <ul className="useful-links-list">
+                  <li className="useful-link-item" key={index}>
+                    <a href={data.Home}>Home</a>
+                  </li>
+                  <li className="useful-link-item" key={index}>
+                    <a href={data.Career}>Career</a>
+                  </li>
+                  <li className="useful-link-item" key={index}>
+                    <a href={data.Team}>Team</a>
+                  </li>
+                  <li className="useful-link-item" key={index}>
+                    <a href={data.Contact}>Contact Us</a>
+                  </li>
+                </ul>
+              ))}
+            </div>
+          </div>
+
+          <div className="products-links-section">
+            <p className="products-links-title links-title">
+              <b>Products</b>
+            </p>
+            <div className="product-links-list">
+              {footerLinksDetails.map((data, index) => (
+                <ul className="products-links-list">
+                  <li className="products-links-item" key={index}>
+                    <a href={data.Eccentrictouch}>Eccentrictouch</a>
+                  </li>
+                </ul>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="footer-col-2">
+          <div className="connect-community">
+            <p className="community-title gradient-text">
+              Don't miss anything, Join our GitHub Organization and Discord
+              Community
+            </p>
+            <div className="community-links-wrapper">
+              <a
+                href="https://github.com/DesignSystemsOSS"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button
+                  type="outline"
+                  value="Join our Github Organization"
+                  startIcon="fab fa-github"
+                />
+              </a>
+
+              <a
+                href="https://discord.gg/VcmnY4HTEc"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button
+                  type="primary"
+                  value="Join Discord Community"
+                  startIcon="fab fa-discord"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
-      <div className="footer-col-1">
-        <div className="useful-links-section">
-          <p className="useful-links-title links-title">Useful links</p>
-          <ul className="useful-links-list">
-            <li className="useful-link-item"></li>
-          </ul>
+
+      <div className="footer-row-2">
+        <div className="social-links-container">
+          {footerLinksDetails.map((data, index) => (
+            <div className="social-links-list">
+              <a
+                href={data.LinkedIn}
+                target="_blank"
+                rel="noreferrer"
+                key={index}
+                className="color-change-4x"
+              >
+                <button type="button" className="fab fa-linkedin"></button>
+              </a>
+
+              <a
+                href={data.GitHub}
+                target="_blank"
+                rel="noreferrer"
+                key={index}
+              >
+                <button
+                  type="button"
+                  className="fab fa-github social-link"
+                ></button>
+              </a>
+
+              <a
+                href={data.Twitter}
+                target="_blank"
+                rel="noreferrer"
+                key={index}
+              >
+                <button type="button" className="fab fa-twitter"></button>
+              </a>
+
+              <a
+                href={data.Discord}
+                target="_blank"
+                rel="noreferrer"
+                key={index}
+              >
+                <button type="button" className="fab fa-discord"></button>
+              </a>
+            </div>
+          ))}
+        </div>
+        <div className="privacy-copyright-links-title">
+          <a href="#" target="_blank" rel="noreferrer">
+            Privacy
+          </a>
+          <a href="#" target="_blank" rel="noreferrer">
+            Terms
+          </a>
+          <p className="copyright-content">
+            &copy;2021 The DesignSystems | All Rights Reserved
+          </p>
         </div>
-      </div> */}
+      </div>
     </div>
-  )
-}
+  );
+}