Merge remote-tracking branch 'origin/master' into IT19408316

frontend/package-lock.json

@@ -11771,6 +11771,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

frontend/package.json

@@ -19,11 +19,12 @@
     "react-redux": "^7.1.3",
     "react-select": "^5.0.0",
     "react-speech-recognition": "^3.9.0",
-    "react-validation": "^3.0.7",
     "redux": "^4.0.5",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.2",
+    "react-icons": "^4.3.1",
+    "react-validation": "^3.0.7"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/components/navBar/images/logo.svg

+<svg width="118" height="30" viewBox="0 0 118 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30.003 13.3516V15.8242C30.003 20.1374 28.6474 23.5852 25.9362 26.1676C23.2527 28.7225 19.836 30 15.6862 30C11.1768 30 7.42813 28.5577 4.44028 25.6731C1.48009 22.7885 0 19.2445 0 15.0412C0 10.8379 1.46626 7.28022 4.39878 4.36813C7.35897 1.45604 10.9693 0 15.2297 0C17.9409 0 20.417 0.604396 22.6579 1.81319C24.9264 3.02198 26.6832 4.61538 27.9281 6.59341L22.2844 9.80769C21.6481 8.81868 20.6936 8.00824 19.421 7.37637C18.1761 6.74451 16.7652 6.42857 15.1882 6.42857C12.726 6.42857 10.6788 7.23901 9.04655 8.85989C7.44196 10.4808 6.63967 12.5549 6.63967 15.0824C6.63967 17.5824 7.46963 19.6291 9.12954 21.2225C10.7895 22.7885 13.0027 23.5714 15.7692 23.5714C19.6147 23.5714 22.0907 22.0879 23.1973 19.1209H15.4372V13.3516H30.003Z" fill="white"/>
+    <path d="M44.7432 0.576923C47.5927 0.576923 49.9996 1.53846 51.9638 3.46154C53.9281 5.38462 54.9102 7.71978 54.9102 10.467C54.9102 13.2143 53.9281 15.5495 51.9638 17.4725C49.9996 19.3956 47.5927 20.3571 44.7432 20.3571H40.3859V29.4231H33.7462V0.576923H44.7432ZM44.7432 14.1758C45.7668 14.1758 46.6106 13.8187 47.2746 13.1044C47.9385 12.3901 48.2705 11.511 48.2705 10.467C48.2705 9.42308 47.9385 8.54396 47.2746 7.82967C46.6106 7.11538 45.7668 6.75824 44.7432 6.75824H40.3859V14.1758H44.7432Z" fill="white"/>
+    <path d="M77.3223 0.576923V6.92308H69.8527V29.4231H63.213V6.92308H55.7434V0.576923H77.3223Z" fill="white"/>
+    <path d="M78.162 20.0687V14.1346H93.9312V20.0687H78.162Z" fill="white"/>
+    <path d="M111.817 12.2802C113.67 12.9121 115.164 13.9423 116.299 15.3709C117.433 16.772 118 18.4341 118 20.3571C118 23.3791 116.976 25.7418 114.929 27.4451C112.882 29.1484 110.378 30 107.418 30C105.122 30 103.061 29.478 101.235 28.4341C99.4366 27.3901 98.1087 25.8516 97.251 23.8187L102.978 20.522C103.697 22.5549 105.177 23.5714 107.418 23.5714C108.718 23.5714 109.7 23.2692 110.364 22.6648C111.028 22.0604 111.36 21.2912 111.36 20.3571C111.36 19.4231 111.028 18.6538 110.364 18.0495C109.7 17.4451 108.718 17.1429 107.418 17.1429H106.049L103.517 13.3929L108.787 6.75824H98.164V0.576923H116.838V5.93407L111.817 12.2802Z" fill="white"/>
+</svg>

frontend/src/components/navBar/navbar.css

