Routes and Scrolling Effect Added

package.json

@@ -20,6 +20,7 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "react-scroll": "^1.8.1",
     "reactstrap": "^8.5.1",
     "web-vitals": "^0.2.4"
   },

src/App.js

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Header from "./components/Header/Header";
 import "./index.css";
 
 const Home = lazy(() => import("./pages/Home/index"));
@@ -11,8 +12,9 @@ function App() {
       <Switch>
         <Suspense fallback={<div>Loading Page...</div>}>
           {/*put a nice preloader here in fallback*/}
-          <Route path="/home" component={Home}></Route>
-          <Route path="/editor" component={Editor}></Route>
+          <Header />
+          <Route path="/" exact component={Home}></Route>
+          <Route path="/editor" exact component={Editor}></Route>
         </Suspense>
       </Switch>
     </BrowserRouter>

src/components/Footer/Footer.js

@@ -11,15 +11,15 @@ export default function Footer(props) {
     //py-2 for padding
     <div className="footer-div py-2">
       <div className="newsletter">
-        <div class="heading">
+        <div className="heading">
           <h5>Subscribe to our Newsletter!</h5>
-          <h7>Enter Your Email to get our news and updates.</h7>
+          <h6>Enter Your Email to get our news and updates.</h6>
         </div>
         <br></br>
         <Form className="email-field">
           <Form.Group controlId="formBasicEmail">
             <div className="form">
-              <div class="box">
+              <div className="box">
                 <FaEnvelope className="icon" size={48}/>
                 <input type="email"  placeholder="Enter your email" required/> 
               </div>

src/components/Header/Header.js

@@ -1,46 +1,57 @@
-import React from 'react';
+import React,{useState, useEffect} from 'react';
+import {NavLink, useHistory} from 'react-router-dom';
+import {Link} from 'react-scroll';
 import styles from './Header.module.css';
 import logo from './logo.png';
 
 const headerLinks = [
-    {
-        name: 'Home',
-        to: '/'
-    },
     {
         name: 'About',
-        to: '/'
+        to: 'home_about'
     },
     {
         name: 'Team',
-        to: '/'
+        to: 'home_team'
     },
     {
         name: 'Contact',
-        to: '/'
+        to: 'home_contact'
     },
     {
         name: 'Support Us',
-        to: '/'
-    },
-    {
-        name: 'Editor',
-        to: '/'
+        to: 'home_support'
     }
-];
+]
 
 function Header() {
+
+    const history = useHistory();
+
+    const [location, setLocation] = useState(window.location.pathname);
+
+    useEffect(() => {
+        return history.listen(location => {
+            setLocation(location.pathname);
+        })
+    }, [history])
+
     return (
         <header className={styles.Header}>
             <img className={styles.left} src={logo} alt="Logo"/>
             <div className={styles.right}>
+                <NavLink className={styles.header_links} to='/' exact activeClassName={styles.header_active_links}>
+                    Home
+                </NavLink>
                 {
-                    headerLinks.map(link => (
-                        <div className={styles.header_links} key={link.name}>
+                    location === '/' && headerLinks.map(link => (
+                        <Link className={styles.header_links} key={link.name} to={link.to} offset={-100}>
                             {link.name}
-                        </div>
+                        </Link>
                     ))
                 }
+                <NavLink className={styles.header_links} to='/editor' exact activeClassName={styles.header_active_links}>
+                    Editor
+                </NavLink>
             </div>
         </header>
     )

src/components/Header/Header.module.css

@@ -29,9 +29,19 @@
     margin: 0 0.1rem;
     border-radius: 15px;
     cursor: pointer;
+    color: white;
+    text-decoration: none;
 }
 
 .header_links:hover {
     background-color: white;
-    color:#103F5F
+    color:#103F5F;
+    text-decoration: none;
+}
+
+.header_active_links {
+    box-shadow: inset 1px 1px 3px grey;
+    background-color: lightblue;
+    color:#103F5F;
+    text-decoration: none;
 }

src/index.css

@@ -51,6 +51,7 @@ html {
   --mainTheme: #007bff;
   height: 100%;
   width: 100%;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -59,6 +60,8 @@ body {
   height: 100%;
   color: #1e1e1e !important;
 
+  font-family: Montserrat;
+
   /* overflow-y: hidden; */
 }
 

src/pages/Editor/index.js

@@ -1,18 +1,14 @@
 import React from "react";
-
-
 import "./style.css";
 import Footer from "../../components/Footer/Footer";
 import EditContextProvider from "./containers/editContext";
 import "bootstrap/dist/css/bootstrap.min.css";
-import Header from "../../components/Header/Header";
 import Settings from "./sections/Settings/Settings";
 import Output from "./sections/OutputComponent/Output";
 
 function Editor() {
   return (
     <>
-      <Header />
       <div>
         <a
           href="https://dscommunity.in"

src/pages/Home/index.js

@@ -2,16 +2,14 @@ import React from 'react'
 import Footer from '../../components/Footer/Footer'
 import About from './sections/About/About'
 import ContactUs from './sections/ContactUs/ContactUs'
-import Header from '../../components/Header/Header'
 import Banner from './sections/Banner/Banner'
 import OpenSource from './sections/OpenSource/OpenSource'
 import SupportUs from './sections/SupportUs/SupportUs'
 import Team from './sections/Team/Team'
 
 function Home() {
     return (
-        <div className="HomePage" style={{fontFamily: "Montserrat"}}>
-            <Header />
+        <div className="HomePage">
             <Banner />
             <About />
             <Team />

src/pages/Home/sections/About/About.js

@@ -8,7 +8,7 @@ import openSource from './open-source.svg';
 
 function About() {
     return (
-        <div className={styles.About}>
+        <div className={styles.About} id="home_about">
             <div className={styles.title}>
                 What are we about?
             </div>

src/pages/Home/sections/Banner/Banner.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Home.module.css';
+import styles from './Banner.module.css';
 import pen from './pen.svg';
 
 function Banner() {

src/pages/Home/sections/Banner/Home.module.css → src/pages/Home/sections/Banner/Banner.module.css

@@ -4,7 +4,7 @@
     background: -webkit-linear-gradient(to right, #0f2027 #2c5364, #203a43);
     background: linear-gradient(to right, #0f2027, #2c5364, #203a43);
     color: white;
-    height: 90vh;
+    height: 89vh;
     padding: 0 1rem;
     padding-top: 3rem;
 }

src/pages/Home/sections/ContactUs/ContactUs.js

@@ -3,7 +3,7 @@ import styles from './ContactUs.module.css';
 
 function ContactUs() {
     return (
-        <div className={styles.ContactUs}>
+        <div className={styles.ContactUs} id="home_contact">
             <div className={styles.heading}>
               Get In Touch
             </div>

src/pages/Home/sections/Team/Team.js

@@ -35,7 +35,7 @@ function Team() {
       }, []);
 
     return (
-        <div className={styles.Team}>
+        <div className={styles.Team} id="home_team">
             {/* <!-- Project Maintainer Sub Section --> */}
             <br/><br/> <h3>Project Maintainers</h3><br/><br/>
             <div className={styles.projectMaintainers}>