Merge pull request #11 from aichner/add-analysis-page-1

Add analysis page 1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "company-homepage",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": true,
   "license": "(EUPL-1.2)",
   "homepage": ".",

src/App.js

@@ -9,7 +9,7 @@ import { BrowserRouter as Router } from "react-router-dom";
  * Footer: Global Footer
  * Navbar: Global navigation bar
  */
-import { Footer, Navbar } from "./components/molecules";
+import { Footer, Navbar, CookieModal } from "./components/molecules";
 import { DevelopmentPage } from "./components/pages";
 import { ScrollToTop } from "./components/atoms";
 // Routes
@@ -37,6 +37,7 @@ class App extends React.Component {
               <Navbar darkMode={this.state.darkMode} />
               <main>
                 <Routes globalProps={{ ...this.state }} />
+                <CookieModal />
               </main>
               <Footer darkMode={this.state.darkMode} />
             </div>

src/Routes.js

@@ -12,6 +12,7 @@ import {
   BrandingPage,
   LocationPage,
   ErrorPage,
+  AnalysisPage,
 } from "./components/pages";
 
 //> MessagePage content
@@ -49,6 +50,13 @@ class Routes extends React.Component {
             <BrandingPage {...props} globalProps={globalProps} />
           )}
         />
+        <Route
+          exact
+          path="/analysis"
+          render={(props) => (
+            <AnalysisPage {...props} globalProps={globalProps} />
+          )}
+        />
         {messagePage.map((page, i) => {
           return (
             <Route

src/components/molecules/CookieModal/index.jsx

@@ -0,0 +1,65 @@
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBContainer,
+  MDBBtn,
+  MDBModal,
+  MDBModalBody,
+  MDBIcon,
+  MDBRow,
+} from "mdbreact";
+
+class ModalPage extends React.Component {
+  state = {
+    modal1: localStorage.getItem("cookie") ? false : true,
+  };
+
+  toggle = (nr) => () => {
+    let modalNumber = "modal" + nr;
+
+    this.setState(
+      {
+        [modalNumber]: !this.state[modalNumber],
+      },
+      () => {
+        if (!localStorage.getItem("cookie")) {
+          localStorage.setItem("cookie", true);
+        }
+      }
+    );
+  };
+
+  render() {
+    return (
+      <MDBModal
+        isOpen={this.state.modal1}
+        toggle={this.toggle(1)}
+        frame
+        position="bottom"
+      >
+        <MDBModalBody className="text-center py-4">
+          <MDBRow className="justify-content-center align-items-center">
+            <p className="pt-3 pr-2 text-left">
+              Wir verwenden Cookies, um die Funktionsfähigkeit der Website
+              aufrecht zu erhalten.
+            </p>
+            <MDBBtn color="agency-red" onClick={this.toggle(1)} size="lg">
+              Ok, danke
+            </MDBBtn>
+          </MDBRow>
+        </MDBModalBody>
+      </MDBModal>
+    );
+  }
+}
+
+export default ModalPage;
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Werbeagentur Christian Aichner
+ */

src/components/molecules/Navbar/index.jsx

@@ -1,7 +1,8 @@
 //> React
 // Contains all the functionality necessary to define React components
 import React from "react";
-import { withRouter } from "react-router-dom";
+// Router bindings
+import { withRouter, Link } from "react-router-dom";
 
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
@@ -97,15 +98,9 @@ class Navbar extends React.Component {
                   </a>
                 </MDBNavItem>
                 <MDBNavItem>
-                  {location.pathname === "/" ? (
-                    <MDBSmoothScroll to="contactForm">
-                      <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
-                    </MDBSmoothScroll>
-                  ) : (
-                    <MDBNavLink exact to="/">
-                      <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
-                    </MDBNavLink>
-                  )}
+                  <MDBNavLink exact to="/analysis">
+                    <MDBBtn color="agency-red">Kostenlose Analyse</MDBBtn>
+                  </MDBNavLink>
                 </MDBNavItem>
                 <MDBNavItem>
                   {location.pathname === "/" ? (

src/components/molecules/index.js

@@ -2,11 +2,9 @@
 // Import all components to export them for easy access from parent components
 import Footer from "./Footer";
 import Navbar from "./Navbar";
+import CookieModal from "./CookieModal";
 
-export {
-  Footer,
-  Navbar,
-};
+export { Footer, Navbar, CookieModal };
 
 /**
  * SPDX-License-Identifier: (EUPL-1.2)

src/components/organisms/sections/CallToAction/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 } from "react-router-dom";
 
 //> Additional libraries
 // Parallax
@@ -61,12 +61,12 @@ class CallToAction extends React.Component {
               Es ist einfach, <strong>jetzt</strong> zu starten!
             </h2>
             <p>Und der Einstieg und die Erstberatung sind kostenlos.</p>
-            <MDBSmoothScroll to="contactForm">
+            <Link to="/analysis">
               <MDBBtn color="agency-red" size="lg">
                 <MDBIcon icon="rocket" className="pr-2" />
                 Jetzt starten
               </MDBBtn>
-            </MDBSmoothScroll>
+            </Link>
           </MDBCol>
           <MDBCol>
             <MDBRow className="space-right mt-5 mt-sm-0">

src/components/organisms/sections/ContactForm/contactForm.scss

@@ -46,6 +46,11 @@
       width: 5000px !important;
     }
   }
+  .form-check-input[type="checkbox"].filled-in:checked + label:after,
+  label.btn input[type="checkbox"].filled-in:checked + label:after {
+    background-color: #4285f4;
+    border: 2px solid #4285f4;
+  }
 }
 
 /** 

src/components/organisms/sections/ContactForm/index.jsx

@@ -2,7 +2,7 @@
 // Contains all the functionality necessary to define React components
 import React from "react";
 // Router
-import { withRouter } from "react-router-dom";
+import { withRouter, Link } from "react-router-dom";
 
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
@@ -14,6 +14,7 @@ import {
   MDBCard,
   MDBCardBody,
   MDBAlert,
+  MDBInput,
   MDBIcon,
 } from "mdbreact";
 
@@ -34,12 +35,26 @@ import "./contactForm.scss";
 
 class ContactForm extends React.Component {
   state = {
-    fullname: "",
-    email: "",
     phone: "",
+    full_name: "",
+    email: "",
     note: "",
   };
 
+  componentDidMount = () => {
+    const info = localStorage.getItem("info")
+      ? JSON.parse(localStorage.getItem("info"))
+      : null;
+
+    // Set the info
+    info &&
+      this.setState({
+        full_name: info.full_name,
+        email: info.email,
+        company: info.company,
+      });
+  };
+
   onTextChange = (e) => {
     this.setState({
       [e.target.name]: e.target.value,
@@ -56,7 +71,7 @@ class ContactForm extends React.Component {
     e.preventDefault();
 
     this.props.createContact({
-      fullname: this.state.fullname,
+      full_name: this.state.full_name,
       email: this.state.email,
       phone: this.state.phone,
       note: this.state.note,
@@ -77,9 +92,12 @@ class ContactForm extends React.Component {
                   <h3 className="font-weight-bold">Kontakt aufnehmen</h3>
                   <p className="text-muted">
                     Du hast eine Projektidee und bist Dir nicht sicher bezüglich
-                    deren Umsetzung? Du benötigst einen Web-Shop, Imagefilm,
-                    eine Website oder eine individuelle Applikation? Zögere
-                    nicht und kontaktiere uns.
+                    deren Umsetzung?{" "}
+                    {this.state.company &&
+                      "Du willst " + this.state.company + " weiterbringen? "}
+                    Du benötigst einen Web-Shop, Imagefilm, eine Website oder
+                    eine individuelle Applikation? Zögere nicht und kontaktiere
+                    uns.
                   </p>
                   <form onSubmit={(e) => this.handleSubmit(e)}>
                     <div className="input-group my-3">
@@ -93,8 +111,8 @@ class ContactForm extends React.Component {
                         className="form-control"
                         placeholder="Deine Name"
                         aria-label="Deine Name"
-                        name="fullname"
-                        value={this.state.fullname}
+                        name="full_name"
+                        value={this.state.full_name}
                         onChange={(e) => this.onTextChange(e)}
                         aria-describedby="basic-addon"
                         required
@@ -135,7 +153,7 @@ class ContactForm extends React.Component {
                         aria-describedby="basic-addon"
                       />
                     </div>
-                    <div className="input-group mb-3">
+                    <div className="input-group mb-4">
                       <div className="input-group-prepend">
                         <span className="input-group-text" id="basic-addon">
                           <i className="fas fa-pencil-alt prefix"></i>
@@ -152,6 +170,22 @@ class ContactForm extends React.Component {
                         required
                       ></textarea>
                     </div>
+                    <MDBInput
+                      label={
+                        <p>
+                          Ich habe die{" "}
+                          <Link to="/privacy" target="_blank">
+                            Datenschutzerklärung
+                          </Link>{" "}
+                          gelesen und akzeptiert.
+                        </p>
+                      }
+                      filled
+                      type="checkbox"
+                      id="checkbox1"
+                      required
+                      containerClass="mr-5 mb-3"
+                    />
                     <MDBBtn color="agency-red" type="submit">
                       <MDBIcon icon="paper-plane" />
                       Absenden

src/components/organisms/sections/Hero/index.jsx

@@ -1,6 +1,8 @@
 //> React
 // Contains all the functionality necessary to define React components
 import React from "react";
+// Router bindings
+import { Link } from "react-router-dom";
 
 //> Additional
 // Chart
@@ -54,7 +56,9 @@ class HomePage extends React.Component {
     let max = Math.floor(100);
     let arr = [1, 2, 3, 4, 5, 6, 7, 8];
     let results = arr.map((item, i) => {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
+      return Math.floor(Math.random() * (max - min + 1)) + min > 100
+        ? 100
+        : Math.floor(Math.random() * (max - min + 1)) + min;
     });
 
     return results;
@@ -123,12 +127,12 @@ class HomePage extends React.Component {
             Unsere kostenlose Analyse zeigt Dir, welches Potential Deine Online
             Präsenz besitzt und was Du davon nutzt.
           </p>
-          <MDBSmoothScroll to="contactForm">
+          <Link to="/analysis">
             <MDBBtn size="lg" color="agency-red" className="btn-start">
               <MDBIcon icon="rocket" className="pr-2" />
               JETZT herausfinden
             </MDBBtn>
-          </MDBSmoothScroll>
+          </Link>
         </div>
         <MDBContainer
           fluid
@@ -147,12 +151,12 @@ class HomePage extends React.Component {
                   aktuellen Stand Deiner gesamten Online-Präsenz und liefert
                   individuelle und unkomplizierte Lösungen.
                 </p>
-                <MDBSmoothScroll to="contactForm">
+                <Link to="/analysis">
                   <MDBBtn size="lg" color="agency-red" className="btn-start">
                     <MDBIcon icon="rocket" className="pr-2" />
                     JETZT kostenlos herausfinden
                   </MDBBtn>
-                </MDBSmoothScroll>
+                </Link>
               </MDBCol>
             </MDBRow>
           </MDBContainer>

src/components/organisms/sections/Services/index.jsx

@@ -20,6 +20,12 @@ class Services extends React.PureComponent {
       <section id="services">
         <MDBContainer className="py-5 text-center">
           <h2 className="gidole h1-responsive font-weight-bold">Dein Nutzen</h2>
+          {this.props.info && (
+            <p className="lead">
+              Wie wir auch Dich mit <strong>{this.props.info.company}</strong>{" "}
+              weiterbringen.
+            </p>
+          )}
           <p className="lead">
             Wir bieten Dir <strong>hochwertige</strong>, auf Deine Vision
             zugeschnittene Lösungen in sämtlichen Bereichen des Marketings.

src/components/pages/AnalysisPage/analysis.scss

@@ -0,0 +1,27 @@
+#analysis,
+.showcase {
+  margin-top: 4rem !important;
+  h1 {
+    font-size: 6rem;
+    font-weight: bold;
+  }
+  .feature {
+    margin: 0.7rem 0;
+    i {
+      width: 20px;
+      text-align: center;
+      margin-right: 0.4rem;
+    }
+    small {
+      display: block;
+    }
+  }
+}
+.showcase {
+  background: #e6e6e6;
+}
+
+/** 
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Werbeagentur Christian Aichner
+ */