From 7078d994c05521056148cdc9a81f957c5e332737 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 18 Jul 2020 21:48:06 +0200
Subject: [PATCH] Finally landed on a design, created a bunch of pages.

---
 frontend/App.vue                       |   3 +-
 frontend/components/About.vue          |  34 +++
 frontend/components/Admin.vue          |  71 ++++++
 frontend/components/Cart.vue           | 241 ++++++++++++++----
 frontend/components/Home.vue           |  74 ++++--
 frontend/components/Navigation.vue     | 338 +++++++++++++++----------
 frontend/components/Shop.vue           |  85 +++++++
 frontend/components/ui/Button.vue      |  82 ++++++
 frontend/components/ui/ImageBlock.vue  |  28 ++
 frontend/components/ui/Picker.vue      |  62 +++++
 frontend/components/ui/ProductCard.vue | 130 ++++++++++
 frontend/components/ui/logo.vue        |  44 ++++
 frontend/routes.js                     |  17 +-
 13 files changed, 1006 insertions(+), 203 deletions(-)
 create mode 100644 frontend/components/About.vue
 create mode 100644 frontend/components/Admin.vue
 create mode 100644 frontend/components/Shop.vue
 create mode 100644 frontend/components/ui/Button.vue
 create mode 100644 frontend/components/ui/ImageBlock.vue
 create mode 100644 frontend/components/ui/Picker.vue
 create mode 100644 frontend/components/ui/ProductCard.vue
 create mode 100644 frontend/components/ui/logo.vue

diff --git a/frontend/App.vue b/frontend/App.vue
index 5f53dd0..817a94e 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <Navigation></Navigation>
-
     <router-view />
   </div>
 </template>
