src/lib/sections/Faq.svelte

@@ -0,0 +1,93 @@
+<script>
+  import { t } from '$lib/translations';
+</script>
+
+<section id="faq">
+  <h1>{$t('faq.title')}</h1>
+  <p class="intro">
+    {$t('faq.intro')}
+  </p>
+
+  <div class="faq-list">
+    <details>
+      <summary>{$t('faq.items.openPesOnline.summary')}</summary>
+      <p>{$t('faq.items.openPesOnline.description')}</p>
+    </details>
+
+    <details>
+      <summary>{$t('faq.items.supportedFormats.summary')}</summary>
+      <p>{$t('faq.items.supportedFormats.description')}</p>
+    </details>
+
+    <details>
+      <summary>{$t('faq.items.needSoftware.summary')}</summary>
+      <p>{$t('faq.items.needSoftware.description')}</p>
+    </details>
+
+    <details>
+      <summary>{$t('faq.items.isSafe.summary')}</summary>
+      <p>{$t('faq.items.isSafe.description')}</p>
+    </details>
+
+    <details>
+      <summary>{$t('faq.items.multipleFiles.summary')}</summary>
+      <p>{$t('faq.items.multipleFiles.description')}</p>
+    </details>
+
+    <details>
+      <summary>{$t('faq.items.mobileSupport.summary')}</summary>
+      <p>{$t('faq.items.mobileSupport.description')}</p>
+    </details>
+  </div>
+</section>
+
+<style>
+  #faq {
+    padding: 100px 20px;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  #faq h1 {
+    font-weight: 700;
+    font-size: 2.5rem;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  #faq .intro {
+    text-align: center;
+    margin: 10px 0 40px;
+  }
+
+  .faq-list details {
+    border-bottom: 1px solid #eee;
+    padding: 20px 0;
+  }
+
+  .faq-list summary {
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 1.2rem;
+    list-style: none;
+    position: relative;
+    color: var(--color-primary);
+  }
+
+  .faq-list summary::after {
+    content: '+';
+    position: absolute;
+    right: 0;
+    font-size: 1.7rem;
+    transition: transform 0.3s ease;
+  }
+
+  .faq-list details[open] summary::after {
+    transform: rotate(45deg);
+  }
+
+  .faq-list p {
+    margin-top: 10px;
+    line-height: 1.6;
+  }
+</style>

src/lib/translations/en-US/faq.json

@@ -0,0 +1,30 @@
+{
+  "title": "Frequently Asked Questions",
+  "intro": "Learn how to open embroidery files online, supported formats, and how Embroidery Viewer works — all in one place.",
+  "items": {
+    "openPesOnline": {
+      "summary": "How can I open a PES file online?",
+      "description": "You can open a PES file instantly using Embroidery Viewer. Just drag and drop your file into the browser to preview your embroidery design—no software installation required."
+    },
+    "supportedFormats": {
+      "summary": "What embroidery file formats are supported?",
+      "description": "Embroidery Viewer supports popular formats such as PES, DST, and EXP. This allows you to preview most embroidery designs used by home and commercial machines."
+    },
+    "needSoftware": {
+      "summary": "Do I need to install any embroidery software?",
+      "description": "No. Embroidery Viewer works entirely in your browser, so you can open embroidery files online without downloading or installing any software."
+    },
+    "isSafe": {
+      "summary": "Is it safe to use Embroidery Viewer?",
+      "description": "Yes. Your files are processed locally in your browser and are never uploaded to any server, ensuring complete privacy."
+    },
+    "multipleFiles": {
+      "summary": "Can I view multiple embroidery files at once?",
+      "description": "Yes. You can open and compare multiple embroidery files in a single view, making it easier to review and choose designs."
+    },
+    "mobileSupport": {
+      "summary": "Can I use this on mobile or tablet?",
+      "description": "Yes. Embroidery Viewer works on desktop, tablet, and mobile devices, as long as you are using a modern web browser."
+    }
+  }
+}

src/lib/translations/index.js

@@ -147,6 +147,16 @@ const config = {
       key: 'features',
       loader: async () => (await import('./en-US/features.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.PT_BR,
+      key: 'faq',
+      loader: async () => (await import('./pt-BR/faq.json')).default,
+    },
+    {
+      locale: SUPPORTED_LOCALES.EN_US,
+      key: 'faq',
+      loader: async () => (await import('./en-US/faq.json')).default,
+    },
   ],
 };
 

