Adds screenshot to readme and improves visuals

README.md

@@ -1,15 +1,46 @@
-# Create Booking Flow starter kit
 [![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org)
 [![GitHub license](https://img.shields.io/github/license/Boulevard/create-booking-flow)](https://github.com/Boulevard/create-booking-flow/blob/master/LICENSE.md)
 [![GitHub release](https://img.shields.io/github/release/Boulevard/create-booking-flow)](https://github.com/Boulevard/create-booking-flow/releases/)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/Boulevard/create-booking-flow/compare)
 
-Create Booking Flow is the easiest way to have a custom booking flow for your [Boulevard](https://joinblvd.com) integration. By just providing basic information, your Business ID and your API Key, you can have this project up and running. This enables you tu customize your Boulevard integration easily, and gives you the power to provide a seamless experience to your end users.
+<div align="center">
+  <h2 align="center">Create Booking Flow starter kit</h2>
+
+  <p align="center">
+    <a href="https://abundant.joinblvd.com/">View Demo</a>
+    ·
+    <a href="https://github.com/Boulevard/create-booking-flow/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/Boulevard/create-booking-flow/issues">Request Feature</a>
+  </p>
+</div>
+
+
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li><a href="#about-the-project">About the project</a></li>
+    <li><a href="#setup-and-run">Setup and run</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#issues">Issues</a></li>
+  </ol>
+</details>
+
+<hr />
+
+## About the project
+<br />
+
+![Screenshot - After choosing the service and the service provider you will be presented with the date/time selection step](https://user-images.githubusercontent.com/100217514/157887586-8c9a5773-d49c-4943-8e21-fb92297fa82b.png)
+
+<br />
+
+Create Booking Flow is the easiest way to have a custom booking flow for your [Boulevard](https://joinblvd.com) integration. By just providing basic information, your Business ID and your API Key, you can have this project up and running. This enables you to customize your Boulevard integration easily, and gives you the power to provide a seamless experience to your end users.
 
 The starter kit has MapBox and Google Maps built in, alongside Google Analytics. It also has 
 multiple flows that control how the user booking flow looks like, and it's all a matter of changing the `env` configuration.
 
-## Setup and run dev
+## Setup and run
 
 This is a [typescript](https://www.typescriptlang.org/) project so it requires some experience with typescript to be able to do advanced customizations with the project. It uses [Next.js](https://nextjs.org/) framework with Material UI on top of it.