add: answer faqs

src/components/CardFaq.vue

@@ -2,12 +2,8 @@
 import { ref } from 'vue';
 
     defineProps({
-        question: {
-            type: String,
-            required: true
-        },
-        answer: {
-            type: String,
+        faq: {
+            type: Object,
             required: true
         }
     })
@@ -22,13 +18,24 @@ import { ref } from 'vue';
 <template>
     <div class="card-faq">
         <div class="question-box" @click="toggle">
-            <h3 class="question">{{ question }}</h3>
+            <h3 class="question">{{ faq.question }}</h3>
             <i v-if="!open" class="fa-solid fa-chevron-down icon-indicator"></i>
             <i v-else class="fa-solid fa-chevron-up icon-indicator"></i>
         </div>
-        <p 
-            v-if="open"
-            class="answer">{{ answer }}</p>
+        <div v-if="open">
+            <p 
+                v-if="faq.answer"
+                class="answer">{{ faq.answer }}</p>
+            <ol>
+                <li class="step" v-for="step in faq.steps" v-html="step"></li>
+            </ol>
+            <p 
+                class="asnwer"
+                v-if="faq.notes"
+            >
+                {{ faq.notes }}
+            </p>
+        </div>
     </div>
 </template>
 
@@ -70,4 +77,10 @@ import { ref } from 'vue';
         font-weight: normal;
         color: #323030;
     }
+    .step {
+        margin-top: 0.5rem;
+        font-size: 1.1rem;
+        font-weight: normal;
+        color: #323030;
+    }
 </style>