Refactored some things in the frontend

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 {
@@ -69,4 +73,4 @@ video {
   .btn {
     width: 100%;
   }
-}
+}

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 />
+    </>
+  );
+}