Merge pull request #6 from aichner/improve-page-1

Add improve-page-1 to master
aichner · Apr 26, 2020 · 6ecaf71 · 6ecaf71
2 parents 504528e + 9d104a8
commit 6ecaf71
Show file tree

Hide file tree

Showing 29 changed files with 410 additions and 250 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "company-homepage",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "(EUPL-1.2)",
   "homepage": ".",
@@ -10,6 +10,7 @@
     "gh-pages": "^2.2.0",
     "mdbreact": "mdbreact-4.25.6.tgz",
     "node-sass": "^4.13.0",
+    "react-helmet": "^6.0.0",
     "react-redux": "^7.1.1",
     "react-redux-firebase": "^2.4.1",
     "react-router-dom": "^5.0.1",

diff --git a/public/404.html b/public/404.html
@@ -76,12 +76,12 @@
       href="%PUBLIC_URL%/fav/favicon-16x16.png"
     />
     <link rel="manifest" href="%PUBLIC_URL%/fav/manifest.json" />
-    <meta name="msapplication-TileColor" content="#ff8910" />
+    <meta name="msapplication-TileColor" content="#f61a42" />
     <meta
       name="msapplication-TileImage"
       content="%PUBLIC_URL%/fav/ms-icon-144x144.png"
     />
-    <meta name="theme-color" content="#ff8910" />
+    <meta name="theme-color" content="#f61a42" />
     <!-- Primary Meta Tags -->
     <title>Werbeagentur Christian Aichner - Ihr Partner</title>
     <meta name="title" content="Werbeagentur Christian Aichner - Ihr Partner" />

diff --git a/public/index.html b/public/index.html
@@ -80,12 +80,12 @@
       href="%PUBLIC_URL%/fav/favicon-16x16.png"
     />
     <link rel="manifest" href="%PUBLIC_URL%/fav/manifest.json" />
-    <meta name="msapplication-TileColor" content="#ff8910" />
+    <meta name="msapplication-TileColor" content="#f61a42" />
     <meta
       name="msapplication-TileImage"
       content="%PUBLIC_URL%/fav/ms-icon-144x144.png"
     />
-    <meta name="theme-color" content="#ff8910" />
+    <meta name="theme-color" content="#f61a42" />
     <!-- Primary Meta Tags -->
     <title>Werbeagentur Christian Aichner - Ihr Partner</title>
     <meta name="title" content="Werbeagentur Christian Aichner - Ihr Partner" />

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -0,0 +1,27 @@
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <!--
+  created with Free Online Sitemap Generator www.xml-sitemaps.com 
+  -->
+  <url>
+    <loc>https://aichner-christian.com/</loc>
+    <lastmod>2020-04-25T19:31:32+00:00</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://aichner-christian.com/location/</loc>
+    <lastmod>2020-04-25T19:31:32+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://aichner-christian.com/branding</loc>
+    <lastmod>2020-04-25T19:31:32+00:00</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://aichner-christian.com/about</loc>
+    <lastmod>2020-04-25T19:31:32+00:00</lastmod>
+    <priority>0.60</priority>
+  </url>
+</urlset>
diff --git a/src/App.js b/src/App.js
@@ -17,7 +17,7 @@ import Routes from "./Routes";
 
 //> Configuration
 // Is the homepage ready to launch?