+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--color-bg);
+}
+
+a {
+  color: unset;
+  text-decoration: none;
+}
+
+.gradient_background {
+  background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+  /* safari 5.1+,chrome 10+ */
+  background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+  /* opera 11.10+ */
+  background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+  /* ie 10+ */
+  background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+  /* global 92%+ browsers support */
+  background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+}
+
+.scale-up-center {
+  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+/*Navbar*/
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem 6rem;
+}
+
+.navbar-links {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.navbar-links_logo {
+  margin-right: 2rem;
+}
+
+.navbar-links_logo img {
+  width: 62.56px;
+  height: 16.02px;
+}
+
+.navbar-links_container {
+  display: flex;
+  flex-direction: row;
+}
+
+.navbar-sign {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.navbar-links_container p,
+.navbar-sign p,
+.navbar-menu_container p {
+  color: #fff;
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: capitalize;
+  margin: 0 1rem;
+  cursor: pointer;
+}
+
+.navbar-sign button,
+.navbar-menu_container button {background-image: linear-gradient(to right, #DC2424 0%, #4A569D  51%, #DC2424  100%)}
+.navbar-sign button,
+.navbar-menu_container button {
+   padding: 0.7rem 1.3rem;
+   text-align: center;
+   transition: 0.5s;
+   background-size: 200% auto;
+   color: white; 
+   font-size: 16px;
+   font-weight:700;           
+   border-radius: 20px;
+   display: block;
+   border: none;
+ }
+
+ .navbar-sign button:hover,
+ .navbar-menu_container button:hover {
+  background-position: right center; /* change the direction of the change here */
+  color: white;
+  text-decoration: none;
+}
+
+
+.navbar-menu {
+  margin-left: 1rem;
+  display: none;
+  position: relative;
+}
+
+.navbar-menu svg {
+  cursor: pointer;
+}
+
+.navbar-menu_container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex-direction: column;
+  text-align: end;
+  background: var(--color-footer);
+  padding: 2rem;
+  position: absolute;
+  right: 0;
+  top: 40px;
+  margin-top: 1rem;
+  min-width: 210px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+}
+
+.navbar-menu_container p {
+  margin: 1rem 0;
+}
+
+.navbar-menu_container-links-sign {
+  display: none;
+}
+
+@media screen and (max-width: 1050px) {
+  .navbar-links_container {
+    display: none;
+  }
+
+  .navbar-menu {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .navbar {
+    padding: 2rem 4rem;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .navbar {
+    padding: 2rem;
+  }
+
+  .navbar-sign {
+    display: none;
+  }
+
+  .navbar-menu_container {
+    top: 20px;
+  }
+
+  .navbar-menu_container-links-sign {
+    display: block;
+  }
+}
\ No newline at end of file

frontend/src/components/navBar/navbar.js

+import React, { useState, useEffect } from 'react';
+import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
+import { useHistory, useLocation, Link } from "react-router-dom";
+import logo from './images/logo.svg';
+import './navbar.css';
+
+const Navbar = () => {
+    const [toggleMenu, setToggleMenu] = useState(false);
+    const history = useHistory();
+    const location = useLocation();
+
+    const isActive = (history, path) => {
+        if (history.location.pathname === path) {
+            return { color: "#F05454" }
+        } else {
+            return { color: "#ffffff" }
+        }
+    };
+
+    return (
+        <div className="gradient_background">
+            <div className="navbar">
+                <div className="navbar-links">
+                    <div className="navbar-links_logo">
+                        <img src={logo} />
+                    </div>
+                    <div className="navbar-links_container">
+                        <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
+                        <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                        <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
+                        <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
+                        <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
+                    </div>
+                </div>
+                <div className="navbar-sign">
+                    <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
+                    <Link style={isActive(history, '/register')} to="/register">
+                        <button type="button">Sign up</button>
+                    </Link>
+                </div>
+                <div className="navbar-menu">
+                    {toggleMenu
+                        ? <RiCloseLine color="#fff" size={27} onClick={() => setToggleMenu(false)} />
+                        : <RiMenu3Line color="#fff" size={27} onClick={() => setToggleMenu(true)} />}
+                    {toggleMenu && (
+                        <div className="navbar-menu_container scale-up-center">
+                            <div className="navbar-menu_container-links">
+                                <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
+                                <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                                <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
+                                <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
+                                <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
+                            </div>
+                            <div className="navbar-menu_container-links-sign">
+                                <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
+                                <Link style={isActive(history, '/register')} to="/register">
+                                    <button type="button">Sign up</button>
+                                </Link>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Navbar;
\ No newline at end of file

frontend/src/index.css

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+:root {
+  /*--font-family: 'Manrope', sans-serif;*/
+  --font-family: 'Open Sans', sans-serif;
+  /*--font-family: 'Space Mono', monospace;*/
 
+  --gradient-text: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
+  --gradient-bar: linear-gradient(103.22deg, #AE67FA -13.86%, #F49867 99.55%);
   
+  --color-bg: #040C18;
+  --color-footer : #031B34;
+  --color-blog: #042c54;
+  --color-text: #81AFDD;
+  --color-subtext: #FF8A71;
+}
\ No newline at end of file

frontend/src/main/AboutUs/aboutUs.js

+import React, { Component } from 'react';
+
+class AboutUs extends Component {
+    render() {
+        return (
+            <p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p>      
+        )
+    }
+}
+
+export default AboutUs;
\ No newline at end of file

frontend/src/main/ContactUs/contactUs.js

+import React, { Component } from 'react';
+import './styles/contactUs.css';
+import { AiFillPhone, AiFillMail } from "react-icons/ai";
+import { FaMapMarkerAlt, FaLinkedinIn, FaTwitter, FaGithub, FaGooglePlusG } from "react-icons/fa";
+
+class ContactUs extends Component {
+    render() {
+        return (
+            <div>
+                <div className='contact'>
+                    <div className='container contact__container'>
+                        <aside className='contact__aside'>
+                            <h2 className="gradient_text">Contact Us</h2>
+                            <p>
+                                If you have any feedback or comments on our service, or want to contact our administrative staff, please let us know.
+                            </p>
+                            <ul className='contact__details'>
+                                <li>
+                                    <AiFillPhone/>
+                                    <h5>+342243935</h5>
+                                </li>
+                                <li>
+                                    <AiFillMail/>
+                                    <h5>support@gmail.com</h5>
+                                </li>
+                                <li>
+                                    <FaMapMarkerAlt/>
+                                    <h5>Malabe, Sri lanka</h5>
+                                </li>
+                            </ul>
+                            <ul className='contact__socials'>
+                                <li>
+                                    <a href='#'><FaLinkedinIn/></a>
+                                </li>
+                                <li>
+                                    <a href='#'><FaTwitter/></a>
+                                </li>
+                                <li>
+                                    <a href='#'><FaGithub/></a>
+                                </li>
+                                <li>
+                                    <a href='#'><FaGooglePlusG/></a>
+                                </li>
+                            </ul>
+                        </aside>
+                        <form className='contact__form'>
+                            <div className='form__name'>
+                                <input type='text' name='First Name' placeholder='First Name' required />
+                                <input type='text' name='Last Name' placeholder='Last Name' required />
+                            </div>
+                            <input type='email' name='Email Address' placeholder='Email Address' required />
+                            <textarea name='Message' placeholder='Message' rows='7' required></textarea>
+                            <button type='submit' className='contact_us_btn'>
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default ContactUs;
\ No newline at end of file

frontend/src/main/ContactUs/styles/contactUs.css

+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    scroll-behavior: smooth;
+}
+
+body {
+    background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+}
+
+.contact__container {
+    font-family: var(--font-family);
+    padding: 4rem;
+    display: grid;
+    background: #1f2641;
+    grid-template-columns: 40% 60%;
+    gap: 4rem;
+    height: 28rem;
+    margin: 7rem 7rem;
+    border-radius: 1rem;
+}
+
+.contact__aside {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    padding-left: 3rem;
+    padding-right: 3rem;
+    border-radius: 1rem;
+    bottom: 7rem;
+    position: relative;
+}
+
+.contact__aside {
+    background: #546e88;
+
+    /* ff 3.6+ */
+    background: -moz-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 30% -100%, #000000 0%, #04619f 74%);
+
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.aside__image {
+    width: 12rem;
+    margin-bottom: 2rem;
+}
+
+.contact__aside h2 {
+    text-align: left;
+    font-weight: 800;
+    font-size: 42px;
+    letter-spacing: -0.04em;
+    margin-bottom: 3rem;
+}
+
+.contact__aside .gradient_text {
+    background: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.contact__aside p {
+    font-size: 0.9rem;
+    margin-bottom: 2rem;
+    color: var(--color-text);
+}
+
+.contact__details li {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    color: var(--color-text);
+    margin-bottom: 1rem;
+}
+
+.contact__socials {
+    display: flex;
+    gap: 0.9rem;
+    margin-top: 3rem;
+
+}
+
+.contact__socials a {
+    background: #040C18;
+    padding: 0.8rem;
+    border-radius: 100%;
+    font-size: 0.9rem;
+    transition: all 400ms ease;
+    color: aliceblue;
+}
+
+.contact__socials li {
+    display: flex;
+}
+
+.contact__socials a:hover {
+    background: transparent;
+}
+
+.contact__form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    margin-right: 4rem;
+}
+
+.contact__form .form__name {
+    display: flex;
+    gap: 1.2rem;
+}
+
+.contact__form input[type='text'] {
+    width: 50%;
+}
+
+.contact__form input,
+.contact__form textarea {
+    width: 100%;
+    padding: 1rem;
+    background: #040C18;
+    color: white;
+    border: none;
+}
+
+.contact__form .contact_us_btn {background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4  51%, #E55D87  100%)}
+.contact__form .contact_us_btn {
+   margin: 10px;
+   padding: 15px 45px;
+   text-align: center;
+   text-transform: uppercase;
+   transition: 0.5s;
+   background-size: 200% auto;
+   color: black; 
+   font-weight: 800;;           
+   border-radius: 10px;
+   display: block;
+   border: none;
+ }
+
+ .contact__form .contact_us_btn:hover {
+   background-position: right center; /* change the direction of the change here */
+   color: black;
+   text-decoration: none;
+ }
+
+
+
+
+@media screen and (max-width: 1024px) {
+    .contact {
+        padding-bottom: 0;
+    }
+
+    .contact__container {
+        gap: 1.5rem;
+        margin-top: 3rem;
+        height: auto;
+        padding: 1.5rem;
+    }
+
+    .contact__aside {
+        width: auto;
+        padding: 1.5rem;
+        bottom: 0;
+    }
+
+    .contact__form {
+        align-self: center;
+        margin-right: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .contact__container {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+        margin-top: 0;
+        padding: 0;
+    }
+
+    .contact__form {
+        margin: 0 0.5rem 3rem;
+    }
+
+    .form__name {
+        flex-direction: column;
+    }
+
+    .form__name input[type='text'] {
+        width: 100%;
+    }
+}
+
+.contact__container {
+    background: var(--color-footer);
+
+    /* ff 3.6+ */
+    background: -moz-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
\ No newline at end of file

frontend/src/main/Home/home.js

+import React, { Component } from 'react';
+import './styles/home.css';
+
+class Home extends Component {
+    render() {
+        return (
+            <div className="gradient_background">
+                <div className="home home_padding">
+                    <div className="home_content">
+                        <h1 className="gradient_text">EDUCATIONAL VIDEO SUMMARIZER AND DIGITAL HUMAN ASSISTANT</h1>
+                        <p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p>
+                    </div>     
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Home;
\ No newline at end of file

frontend/src/main/Home/styles/home.css

+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--color-bg);
+}
+
+a {
+  color: unset;
+  text-decoration: none;
+}
+
+.home_content .gradient_text {
+  background: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.home_padding {
+  padding: 4rem 6rem;
+}
+
+.home {
+    display: flex;
+    flex-direction: row;
+}
+
+.home_content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-right: 5rem;
+}
+
+.home_content h1 {
+    font-family: var(--font-family);
+    font-weight: 800;
+    font-size: 62px;
+    line-height: 75px;
+    letter-spacing: -0.04em;
+}
+
+.home_content p {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 28px;
+    color: var(--color-text);
+    margin-top: 1.5rem;
+}
+
+@media screen and (max-width: 1050px) {
+    .home{
+        flex-direction: column;
+    }
+
+    .home_content {
+        margin: 0 0 3rem;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .home_content h1 {
+        font-size: 48px;
+        line-height: 60px;
+    }
+
+    .home_content p {
+        font-size: 16px;
+        line-height: 24px;
+    }
+}
+
+@media screen and (max-width: 490px) {
+    .home_content h1 {
+        font-size: 36px;
+        line-height: 48px;
+    }
+
+    .home_content p {
+        font-size: 14px;
+        line-height: 24px;
+    }
+
+}
\ No newline at end of file

frontend/src/main/Login/login.js

+import React, { Component } from 'react';
+
+class Login extends Component {
+    render() {
+        return (
+            <div className="gradient_background">
+                <p>Login </p>      
+            </div>
+        )
+    }
+}
+
+export default Login;
\ No newline at end of file

frontend/src/main/SignUp/signUp.js

+import React, { Component } from 'react';
+import './styles/signUp.css';
+
+class SignUp extends Component {
+    render() {
+        return (
+            <div className="gradient_background">
+                <p>signUp</p>      
+            </div>
+        )
+    }
+}
+
+export default SignUp;
\ No newline at end of file

frontend/src/main/SignUp/styles/signUp.css

+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    scroll-behavior: smooth;
+}
+
+body {
+    background: var(--color-bg);
+}
+
+a {
+    color: unset;
+    text-decoration: none;
+}
+
+.gradient_background {
+    background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+}
\ No newline at end of file

frontend/src/main/home.js

-import React, {Component} from 'react';
-
-class Home extends Component {
-    render() {
-        return (
-            <div>
-                welcome
-            </div>
-        )
-    }
-}
-
-export default Home;
\ No newline at end of file

frontend/src/routes/pageRoutes.js

@@ -4,15 +4,26 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 //import pages
 import Home from "../main/home";
 import DigitalHuman from '../digitalHuman/digitalHuman';
+import Home from "../main/Home/home";
+import Navbar from '../components/navBar/navbar';
+import AboutUs from '../main/AboutUs/aboutUs';
+import SignUp from '../main/SignUp/signUp';
+import Login from '../main/Login/login';
+import ContactUs from '../main/ContactUs/contactUs';
 
 function PageRoutes() {
     return (
         <div>
             <Router>
+                <Navbar/>
                 <section className="content">
                     <Switch>
                         <Route path="/" component={Home} exact/>
                         <Route path="/digital-human" component={DigitalHuman}/>
+                        <Route path="/about-us" component={AboutUs}/>
+                        <Route path="/contact-us" component={ContactUs}/>
+                        <Route path="/register" component={SignUp}/>
+                        <Route path="/login" component={Login}/>
                     </Switch>
                 </section>
             </Router>