From 6e47b59071be3194e0e7862197dfa8b422cf84dc Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 2 Feb 2025 22:15:00 +0100
Subject: [PATCH] apply i18 to FAQ

---
 src/i18n/locales/en.ts | 20 ++++++++++++++++++
 src/i18n/locales/es.ts | 20 ++++++++++++++++++
 src/pages/FAQ.vue      | 48 +++++++++++++++++-------------------------
 3 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 46bcbfe..6c21834 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -32,5 +32,25 @@ export default {
     poweredBy: 'Powered by',
     donate: 'Donate',
   },
+  faq: {
+    title: 'Frequently Asked Questions',
+    items: [
+      {
+        question: "What is Bitcoin Lightning?",
+        answer: "Bitcoin Lightning is a layer 2 payment protocol that operates on top of the Bitcoin blockchain. It enables instant, low-cost transactions between participating nodes, making it ideal for everyday purchases."
+      },
+      {
+        question: "How do I pay with Lightning?",
+        answer: "To pay with Lightning, you'll need a Lightning-enabled Bitcoin wallet. When making a purchase, simply scan the merchant's QR code with your wallet and confirm the payment. The transaction is nearly instant!"
+      },
+      {
+        question: "Is Lightning safe to use?",
+        answer: "Yes, Lightning is secure as it inherits Bitcoin's security model. While it operates differently from base-layer Bitcoin transactions, it maintains high security standards through smart contract technology."
+      },
+      {
+        question: "How can I list my business?",
+        answer: "If you're a business accepting Lightning payments and would like to be listed in our directory, please contact us through our submission form [coming soon]."
+      }
+    ]
   }
 } 
\ No newline at end of file
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 24eeab5..04f9387 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -32,5 +32,25 @@ export default {
     poweredBy: 'Alimentado por',
     donate: 'Donar',
   },
+  faq: {
+    title: 'Preguntas Frecuentes',
+    items: [
+      {
+        question: "¿Qué es Bitcoin Lightning?",
+        answer: "Bitcoin Lightning es un protocolo de pago de capa 2 que opera sobre la blockchain de Bitcoin. Permite transacciones instantáneas y de bajo costo entre nodos participantes, haciéndolo ideal para compras cotidianas."
+      },
+      {
+        question: "¿Cómo pago con Lightning?",
+        answer: "Para pagar con Lightning, necesitarás una billetera Bitcoin habilitada para Lightning. Al realizar una compra, simplemente escanea el código QR del comerciante con tu billetera y confirma el pago. ¡La transacción es casi instantánea!"
+      },
+      {
+        question: "¿Es seguro usar Lightning?",
+        answer: "Sí, Lightning es seguro ya que hereda el modelo de seguridad de Bitcoin. Si bien opera de manera diferente a las transacciones de capa base de Bitcoin, mantiene altos estándares de seguridad a través de la tecnología de contratos inteligentes."
+      },
+      {
+        question: "¿Cómo puedo listar mi negocio?",
+        answer: "Si eres un negocio que acepta pagos Lightning y te gustaría aparecer en nuestro directorio, contáctanos a través de nuestro formulario de envío [próximamente]."
+      }
+    ]
   }
 } 
\ No newline at end of file
diff --git a/src/pages/FAQ.vue b/src/pages/FAQ.vue
index 3ad1fbe..998890a 100644
--- a/src/pages/FAQ.vue
+++ b/src/pages/FAQ.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   Accordion,
   AccordionContent,
@@ -7,50 +8,39 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion'
 
-interface FAQ {
-  question: string
-  answer: string
-}
+const { t, locale } = useI18n()
 
-const faqs = ref<FAQ[]>([
+const faqs = computed(() => [
   {
-    question: "What is Bitcoin Lightning?",
-    answer: "Bitcoin Lightning is a layer 2 payment protocol that operates on top of the Bitcoin blockchain. It enables instant, low-cost transactions between participating nodes, making it ideal for everyday purchases."
+    question: t('faq.items.0.question'),
+    answer: t('faq.items.0.answer')
   },
   {
-    question: "How do I pay with Lightning?",
-    answer: "To pay with Lightning, you'll need a Lightning-enabled Bitcoin wallet. When making a purchase, simply scan the merchant's QR code with your wallet and confirm the payment. The transaction is nearly instant!"
+    question: t('faq.items.1.question'),
+    answer: t('faq.items.1.answer')
   },
   {
-    question: "Is Lightning safe to use?",
-    answer: "Yes, Lightning is secure as it inherits Bitcoin's security model. While it operates differently from base-layer Bitcoin transactions, it maintains high security standards through smart contract technology."
+    question: t('faq.items.2.question'),
+    answer: t('faq.items.2.answer')
   },
   {
-    question: "How can I list my business?",
-    answer: "If you're a business accepting Lightning payments and would like to be listed in our directory, please contact us through our submission form [coming soon]."
+    question: t('faq.items.3.question'),
+    answer: t('faq.items.3.answer')
   }
 ])
 </script>
 
 <template>
   <div class="container mx-auto px-4 py-8">
-    <div class="max-w-4xl mx-auto">
-      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-8">
-        Frequently Asked Questions
+    <div class="max-w-3xl mx-auto">
+      <h1 class="text-3xl font-bold text-center mb-8">
+        {{ t('faq.title') }}
       </h1>
 
-      <Accordion type="single" collapsible class="w-full">
-        <AccordionItem
-          v-for="(faq, index) in faqs"
-          :key="index"
-          :value="`item-${index}`"
-        >
-          <AccordionTrigger class="text-left">
-            {{ faq.question }}
-          </AccordionTrigger>
-          <AccordionContent>
-            {{ faq.answer }}
-          </AccordionContent>
+      <Accordion type="single" collapsible>
+        <AccordionItem v-for="(faq, index) in faqs" :key="index" :value="'item-' + index">
+          <AccordionTrigger>{{ faq.question }}</AccordionTrigger>
+          <AccordionContent>{{ faq.answer }}</AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>