Further redesign and refactoring

frontend/src/components/HeroSection.css

@@ -26,7 +26,7 @@ video {
 
 .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;
@@ -44,6 +44,13 @@ video {
   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

@@ -9,13 +9,6 @@ function HeroSection() {
     <div className="hero-container">
       <h1>Herzlich Willkommen</h1>
       <div className="hero-btns">
-        <Button
-          className="btns"
-          buttonStyle="btn--primary"
-          buttonSize="btn--large"
-        >
-          Anleitung
-        </Button>
         <Button
           className="btns"
           buttonStyle="btn--primary"
@@ -30,6 +23,13 @@ function HeroSection() {
         >
          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, rgb(41, 63, 87) 0%, rgb(41, 63, 87) 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;
-    color: #6c7a89;
+    background: var(--primary);
+    color: var(--secondary);
     transition: 250ms;
   }
 }

frontend/src/components/pages/Privacy.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+
+export default function SignUp() {
+  return (
+    <>
+      <h1 className="sign-up">SIGN UP</h1>
+      <Footer />
+    </>
+  );
+}