Add card that has same shape as products, but links to /add

frontend/components/Admin.vue

@@ -6,7 +6,8 @@
         <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" />
+        <add-card />
+        <product-card v-for="product in products" :product="product" />
       </div>
 
       <span v-else>
@@ -18,9 +19,10 @@
 
 <script>
 import ProductCard from '@/components/ui/ProductCard';
+import AddCard from '@/components/ui/AddCard';
 
 export default {
-  components: { ProductCard },
+  components: { ProductCard, AddCard },
   data() {
     return {
       products: []
@@ -41,6 +43,7 @@ export default {
   max-width: 840px;
   margin: auto;
   text-align: center;
+  padding: 1.5rem 0 3rem 0;
 }
 
 .products {

frontend/components/ui/AddCard.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <div class="product-card">
+    <router-link to="/add">
+      <i class="icon icon--add-circle"></i>
+    </router-link>
+
+    <h2 class="">add new product</h2>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="scss" scoped>
+.product-card {
+  height: 100%;
+  background-color: white;
+  border-radius: 6px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  
+  > *:first-child {
+    padding-top: 4rem;
+  }
+  > *:last-child {
+    padding-bottom: 4rem;
+  }
+}
+
+h2 {
+  color: grey;
+  padding-top: 3rem;
+  font-style: italic;
+}
+
+
+.icon {
+  font-size: 10rem;
+  color: var(--color-background);
+  color: grey;
+}
+</style>