Home page implementatie

ReactJS/alfaprentice/package-lock.json

@@ -316,6 +316,21 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@babel/node": {
+      "version": "7.12.6",
+      "resolved": "https://registry.npmjs.org/@babel/node/-/node-7.12.6.tgz",
+      "integrity": "sha512-A1TpW2X05ZkI5+WV7Aa24QX4LyGwrGUQPflG1CyBdr84jUuH0mhkE2BQWSQAlfRnp4bMLjeveMJIhS20JaOfVQ==",
+      "requires": {
+        "@babel/register": "^7.12.1",
+        "commander": "^4.0.1",
+        "core-js": "^3.2.1",
+        "lodash": "^4.17.19",
+        "node-environment-flags": "^1.0.5",
+        "regenerator-runtime": "^0.13.4",
+        "resolve": "^1.13.1",
+        "v8flags": "^3.1.1"
+      }
+    },
     "@babel/parser": {
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
@@ -1091,6 +1106,18 @@
         "@babel/plugin-transform-typescript": "^7.12.1"
       }
     },
+    "@babel/register": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.12.1.tgz",
+      "integrity": "sha512-XWcmseMIncOjoydKZnWvWi0/5CUCD+ZYKhRwgYlWOrA8fGZ/FjuLRpqtIhLOVD/fvR1b9DQHtZPn68VvhpYf+Q==",
+      "requires": {
+        "find-cache-dir": "^2.0.0",
+        "lodash": "^4.17.19",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      }
+    },
     "@babel/runtime": {
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
@@ -6057,6 +6084,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -7077,6 +7109,14 @@
         "react-is": "^16.7.0"
       }
     },
+    "homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -10267,6 +10307,22 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-environment-flags": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz",
+      "integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==",
+      "requires": {
+        "object.getownpropertydescriptors": "^2.0.3",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
+      }
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -10808,6 +10864,11 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -12439,6 +12500,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12555,6 +12632,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-toggle-display": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-toggle-display/-/react-toggle-display-2.2.1.tgz",
+      "integrity": "sha512-KadpOhjR4rwsgmHTQ/EyXHE8XcVeaiVLfBVc5bMo/evYgWSMZhkaVxTdUOtOQUizCK54vETzrhCxRBxHkk5z1A==",
+      "requires": {
+        "@babel/node": "^7.10.5",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/preset-react": "^7.10.4",
+        "prop-types": "^15.7.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -15176,6 +15264,14 @@
         }
       }
     },
+    "v8flags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+      "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -15239,6 +15335,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

ReactJS/alfaprentice/package.json

@@ -9,8 +9,10 @@
     "react": "^17.0.1",
     "react-cookie": "^4.0.3",
     "react-dom": "^17.0.1",
+    "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-toggle-display": "^2.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

ReactJS/alfaprentice/public/index.html

@@ -12,4 +12,5 @@
 
 
   </body>
+  <script src="https://kit.fontawesome.com/e1907787e3.js" crossorigin="anonymous"></script>
 </html>

ReactJS/alfaprentice/src/Components/CTA/CTA.js

@@ -0,0 +1,24 @@
+//Modules
+import React from 'react';
+
+//Style
+import "./Cta.css"
+
+class CTA extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="Cta mt-5">
+                <div className="container">
+                    <h1 className="mb-5">{this.props.title}</h1>
+                    <a className="AP-Btn-outline">{this.props.BtnText}</a>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default CTA;

ReactJS/alfaprentice/src/Components/CTA/Cta.css

@@ -0,0 +1,13 @@
+.Cta{
+    background:linear-gradient( rgba(255, 0, 0, 0.7) 100%, rgba(255, 0, 0, 0.7)100%),url("../images/Stock.png");
+    background-size: cover;
+    padding: 50px;
+    text-align: center;
+    color: #ffffff !important;
+}
+
+.Cta h1{
+    color: #ffffff;
+    font-weight: 350 !important;
+}
+

ReactJS/alfaprentice/src/Components/Footer/Footer.css

@@ -0,0 +1,14 @@
+Footer{
+    background-color: #003581;
+    padding: 50px 100px 10px 100px;
+    color: #ffffff;
+}
+
+
+.FooterLogo{
+    width: 100%;
+}
+
+.FooterColumn{
+    max-width: 300px;
+}

ReactJS/alfaprentice/src/Components/Footer/Footer.js

