Started with new things for personalization

frontend/src/App.css

@@ -6,7 +6,7 @@
 }
 
 .home,
-.services,
+.about,
 .products,
 .sign-up {
   display: flex;
@@ -16,12 +16,10 @@
   font-size: 3rem;
 }
 
-.services {
-  background-image: url('images/img-9.jpg');
+.about {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  color: #fff;
   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 Services from "./components/pages/Services";
 import Products from "./components/pages/Products";
 import SignUp from "./components/pages/SignUp";
+import Ueber from "./components/pages/Ueber";
 
 function App() {
   return (
@@ -14,7 +14,7 @@ function App() {
         <Navbar />
         <Switch>
           <Route path="/" exact component={Home} />
-          <Route path="/services" component={Services} />
+          <Route path="/services" component={Ueber} />
           <Route path="/products" component={Products} />
           <Route path="/sign-up" component={SignUp} />
         </Switch>

frontend/src/Footer.css

@@ -1,5 +1,5 @@
 .footer-container {
-  background-color: #242424;
+  background-color: #6C7A89;
   padding: 4rem 0 2rem 0;
   display: flex;
   flex-direction: column;

frontend/src/Footer.js

@@ -7,60 +7,24 @@ import "@fortawesome/fontawesome-free/css/all.css";
 function Footer() {
   return (
     <div className="footer-container">
-      <section className="footer-subscription">
-        <p className="footer-subscription-heading">
-          Join the Adventure newsletter to receive our best vacation deals
-        </p>
-        <p className="footer-subscription-text">
-          You can unsubscribe at any time.
-        </p>
-        <div className="input-areas">
-          <form>
-            <input
-              type="email"
-              name="email"
-              placeholder="mail@example.com"
-              className="footer-input"
-            />
-            <Button buttonStyle="btn--outline">Subscribe</Button>
-          </form>
-        </div>
-      </section>
       <div className="footer-links">
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
-            <h2>About Us</h2>
-            <Link to="/sign-up">How it Works</Link>
-            <Link to="/">Testimonials</Link>
-            <Link to="/">Careers</Link>
-            <Link to="/">Investors</Link>
-            <Link to="/">Terms of Service</Link>
+            <h2>Informationen</h2>
+            <Link to="/">Hintergrund</Link>
+            <Link to="/">Ziel dieser Webseite</Link>
           </div>
           <div className="footer-link-items">
-            <h2>Contact Us</h2>
-            <Link to="/sign-up">How it Works</Link>
-            <Link to="/">Testimonials</Link>
-            <Link to="/">Careers</Link>
-            <Link to="/">Investors</Link>
-            <Link to="/">Terms of Service</Link>
+            <h2>Kontakt</h2>
+            <Link to="/">Matrix</Link>
+            <Link to="/">E-Mail</Link>
+            <Link to="/">Mastodon</Link>
           </div>
         </div>
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
-            <h2>Videos</h2>
-            <Link to="/sign-up">How it Works</Link>
-            <Link to="/">Testimonials</Link>
-            <Link to="/">Careers</Link>
-            <Link to="/">Investors</Link>
-            <Link to="/">Terms of Service</Link>
-          </div>
-          <div className="footer-link-items">
-            <h2>Social Media</h2>
-            <Link to="/sign-up">How it Works</Link>
-            <Link to="/">Testimonials</Link>
-            <Link to="/">Careers</Link>
-            <Link to="/">Investors</Link>
-            <Link to="/">Terms of Service</Link>
+            <h2>Rechtliches</h2>
+            <Link to="/">Datenschutz</Link>
           </div>
         </div>
       </div>

frontend/src/components/Author.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function AuthorDate() {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default AuthorDate

frontend/src/components/Button.css

@@ -12,7 +12,7 @@
 
 .btn--primary {
   background-color: var(--primary);
-  color: #242424;
+  color: #BDC3C7;
   border: 1px solid var(--primary);
 }
 
@@ -38,6 +38,6 @@
 .btn--medium:hover {
   transition: all 0.3s ease-out;
   background: #fff;
-  color: #242424;
+  color: #BDC3C7;
   transition: 250ms;
 }

frontend/src/components/Navbar.css

@@ -1,5 +1,5 @@
 .navbar {
-  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
+  background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%);
   height: 80px;
   display: flex;
   justify-content: center;
@@ -93,7 +93,7 @@
   }
 
   .nav-menu.active {
-    background: #242222;
+    background: #abb7b7;
     left: 0;
     opacity: 1;
     transition: all 0.5s ease;
@@ -109,7 +109,7 @@
 
   .nav-links:hover {
     background-color: #fff;
-    color: #242424;
+    color: #000;
     border-radius: 0;
   }
 
@@ -152,7 +152,7 @@
 
   .nav-links-mobile:hover {
     background: #fff;
-    color: #242424;
+    color: #6c7a89;
     transition: 250ms;
   }
 }

frontend/src/components/Navbar.js

@@ -23,24 +23,27 @@ function Navbar() {
   useEffect(() => {
     showButton();
   }, []);
-
   window.addEventListener("resize", showButton);
-
   return (
     <>
+      {" "}
       <nav className="navbar">
+        {" "}
         <div className="navbar-container">
+          {" "}
           <Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
-            TRVL
-            <i class="fab fa-typo3" />
-          </Link>
+            {" "}
+            Bachelorarbeit Marco Camenzind {" "}
+          </Link>{" "}
           <div className="menu-icon" onClick={handleClick}>
-            <i className={click ? "fas fa-times" : "fas fa-bars"} />
-          </div>
+            {" "}
+            <i className={click ? "fas fa-times" : "fas fa-bars"} />{" "}
+          </div>{" "}
           <ul className={click ? "nav-menu active" : "nav-menu"}>
+            {" "}
             <li className="nav-item">
               <Link to="/" className="nav-links" onClick={closeMobileMenu}>
-                Home
+                Startseite
               </Link>
             </li>
             <li className="nav-item">
@@ -49,28 +52,28 @@ function Navbar() {
                 className="nav-links"
                 onClick={closeMobileMenu}
               >
-                Services
+                Über
               </Link>
             </li>
-            <li className="nav-item">
+            <li>
               <Link
-                to="/products"
+                to="/sign-up"
                 className="nav-links"
                 onClick={closeMobileMenu}
               >
-                Products
+               Anleitung 
               </Link>
             </li>
-
             <li>
               <Link
                 to="/sign-up"
                 className="nav-links-mobile"
                 onClick={closeMobileMenu}
               >
-                Sign Up
+                Anmelden
               </Link>
             </li>
+
           </ul>
           {button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
         </div>

frontend/src/components/pages/Ueber.js

@@ -2,10 +2,10 @@ import React from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 
-export default function Services() {
+export default function Ueber() {
   return (
     <>
-      <h1 className="services">SERVICES</h1>
+      <h2 className="about">Über das Projekt</h2>
       <Footer />
     </>
   );