Add Hero to all pages

client/components/Hero.js

+import React from 'react';
+
+const Hero = (props) => {
+    return (
+        <section className="hero is-primary">
+            <div className="hero-body">
+                <div className="container">
+                    <h1 className="title">
+                        {props.title}
+                    </h1>
+                    <h2 className="subtitle">
+                        {props.subtitle}
+                    </h2>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Hero;

client/views/AddGraders.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const AddGraders = () => {
   return (
       <div>
 
         <NavBar />
+
+        <Hero title='Add Graders' subtitle='Many hands make light work' />
         
         <h1>React Router demo</h1>
         Hoi dit de AddGraders

client/views/AddStudents.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const AddStudents = () => {
   return (
@@ -7,6 +8,8 @@ const AddStudents = () => {
 
         <NavBar />
         
+        <Hero title='Add Students' subtitle='Tell me who made this exam' />
+
         <h1>React Router demo</h1>
         Hoi dit de AddStudents
       </div>

client/views/CheckStudents.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const CheckStudents = () => {
   return (
@@ -7,6 +8,8 @@ const CheckStudents = () => {
 
         <NavBar />
         
+        <Hero title='Check Students' subtitle='Sanity check for the students' />
+
         <h1>React Router demo</h1>
         Hoi dit de CheckStudents
       </div>

client/views/Grade.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const Grade = () => {
   return (
       <div>
 
         <NavBar />
+
+        <Hero title='Grade' subtitle='This is where the magic happens!' />
         
         <h1>React Router demo</h1>
         Hoi dit de Grade

client/views/Home.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const Home = () => {
   return (
@@ -7,16 +8,8 @@ const Home = () => {
 
         <NavBar />
 
-        <section className="hero is-primary">
-          <div className="hero-body">
-            <p className="title">
-              Documentation
-            </p>
-            <p className="subtitle">
-              Everything you need to <strong>create a website</strong> with Bulma
-            </p>
-          </div>
-        </section>
+        <Hero title='Home' subtitle='Zesje - open source exam grading software' />
+
         
         <h1>React Router demo</h1>
         Hoi dit de homepagina

client/views/Reset.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const Reset = () => {
   return (
       <div>
 
         <NavBar />
+
+        <Hero title='Reset' subtitle="Please don't hurt my database :(" />
         
         <h1>React Router demo</h1>
         Hoi dit de Reset

client/views/Upload.js

 import React from 'react';
 import NavBar from '../components/NavBar';
+import Hero from '../components/Hero';
 
 const Upload = () => {
   return (
@@ -7,6 +8,8 @@ const Upload = () => {
 
         <NavBar />
         
+        <Hero title='Upload' subtitle='Omnomnomnom Exams!' />
+
         <h1>React Router demo</h1>
         Hoi dit de Upload
       </div>