searchpage company cards and filter setup

ReactJS/alfaprentice/public/index.html

@@ -13,4 +13,6 @@
 
   </body>
   <script src="https://kit.fontawesome.com/e1907787e3.js" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
 </html>

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

@@ -7,21 +7,30 @@ import "./Cta.css"
 class CTA extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            BTNText : this.props.BtnText,
-            ContentText : this.props.ContentText,
-        }
     }
 
     render() {
+        function ContentSwitch(props) {
+            const BtnChecker = props.BTNText;
+            const ContentChecker = props.ContentText;
 
+            if (BtnChecker){
+                return (<a className="AP-Btn-outline">{BtnChecker}</a>);
+            }
+            if (ContentChecker){
+            return (<p>{ContentChecker}</p>);
+            }
+            else {
+                return "";
+            }
+        }
 
         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>
                     
+                    <ContentSwitch BTNText={this.props.BtnText} ContentText={this.props.ContentText}/>
                 </div>
             </div>
         )

ReactJS/alfaprentice/src/Components/Cards/Cards.css

@@ -0,0 +1,7 @@
+.CompanyResultCard .CompantResultBtn{
+    text-align: right;
+}
+
+.CompanyResultCard .row{
+    align-items: center;
+}

ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js

@@ -0,0 +1,145 @@
+//Modules
+import React from 'react';
+
+//Style
+import "./Cards.css";
+
+class CompanyResult extends React.Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="row">
+                    <div className="col-12 mt-2">
+                        <div className="CompanyResultCard mx-3">
+                            <h1 className="AP-color-primary font-weight-normal">Bedrijf 1</h1>
+                            <div className="row mt-3">
+                                <div className="col-md-8">
+                                Wij bij bedrijf 1 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn  bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
+                                </div>
+                                <div className="col-md-4 CompantResultBtn">
+                                    <a className="AP-Btn-Primary">Bekijk bedrijf</a>
+                                </div>
+                            </div>
+                            <div className="row mt-4">
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                            </div>
+                        </div>
+                        <hr className="GlobalHR"/>
+                    </div>
+
+                    <div className="col-12 mt-4">
+                        <div className="CompanyResultCard mx-3">
+                            <h1 className="AP-color-primary font-weight-normal">Bedrijf 2</h1>
+                            <div className="row mt-3">
+                                <div className="col-md-8">
+                                Wij bij bedrijf 2 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn  bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
+                                </div>
+                                <div className="col-md-4 CompantResultBtn">
+                                    <a className="AP-Btn-Primary">Bekijk bedrijf</a>
+                                </div>
+                            </div>
+                            <div className="row mt-4">
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                            </div>
+                        </div>
+                        <hr className="GlobalHR"/>
+                    </div>
+
+                    <div className="col-12 mt-4">
+                        <div className="CompanyResultCard mx-3">
+                            <h1 className="AP-color-primary font-weight-normal">Bedrijf 3</h1>
+                            <div className="row mt-3">
+                                <div className="col-md-8">
+                                Wij bij bedrijf 3 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn  bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
+                                </div>
+                                <div className="col-md-4 CompantResultBtn">
+                                    <a className="AP-Btn-Primary">Bekijk bedrijf</a>
+                                </div>
+                            </div>
+                            <div className="row mt-4">
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                            </div>
+                        </div>
+                        <hr className="GlobalHR"/>
+                    </div>
+
+                    <div className="col-12 mt-4">
+                        <div className="CompanyResultCard mx-3">
+                            <h1 className="AP-color-primary font-weight-normal">Bedrijf 4</h1>
+                            <div className="row mt-3">
+                                <div className="col-md-8">
+                                Wij bij bedrijf 4 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn  bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
+                                </div>
+                                <div className="col-md-4 CompantResultBtn">
+                                    <a className="AP-Btn-Primary">Bekijk bedrijf</a>
+                                </div>
+                            </div>
+                            <div className="row mt-4">
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-2">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                                <div className="col-md-3">
+                                    bla
+                                </div>
+                            </div>
+                        </div>
+                        <hr className="GlobalHR"/>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default CompanyResult;

ReactJS/alfaprentice/src/Components/Dropdown/Dropdown.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+
+class Dropdown extends React.Component {
+    constructor(props){
+        super(props)
+    }
+    render() {
+        return (
+            <div className="col-md-4">
+                <a class="AP-Btn-Primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    {this.props.Title}
+                </a>
+
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                    <a class="dropdown-item" href="#">{this.props.Category}</a>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Dropdown;

ReactJS/alfaprentice/src/Components/GlobalStyles.css

@@ -32,3 +32,12 @@
 .AP-color-primary{
     color: #DE0000;
 }
+
+.Container-NP{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+}
+
+.GlobalHR{
+    border: 2px solid #DE0000;
+}

ReactJS/alfaprentice/src/Components/Pages/HomePage.css

@@ -6,7 +6,7 @@
 }
 
 .HomeHero:before {
-    background: #ff0000;
+    background: #DE0000;
     opacity: 0.7;
     clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
     content: '';

ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.css

@@ -0,0 +1,9 @@
+.SearchPage hr{
+    border: 2px solid #DE0000;
+    margin-left: 0px !important;
+}
+
+.dropdown-toggle{
+    min-width: 10rem;
+    display: inline-block !important;
+}

ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.js

@@ -1,10 +1,15 @@
 //Module
 import React from 'react';
 
+//Style
+import "./InternSearchPage.css";
+
 //Component
 import {
     HeroOne,
     CTA,
+    Dropdown,
+    CompanyResults,
     } from "../../";
 
 class InternSearch extends React.Component {
@@ -12,6 +17,15 @@ class InternSearch extends React.Component {
         return (
             <div className="SearchPage">
                 <HeroOne title="Stageplek zoeken" content="Voor de opleiding Applicatie en mediaontwikkeling"/>
+                <div className="container-fluid Container-NP mb-5">
+                    <div className="row text-center my-5">
+                        <Dropdown Title="Locatie" Category="Groningen"/>
+                        <Dropdown Title="Niveau" Category="MBO Niveau 4"/>
+                        <Dropdown Title="Stageperiode" Category="01-01-2021 - 01-06-2021n"/>
+                    </div>
+                    <hr/>
+                </div>
+                <CompanyResults/>
                 <CTA title="Geen plek kunnen vinden of vragen of je ook bij een eigen benadert bedrijf stage mag lopen" ContentText="Neem dan contact op met je mentor of stage begeleider om te vragen naar de mogelijkheden"/>
             </div>
         )

ReactJS/alfaprentice/src/Components/index.js

@@ -4,6 +4,8 @@ import Header from "./Header/Header";
 import HeroOne from "./Hero/Hero";
 import CTA from "./CTA/CTA"
 import Footer from "./Footer/Footer";
+import Dropdown from "./Dropdown/Dropdown";
+import CompanyResults from "./Cards/CompanyResult";
 
 //Layout imports
 import DefaultLayout from "./Layouts/DefaultLayout";
@@ -22,6 +24,8 @@ export {
     HeroOne,
     CTA,
     Footer,
+    Dropdown,
+    CompanyResults,
 }