@@ -0,0 +1,42 @@
+//Modules
+import React from 'react';
+
+//Style
+import "./Footer.css";
+
+//Components
+import Logo from "../images/logo-licht.png";
+
+class Footer extends React.Component {
+    render(){
+        return (
+            <footer>
+                <div className="container-fluid">
+                    <div className="row">
+                        <div className="col-md-4">
+                            <div className="FooterColumn">
+                                <img className="FooterLogo" src={Logo} />
+                            </div>
+                        </div>
+                        <div className="col-md-4">
+                            <div className="FooterColumn">
+                                <h4 className="text-center">Contact</h4>
+                                <p>Adres <br/> Mail <br/> Facebook,inst, twitter</p>
+                                </div>
+                            </div>
+                        <div className="col-md-4">
+                            <div className="FooterColumn">
+                                <h4 className="text-center">Contact</h4>
+                                <p>Adres <br/> Mail <br/> Facebook,inst, twitter</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+                <p className="text-center mt-5">Copyright © AlfaPrentice 2020 - 2021 </p>
+            </footer>
+        )
+    }
+}
+
+export default Footer;

ReactJS/alfaprentice/src/Components/GlobalStyles.css

@@ -0,0 +1,34 @@
+.AP-Btn-Primary {
+    background-color: #DE0000;
+    padding: 5px 10px;
+    color: #ffffff;
+    border-radius: 5px;
+    transition: 0.7s;
+}
+
+.AP-Btn-Primary:hover{
+    text-decoration: none !important;
+    cursor: pointer;
+    color: #DE0000;
+    background-color: #ffffff;
+    border: 1px solid #DE0000;
+}
+
+.AP-Btn-outline{
+    border: 1px solid #ffffff;
+    padding: 10px 15px;
+    color: #ffffff;
+    transition: 0.7s;
+}
+
+.AP-Btn-outline:hover{
+    text-decoration: none !important;
+    cursor: pointer;
+    background-color: #ffffff;
+    color: #DE0000;
+    opacity: 0.9;
+}
+
+.AP-color-primary{
+    color: #DE0000;
+}

ReactJS/alfaprentice/src/Components/Header/Header.css

