refactor: add HelpComponent

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-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">
-                <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 ml-14 md:ml-10"
-                        src="@/assets/spare.png"
-                    />
-                </a>
-            </div>
+            <SpareComponent></SpareComponent>
             <div class="flex flex-row gap-2 items-center mx-auto my-4 md:flex-col md:gap-4 md:m-8">
                 <ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" />
                 <ButtonAddGoalOrChallenge
@@ -26,23 +12,14 @@
         </div>
         <savings-path :challenges="challenges" :goal="goal"></savings-path>
     </div>
-    <InteractiveSpare
+    <HelpComponent
         :speech="speech"
-        :direction="'right'"
-        :pngSize="15"
-        :isModalOpen="isModalOpen"
-        class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
-    ></InteractiveSpare>
-    <div class="fixed bottom-5 left-5">
-        <div @click="openHelp" class="hover:cursor-pointer">
-            <img alt="Hjelp" class="w-1/12" src="@/assets/hjelp.png" />
-        </div>
-    </div>
+        @openHelp="openHelp"
+    ></HelpComponent>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue'
 import type { Challenge } from '@/types/challenge'
 import type { Goal } from '@/types/goal'
@@ -50,12 +27,13 @@ import { useGoalStore } from '@/stores/goalStore'
 import { useChallengeStore } from '@/stores/challengeStore'
 import SavingsPath from '@/components/SavingsPath.vue'
 import router from '@/router'
+import SpareComponent from "@/components/SpareComponent.vue";
+import HelpComponent from "@/components/HelpComponent.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[]>([])
@@ -84,14 +62,6 @@ const firstLoggedInSpeech = () => {
         router.replace({ name: 'home', query: { firstLogin: 'false' } })
     }
 }
-
-const openInteractiveSpare = () => {
-    // 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
-    }
-}
 const openHelp = () => {
     speech.value = [
         'Heisann, jeg er Spare!',
@@ -99,7 +69,6 @@ const openHelp = () => {
         'Du kan legge til sparemål og spareutfordringer!',
         'Sammen kan vi spare penger og nå dine mål!'
     ]
-    isModalOpen.value = true
 }
 </script>