discover structure

src/data/discover.ts

@@ -0,0 +1,35 @@
+export interface Discover {
+  readonly title: string
+  readonly description: string
+}
+
+export const discovers: Discover[] = [
+  {
+    title: 'Where to eat?',
+    description: `Check out the best places to eat in Barcelona!`,
+  },
+  {
+    title: 'What to visit',
+    description: `Coses com el park guell, la sagrada familia, la rambla, el camp nou, etc`,
+  },
+  {
+    title: 'Tips to move around the city',
+    description: `Movides de la Tmovilitat que no conec perque vaig a tot arreu en moto`,
+  },
+  {
+    title: 'Magical cities nearby',
+    description: `Coses com Sitges, Tarragona, Girona, etc`,
+  },
+  {
+    title: 'Where to stay?',
+    description: `Podem buscar hostels :)`,
+  },
+  {
+    title: 'What to do on the cheap/for free',
+    description: `GL jajaja es broma hem de posar coses chules`,
+  },
+  {
+    title: 'Where to leave your baggage',
+    description: `We can have your baggage in a safe place during the event but if you want to store them before or after the event, you can do it in the lockers: \n - [Locker in the city](https://lockerinthecity.com/)`,
+  },
+]

src/views/Travel.vue

@@ -7,6 +7,8 @@ import { RouterLink, useRoute } from 'vue-router'
 import { computed } from 'vue'
 import IconLabel from '@/components/IconLabel.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { rules } from '@/data/rules'
+import { discovers } from '@/data/discover'
 
 const route = useRoute()
 
@@ -81,7 +83,13 @@ const currentView = computed<'travel' | 'discover'>(() => {
     </template>
 
     <template v-if="currentView === 'discover'">
-      <Panel title="Discover BCN" size="big"> </Panel>
+      <Panel
+        v-for="discover in discovers"
+        :key="discover.title"
+        :title="discover.title"
+      >
+        <VueMarkdownIt :source="discover.description" />
+      </Panel>
     </template>
   </PanelContainer>
 </template>