Common UI updated

frontend/package-lock.json

@@ -9656,6 +9656,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

@@ -15,6 +15,7 @@
     "react-bootstrap-validation": "^0.1.11",
     "react-router-dom": "^5.3.0",
     "react-select": "^5.0.0",
+    "react-icons": "^4.3.1",
     "react-validation": "^3.0.7"
   },
   "scripts": {

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 {
+  padding: 0.5rem 1rem;
+  color: #fff;
+  background: #FF4820;
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 25px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.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 } from 'react';
+import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
+import logo from './images/logo.svg';
+import './navbar.css';
+
+const Navbar = () => {
+    const [toggleMenu, setToggleMenu] = useState(false);
+
+    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><a href="/">Home</a></p>
+                        <p><a href="#">Video summarizer</a></p>
+                        <p><a href="#">Digital human</a></p>
+                        <p><a href="/about-us">About us</a></p>
+                        <p><a href="#">Contact us</a></p>
+                    </div>
+                </div>
+                <div className="navbar-sign">
+                    <p>Sign in</p>
+                    <button type="button">Sign up</button>
+                </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><a href="/">Home</a></p>
+                                <p><a href="#">Video summarizer</a></p>
+                                <p><a href="#">Digital human</a></p>
+                                <p><a href="#">About us</a></p>
+                                <p><a href="#">Contact us</a></p>
+                            </div>
+                            <div className="navbar-menu_container-links-sign">
+                                <p>Sign in</p>
+                                <button type="button">Sign up</button>
+                            </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;
-}
-
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+
+:root {
+  --font-family: 'Manrope', sans-serif;
+
+  --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/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:  var(--gradient-text);
+  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 (
+            <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 Login;
\ No newline at end of file

frontend/src/main/SignUp/signUp.js

+import React, { Component } from 'react';
+
+class SignUp 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 SignUp;
\ 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

@@ -2,15 +2,23 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 //import pages
-import Home from "../main/home";
+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';
 
 function PageRoutes() {
     return (
         <div>
             <Router>
+                <Navbar/>
                 <section className="content">
                     <Switch>
                         <Route path="/" component={Home} exact/>
+                        <Route path="/about-us" component={AboutUs}/>
+                        <Route path="/register" component={SignUp}/>
+                        <Route path="/login" component={Login}/>
                     </Switch>
                 </section>
             </Router>