Add banner to the different pages

components/banner/banner.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="banner">
-    <span class="banner__title"> Hello world </span>
+    <span class="banner__title"> {{ title }} </span>
+    <span class="banner__content"> {{ content }} </span>
   </div>
 </template>
 
-<script setup lang="ts" name="banner"></script>
+<script setup lang="ts" name="banner">
+import type { Banner } from '~/types/banner'
+defineProps<Banner>()
+</script>
 <style scoped lang="scss" src="./style.scss" />

components/banner/style.scss

@@ -1,17 +1,31 @@
 .banner {
     @extend %page-container;
     position: relative;
-    grid-template-areas: '. . articles articles articles articles articles articles articles articles . .';
-
+    grid-template-areas: 
+    ". title title title title title title title title title title ."
+    ". content content content content content content content content content content .";
     width: 100%;
     height: 100%;
-    min-height: 20rem;
+    min-height: 30rem;
+    grid-gap: calc($spacing-base * 2) 0;
+
+    @media (min-width: $break-md) {
+        grid-template-areas: 
+        ". . title title title title title title title title . ."
+        ". . content content content content content content content content . .";
+    }
 
-    background-color: $color-red;
+    background-color: $color-yellow;
 
     &__title {
-        grid-area: articles;
-        color: $color-white;
+        @extend %h3;
+        grid-area: title;
         font-size: $font-size-title-md;
     }
+
+    &__content {
+        @extend %body-copy-2;
+        grid-area: content;
+        overflow: scroll
+    }
 }

content/geudenstraat/configuration.json

@@ -14,5 +14,9 @@
     {
       "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
-  ]
+  ],
+  "banner": {
+    "title": "Meer te weten komen over de Geudenstraat?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508"
+  }
 }

content/geudenstraat/kamer-1/configuration.json

@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }

content/geudenstraat/kamer-2/configuration.json

@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }

content/sloefke/configuration.json

@@ -14,5 +14,9 @@
     {
       "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
-  ]
+  ],
+  "banner": {
+    "title": "Meer te weten komen over het Sloefke?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508"
+  }
 }

content/sloefke/kamer-1/configuration.json

@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }

content/sloefke/kamer-2/configuration.json

@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }

content/sloefke/kamer-3/configuration.json

@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres [email protected] of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }

pages/geudenstraat/index.vue

@@ -17,6 +17,7 @@
     </template>
   </typography>
   <cards :items="data?.rooms" title="Onze studentenkamers" />
+  <banner v-if="data?.content?.banner" v-bind="data?.content?.banner" />
   <c-footer />
 </template>
 

pages/sloefke/[...slug].vue

@@ -14,6 +14,7 @@
   </typography>
   <room-details :details="data?.details" />
   <image-gallery :images="data?.images" />
+  <banner v-if="data?.banner" v-bind="data?.banner" />
   <c-footer />
 </template>
 

pages/sloefke/index.vue

@@ -17,6 +17,7 @@
     </template>
   </typography>
   <cards :items="data?.rooms" title="Onze studentenkamers" />
+  <banner v-if="data?.content?.banner" v-bind="data?.content?.banner" />
   <c-footer />
 </template>
 

types/banner.ts

@@ -0,0 +1,5 @@
+
+export type Banner = {
+    title?: string,
+    content?: string
+}

types/room.ts

@@ -1,11 +1,13 @@
 import type { Card } from "~/types/card";
 import type { Paragraph } from "~/types/paragraph";
 import type { Image } from "~/types/image";
+import type { Banner } from "~/types/banner";
 
 export interface Room extends Card {
     paragraphs?: Paragraph[];
     images?: Image[];
     details?: RoomDetail[]
+    banner?: Banner
 }
 
 export interface RoomDetail {

types/studentHouse.ts

@@ -1,9 +1,11 @@
 import type { Header } from "~/types/header";
 import type { Room } from "~/types/room";
 import type { Paragraph } from "~/types/paragraph";
+import type { Banner } from "~/types/banner";
 
 export interface StudentHouse {
     header: Header;
     rooms: Room[];
     paragraphs: Paragraph[];
+    banner?: Banner;
 }