-const isLive = false;
+const isLive = true;
 
 class App extends React.Component {
   state = {

diff --git a/src/Routes.js b/src/Routes.js
@@ -5,21 +5,16 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 
 //> Components
-/**
- * HomePage: A basic template page
- */
 import {
   HomePage,
   MessagePage,
-  LoginPage,
-  ProfilePage,
   PrintingPage,
   BrandingPage,
   LocationPage,
 } from "./components/pages";
 
 //> MessagePage content
-const messagePage = ["about", "privacy"];
+const messagePage = ["about", "privacy", "thankyou"];
 
 class Routes extends React.Component {
   render() {

diff --git a/src/components/molecules/Footer/footer.scss b/src/components/molecules/Footer/footer.scss
@@ -16,7 +16,6 @@
 // Footer
 footer {
   transition: all 0.5s ease;
-
   a {
     color: #6c757d !important;
     &:hover {
@@ -88,6 +87,7 @@ footer {
   // Company img
   svg {
     width: 80%;
+    max-width: 200px;
   }
 
   // Dark Mode

diff --git a/src/components/molecules/Footer/index.jsx b/src/components/molecules/Footer/index.jsx
@@ -2,7 +2,7 @@
 // Contains all the functionality necessary to define React components
 import React from "react";
 // React Router DOM bindings
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
@@ -15,6 +15,7 @@ import {
   MDBBtn,
   MDBSwitch,
   MDBBadge,
+  MDBSmoothScroll,
 } from "mdbreact";
 
 //> Images
@@ -58,6 +59,8 @@ class Footer extends React.PureComponent {
   };
 
   render() {
+    const { location } = this.props;
+
     return (
       <MDBFooter color={this.props.mode ? "agency-dark" : "white text-dark"}>
         <MDBRow className="social">
@@ -260,7 +263,11 @@ class Footer extends React.PureComponent {
                     Villach-Landskron, Kärnten, AT
                   </li>
                 </Link>
-                <a href="https://termin.aichner.cloud" target="_blank">
+                <a
+                  href="https://termin.aichner.cloud"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <li className="list-unstyled">
                     <MDBIcon far icon="calendar" />
                     Termin ausmachen
@@ -295,9 +302,19 @@ class Footer extends React.PureComponent {
             </MDBCol>
             <MDBCol md="12" className="text-center my-5">
               <h4>{this.state.slogan}</h4>
-              <MDBBtn size="lg" rounded color="agency-red">
-                Kontakt
-              </MDBBtn>
+              {location.pathname === "/" ? (
+                <MDBSmoothScroll to="contactForm">
+                  <MDBBtn size="lg" rounded color="agency-red">
+                    Kontakt
+                  </MDBBtn>
+                </MDBSmoothScroll>
+              ) : (
+                <Link exact to="/">
+                  <MDBBtn size="lg" rounded color="agency-red">
+                    Kontakt
+                  </MDBBtn>
+                </Link>
+              )}
             </MDBCol>
           </MDBRow>
         </MDBContainer>
@@ -342,7 +359,7 @@ class Footer extends React.PureComponent {
   }
 }
 
-export default Footer;
+export default withRouter(Footer);
 
 /**
  * SPDX-License-Identifier: (EUPL-1.2)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
@@ -1,7 +1,7 @@
 //> React
 // Contains all the functionality necessary to define React components
 import React from "react";
-import { withRouter, Link } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
@@ -45,19 +45,6 @@ class Navbar extends React.Component {
     this.state.collapseID === collapseID && this.setState({ collapseID: "" });
   };
 
-  // Get navbar mode
-  getMode = () => {
-    let opts = {};
-
-    if (this.props.darkMode) {
-      opts["dark"] = "dark";
-    } else {
-      opts["light"] = "light";
-    }
-
-    return opts;
-  };
-
   render() {
     const overlay = (
       <div
@@ -78,7 +65,8 @@ class Navbar extends React.Component {
       <div>
         <MDBNavbar
           color={this.props.darkMode ? "agency-dark" : "white"}
-          {...this.getMode()}
+          light={!this.props.darkMode}
+          dark={this.props.darkMode}
           expand="md"
           fixed="top"
           scrolling
@@ -109,9 +97,15 @@ class Navbar extends React.Component {
                   </a>
                 </MDBNavItem>
                 <MDBNavItem>
-                  <Link to="/me">
-                    <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
-                  </Link>
+                  {location.pathname === "/" ? (
+                    <MDBSmoothScroll to="contactForm">
+                      <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
+                    </MDBSmoothScroll>
+                  ) : (
+                    <MDBNavLink exact to="/">
+                      <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
+                    </MDBNavLink>
+                  )}
                 </MDBNavItem>
                 <MDBNavItem>
                   {location.pathname === "/" ? (

diff --git a/src/components/organisms/sections/CallToAction/callToAction.scss b/src/components/organisms/sections/CallToAction/callToAction.scss
@@ -2,6 +2,13 @@
   // Hide overflow once the animation can exceed the width sometimes
   overflow: hidden;
 
+  // Mobile view moon
+  .mobile-moon{
+    max-height: 100px;
+    left: 10%;
+    margin: auto;
+  }
+
   padding-top: 7.5rem;
   padding-bottom: 7.5rem;
   h2 {

diff --git a/src/components/organisms/sections/CallToAction/index.jsx b/src/components/organisms/sections/CallToAction/index.jsx
@@ -2,15 +2,23 @@
 // Contains all the functionality necessary to define React components
 import React from "react";
 // React Router DOM bindings
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
 
 //> Additional libraries
 // Parallax
 import { Parallax } from "react-scroll-parallax";
 
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
-import { MDBRow, MDBCol, MDBBtn, MDBView, MDBIcon, MDBMask } from "mdbreact";
+import {
+  MDBRow,
+  MDBCol,
+  MDBBtn,
+  MDBView,
+  MDBIcon,
+  MDBMask,
+  MDBSmoothScroll,
+} from "mdbreact";
 
 //> Images
 // Rocket
@@ -25,7 +33,7 @@ class CallToAction extends React.Component {
     const { darkMode } = this.props;
 
     return (
-      <section id="calltoaction">
+      <section id="calltoaction" className={darkMode ? "dark" : "light"}>
         <MDBRow>
           <MDBCol className="text-center">
             <MDBRow className="space-left">
@@ -53,22 +61,26 @@ class CallToAction extends React.Component {
               Es ist einfach, <strong>jetzt</strong> zu starten!
             </h2>
             <p>Und der Einstieg und die Erstberatung sind kostenlos.</p>
-            <Link to="/analysis">
+            <MDBSmoothScroll to="contactForm">
               <MDBBtn color="agency-red" size="lg">
                 <MDBIcon icon="rocket" className="pr-2" />
                 Jetzt starten
               </MDBBtn>
-            </Link>
+            </MDBSmoothScroll>
           </MDBCol>
           <MDBCol>
-            <MDBRow className="space-right">
+            <MDBRow className="space-right mt-5 mt-sm-0">
               <MDBCol>
-                <MDBView>
+                <MDBView className="d-none d-sm-block">
                   <Parallax className="planet2" y={[60, 0]} tagOuter="figure">
                     <img className="rotate" src={planet1} alt="Moon" />
                   </Parallax>
                   <MDBMask />
                 </MDBView>
+                <MDBView className="d-block d-sm-none">
+                  <img className="mobile-moon" src={planet1} alt="Moon" />
+                  <MDBMask />
+                </MDBView>
               </MDBCol>
             </MDBRow>
           </MDBCol>