Merge pull request 'refactor/frontend-design' (#13) from refactor/frontend-design into main

Reviewed-on: #13

frontend/package.json

@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
+    "@react-hook/mouse-position": "^4.1.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "npm": "^7.16.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

frontend/src/App.css

@@ -5,6 +5,12 @@
   font-family: "PT Sans", sans-serif;
 }
 
+:root {
+  --primary: rgb(41, 63, 87);
+  --secondary: #fff;
+  --third: rgb(171, 183, 183);
+}
+
 .home,
 .about,
 .products,
@@ -28,7 +34,7 @@
   background-position: center;
   background-size: fill;
   background-repeat: no-repeat;
-  color: #fff;
+  color: var(--primary);
   font-size: 100px;
 }
 

frontend/src/App.js

@@ -3,9 +3,10 @@ import Navbar from "./components/Navbar";
 import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/pages/Home";
-import Products from "./components/pages/Products";
 import SignUp from "./components/pages/SignUp";
 import Ueber from "./components/pages/Ueber";
+import Lizenzen from "./components/pages/lizenzen";
+import Privacy from "./components/pages/Privacy";
 
 function App() {
   return (
@@ -15,8 +16,9 @@ function App() {
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/services" component={Ueber} />
-          <Route path="/products" component={Products} />
           <Route path="/sign-up" component={SignUp} />
+          <Route path="/lizenzen" component={Lizenzen} />
+          <Route path="/privacy" component={Privacy} />
         </Switch>
       </Router>
     </>

frontend/src/Footer.css

@@ -1,5 +1,5 @@
 .footer-container {
-  background-color: #6C7A89;
+  background-color: rgb(41, 63, 87);
   padding: 4rem 0 2rem 0;
   display: flex;
   flex-direction: column;

frontend/src/Footer.js

@@ -15,15 +15,15 @@ function Footer() {
           </div>
           <div className="footer-link-items">
             <h2>Kontakt</h2>
-            <Link to="/">Matrix</Link>
+            <a href="mailto:marco.camenzind@students.ffhs.ch">E-Mail</a>
-            <Link to="/">E-Mail</Link>
+            <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/F281A7A622AF5B9E7742C0FB635DE2A22BDC3C76">GPG-Key</a>
-            <Link to="/">Mastodon</Link>
           </div>
         </div>
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
             <h2>Rechtliches</h2>
-            <Link to="/">Datenschutz</Link>
+            <Link to="/privacy">Datenschutz</Link>
+            <Link to="/lizenzen">Lizenzen und Bildnachweise</Link>
           </div>
         </div>
       </div>

frontend/src/components/Button.css

@@ -1,7 +1,3 @@
-:root {
-  --primary: #fff;
-}
-
 .btn {
   padding: 8px 20px;
   border-radius: 2px;
@@ -12,13 +8,13 @@
 
 .btn--primary {
   background-color: var(--primary);
-  color: #BDC3C7;
+  color: var(--secondary);
   border: 1px solid var(--primary);
 }
 
 .btn--outline {
   background-color: transparent;
-  color: #fff;
+  color: var(--primary);
   padding: 8px 20px;
   border: 1px solid var(--primary);
   transition: all 0.3s ease-out;
@@ -37,7 +33,7 @@
 .btn--large:hover,
 .btn--medium:hover {
   transition: all 0.3s ease-out;
-  background: #fff;
+  background: var(--primary);
-  color: #BDC3C7;
+  color: var(--secondary);
   transition: 250ms;
 }

frontend/src/components/HeroSection.css

@@ -7,7 +7,7 @@ video {
 }
 
 .hero-container {
-  background: url("../images/img-home.jpg") center center/cover no-repeat;
+  background: url("../images/fingerprint_biometrics.jpg") center center/cover no-repeat;
   height: 100vh;
   width: 100%;
   display: flex;
@@ -19,14 +19,14 @@ video {
 }
 
 .hero-container > h1 {
-  color: #fff;
+  color: var(--primary);
   font-size: 100px;
   margin-top: -100px;
 }
 
 .hero-container > p {
   margin-top: 8px;
-  color: #fff;
+  color: var(--secondary);
   font-size: 32px;
   font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
     "Lucida Sans", Arial, sans-serif;
@@ -34,12 +34,23 @@ video {
 
 .hero-btns {
   margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .hero-btns .btn {
   margin: 6px;
+  align-items: center;
 }
 
+.hero-btns .btn:hover{
+  background-color: var(--secondary);
+  color: var(--primary);
+  border:none;
+}
+
+
 .fa-play-circle {
   margin-left: 4px;
 }

frontend/src/components/HeroSection.js

@@ -11,17 +11,24 @@ function HeroSection() {
       <div className="hero-btns">
         <Button
           className="btns"
-          buttonStyle="btn--outline"
+          buttonStyle="btn--primary"
           buttonSize="btn--large"
         >
-          GET STARTED
+         Einloggen (wenn du schon einmal mitgemacht hast) 
         </Button>
         <Button
           className="btns"
           buttonStyle="btn--primary"
           buttonSize="btn--large"
         >
-          WATCH TRAILER <i className="far fa-play-circle" />
+         Registrieren (falls du das erste Mal hier bist) 
+        </Button>
+        <Button
+          className="btns"
+          buttonStyle="btn--primary"
+          buttonSize="btn--large"
+        >
+          Anleitung
         </Button>
       </div>
     </div>

frontend/src/components/Navbar.css

@@ -1,5 +1,5 @@
 .navbar {
-  background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%);
+  background-color: var(--primary);
   height: 80px;
   display: flex;
   justify-content: center;
@@ -19,7 +19,7 @@
 }
 
 .navbar-logo {
-  color: #fff;
+  color: var(--secondary);
   justify-self: start;
   margin-left: 20px;
   cursor: pointer;
@@ -50,7 +50,7 @@
 }
 
 .nav-links {
-  color: #fff;
+  color: var(--secondary);
   display: flex;
   align-items: center;
   text-decoration: none;
@@ -59,12 +59,12 @@
 }
 
 .nav-links:hover {
-  border-bottom: 4px solid #fff;
+  border-bottom: 4px solid var(--secondary);
   transition: all 0.2s ease-out;
 }
 
 .fa-bars {
-  color: #fff;
+  color: var(--secondary);
 }
 
 .nav-links-mobile {
@@ -93,7 +93,7 @@
   }
 
   .nav-menu.active {
-    background: #abb7b7;
+    background: var(--primary);
     left: 0;
     opacity: 1;
     transition: all 0.5s ease;
@@ -108,7 +108,7 @@
   }
 
   .nav-links:hover {
-    background-color: #fff;
+    background-color: var(--secondary);
     color: #000;
     border-radius: 0;
   }
@@ -131,7 +131,7 @@
   }
 
   .fa-times {
-    color: #fff;
+    color: var(--secondary);
     font-size: 2rem;
   }
 
@@ -144,15 +144,15 @@
     text-decoration: none;
     font-size: 1.5rem;
     background-color: transparent;
-    color: #fff;
+    color: var(--primary);
     padding: 14px 20px;
     border: 1px solid #fff;
     transition: all 0.3s ease-out;
   }
 
   .nav-links-mobile:hover {
-    background: #fff;
+    background: var(--primary);
-    color: #6c7a89;
+    color: var(--secondary);
     transition: 250ms;
   }
 }

frontend/src/components/pages/Home.js

@@ -8,7 +8,6 @@ function Home() {
   return (
     <>
       <HeroSection />
-      <Cards />
       <Footer />
     </>
   );

frontend/src/components/pages/Privacy.js

@@ -2,10 +2,10 @@ import React from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 
-export default function Products() {
+export default function SignUp() {
   return (
     <>
-      <h1 className="products">PRODUCTS</h1>
+      <h1 className="sign-up">SIGN UP</h1>
       <Footer />
     </>
   );

frontend/src/components/pages/lizenzen.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+
+export default function Lizenzen() {
+  return (
+    <>
+      <h1 className="pages_title">Lizenzen und Bildnachweise</h1>
+      <h2 className="pages_subtitle">Öffentliche Libraries</h2>
+      <h2>Bildnachweise</h2>
+      <div>
+        <ul>
+          <li>
+            Originalbild für die Startseite:{" "}
+            <a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
+              https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
+            </a>
+          </li>
+        </ul>
+      </div>
+      <Footer />
+    </>
+  );
+}

start.sh

@@ -1,2 +1,3 @@
 podman-compose down 
+podman-compose build
 podman-compose up