Add About and Booking page

Add help dropdowns on checkout
Add Image With Text component

front/src/components/ImageWithText.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    export let image: string;
+    export let toRight = false;
+</script>
+
+<div class="image-with-text" class:toRight={toRight}>
+    <img src={image} alt="With Text">
+
+    <div class="container">
+        <slot></slot>
+    </div>
+</div>
+
+<style lang="scss">
+    @import "../styles/vars";
+
+    .image-with-text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        > img {
+            margin-right: $spacing-normal;
+
+            max-width: 500px;
+            max-height: 350px;
+
+            border-radius: $border-radius-large;
+        }
+
+        > .container {
+            width: 100%;
+        }
+
+        &.toRight {
+            flex-direction: row-reverse;
+
+            > img {
+                margin-right: 0;
+                margin-left: $spacing-normal;
+            }
+        }
+    }
+</style>

front/src/pages/PageAbout.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import ImageWithText from "../components/ImageWithText.svelte";
+</script>
+
+<h1>Our story</h1>
+
+<ImageWithText image="/wathog.jpg">
+    <div class="padding">
+        <h2>How it all started</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+    </div>
+</ImageWithText>
+
+<div class="spacer" />
+
+<ImageWithText image="/dab.jpg" toRight={true}>
+    <div class="padding">
+        <h2>The hard times</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+    </div>
+</ImageWithText>
+
+<div class="spacer" />
+
+<ImageWithText image="/MenuItemLoading.svg">
+    <div class="padding">
+        <h2>Whats next</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+    </div>
+</ImageWithText>
+
+
+<style lang="scss">
+    @import "../styles/vars";
+
+    .padding {
+        padding: $spacing-normal;
+    }
+</style>

front/src/pages/PageBooking.svelte

@@ -0,0 +1 @@
+<h1>Table booking</h1>

front/src/pages/PageCart.svelte

@@ -7,6 +7,7 @@
     import Cart from "../lib/cart";
     import MenuList from "../components/MenuList.svelte";
     import BasketItem from "../components/BasketItem.svelte";
+    import DropDown from "../components/DropDown.svelte";
 
     let popularToday = getPopularToday();
 
@@ -42,6 +43,19 @@
 
 <div class="spacer" />
 
+<h2>Help</h2>
+<div class="container">
+    <DropDown name="Booking" open={true}>
+        <p>Want to reserve a table instead? <a href="/booking" use:link>You can do this here</a>!</p>
+    </DropDown>
+    <hr>
+    <DropDown name="Past Orders" open={true}>
+        <p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a>.</p>
+    </DropDown>
+</div>
+
+<div class="spacer" />
+
 <h2>Looking for something more?</h2>
 {#await popularToday}
     <p>Loading</p>
@@ -49,10 +63,6 @@
     <MenuList items={popularToday} />
 {/await}
 
-<div class="spacer" />
-
-<p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a></p>
-
 <style lang="scss">
     @import "../styles/vars";
 

front/src/pages/PageIndex.svelte

@@ -5,8 +5,8 @@
     import L from 'leaflet';
 
     import { getPopularToday } from "../lib/test-api";
-    import LoadingBar from "../components/LoadingBar.svelte";
     import AnnouncementBanner from "../components/AnnouncementBanner.svelte";
+    import LoadingBar from "../components/LoadingBar.svelte";
     import MenuList from "../components/MenuList.svelte";
 
     let items = getPopularToday();
@@ -44,12 +44,20 @@
                 <tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
             </table>
         </div>
-        <a href="/book" use:link>Ready to book a table?</a>
+        <a href="/booking" use:link>Ready to book a table?</a>
     </div>
 </div>
 
 <div class="spacer" />
 
+<h2>About Us</h2>
+<div class="container padding">
+    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+</div>
+<a href="/about" use:link>Continue reading <ArrowUpRight /></a>
+
+<div class="spacer" />
+
 <h2>Popular Today</h2>
 <div id="popular">
     {#await items}
@@ -62,12 +70,6 @@
 </div>
 <a href="/menu" use:link>See All <ArrowUpRight /></a>
 
-<div class="spacer" />
-
-<h2>About Us</h2>contact
-<p>Want to know the story of the restaurant?</p>
-<a href="/about" use:link>Continue reading <ArrowUpRight /></a>
-
 
 <style lang="scss">
     @import "../styles/vars";
@@ -182,6 +184,10 @@
         position: relative;
     }
 
+    .padding {
+        padding: $spacing-normal;
+    }
+
     @media only screen and (max-width: 900px) {
         #map {
             min-width: 400px;

front/src/routes.js

@@ -30,7 +30,7 @@ const routes = {
         userData: { showNavBar: true, fullWidth: false },
     }),
     "/about": wrap({
-        component: PageLoading,
+        asyncComponent: () => import("./pages/PageAbout.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: false },
@@ -41,6 +41,12 @@ const routes = {
         conditions: [],
         userData: { showNavBar: true, fullWidth: false },
     }),
+    "/booking": wrap({
+        asyncComponent: () => import("./pages/PageBooking.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true, fullWidth: true }
+    }),
     "/ForOhFor": wrap({
         component: Page404,
         conditions: [],