Version 3.0.0 Redesign #34
5 changed files with 165 additions and 60 deletions
93
src/lib/sections/Faq.svelte
Normal file
93
src/lib/sections/Faq.svelte
Normal file
|
|
@ -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>
|
||||
30
src/lib/translations/en-US/faq.json
Normal file
30
src/lib/translations/en-US/faq.json
Normal file
|
|
@ -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."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
30
src/lib/translations/pt-BR/faq.json
Normal file
30
src/lib/translations/pt-BR/faq.json
Normal file
|
|
@ -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."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 />
|
||||
|
||||
<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>
|
||||
<Faq />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue