diff --git a/src/App.vue b/src/App.vue
index bd2caebb74d9bb11531b80b2813fb87246000c71..1358b7e3e414d1466e1288bbfed8cdcabdafb3fc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,10 @@ import Navbar from "@/components/Navbar.vue";
<template>
<Navbar></Navbar>
- <RouterView />
+ <body>
+ <RouterView />
+ </body>
+
</template>
<style scoped>
@@ -21,6 +24,9 @@ header {
margin: 0 auto 2rem;
}
+body {
+ padding-bottom: 2em;
+}
nav {
width: 100%;
font-size: 12px;
diff --git a/src/components/GroceryOffers.vue b/src/components/GroceryOffers.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c970238dc31d8463b342f7f404db08c9988d6014
--- /dev/null
+++ b/src/components/GroceryOffers.vue
@@ -0,0 +1,83 @@
+<template>
+ <div>
+ <h2>Tilbudaviser</h2>
+ </div>
+
+ <div id="list">
+ <ul>
+ <li>
+ <a href="https://etilbudsavis.no/REMA-1000" target="_blank" rel="noopener noreferrer">
+ <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2F9tf8gmfaGBLcbjK3rhBlW&w=300&sign=Zq9DkNZRVTrnWUEb8C9driKqS1InuTFi_5b1XbIKTnM" alt="Rema 1000 logo"></a>
+ </li>
+ <li>
+ <a href="https://etilbudsavis.no/KIWI" target="_blank" rel="noopener noreferrer">
+ <img src = "https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FG3XDq4dn6xRNyk-1gOZgb&w=300&sign=HIt49jOaHo0lFALYmhFwY3UWt8zkPkVtVkLaCVxVcE0" alt="Kiwi logo"></a></li>
+ <li>
+ <a href="https://etilbudsavis.no/Bunnpris/" target="_blank" rel="noopener noreferrer">
+ <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fetaproduction%2Fimg%2Flogo%2Fpageflip%2F00ibuh349ezgcwz3.png&w=300&sign=ryffYtZjdRMOoL63Nm5VY4YoigiOMaI5Lgrnb0hZhkE" alt="Bunnpris logo"></a></li>
+ <li>
+ <a href="https://etilbudsavis.no/MENY/" target="_blank" rel="noopener noreferrer">
+ <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FgMULu5EGk-l57npG294B7&w=300&sign=hMQoYjgxL7F0XlPGCoZJXny-him1emA8RMoO-5W3lXU" alt="Meny logo"></a></li>
+ <li>
+ <a href="https://etilbudsavis.no/Coop-Mega/" target="_blank" rel="noopener noreferrer">
+ <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2Fk5LYCCJcujAJedeFOFRaj&w=300&sign=Gb0VlcY80QDtjFUs50oOOMPGhwUCOPVzBQ4bw2HpQ0Q" alt="Coop mega logo"></a></li>
+ <li>
+ <a href="https://etilbudsavis.no/Coop-Extra" target="_blank" rel="noopener noreferrer">
+ <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FnmLKqrg-wVDfXHyI_iS9D&w=300&sign=AaqQeyqkDZi_3r4xWetXNNTGRvvz3w74jexExHFhjBA" alt="Coop extra logo">
+ </a>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "GroceryOffers"
+}
+</script>
+
+<style scoped lang="scss">
+div {
+ display: flex;
+ justify-content: center;
+}
+
+h3{
+ padding-top:1em;
+}
+
+li{
+ padding:1em;
+}
+
+img{
+ width: 10em;
+}
+
+ul {
+
+ padding:0;
+ text-align: center;
+ list-style-type: none;
+
+ width: 100%;
+}
+
+@media (min-width: 800px){
+ ul{
+ display: grid;
+ width: 100%;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ }
+
+ li {
+ padding:0.3em;
+ align-items: center;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index afe34d41073af24ceaa6d3648f5a83663493cbe8..7d3e71b91795ab41ea9b2e4b7f737b83015409c8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,10 @@
<script>
import { useAuthStore } from "@/stores/authStore.js";
import { mapState } from 'pinia'
+ import GroceryOffers from "@/components/GroceryOffers.vue";
export default {
+ components: {GroceryOffers},
data() {
return {
}
@@ -33,6 +35,8 @@
<p id="tips-text">Her kommer tips du kanskje kan ha nytte av, trykk på meg for å gå til neste tips!</p>
</div>
+ <grocery-offers></grocery-offers>
+
</div>
</main>