@@ -0,0 +1,22 @@
+/* Header Styles */
+.Header{
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo img{
+    width: 150px;
+}
+
+.NavBar{
+    align-items: center;
+}
+
+.Cancel-btn{
+    font-size: 25px;
+}
+
+.Cancel-btn:hover{
+   opacity: 0.7;
+   color: #DE0000;
+}

ReactJS/alfaprentice/src/Components/Header/Header.js

@@ -1,22 +1,75 @@
 //Modules
 import React from 'react';
+import ToggleDisplay from 'react-toggle-display';
+
+//Style
+import "./Header.css";
 
 //Components
 import Logo from '../images/logo.png';
 import LogoLight from '../images/logo-licht.png'
 
+
 class Header extends React.Component {
+    constructor() {
+        super();
+        this.state = { show: false };
+      }
+    
+      handleClick() {
+        this.setState({
+          show: !this.state.show
+        });
+      }
+
     render() {
         return (
-            <header>
+            <header id="Header">
-                <div className="container">
+                <div className="d-flex Header px-4 py-3">
-                    <div className="row">
+                    <div className="logo">
                         <img src={Logo} alt="Logo" />
                     </div>
+                    
+                        <ToggleDisplay hide={this.state.show} tag="section">
+                        <div className="NavBar d-flex">
+                            <div className="NavItem mx-2">
+                                <a>Home</a>
+                            </div>
+                            <div className="NavItem mx-2">
+                                <a>Contact</a>
+                            </div>
+                            <div className="NavItem mx-2">
+                                <a className="AP-Btn-Primary" onClick={ () => this.handleClick() }>Login</a>
+                            </div>
+                            </div>
+                        </ToggleDisplay>
+                        
+                        <ToggleDisplay show={this.state.show}>
+                        <div className="NavBar d-flex">
+                            <div className="NavItem mx-2">
+                                <input placeholder="Gebruikersnaam"/>
+                            </div>
+                            <div className="NavItem mx-2">
+                            <input placeholder="Wachtwoord"/>
+                            </div>
+                            <div className="NavItem mx-2">
+                                <a className="AP-Btn-Primary">Login</a>
+                            </div>
+                            <div className="NavItem mx-2">
+                                <a className="AP-color-primary Cancel-btn" onClick={ () => this.handleClick() }><i class="fa fa-times" aria-hidden="true"></i></a>
+                            </div>
+                            </div>
+                        </ToggleDisplay>
+
+        
+                    
                 </div>  
             </header>
         )
     }
+    
 }
 
+    
+
 export default Header;

ReactJS/alfaprentice/src/Components/Hero/Hero.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+class HeroOne extends React.Component {
+    constructor(props) {
+        super(props);
+      }
+
+    render() {
+        return (
+            <div className="HomeHero">
+                    <div className="HeroContents">
+                        <h1>{this.props.title}</h1>
+                        <p>{this.props.content}</p>
+                    </div>
+                </div> 
+        )
+    }
+}
+
+export default HeroOne;

ReactJS/alfaprentice/src/Components/Layouts/DefaultLayout.js

@@ -2,12 +2,17 @@
 import react from 'react';
 
 //Components
-import { Header } from '../index';
+import { 
+        Header,
+        Footer, 
+        } from '../index';
 
-const DefaultLayout = () => {
+const DefaultLayout = (props) => {
     return(
         <div className="MainLayout">
             <Header/>
+            {props.children}
+            <Footer/>
         </div>   
     )   
 }

ReactJS/alfaprentice/src/Components/Routing/Router.js

@@ -7,6 +7,9 @@ import {
   Link
 } from "react-router-dom";
 
+//Components
+import { DefaultLayout } from '../';
+
 //Main routes
 import {HomePage} from '../';
 
@@ -27,9 +30,11 @@ class GlobalRouter extends React.Component {
       
       return ( 
               <Router>
+                  <DefaultLayout>
                     <Switch>
                         <Route exact path="/" component={HomePage} />
                     </Switch> 
+                </DefaultLayout>
               </Router>     
         );
     }

ReactJS/alfaprentice/src/Components/index.js

@@ -1,6 +1,9 @@
 //Components imports
 import GlobalRouter from "./Routing/Router";
 import Header from "./Header/Header";
+import HeroOne from "./Hero/Hero";
+import CTA from "./CTA/CTA"
+import Footer from "./Footer/Footer";
 
 //Layout imports
 import DefaultLayout from "./Layouts/DefaultLayout";
@@ -8,11 +11,16 @@ import DefaultLayout from "./Layouts/DefaultLayout";
 //Pages imports
 import HomePage from '../Pages/HomePage';
 
+//Style
+import "./GlobalStyles.css";
 
 //Components exports 
 export {
     GlobalRouter,
     Header,
+    HeroOne,
+    CTA,
+    Footer,
 }
 
 

ReactJS/alfaprentice/src/Pages/HomePage.css

@@ -0,0 +1,61 @@
+.HomeHero{
+    position: relative;
+    background-image: url("../Components/images/Stock.png");
+    padding: 150px 50px;
+    background-size: cover;
+}
+
+.HomeHero:before {
+    background: #ff0000;
+    opacity: 0.7;
+    clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
+
+.HeroContents{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 100px;
+}
+
+.HeroContents h1{
+    color: #ffffff;
+    font-size: 3.5rem !important;
+    font-weight: 350 !important;
+}
+
+.HeroContents p{
+    color: #ffffff;
+    font-size: 1.3rem !important;
+}
+
+.color-p2{
+    color: #003581;
+    font-weight: bold;
+}
+
+.color-white{
+    color: #ffffff;
+}
+
+.OpleidingItemInner{
+    background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("../Components/images/stock2.png");
+    background-size: cover;
+    background-position: center;
+    height: 300px;
+    width: 100%;
+    transition: all 0.5s;
+}
+
+.OpleidingItemInner:hover{
+    transform: scale(1.1);
+}

ReactJS/alfaprentice/src/Pages/HomePage.js

@@ -1,10 +1,55 @@
 //Modules
 import React from 'react';
 
+//Style
+import "./HomePage.css";
+
+//Components
+import {
+    HeroOne,
+    CTA,
+    } from "../Components";
+
 class HomePage extends React.Component {
     render() {
         return(
-            <div>dit is de homepage</div>
+            <div className="HomePage">
+                <HeroOne title="AlfaPrentice" content="De plek om je ideale stageplek te vinden"/>
+                <div className="container mt-5">
+                    <h2 className="color-p2 text-center">klik op je opleding en kijk welk bedrijf het meest bij jou past</h2>
+                    <div className="row mt-4">
+                        <div className="col-md-3 OpleidingItem">
+                            <div className="OpleidingItemInner d-flex">
+                                    <div className="m-auto color-white">
+                                        Opleiding 1
+                                    </div>
+                                </div>
+                            </div>
+                        <div className="col-md-3 OpleidingItem">
+                            <div className="OpleidingItemInner d-flex">
+                                    <div className="m-auto color-white">
+                                        Opleiding 1
+                                    </div>
+                                </div>
+                            </div>
+                        <div className="col-md-3 OpleidingItem">
+                            <div className="OpleidingItemInner d-flex">
+                                <div className="m-auto color-white">
+                                    Opleiding 1
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-md-3 OpleidingItem">
+                            <div className="OpleidingItemInner d-flex">
+                                <div className="m-auto color-white">
+                                    Opleiding 1
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <CTA title="ALfaPrentice is ontwikkeld om jou te helpen met het zoeken naar de beste match tussen jou en een bedrijf" BtnText="Login en begin met soliciteren"/>
+            </div>
         )
     }
 }