markedsplassen intro

src/locales/en.ts

@@ -223,6 +223,43 @@ export const en = {
           body: 'The next tasks will show you an email, either from the data thief or a real one. Click around to find the suspicious parts of the email. After that, choose what you would do.',
         },
       },
+      markedsplassen: {
+        page1: {
+          title: 'The data thief has created fake adverts!',
+          body: "Here he tries to trick you into buying something without you actually receiving it! Let's look at what separates a real sales page from a data thief page.",
+        },
+        page2: {
+          title: 'Always check the source!',
+          body: 'As always, the link is an important sign. Remember what you have learned earlier.',
+          link1: 'ikke-kjent-side＠funn.xyz',
+        },
+        page3: {
+          title: 'What is the language like?',
+          body: 'The language they use is a clear sign. Lots of capital letters or strong expressions like:',
+          body2: '"YOU HAVE TO READ THIS!"',
+          body3: 'They will often say you need to do something quickly:',
+          body4: '"Offer ending soon! Hurry before we sell out!"',
+        },
+        page4: {
+          title: 'Are there big deals?',
+          body: 'If the offers are very generous, or the prices are much lower than other shops, that is a clear sign.',
+        },
+        page5: {
+          title: 'Are there any reviews?',
+          body: 'Are there lots of reviews? Are they very shallow and vague? Are the usernames strange? All of this is a clear sign that the data thief has faked the reviews!',
+        },
+        page6: {
+          title:
+            "Now it's your turn. Can you tell that the website is from the data thief?",
+          body: 'The next tasks will show you a website. Find what looks wrong!',
+        },
+      },
+      datasenteret: {
+        page1: {
+          title: 'Congratulations on arriving at the datacenter',
+          body: 'Are you ready to fight the data-thief? Here there will be different tasks from all the stops, and they can be more challenging.',
+        },
+      },
       passwordBank: {
         page1: {
           title:

src/locales/nb.ts

@@ -233,25 +233,33 @@ export const nb = {
         page2: {
           title: 'Alltid sjekk kilden!',
           body: 'Som alltid er lenken et viktig tegn. Husk på det du har lært tidligere.',
-          body2: 'ikke-kjent-side＠funn.xyz',
+          link1: 'ikke-kjent-side＠funn.xyz',
         },
         page3: {
           title: 'Hvordan er språkbruken?',
           body: 'Språket de bruker er et klart tegn. Mye store bokstaver eller sterke utrykk som:',
           body2: '“DETTE MÅ DU LESE!”',
           body3: 'De vil ofte si at du må gjøre noe fort:',
-          body4:
-            '“Viktig! Klikk på linken innen 1 time! Ellers blir det store konsekvenser.”',
+          body4: '“Tilbudet går snart ut! Fort deg før vi går tom!”',
         },
         page4: {
-          title: 'Pass på lenker',
-          body: 'Du bør være veldig skeptisk til lenker! Husk på det du lærte i nyhetskvartalet. Lange, ukjente lenker bør du ikke trykke på.',
-          link1: 'badlink.xyz/awkdjnai1324234-efef2324sefes23',
+          title: 'Er det store tilbud?',
+          body: 'Hvis tilbudene er veldig store, eller prisene er mye lavere enn andre butikker er det et klart tegn.',
         },
         page5: {
+          title: 'Er det noen reviews?',
+          body: 'Er det mange reviews? Er de veldig overfladiske og vage? Er brukernavnene rare? Alt dette er klare tegn på at datatyven har faket reviews!',
+        },
+        page6: {
           title:
-            'Nå er det din tur. Klarer du å finne tegnene på en mail fra datatyven?',
-          body: 'De neste oppgavene vil vise deg en mail, enten fra datatyven eller ekte. Trykk rundt for å finne de mistenkelige delene av mailen. Etter det, velg hva du ville gjort.',
+            'Nå er det din tur. Klarer du å se at nettsiden er fra datatyven?',
+          body: 'De neste oppgavene vil vise deg en nettside. Finn hva som ser galt ut!',
+        },
+      },
+      datasenteret: {
+        page1: {
+          title: 'Gratulerer med å komme til datasenteret',
+          body: 'Er du klar for å bekjempe datatyven? Her kommer forsjellige oppgaver fra hele spillet, og de kan være litt mer utfordrende.',
         },
       },
       passwordBank: {

src/stops/components/IntroCard.vue

@@ -23,6 +23,9 @@ import PostkontoretIntroCard, {
 import MarkedsplassenIntroCard, {
   PAGE_COUNT as markedsplassenPageCount,
 } from '@/stops/components/intro/MarkedsplassenIntroCard.vue'
+import DatasenteretIntroCard, {
+  PAGE_COUNT as datasenteretPageCount,
+} from '@/stops/components/intro/DatasenteretIntroCard.vue'
 
 export type IntroComponentEntry = {
   component: Component
@@ -54,6 +57,10 @@ export const introRegistry: Record<string, IntroComponentEntry> = {
     component: MarkedsplassenIntroCard,
     pageCount: markedsplassenPageCount,
   },
+  datasenteret: {
+    component: DatasenteretIntroCard,
+    pageCount: datasenteretPageCount,
+  },
 }
 export function getIntroEntry(
   stopSlug: string | null,

src/stops/components/intro/DatasenteretIntroCard.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+export const PAGE_COUNT = 1
+</script>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  page: number
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <article
+    class="flex h-full flex-col gap-4 rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm sm:gap-5 sm:p-8"
+  >
+    <template v-if="props.page === 0">
+      <h2 class="text-xl font-bold text-slate-900 sm:text-3xl">
+        {{ t('stop.stopIntro.datasenteret.page1.title') }}
+      </h2>
+
+      <p
+        class="text-sm leading-6 text-slate-700 whitespace-pre-line sm:text-base sm:leading-7"
+      >
+        {{ t('stop.stopIntro.datasenteret.page1.body') }}
+      </p>
+    </template>
+  </article>
+</template>

src/stops/components/intro/MarkedsplassenIntroCard.vue

@@ -5,7 +5,9 @@ export const PAGE_COUNT = 6
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import WebLinkBar from '@/stops/components/intro/WebLinkBar.vue'
-import postkontoret1 from '@/assets/stops/postkontoret1.png'
+import markedsplassen1 from '@/assets/stops/markedsplassen1.png'
+import markedsplassen2 from '@/assets/stops/markedsplassen2.png'
+
 const props = defineProps<{
   page: number
 }>()
@@ -38,11 +40,7 @@ const { t } = useI18n()
       >
         {{ t('stop.stopIntro.markedsplassen.page2.body') }}
       </p>
-      <p
-        class="text-sm leading-6 text-slate-700 whitespace-pre-line sm:text-base sm:leading-7"
-      >
-        {{ t('stop.stopIntro.markedsplassen.page2.body2') }}
-      </p>
+      <WebLinkBar :address="t('stop.stopIntro.markedsplassen.page2.link1')" />
     </template>
 
     <template v-else-if="props.page === 2">
@@ -73,30 +71,41 @@ const { t } = useI18n()
 
     <template v-else-if="props.page === 3">
       <h2 class="text-xl font-bold text-slate-900 sm:text-3xl">
-        {{ t('stop.stopIntro.postkontoret.page4.title') }}
+        {{ t('stop.stopIntro.markedsplassen.page4.title') }}
       </h2>
 
       <p
         class="text-sm leading-6 text-slate-700 whitespace-pre-line sm:text-base sm:leading-7"
       >
-        {{ t('stop.stopIntro.postkontoret.page4.body') }}
+        {{ t('stop.stopIntro.markedsplassen.page4.body') }}
       </p>
-
-      <WebLinkBar :address="t('stop.stopIntro.postkontoret.page4.link1')" />
+      <img :src="markedsplassen1" />
     </template>
 
     <template v-else-if="props.page === 4">
       <h2 class="text-xl font-bold text-slate-900 sm:text-3xl">
-        {{ t('stop.stopIntro.postkontoret.page5.title') }}
+        {{ t('stop.stopIntro.markedsplassen.page5.title') }}
+      </h2>
+
+      <p
+        class="text-sm leading-6 text-slate-700 whitespace-pre-line sm:text-base sm:leading-7"
+      >
+        {{ t('stop.stopIntro.markedsplassen.page5.body') }}
+      </p>
+    </template>
+
+    <template v-else-if="props.page === 5">
+      <h2 class="text-xl font-bold text-slate-900 sm:text-3xl">
+        {{ t('stop.stopIntro.markedsplassen.page6.title') }}
       </h2>
 
       <p
         class="text-sm leading-6 text-slate-700 whitespace-pre-line sm:text-base sm:leading-7"
       >
-        {{ t('stop.stopIntro.postkontoret.page5.body') }}
+        {{ t('stop.stopIntro.markedsplassen.page6.body') }}
       </p>
 
-      <img :src="postkontoret1" class="size-90" />
+      <img :src="markedsplassen2" class="size-80" />
     </template>
   </article>
 </template>