fix: add help button

src/views/HomeView.vue

 <template>
     <div class="flex flex-col items-center max-h-[60vh] md:flex-row md:max-h-[80vh] mx-auto">
-        <div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-10">
+        <div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-1 mt-10">
+            <img v-if="newSpeechAvailable" alt="Varsel"
+                 class="jump scale-x-[-1] w-1/12 h-1/12 ml-52 cursor-pointer z-10"
+                 src="@/assets/varsel.png"
+            />
             <div class="flex items-center">
-                <img v-if="speech.length > 0" alt="Varsel"
-                     class="scale-x-[-1] md:h-1/6 md:w-1/6 w-1/6 h-1/6 cursor-pointer"
-                     src="@/assets/varsel.png"
-                />
-                <a @click="openInteractiveSpare" class="hover:bg-transparent">
+                <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
                     <img alt="Spare"
-                         class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer"
+                         class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
                          src="@/assets/spare.png"
                     />
                 </a>
@@ -29,11 +29,20 @@
         :pngSize="15"
         :is-modal-open="isModalOpen"
         class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
+        v-if="isModalOpen"
     ></InteractiveSpare>
+    <div class="fixed bottom-5 left-5">
+        <a @click="openHelp" class="hover:cursor-pointer">
+            <img alt="Hjelp"
+                 class="w-1/12"
+                 src="@/assets/hjelp.png"
+            />
+        </a>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue'
 import type { Challenge } from '@/types/challenge'
@@ -45,6 +54,8 @@ import SavingsPath from '@/components/SavingsPath.vue'
 const goalStore = useGoalStore()
 const challengeStore = useChallengeStore()
 const isModalOpen = ref(false)
+const speech = ref<string[]>([])
+const newSpeechAvailable = ref(false)
 
 const challenges = ref<Challenge[]>([])
 const goals = ref<Goal[]>([])
@@ -59,17 +70,49 @@ onMounted(async () => {
     goal.value = goals.value[0]
 })
 
-// Speech array for InteractiveSpare component
-const speechArray = [
+const updateSpeech = (newSpeech: string[]) => {
+    speech.value = newSpeech;
+    newSpeechAvailable.value = true;
+    console.log('New speech available:', speech.value)
+}
+
+updateSpeech([
     'Hei, jeg er Spare!',
     'Jeg skal hjelpe deg med å spare penger.',
-    'Klikk på meg for å høre mer.'
-]
-
-const speech = ref(speechArray)
+    'Du får varsel når jeg har noe å si!'
+])
 
 const openInteractiveSpare = () => {
-    isModalOpen.value = true
-    console.log('Modal opened')
+    console.log('Opening interactive spare available', newSpeechAvailable.value)
+    // Check if there's new speech available before opening the modal.
+    if (newSpeechAvailable.value) {
+        isModalOpen.value = true // Open the modal
+        newSpeechAvailable.value = false // Reset the flag since the speech will now be displayed
+        console.log('Opening interactive spare')
+    } else {
+        console.log('No new speech available')
+    }
+}
+const openHelp = () => {
+    updateSpeech([
+        'Heisann, jeg er Spare!',
+        'Jeg skal hjelpe deg med å spare penger.',
+        'Du kan legge til sparemål og spareutfordringer!',
+        'Sammen kan vi spare penger og nå dine mål!',
+    ])
+    openInteractiveSpare()
 }
+
+
 </script>
+
+<style>
+@keyframes jump {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.jump {
+    animation: jump 0.6s infinite ease-in-out;
+}
+</style>
\ No newline at end of file