Add about page

src/i18n/translations.js

@@ -8,7 +8,7 @@ export default {
       "nav.home": "🏠 Home",
       "nav.viewer": "🧵 Viewer",
       "nav.donate": "💖 Donate",
-      "nav.about": "ℹ️ About",
+      "nav.about": "ℹ About",
       "main.title": "Upload files",
       "home.main.title": "🧵 Free Online Embroidery File Viewer",
       "home.main.description": "<p>✨Upload and preview your embroidery designs instantly – no software needed.</p> <p><strong>Embroidery Viewer</strong> is a free, browser-based tool that supports multiple embroidery file formats. View your designs quickly and securely, right in your browser.</p>",
@@ -36,6 +36,8 @@ export default {
       "donate.monero.description": "Private and secure donation option.",
       "donate.paypal.description": "Want to show support in a friendly way?",
       "donate.paypal.link": "Open Donation link",
+      "about.title": "ℹ About Embroidery Viewer",
+      "about.content": "<p>Hi there! 👋</p><p><strong>⭐️ Embroidery Viewer</strong> was born out of a simple need — helping someone I care about. 💖</p><p>My girlfriend loves embroidery, but she often struggled to find an easy and free way to preview her embroidery design files before stitching them. Most tools she tried were either paid, overly complex, or required technical knowledge — and she’s not a techie.</p><p>So, to make things easier for her (and others like her), I decided to build this web application.</p><p>Over the course of a few weeks, I created <strong>Embroidery Viewer</strong> — a lightweight, fast, and free tool that lets you view embroidery files directly in your browser. No installation, no setup, and no tech hurdles. Just upload your file and see your design.</p><p>It’s not a super sophisticated tool, but it solves the problem it was meant to solve: making embroidery file previews accessible to everyone.</p><p>If this tool has helped you too, that makes me really happy! I plan to continue improving it based on feedback from users like you.</p><p>Thanks for stopping by — and happy stitching! 🧵✨</p>",
       "main.languageSwitch": "🇧🇷",
       "main.fileSize": "Max file size is <strong>{{fileSize}}MB</strong>.",
       "main.supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
@@ -59,7 +61,7 @@ export default {
       "nav.home": "🏠 Página Inicial",
       "nav.viewer": "🧵 Visualizador",
       "nav.donate": "💖 Doe",
-      "nav.about": "ℹ️ Sobre",
+      "nav.about": "ℹ Sobre",
       "home.main.title": "🧵 Visualizador de arquivos de bordado online gratuito",
       "home.main.description": "<p>✨Carregue e visualize seus desenhos de bordado instantaneamente – sem necessidade de software</p> <p><strong>Embroidery Viewer</strong> é uma ferramenta gratuita para navegador que suporta diversos formatos de arquivo de bordado. Visualize seus designs de forma rápida e segura, diretamente no seu navegador.</p>",
       "home.features.title": "🚀 Funcionalidades",
@@ -86,6 +88,8 @@ export default {
       "donate.monero.description": "Opção de doação privada e segura.",
       "donate.paypal.description": "Quer demonstrar apoio de uma forma amigável?",
       "donate.paypal.link": "Abrir Link de Doação",
+      "about.title": "ℹ Sobre o Embroidery Viewer",
+      "about.content": "<p>Oi! 👋</p><p><strong>⭐️ Embroidery Viewer</strong> nasceu de uma necessidade simples — ajudar alguém que eu amo. 💖</p><p>Minha namorada adora bordado, mas ela sempre teve dificuldades para encontrar uma maneira fácil e gratuita de visualizar os arquivos de design de bordado antes de começar a costurar. A maioria das ferramentas que ela tentou eram pagas, muito complexas ou exigiam conhecimento técnico — e ela não é da área de tecnologia.</p><p>Então, para facilitar a vida dela (e de outras pessoas como ela), decidi criar este aplicativo web.</p><p>Ao longo de algumas semanas, criei o <strong>Embroidery Viewer</strong> — uma ferramenta leve, rápida e gratuita que permite visualizar arquivos de bordado diretamente no navegador. Sem instalação, sem configuração e sem obstáculos técnicos. Basta enviar o arquivo e ver o design.</p><p>Não é uma ferramenta super sofisticada, mas resolve o problema para o qual foi criada: tornar a visualização de arquivos de bordado acessível para todos.</p><p>Se essa ferramenta também te ajudou, isso me deixa muito feliz! Pretendo continuar melhorando com base no feedback de usuários como você.</p><p>Obrigado por visitar — e bons bordados! 🧵✨</p>",
       "main.title": "Carregar arquivos",
       "main.languageSwitch": "🇺🇸",
       "main.fileSize": "O tamanho máximo de cada arquivo é <strong>{{fileSize}}MB</strong>.",

src/lib/pages/About.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { t } from "../../i18n"
+
+</script>
+<section aria-labelledby="about-heading">
+    <h1 id="about-heading">{$t('about.title')}</h1>
+
+    {@html $t("about.content")}
+  
+  </section>
+
+  <style>
+   section {
+    width: 70%;
+    margin: 0 auto;
+   } 
+
+
+  h1 {
+    padding: 0;
+    margin-bottom: 7px;
+  }
+
+    @media (max-width: 768px) {
+        section {
+            width: 100%;
+        }
+     }
+  </style>

src/utils/routes.js

@@ -1,5 +1,6 @@
 import Home from '../lib/pages/Home.svelte';
 import Donate from '../lib/pages/Donate.svelte';
+import About from '../lib/pages/About.svelte';
 import Viewer from '../lib/pages/Viewer.svelte';
 import NotFound from '../lib/pages/NotFound.svelte';
 
@@ -15,6 +16,10 @@ export const routes = {
   '/donate': {
     component: Donate,
     nameKey: "nav.donate"
+  },
+  '/about': {
+    component: About,
+    nameKey: "nav.about"
   }
 };