Finally landed on a design, created a bunch of pages.

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>
+
+img {
+  padding-top: 1.5rem;
+
+  @include mobile {
+    display: block;
+    margin: auto;
+    width: 80%;
+  }
+}
+
+</style>