go with react-bootstrap for now

pages/index.js

@@ -9,6 +9,9 @@ import DateSelect from '../components/dateSelect'
 import Contact from '../components/contact'
 import Driver from '../components/driver'
 
+import Form from 'react-bootstrap/Form'
+import Button from 'react-bootstrap/Button'
+
 export default function Home() {
   return (
     <div className="container">
@@ -18,20 +21,18 @@ export default function Home() {
       </Head>
 
       <main>
-        <h1 className="title">Pfadi Bussle Buchen</h1>
+        <h1>Pfadi Bussle Buchen</h1>
 
-        <p className="description">
-          Du willst das Pfadi Bussle buchen? Hier bist du richtig!
-        </p>
+        <p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
 
         <AppStore>
-          <form className="bookingForm">
+          <Form>
             <RangeSelect />
             <DateSelect />
             <Contact />
 
-            <input type="submit" />
-          </form>
+            <Button variant="primary">Reservieren</Button>
+          </Form>
         </AppStore>
       </main>
 
@@ -39,87 +40,7 @@ export default function Home() {
         <a>Freundeskreis des VCP Rosenfeld</a>
       </footer>
 
-      <style jsx>{`
-        .container {
-          min-height: 100vh;
-          padding: 0 0.5rem;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        main {
-          padding: 5rem 0;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        footer {
-          width: 100%;
-          height: 100px;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        footer img {
-          margin-left: 0.5rem;
-        }
-
-        footer a {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        a {
-          color: inherit;
-          text-decoration: none;
-        }
-
-        .title a {
-          color: #0070f3;
-          text-decoration: none;
-        }
-
-        .title a:hover,
-        .title a:focus,
-        .title a:active {
-          text-decoration: underline;
-        }
-
-        .title {
-          margin: 0;
-          line-height: 1.15;
-          font-size: 4rem;
-        }
-
-        .title,
-        .description {
-          text-align: center;
-        }
-
-        .description {
-          line-height: 1.5;
-          font-size: 1.5rem;
-        }
-
-        .bookingForm {
-          width: 80%;
-        }
-
-        @media (max-width: 600px) {
-          .grid {
-            width: 100%;
-            flex-direction: column;
-          }
-        }
-      `}</style>
+      <style jsx>{``}</style>
 
       <style jsx global>{`
         html,