Refactored some things in the frontend

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,11 @@
   font-family: "PT Sans", sans-serif;
 }
 
+:root {
+  --primary: rgb(41, 63, 87);
+  --secondary: #fff
+}
+
 .home,
 .about,
 .products,
@@ -28,7 +33,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,9 @@ 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";
 
 function App() {
   return (
@@ -15,8 +15,8 @@ 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} />
         </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>
-            <Link to="/">E-Mail</Link>
-            <Link to="/">Mastodon</Link>
+            <a href="mailto:marco.camenzind@students.ffhs.ch">E-Mail</a>
+            <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/F281A7A622AF5B9E7742C0FB635DE2A22BDC3C76">GPG-Key</a>
           </div>
         </div>
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
             <h2>Rechtliches</h2>
             <Link to="/">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;
-  color: #BDC3C7;
+  background: var(--primary);
+  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,7 +19,7 @@ video {
 }
 
 .hero-container > h1 {
-  color: #fff;
+  color: var(--primary);
   font-size: 100px;
   margin-top: -100px;
 }
@@ -34,10 +34,14 @@ video {
 
 .hero-btns {
   margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .hero-btns .btn {
   margin: 6px;
+  align-items: center;
 }
 
 .fa-play-circle {

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
+          Anleitung
         </Button>
         <Button
           className="btns"
           buttonStyle="btn--primary"
           buttonSize="btn--large"
         >
-          WATCH TRAILER <i className="far fa-play-circle" />
+         Einloggen (wenn du schon einmal mitgemacht hast) 
+        </Button>
+        <Button
+          className="btns"
+          buttonStyle="btn--primary"
+          buttonSize="btn--large"
+        >
+         Registrieren (falls du das erste Mal hier bist) 
         </Button>
       </div>
     </div>

frontend/src/components/Navbar.css

@@ -1,5 +1,5 @@
 .navbar {
-  background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%);
+  background: linear-gradient(90deg, rgb(41, 63, 87) 0%, rgb(41, 63, 87) 100%);
   height: 80px;
   display: flex;
   justify-content: center;

frontend/src/components/pages/Home.js

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

frontend/src/components/pages/Products.js

@@ -1,12 +0,0 @@
-import React from "react";
-import "../../App.css";
-import Footer from "../../Footer";
-
-export default function Products() {
-  return (
-    <>
-      <h1 className="products">PRODUCTS</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