src/lib/translations/pt-BR/faq.json

@@ -0,0 +1,30 @@
+{
+  "title": "Perguntas Frequentes",
+  "intro": "Saiba como abrir arquivos de bordado online, quais formatos são suportados e como o Embroidery Viewer funciona — tudo em um só lugar.",
+  "items": {
+    "openPesOnline": {
+      "summary": "Como posso abrir um arquivo PES online?",
+      "description": "Você pode abrir um arquivo PES instantaneamente usando o Embroidery Viewer. Basta arrastar e soltar o arquivo no navegador para visualizar o design de bordado — sem precisar instalar nenhum software."
+    },
+    "supportedFormats": {
+      "summary": "Quais formatos de arquivos de bordado são suportados?",
+      "description": "O Embroidery Viewer suporta formatos populares como PES, DST e EXP. Isso permite visualizar a maioria dos designs de bordado usados em máquinas domésticas e industriais."
+    },
+    "needSoftware": {
+      "summary": "Preciso instalar algum software de bordado?",
+      "description": "Não. O Embroidery Viewer funciona totalmente no navegador, permitindo abrir arquivos de bordado online sem precisar baixar ou instalar nada."
+    },
+    "isSafe": {
+      "summary": "É seguro usar o Embroidery Viewer?",
+      "description": "Sim. Seus arquivos são processados localmente no seu navegador e nunca são enviados para nenhum servidor, garantindo total privacidade."
+    },
+    "multipleFiles": {
+      "summary": "Posso visualizar vários arquivos de bordado ao mesmo tempo?",
+      "description": "Sim. Você pode abrir e comparar vários arquivos simultaneamente em uma única visualização, facilitando a análise e escolha dos designs."
+    },
+    "mobileSupport": {
+      "summary": "Posso usar no celular ou tablet?",
+      "description": "Sim. O Embroidery Viewer funciona em desktop, tablet e celular, desde que você utilize um navegador moderno."
+    }
+  }
+}

src/routes/+page.svelte

@@ -1,12 +1,8 @@
 <script>
-  // @ts-nocheck
-
-  import { t } from '$lib/translations';
-  import { resolve } from '$app/paths';
-
   import Seo from '$lib/components/Seo.svelte';
   import Hero from '$lib/sections/Hero.svelte';
   import Features from '$lib/sections/Features.svelte';
+  import Faq from '$lib/sections/Faq.svelte';
 
   let { data } = $props();
 
@@ -16,60 +12,6 @@
 
 <Seo {...metadata} />
 
-<!-- eslint-disable svelte/no-at-html-tags -->
 <Hero />
 <Features />
-
+<Faq />
-<div class="home-container">
-  <section aria-labelledby="main-title">
-    <h1 id="main-title">{$t('home.main.title')}</h1>
-    {@html $t('home.main.description')}
-  </section>
-
-  <section aria-labelledby="features-title">
-    <h2 id="features-title">{$t('home.features.title')}</h2>
-    {@html $t('home.features.list')}
-  </section>
-
-  <section aria-labelledby="how-to-use-title">
-    <h2 id="how-to-use-title">{$t('home.howtouse.title')}</h2>
-    {@html $t('home.howtouse.list')}
-  </section>
-
-  <section aria-labelledby="testimonials-title">
-    <h2 id="testimonials-title">{$t('home.testimonials.title')}</h2>
-    {@html $t('home.testimonials.description')}
-  </section>
-
-  <section aria-labelledby="donation-title">
-    <h2 id="donation-title">{$t('home.donation.title')}</h2>
-    {@html $t('home.donation.description')}
-    <p>
-      <a href={resolve('/donate')} class="button">{$t('home.donation.cta')}</a>
-      – {$t('home.donation.cta.description')}
-    </p>
-  </section>
-
-  <!--TODO: add video preview-->
-  <section aria-labelledby="cta-title">
-    <h2 id="cta-title">{$t('home.cta.title')}</h2>
-    <p>
-      <a href={resolve('/viewer')} class="button">{$t('home.cta.cta')}</a>
-      – {@html $t('home.cta.cta.description')}
-    </p>
-  </section>
-</div>
-
-<style>
-  .home-container {
-    margin: 0 auto;
-    width: 70%;
-    padding-top: 20px;
-  }
-
-  @media (max-width: 768px) {
-    .home-container {
-      width: 90%;
-    }
-  }
-</style>