@@ -19,4 +18,4 @@ export default {
 @import './styles/normalize';
 @import './styles/icons';
 @import './styles/global';
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/About.vue b/frontend/components/About.vue
new file mode 100644
index 0000000..619482c
--- /dev/null
+++ b/frontend/components/About.vue
@@ -0,0 +1,34 @@
+<template>
+  <main id="content">
+    <div class="max-width top-show">
+      <div class="page-header">
+        <div>
+          <h1>See the difference!</h1>
+        </div>
+        <div>
+          <p>Det Andre Teatrets faste stall med utøvere – improvisatorer med lang fartstid og stor kompetanse. De holder kurs for næringslivet, spiller forestillinger på arbeidsplassen din, dukker opp på film og tv, og spiller i nesten samtlige av husets forestillinger.</p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+#content {
+  overflow: hidden
+}
+
+.page-header {
+  max-width: 840px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+</style>
diff --git a/frontend/components/Admin.vue b/frontend/components/Admin.vue
new file mode 100644
index 0000000..2fea698
--- /dev/null
+++ b/frontend/components/Admin.vue
@@ -0,0 +1,71 @@
+<template>
+  <main id="content">
+    <div class="top-show-sm col-wrap max-width">
+      <div class="page-header">
+        <h1>Add and edit products</h1>
+        <p>Det Andre Teatrets faste stall med utøvere – improvisatorer med lang fartstid og stor kompetanse. De holder kurs for næringslivet, spiller forestillinger på arbeidsplassen din, dukker opp på film og tv, og spiller i nesten samtlige av husets forestillinger.</p>
+      </div>
+      <div v-if="products && products.length" class="products">
+          <product-card v-for="product in products" :product="product" />
+      </div>
+
+      <span v-else>
+        No products found
+      </span>
+    </div>
+  </main>
+</template>
+
+<script>
+import ProductCard from '@/components/ui/ProductCard';
+
+export default {
+  components: { ProductCard },
+  data() {
+    return {
+      products: []
+    }
+  },
+  created() {
+    fetch('http://localhost:30010/api/products')
+      .then(resp => resp.json())
+      .then(products => this.products = products)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/variables';
+
+.page-header {
+  max-width: 840px;
+  margin: auto;
+  text-align: center;
+}
+
+.products {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 48px 0;
+
+  @include tablet {
+    grid-template-columns: 1fr 1fr;
+  }
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+
+  > div {
+    padding: 0 32px;
+
+    @include tablet {
+      padding: 0 16px;
+    }
+
+    @include mobile {
+      padding: 0 8px;
+    }
+  }
+}
+
+</style>
diff --git a/frontend/components/Cart.vue b/frontend/components/Cart.vue
index f699527..65f930a 100644
--- a/frontend/components/Cart.vue
+++ b/frontend/components/Cart.vue
@@ -1,91 +1,224 @@
 <template>
-  <div class="container cart">
-    <div class="row header">
-      <div class="product">
-        <h2>Product</h2>
-      </div>
-      <div class="info">
-        <h2>Quantity</h2>
-        <h2>Price</h2>
-      </div>
-    </div>
+  <main class="container cart">
+    <div class="max-width col-wrap top-show">
 
-     <div class="row">
-      <div class="product">
-        <img src="https://planetposen.no/Planetposen/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
-        
-        <div class="flex-direction-column">
-          <h3>Christmas joy</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
+      <div class="page-header">
+        <h1>Handlekurv</h1>
+      </div>
+
+
+      <div class="row header">
+        <h2>Product</h2>
+        <h2>Pris</h2>
+        <h2>Quantity</h2>
+        <h2>Delsum</h2>
+      </div>
+
+       <div class="row">
+        <div class="product">
+          <img src="https://planetposen.no/no/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
+          
+          <div class="flex-direction-column">
+            <h3>Christmas joy</h3>
+          </div>
         </div>
+        <span class="price">30.99 $</span>
+        <div class="info">
+          <Picker></Picker>
+        </div>
+        <span class="price">61.98 $</span>
       </div>
-      <div class="info">
+      <div class="row">
+        <div class="product">
+          <img src="https://planetposen.no/no/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
+          
+          <div class="flex-direction-column">
+            <h3>Christmas joy</h3>
+          </div>
+        </div>
+        <span class="price">30.99 $</span>
+        <div class="info">
+          <Picker></Picker>
+        </div>
+        <span class="price">30.99 $</span>
       </div>
+
+      <section class="checkout">
+        <h2>Totalt i handlekurven</h2>
+        <div class="checkout-summary">
+
+          <Button color="blue" :scaleRotate="true">Gå til kassen</Button>
+        </div>
+      </section>
     </div>
-  </div>
+  </main>
 </template>
 
 
 <script>
+import Picker from '@/components/ui/Picker'
+import Button from '@/components/ui/Button'
+
 export default {
-  name: 'Cart'
+  name: 'Cart',
+  components: {
+    Picker,
+    Button
+  }
 }
 </script>
 
 
 <style lang="scss" scoped>
+@import 'frontend/styles/variables';
+
+.checkout {
+  @include desktop {
+    float: right;
+    width: 55%;
+  }
+
+  h2 {
+    margin: 1rem 0;
+  }
+
+  &-summary {
+    height: 10px;
+    background-color: red;
+    width: 100%;
+  }
+}
+
+.page-header {
+  margin-bottom: 3rem;
+
+  @include mobile {
+    text-align: center;
+  }
+}
 
 .cart {
   width: 95%;
   margin: 0 auto;
 }
 
+.header {
+  h2 {
+    font-weight: 400;
+  }
+}
+
 .row {
   display: flex;
   flex-direction: row;
-  height: 150px;
+  height: 100%;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 1px solid white;
 
-  &.header {
+
+  &:first-of-type {
     height: min-content;
+  }
 
-    h2 {
+  > *:first-child {
+    width: calc(70% - 1rem);
+    // background-color: violet;
+    margin-right: 1rem;
+
+    display: flex;
+    flex-direction: row;
+
+    img {
+      height: 80px;
+      margin-right: 1rem;
+    }
+
+    h3 {
+      letter-spacing: 1.2px;
+      font-weight: normal;
+      margin: 0;
+      margin-top: 0.3rem;
+    }
+
+    p {
       font-weight: 300;
     }
   }
 
-  .product {
-    width: 60%;
-    height: 100%;
-    display: inherit;
-    flex-direction: inherit;
+  > *:nth-child(3) {
+    width: calc(15% - 1rem);
+    margin-right: 1rem;
+    display: flex;
     align-items: center;
-
-    img {
-      height: 100%;
-      width: auto;
-      margin-right: 2rem;
-    }
-
-    h3, p {
-      margin: 0;
-    }
-
-    h3 {
-      font-weight: 500;
-      font-size: 1.5rem;
-      margin-bottom: 0.5rem;
-    }
+    // background-color: navy;
   }
 
-  .info {
-    width: 40%;
-    display: inherit;
-    flex-direction: inherit;
-
-    h2 {
-      width: 50%;
-    }
+  > *:nth-child(2) {
+    width: calc(15%);
+    // background-color: #F28500;
+    font-size: 1.5rem;
+    margin: auto;
   }
+
+  > *:nth-child(4) {
+    width: calc(15%);
+    // background-color: #F28500;
+    font-size: 1.5rem;
+    margin: auto;
+  }
+
+  &:last-child {
+    // background-color: green;
+  }
+
+  img {
+    height: 100%;
+    width: auto;
+    height: 150px;
+    border-radius: 4px;
+  }
+
+  // &.header {
+  //   height: min-content;
+
+  //   h2 {
+  //     font-weight: 300;
+  //   }
+  // }
+
+  // .product {
+  //   width: 60%;
+  //   height: 100%;
+  //   display: inherit;
+  //   flex-direction: inherit;
+  //   align-items: center;
+
+  //   img {
+  //     height: 100%;
+  //     width: auto;
+  //     margin-right: 2rem;
+  //   }
+
+  //   h3, p {
+  //     margin: 0;
+  //   }
+
+  //   h3 {
+  //     font-weight: 500;
+  //     font-size: 1.5rem;
+  //     margin-bottom: 0.5rem;
+  //   }
+  // }
+
+  // .info {
+  //   width: 40%;
+  //   display: inherit;
+  //   flex-direction: inherit;
+
+  //   h2 {
+  //     width: 50%;
+  //   }
+  // }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/Home.vue b/frontend/components/Home.vue
index 8508970..c9ab9a6 100644
--- a/frontend/components/Home.vue
+++ b/frontend/components/Home.vue
@@ -1,34 +1,72 @@
 <template>
-  <div class="container">
-    <!-- <div class="img" :style="{'background-image': 'url(https://i.imgur.com/GTPZgje.jpg)'}"></div> -->
-    <div class="img" :style="{'background-image': 'url(./frontend/assets/images/IMG_1122.jpeg)'}"></div>
+  <main id="content" role="main">
+    <div class="banner green-background">
+      <div class="banner-content top-show col-wrap max-width">
+        <div>
+          <h1 class="margin-bottom--sm">Sommersalg</h1>
+          <div class="text-container accent--lg">
+            <p>Kjøp en pose for verden</p>
+          </div>
+        
+          <Button color='yellow' :scaleRotate="true">View items for sale</Button>
+        </div>
 
-    <h1>Welcome home</h1>
-  </div>
+        <div>
+          <img src="https://planet.kevinmidboe.com/no/Hjem_files/shapeimage_3.png" />
+        </div>
+      </div>
+    </div> 
+
+    <Shop />
+  </main>
 </template>
 
 <script>
+import Shop from '@/components/Shop';
+import Button from '@/components/ui/Button';
+
 export default {
   name: 'Home',
+  components: { Shop, Button }
 }
 </script>
 
 <style lang="scss" scoped>
-.container {
-  height: 200vh;
-}
+@import 'frontend/styles/variables';
+@import 'frontend/styles/spacing';
 
-.img {
-  height: calc(80vh - 80px);
+#content {
+  overflow: hidden;
   width: 100vw;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
 }
 
-h1 {
-  font-weight: 500;
-  padding: 1rem;
-  margin: 0;
+.banner {
+  height: 100%;
+  width: 100%;
+
+  &.green-background {
+    background-color: #D6F5E3;
+    color: black;
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-around;
+
+    @include mobile {
+      flex-direction: column-reverse;
+    }
+  }
 }
-</style>
\ No newline at end of file
+
+img {
+  padding-top: 1.5rem;
+
+  @include mobile {
+    display: block;
+    margin: auto;
+    width: 80%;
+  }
+}
+
+</style>
diff --git a/frontend/components/Navigation.vue b/frontend/components/Navigation.vue
index 5587771..071f232 100644
--- a/frontend/components/Navigation.vue
+++ b/frontend/components/Navigation.vue
@@ -1,148 +1,230 @@
 <template>
-  <div>
-    <nav class="mobile-only">
-      <ul class="nav-list">
-        <li class="nav-item">
-          <router-link to="/cart">
-            <i class="icon icon--basket-outline"></i>
-          </router-link>
-        </li>
-
-        <img class="logo" src="/frontend/assets/images/logo-white.png" />
-
-        <li class="nav-item">
-          <router-link to="/cart">
-            <i class="icon icon--basket-outline"></i>
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-
-    <nav class="desktop-only">
-      <ul class="nav-list">
-        <img class="logo" src="/frontend/assets/images/logo-black.png" />
-        <!-- <img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" /> -->
-
-        <li class="nav-item">
-          <router-link to="/" class="">
-            <span>Hjem</span>
-          </router-link>
-        </li>
-        <li class="nav-item">
+  <header :class="{ dark: showDarkText }">
+    <div class="main col-wrap max-width">
+      <div class="main-content" v-if="!isMobile">
+        <div class="logo">
           <router-link to="/">
-            <span>Om oss</span>
+            <logo :isDark="showDarkText"/>
           </router-link>
-        </li>
-        <li class="nav-item">
+        </div>
+
+        <ul class="main-nav-items">
+          <li v-for="item in leftNavItems">
+            <router-link :to="item.link">{{ item.name }}</router-link>
+          </li>
+        </ul>
+
+        <ul class="secondary-nav-items">
+          <li v-for="item in rightNavItems">
+            <router-link :to="item.link" class="">
+              <i v-if="item.icon" :class="'icon ' + item.icon"></i>
+              <span v-else>{{ item.name }}</span>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+      <div class="main-content" v-else>
+        <div>
           <router-link to="/">
-            <span>Produkter</span>
+            <logo :isDark="showDarkText" />
           </router-link>
-        </li>
-      </ul>
-      <ul>
-        <li class="nav-item">
-        <!-- <i class="icon icon--profile"></i> -->
-          <router-link to="/cart">
-            <i class="icon icon--basket-outline"></i>
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-  </div>
+        </div>
+
+        <div class="menu">
+          <div class="menu-toggle" :class="{ active: showMenu }" @click="showMenu = !showMenu">
+            <span v-if="!showMenu">Menu</span>
+            <span v-else>Close menu</span>
+          </div>
+
+          <div class="menu-overlay" v-if="showMenu">
+            <div class="left"></div>
+            <ul class="right">
+              <li v-for="item in leftNavItems.concat(rightNavItems)">
+                <router-link :to="item.link">
+                  <h4>{{ item.name }}</h4>
+                  <i class="icon icon--arrow-forward"></i>
+                </router-link>
+              </li>                
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
 </template>
 
 <script>
+import logo from '@/components/ui/logo';
+
 export default {
-  name: 'Navigation'
+  name: 'Navigation',
+  components: { logo },
+  data() {
+    return {
+      showDarkText: false,
+      isMobile: false,
+      showMenu: false,
+
+      leftNavItems: [{
+        name: 'Program',
+        link: '/',
+      },{
+        name: 'Om oss',
+        link: '/about'
+      },{
+        name: 'Gaveposer',
+        link: '/shop'
+      }],
+      rightNavItems: [{
+        name: 'Admin',
+        link: '/admin'
+      },{
+        name: 'Cart',
+        link: '/cart',
+        icon: 'icon--basket-outline'
+      }]
+    }
+  },
+  beforeMount() {
+    this.isMobile = window.innerWidth < 768;
+    this.showDarkText = this.knownLightBackgroundPage();
+  },
+  watch: {
+    $route(to, from) {
+      this.showMenu = false;
+      this.showDarkText = this.knownLightBackgroundPage(); 
+    },
+    showMenu(val) {
+      if (val == true)
+        this.showDarkText = false;
+      else if (this.knownLightBackgroundPage())
+        this.showDarkText = true;
+    }
+  },
+  methods: {
+    knownLightBackgroundPage() {
+      const location = window.location.href.split('#')[1]
+      return location == '/'; 
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "./frontend/styles/variables";
-@import './frontend/styles/global';
+@import "frontend/styles/variables";
 
-$nav-height: 80px;
+$nav-height: 60px;
 
-nav {
-  display: flex;
-  justify-content: space-between;
-  background-color: #3b945e; // 3
-  height: $nav-height;
-  color: #f2f2f2; // 3
+header {
+  position: absolute;
+  z-index: 10;
+  color: black;
+  width: 100%;
 
-  > ul {
-    display: flex;
-    align-items: center;
-    height: $nav-height;
-    margin: 0;
-    padding: 0;
+  &.dark a, &.dark span {
+    color: var(--color-background);
 
-    @include mobile {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    a {
-      text-decoration: unset;
-      color: inherit;
-      // height: 100%;
-    }
-
-    li {
-      height: 100%;
-      display: block;
-    }
-
-    // background-color: $green; // 1
-    // background-color: #3aafa9; // 2
-    // background-color: #3b945e; // 3
-    // color: $text-color; // 1
-    // color: white; // 2
-    // color: #f2f2f2; // 3
-
-    .logo {
-      display: block;
-      height: 100%;
-      width: auto;
-
-      @include desktop {
-        background-color: #def2f1;
-      }
-    }
-
-    .nav-item {
-      display: flex;
-      align-items: center;
-      padding: 0 0.7rem;
-      height: 100%;
-      cursor: pointer;
-
-      &:hover {
-        // background-color: #379683; // 1
-        background-color: #def2f1; // 2
-        // background-color: #57ba98; // 3
-        color: white; // 1
-        color: $text-color; // 2
-        color: #182628; // 3
-        // background-color: #8ee4af;
-      }
-
-      // &:first-of-type {
-      //   margin-left: 5rem;
-      // }
-
-      span {
-        letter-spacing: 2.5px;
-        text-transform: lowercase;
-        font-weight: 300;
-        align-items: center;
-      }
-    }
-
-    .icon {
-      font-size: 1.75rem;
-      font-weight: 700;
+    &:hover {
+      border-color: var(--color-background) !important;
     }
   }
 }
-</style>
\ No newline at end of file
+
+.main {
+  width: 100%;
+  padding-top: 1.4rem;
+  box-sizing: border-box;
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 0 2rem;
+
+    @include mobile {
+      padding: 0 0.5rem;
+    }
+  }
+}
+
+ul {
+  list-style: none;
+}
+
+a, span {
+  text-decoration: none;
+  color: white;
+  font-size: calc(1.125 * var(--text-base-size));
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    border-bottom: 2px solid white;
+  }
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.main-nav-items, .secondary-nav-items {
+  display: flex;
+  flex-direction: row;
+  padding-top: 0rem;
+
+  li {
+    float: left;
+    margin: 0 1rem;
+  }
+}
+
+
+.menu {
+  &-toggle {
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
+    z-index: 2;
+
+    &.active span {
+      border-bottom: 2px solid white;
+    }
+  }
+
+  &-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &-overlay .left {
+    height: 100%;
+    width: 30vw;
+    background-color: black;
+  }
+
+  &-overlay .right{
+    margin: 0;
+    padding-top: 5rem;
+    padding-left: 2rem;
+    width: 70vw;
+    height: 100%;
+    background-color: var(--color-background);
+
+    h4 {
+      font-size: 1.2em;
+      font-weight: 400;
+      display: inline-block;
+    }
+
+    li:not(:first-of-type) {
+      margin-top: 1rem;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/Shop.vue b/frontend/components/Shop.vue
new file mode 100644
index 0000000..0d8c9c2
--- /dev/null
+++ b/frontend/components/Shop.vue
@@ -0,0 +1,85 @@
+<template>
+  <main id="content">
+    <div class="top-show-sm col-wrap max-width">
+      <div class="page-header">
+        <h1>Webshop</h1>
+        <p>New bags are on sale every monday. Grab one now while they're in stock!</p>
+      </div>
+      <div v-if="products && products.length" class="products">
+          <product-card v-for="product in products" :product="product" />
+      </div>
+
+      <span v-else>
+        No products found
+      </span>
+    </div>
+  </main>
+</template>
+
+<script>
+import ProductCard from '@/components/ui/ProductCard';
+
+export default {
+  components: { ProductCard },
+  data() {
+    return {
+      products: []
+    }
+  },
+  created() {
+    fetch('http://localhost:30010/api/products')
+      .then(resp => resp.json())
+      .then(products => this.products = products)
+      .then(_ => this.products = this.products.concat(this.products))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/variables';
+
+.page-header {
+  max-width: 840px;
+  margin: auto;
+  text-align: center;
+
+  padding: 1.5rem 0 3rem 0;
+  > h1 {
+    margin-bottom: 2.5rem;
+  }
+
+  @include mobile {
+    padding: 1rem 0;
+
+    > h1 {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.products {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 48px 0;
+
+  @include tablet {
+    grid-template-columns: 1fr 1fr;
+  }
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+
+  > div {
+    padding: 0 32px;
+
+    @include tablet {
+      padding: 0 16px;
+    }
+
+    @include mobile {
+      padding: 0 8px;
+    }
+  }
+}
+
+</style>
diff --git a/frontend/components/ui/Button.vue b/frontend/components/ui/Button.vue
new file mode 100644
index 0000000..d7c903b
--- /dev/null
+++ b/frontend/components/ui/Button.vue
@@ -0,0 +1,82 @@
+<template>
+  <button :class="computedClass"><slot></slot></button>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'black',
+      required: false
+    },
+    small: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    scaleRotate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    computedClass() {
+      let classNames= [];
+
+      if (this.scaleRotate)
+        classNames.push('scale-rotate')
+      if (this.small)
+        classNames.push('small');
+      if (this.color)
+        classNames.push(this.color);
+      return classNames.join(' ');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+
+button {
+  padding: 20px 30px;
+  font-weight: 500;
+
+  background-color: var(--color-green);
+  color: var(--color-background);
+
+  border: unset;
+  border-radius: var(--btn-radius);
+  font-size: var(--btn-font-size);
+
+  transition: transform .15s ease, -webkit-transform .15s ease;
+
+  &.small {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--btn-sm);
+  }
+
+  &.scale-rotate:hover {
+    transform: rotate(4deg) scale(1.05);
+  }
+
+  &.black {
+    background-color: var(--color-background-highlight);
+    color: white;
+  }
+  &.green {
+    background-color: var(--color-green);
+  }
+  &.yellow {
+    background-color: var(--color-yellow);
+  }
+  &.pink {
+    background-color: var(--color-pink);
+  }
+  &.blue {
+    background-color: var(--color-blue);
+  }
+}
+
+</style>
diff --git a/frontend/components/ui/ImageBlock.vue b/frontend/components/ui/ImageBlock.vue
new file mode 100644
index 0000000..0495b3a
--- /dev/null
+++ b/frontend/components/ui/ImageBlock.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div>image: {{ image }}</div>
+    <div>text: {{ text }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImageBlock',
+  props: {
+    image: {
+      type: String,
+      required: false
+    },
+    text: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background-color: NavajoWhite;
+}
+</style>
diff --git a/frontend/components/ui/Picker.vue b/frontend/components/ui/Picker.vue
new file mode 100644
index 0000000..5de39a4
--- /dev/null
+++ b/frontend/components/ui/Picker.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="dropdown">
+    <select>
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+    </select>
+    <span aria-hidden="true" class="rs-quantity-icon form-icon icon icon--arrow-down"></span>
+  </div>
+</template>
+
+<script>
+  
+</script>
+
+<style lang="scss" scoped>
+@import 'frontend/styles/variables'; 
+
+.dropdown {
+  top: -10%;
+  left: 20%;
+  position: relative;
+}
+
+select {
+  margin: 0 auto;
+  position: absolute;
+  font-size: 24px;
+  font-weight: 400;
+  letter-spacing: .009em;
+
+  color: #111;
+  margin: 0;
+  width: min-content;
+  padding: 0;
+  border: 0;
+  display: inline-block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: min-content;
+  width: 4rem;
+}
+
+span {
+  position: absolute;
+  font-size:30px;
+  font-weight: 600;
+  letter-spacing: .009em;
+
+  color: $green;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  // display: inline-block;
+  // float: right;
+  width: 4rem;
+  text-align: right;
+  pointer-events: none;
+}
+</style>
diff --git a/frontend/components/ui/ProductCard.vue b/frontend/components/ui/ProductCard.vue
new file mode 100644
index 0000000..9d1ec4b
--- /dev/null
+++ b/frontend/components/ui/ProductCard.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="product-card">
+    <div class="product-card-container">
+
+      <div class="image">
+        <img :src="product.image" />
+      </div>
+
+      <div class="content" :class="color">
+        <div class="content-top">
+          <router-link :to="'edit/' + product.urlSlug">
+            <h3 class="h3-alt">{{ product.name }}</h3>
+          </router-link>
+        </div>
+        <div class="content-bottom">
+          <div class="content-bottom-info">
+            <div><b>I dag</b></div>
+            <div>18.juli</div>
+            <div><b>19:30</b></div>
+            <div>Hovedscenen</div>
+          </div>
+
+          <div class="content-bottom-actions">
+            <Button :small="true" :color="color">Add to cart</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '@/components/ui/Button';
+
+export default {
+  components: { Button },
+  props: {
+    product: {
+      type: Object,
+      default: null,
+      required: false
+    } 
+  },
+  computed: {
+    color() {
+      const r = Math.random();
+
+      if (r < 0.25)
+        return 'green';
+      else if (r < 0.5)
+        return 'pink';
+      else if (r < 0.75)
+        return 'blue';
+      else
+        return 'yellow';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+.product-card {
+  position: relative;
+  height: 100%;
+
+  &-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .image img {
+      border-radius: 6px 6px 0 0;
+      max-height: 250px;
+      object-fit: cover;
+
+      width: 100%;
+      float: left;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+ 
+  margin-top: -1px;
+  border-radius: 0 0 6px 6px;
+  color: black;
+
+  &.pink {
+    background-color: var(--color-background-pink);
+  }
+  &.green {
+    background-color: var(--color-background-green);
+  }
+  &.yellow {
+    background-color: var(--color-background-yellow);
+  }
+  &.blue {
+    background-color: var(--color-background-blue);
+  }
+
+
+  &-top {
+    padding: var(--space-md);
+
+    h3 {
+      font-weight: 400;
+    }
+  }
+
+  &-bottom {
+    > div {
+      padding: var(--space-md);
+    }
+
+    &-info {
+  
+    }
+
+    &-actions {
+      border-top: 1px solid rgba(0,0,0,0.1);
+    }
+  }
+}
+</style>
diff --git a/frontend/components/ui/logo.vue b/frontend/components/ui/logo.vue
new file mode 100644
index 0000000..e1e67e9
--- /dev/null
+++ b/frontend/components/ui/logo.vue
@@ -0,0 +1,44 @@
+<template>
+  <svg :class="{ dark: isDark }" class="logo" width="96" height="71" viewBox="0 0 96 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g class="logo__default" clip-path="url(#clip0)">
+<path class="logo__colored theme--pink-light" d="M40.9545 8.43586C40.4877 8.40828 40.2924 8.28469 40.3377 8.09269C40.3829 7.90069 50.4827 5.04938 50.7023 5.04938C50.9219 5.04938 50.7299 5.77655 50.5655 5.88579C50.4011 5.99503 41.4201 8.46345 40.9545 8.43586Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.60742 69.4996V70.3768L6.28191 69.4996L8.85956 69.1708L13.5481 68.2924L22.2267 66.5931L30.294 64.9479L41.2105 62.8094L50.5898 60.9445L63.6425 58.3669L72.4723 56.6665L81.0825 55.296L89.4179 54.1451L94.0524 53.4312L96.0529 53.1023V51.9514L85.0306 53.6508L75.5983 55.0212L65.824 56.8861L55.9591 58.8612L53.6044 59.2441L43.1867 61.4378L32.5495 63.6866L25.4753 65.0019L12.5881 67.5255L2.60742 69.4996Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-0.024292 40.5451V42.08L6.5015 40.8188L6.20026 49.2634L5.8295 56.3377L5.50729 65.6607L6.99143 65.2226L7.89847 40.5451L15.3302 38.9539V37.4731L-0.024292 40.5451Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6138 34.4022V35.9371L19.6623 37.8571C19.6623 37.8571 19.4913 44.469 19.3887 45.3153C19.286 46.1617 19.0797 46.8182 19.0576 47.1801C19.0356 47.5421 19.0576 49.7578 19.0576 49.7578L27.6127 47.4538V48.8828L19.0576 51.2949V61.6044L27.8323 59.0819V60.5076C27.8323 60.5076 24.1456 61.5537 23.8841 61.6309C23.6226 61.7081 20.3531 62.6803 20.1556 62.7012C19.958 62.7222 19.0841 62.6648 18.8392 62.7012C18.5942 62.7377 17.8527 62.9219 17.8527 62.9219C17.8527 62.9219 17.632 48.224 17.7423 47.1559C17.8527 46.0877 18.1054 44.7283 18.1837 43.9614C18.262 43.1945 18.294 36.661 18.294 36.661L27.6138 34.4022Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.7757 48.8828C40.6113 48.0353 40.3343 45.2083 40.3343 45.2083L39.1856 39.6138L37.8692 32.9788L35.8951 33.1432L34.6339 38.5721C34.6339 38.5721 33.3936 43.5487 33.2083 44.5495C33.0229 45.5503 32.1666 50.6361 32.1666 50.6361L31.4482 54.912L30.5655 59.5741L32.0463 59.4097C32.0463 59.4097 32.7283 56.8949 32.9291 55.8444C33.1299 54.7939 33.5327 52.1159 33.5327 52.1159L34.0844 48.4414L35.0709 48.277L36.6058 47.9459L39.2386 47.1735C39.2386 47.1735 39.4306 48.864 39.5696 49.6408C39.7087 50.4177 41.7633 57.9167 41.7633 57.9167L43.1889 57.643C43.1889 57.643 40.9379 49.7269 40.7757 48.8828ZM34.3051 46.9087C34.3051 46.9087 34.3856 45.4742 34.5258 44.4954C34.6659 43.5167 37.0482 35.2265 37.0482 35.2265L38.9131 45.3716L34.3051 46.9087Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0836 31.4681C49.0836 31.4681 46.5291 32.1699 46.1208 32.2406C45.7125 32.3112 44.8971 32.3509 44.4016 32.4182C43.9062 32.4855 43.0278 32.6963 43.0278 32.6963L42.9175 31.4913L57.7765 28.1501L57.8582 29.6861L50.4276 31.3865C50.4276 31.3865 50.4022 36.9567 50.4276 37.4731C50.4529 37.9895 50.2069 40.2935 50.1528 40.928C50.0987 41.5625 50.0711 45.0957 50.0711 45.0957L50.0303 47.6182C50.0303 47.6182 50.0965 48.9931 50.0965 49.9763C50.0965 50.9595 49.9354 53.8152 49.9354 53.8152L49.8251 56.5573L48.4524 56.8276L48.5076 53.099L48.6179 47.7793C48.6179 47.7793 48.7669 42.1694 48.7823 41.1432C48.7978 40.117 48.96 38.4309 49.003 37.6331C49.046 36.8353 49.0836 31.4681 49.0836 31.4681Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6436 45.1509L62.8204 44.4381L62.9848 44.107C62.9848 44.107 67.7517 41.4223 69.1862 37.4731C70.6207 33.5239 71.1603 29.9597 69.131 28.0938C67.1018 26.2279 63.8665 26.613 63.8665 26.613L60.5219 27.3854V32.6499L60.2483 41.4223L60.1114 49.8086L59.9603 55.1283L61.3374 54.7972L61.5581 49.4234L61.4477 46.6814L61.6132 45.1454L68.8518 53.3109L69.8946 52.4337L65.5073 47.3335L63.6436 45.1509ZM61.9432 28.1512L63.6976 27.8201C63.6976 27.8201 65.8361 27.3788 67.6458 28.7526C69.4554 30.1263 69.291 33.4687 67.2618 37.6364C65.2325 41.8041 61.7776 43.1206 61.7776 43.1206L61.9432 28.1512Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.0206 25.1895V31.7705L72.7194 35.061L72.5826 41.4764V48.0022L72.8562 52.1158L73.0482 52.5539L80.4104 50.9638L80.3619 49.5923L77.131 50.251L74.2808 51.0731L74.0623 44.6025L74.1175 39.3931L80.0949 37.9123L80.2052 36.6234L74.3922 37.9123H74.1175L74.2819 34.293L74.3371 29.3848V26.1903L80.4789 25.141V23.9868L73.0206 25.1895Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.5909 23.627L82.549 24.7923L88.3145 23.6469L88.2085 28.9699L87.8256 34.5103L87.4703 40.7625L87.2794 48.0022V49.5382L88.8143 49.5923L89.1167 38.0767L89.2943 33.6342L89.4654 28.5352L89.6331 23.3247L93.803 22.4475L93.749 21.2966L82.5909 23.627Z" fill="white"></path>
+<path d="M28.992 16.7172C28.9038 16.718 28.8162 16.7023 28.7338 16.6709C28.5285 16.5914 28.2813 16.3829 28.2725 15.8356C28.2328 13.5073 32.1898 12.7846 32.5175 12.7294C32.502 12.5263 32.4888 12.3112 32.4778 12.0817C32.3542 9.71145 35.0289 6.64055 36.5605 5.58786C37.2226 5.13545 37.7081 4.992 38.0579 5.14648C38.1468 5.18645 38.2245 5.24757 38.2844 5.32451C38.3442 5.40145 38.3842 5.49187 38.4011 5.58786C38.6681 6.912 35.1216 11.4361 34.2157 12.3972L34.0402 12.5837C33.7636 12.878 33.4999 13.1553 33.2491 13.4157C33.3373 14.0568 33.4786 14.4872 33.728 14.7034C33.9773 14.9197 34.4331 14.9914 35.2629 14.9164C35.8819 14.8601 36.8298 14.453 37.8008 13.8703C37.7824 13.8064 37.7692 13.7411 37.7611 13.675C37.5647 12.16 39.7738 9.1509 41.0438 8.81986C41.254 8.74983 41.4833 8.76589 41.6816 8.86454C41.8799 8.96318 42.0311 9.13637 42.102 9.34621C42.3161 9.87255 42.2124 10.4949 41.7842 11.1934C41.2038 12.1468 40.0838 13.1553 38.8888 13.9652H38.9517C40.1655 13.9652 41.8615 12.8817 43.3556 11.3986C43.3688 11.0948 43.3879 10.7726 43.4129 10.432C43.6127 7.63917 45.2954 5.11338 46.3205 4.66869C46.71 4.49986 46.9605 4.63007 47.0753 4.72276C47.3754 4.96662 47.4427 5.47531 47.2805 6.27972C46.9495 7.9349 45.6254 10.0314 44 11.7087C43.9647 12.7989 44.0154 14.0524 44.4634 14.2919C44.7249 14.432 45.4565 14.4497 47.0323 13.227C48.6665 11.9559 49.5889 10.8623 49.8449 10.8524C49.9034 10.8524 49.8361 11.7881 47.3688 13.707C45.7931 14.9274 44.8165 15.2276 44.1489 14.8723C43.5476 14.5512 43.339 13.6993 43.3302 12.3575C41.8791 13.6828 40.2758 14.624 38.9517 14.624C38.6822 14.6337 38.4162 14.561 38.1892 14.4154C37.1111 15.061 36.0452 15.5079 35.3258 15.573C34.5754 15.6414 33.8096 15.6436 33.3009 15.2022C32.9942 14.9363 32.8077 14.549 32.6863 13.9961C30.7939 15.8974 29.6761 16.7172 28.992 16.7172ZM32.3023 13.4411C31.1128 13.7004 28.9059 14.4629 28.9291 15.8246C28.9291 16.0121 28.9743 16.0607 28.9743 16.0607C29.142 16.1269 29.7986 15.9702 32.3034 13.4411H32.3023ZM41.3208 9.43669C41.2834 9.43779 41.2463 9.44373 41.2105 9.45434C40.2394 9.71034 38.3658 12.2549 38.4044 13.4897C39.5707 12.7117 40.6841 11.7308 41.2204 10.8502C41.5316 10.3393 41.622 9.91559 41.4907 9.59338C41.4499 9.48303 41.4058 9.43669 41.323 9.43669H41.3208ZM37.7567 5.66621C37.6463 5.66621 37.3407 5.78759 36.7889 6.19476C35.232 7.34014 33.0372 10.0888 33.1354 12.0287C33.1442 12.2052 33.1542 12.384 33.1652 12.5451C33.2932 12.4105 33.4256 12.2759 33.5613 12.1313L33.7368 11.9106C35.2187 10.3393 37.9111 6.54676 37.7633 5.66952L37.7567 5.66621ZM46.6626 5.24579C46.5232 5.28451 46.3959 5.35819 46.2929 5.45986C45.4918 6.12193 44.2306 8.17655 44.0662 10.4783C44.0662 10.5335 44.0585 10.5887 44.054 10.656C45.3252 9.22152 46.3492 7.5531 46.6328 6.14841C46.7586 5.51724 46.688 5.29655 46.6626 5.2469V5.24579Z" fill="white"></path>
+</g>
+<g class="logo__default">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.4334 24.3487C41.5062 22.923 42.2378 22.2279 42.0182 20.4734C41.7986 18.7189 40.5925 17.9862 39.2772 17.9145C37.9619 17.8428 35.4747 19.8157 35.4747 19.8157C35.4747 19.8157 35.5112 17.9873 34.8535 17.6949C34.1959 17.4025 33.4279 19.0897 31.9647 19.8886C30.5015 20.6875 30.0634 21.0582 28.5285 21.5702C26.9936 22.0822 25.8207 22.3746 25.8207 22.3746L25.7479 16.085C25.7479 16.085 25.9299 13.0505 25.8935 11.9901C25.8571 10.9297 25.7832 6.76193 25.7832 6.76193L25.931 3.18124C25.931 3.18124 25.7479 2.048 25.0483 2.40883C24.3487 2.76966 22.752 5.51724 21.1432 9.10345C19.5343 12.6897 18.2907 15.648 17.8891 16.5981C17.4874 17.5481 15.9514 20.5098 15.4759 21.3142C15.0003 22.1186 12.8805 27.1272 12.3321 27.8588C11.7837 28.5904 9.29765 31.9173 8.85958 32.3917C8.42151 32.8662 7.06868 35.2795 5.49627 36.1203C3.92385 36.9611 0.310059 38.1672 0.310059 38.1672L0.346472 39.2276C0.346472 39.2276 4.69737 38.4232 6.30509 37.2535C7.91282 36.0839 9.48082 33.9641 9.48082 33.9641C9.48082 33.9641 11.6745 31.1173 12.3696 30.2345C13.0648 29.3517 14.5269 26.5424 14.5269 26.5424L23.9581 24.2759L23.9216 32.3553L25.3109 32.1733L25.5669 23.7241C25.5669 23.7241 28.6742 23.2828 31.051 22.0789C33.4279 20.875 34.0855 19.9217 34.0855 19.9217L34.0127 22.2246L33.461 27.0864L33.1685 29.3893L34.4121 29.4621C34.4121 29.4621 34.7045 23.211 35.3997 21.6386C36.0949 20.0662 38.4706 19.3721 39.3843 19.2618C40.2979 19.1515 40.6279 20.7967 40.4083 22.0767C40.1887 23.3567 40.0055 25.0748 40.3719 25.696C40.7382 26.3172 41.1443 26.72 41.8339 26.976C42.2218 27.1245 42.6271 27.2228 43.04 27.2684L43.1867 26.6472C43.1867 26.6472 41.3605 25.7744 41.4334 24.3487ZM15.3302 24.8607C15.3302 24.8607 18.5103 18.9749 18.7663 17.9509C19.0223 16.9269 21.3263 12.0276 21.7655 10.8943C22.2047 9.76111 24.3244 5.33738 24.3244 5.33738L24.5076 22.4839L15.3302 24.8607Z" fill="white"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.5152 19.1205C78.5412 19.0841 76.7503 18.2069 76.7503 16.4513V14.6604L84.1533 13.5636C84.1533 13.5636 83.7053 9.61545 79.6479 10.1274C75.5905 10.6394 75.6038 13.6375 75.6038 13.6375L69.1034 14.2996L69.1431 13.3131C69.1431 13.3131 68.9654 12.3586 68.6344 12.6897C68.3034 13.0207 65.4918 19.563 64.395 20.4767C63.2981 21.3903 62.5312 22.9263 60.0816 22.8535C57.6319 22.7807 56.2427 19.9283 56.2427 19.9283C56.2427 19.9283 58.2543 15.9437 58.6923 14.6637C59.1304 13.3837 60.3343 8.66427 60.481 6.95172C60.6037 5.35854 60.6405 3.7599 60.5914 2.16276C60.5538 0.951172 59.713 0 58.251 0C56.7889 0 55.9845 1.09683 55.8013 1.46207C55.6181 1.82731 55.1392 3.69214 54.9969 4.49655C54.8545 5.30096 54.5555 7.78703 54.4452 8.37186C54.3348 8.95669 53.7831 13.2348 53.7831 14.0756C53.7831 14.9164 53.9652 16.9644 54.1141 17.6949C54.27 18.3557 54.4589 19.0083 54.6802 19.6502C54.6802 19.6502 51.5453 24.96 48.8396 24.9236C46.134 24.8872 46.0292 21.0891 47.5276 19.7727C49.0261 18.4563 50.0159 18.6052 50.5643 18.5688C51.1127 18.5324 53.0515 19.2651 53.0515 19.2651C53.0515 19.2651 53.3825 19.4858 53.5271 19.083C53.6716 18.6803 51.4504 17.621 49.6231 17.6552C47.7958 17.6894 44.8341 19.4836 44.9434 22.5909C45.0526 25.6982 46.699 26.6119 48.7459 26.6119C50.7927 26.6119 52.4016 25.1862 53.206 24.4182C54.0104 23.6502 55.5817 21.3837 55.5817 21.3837C55.5817 21.3837 57.1905 24.4965 60.4446 24.2759C63.6987 24.0552 65.5624 21.205 66.1483 20.3641C66.7343 19.5233 67.7516 17.1829 67.7516 17.1829L67.531 22.5898L68.8838 22.4066L68.9202 18.8237L69.1409 15.7892L75.4305 15.0577C75.4305 15.0577 75.5762 16.1545 75.723 17.2149C75.8697 18.2753 76.8198 20.7614 80.9092 20.4325C84.9985 20.1037 93.8515 18.4585 93.8515 18.4585L93.9243 17.1421C93.9243 17.1421 82.4893 19.157 80.5152 19.1205ZM77.6716 12.3388C77.9321 12.0132 78.9848 11.6877 79.4372 11.6116C79.8896 11.5354 81.0857 11.5785 81.5955 11.7848C82.1053 11.9912 82.2035 12.587 82.2035 12.587L77.4587 13.3252C77.4587 13.3252 77.4112 12.6643 77.6716 12.3388ZM55.51 17.5845C55.51 17.5845 54.9583 15.0621 55.1072 13.5261C55.2562 11.9901 55.4383 10.6008 55.7693 8.62676C56.1003 6.65269 56.8661 1.38814 58.2554 1.46097C59.6446 1.53379 59.169 4.78786 58.5478 8.736C57.9265 12.6841 55.51 17.5845 55.51 17.5845Z" fill="white"></path>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="96" height="70.3768" fill="white"></rect>
+</clipPath>
+</defs>
+</svg> 
+</template>
+
+<script>
+export default {
+  props: {
+    isDark: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+svg.dark path {
+  fill: black;
+}
+
+</style>
diff --git a/frontend/routes.js b/frontend/routes.js
index 495fdf0..f9eeb1c 100644
--- a/frontend/routes.js
+++ b/frontend/routes.js
@@ -14,6 +14,21 @@ let routes = [
     path: '/cart',
     component: (resolve) => require(['./components/Cart.vue'], resolve)
   },
+  {
+    name: 'About',
+    path: '/about',
+    component: (resolve) => require(['./components/About.vue'], resolve)
+  },
+  {
+    name: 'Shop',
+    path: '/shop',
+    component: (resolve) => require(['./components/Shop.vue'], resolve)
+  },
+  {
+    name: 'admin',
+    path: '/admin',
+    component: (resolve) => require(['./components/Admin.vue'], resolve)
+  },
   // {
   //   name: 'styleguide',
   //   path: '/styleguide',
@@ -33,4 +48,4 @@ const router =  new VueRouter({
   linkActiveClass: 'is-active'
 });
 
-export default router;
\ No newline at end of file
+export default router;