Add home page content

public/ads.txt

@@ -1 +0,0 @@
-google.com, pub-5761689301112420, DIRECT, f08c47fec0942fa0

src/app.css

@@ -60,3 +60,15 @@ body a:hover {
   background-color: #06345F;
   color: #ffffff;
 }
+
+:is(h1, h2, h3, h4, h5, h6) {
+    color: #06345F;
+}
+
+strong {
+  color: #06345F;
+}
+
+ul li::marker {
+  color: #06345F;
+}

src/i18n/translations.js

@@ -5,10 +5,26 @@ export default {
       "head.keywords": "free embroidery file viewer, open PES files online, view DST files, embroidery file preview, EXP file viewer, multiple embroidery files",
       "head.ogtitle": "Free Online Embroidery File Viewer – Open PES, DST & More",
       "head.ogdescription": "Upload and preview multiple embroidery files like PES, DST, and EXP online for free. No software needed!",
-      "nav.home": "Home",
-      "nav.donate": "Donate",
-      "nav.about": "About",
+      "nav.home": "🏠 Home",
+      "nav.viewer": "🧵 Viewer",
+      "nav.donate": "💖 Donate",
+      "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>",
+      "home.features.title": "🚀 Features",
+      "home.features.list": "<ul><li>📂 <strong>Supports Multiple Formats:</strong> DST, PES, JEF, EXP, VP3, and more</li><li>⚡ <strong>Quick Previews:</strong> See your embroidery files rendered as images</li><li>🧷 <strong>Multiple Files at Once:</strong> Upload several designs and view them side-by-side</li><li>🔒 <strong>No Upload to Server:</strong> Your files stay private – all processing happens locally</li><li>⬇️ <strong>Download as Image:</strong> Save each embroidery design preview as a PNG</li><li>💸 <strong>Fast & Free:</strong> No installations, no sign-ups – just open and use</li></ul>",
+      "home.howtouse.title": "📘 How to Use",
+      "home.howtouse.list": "<ol><li>📁 <strong>Click</strong> the upload button <em>or</em> <strong>drag and drop</strong> your embroidery files into the drop area</li><li>🧵 Select one or more embroidery files</li><li>▶️ Click the <strong>“Render files”</strong> button to preview your designs</li><li>👀 Instantly view your designs right in your browser – it’s that simple</li></ol>",
+      "home.testimonials.title": "❤️ Loved by Hobbyists and Professionals",
+      "home.testimonials.description": "<p>Whether you're a hobbyist working on your next DIY project or a professional digitizer reviewing client files, <strong>Embroidery Viewer</strong> gives you a no-fuss, instant way to visualize your work.</p>",
+      "home.donation.title": "💖 Help Keep It Free",
+      "home.donation.description": "<p><strong>Embroidery Viewer is completely free</strong> for everyone to use, with no ads.</p><p>If you find it useful and want to support ongoing development and hosting costs, please consider making a small donation.</p>",
+      "home.donation.cta": "🙌 Donate Now",
+      "home.donation.cta.description": "every little bit helps!",
+      "home.cta.title": "🚀 Try It Now",
+      "home.cta.cta": "🧵 Open Viewer",
+      "home.cta.cta.description": "the fastest <strong>Free Online Embroidery File Viewer</strong>.",
       "main.languageSwitch": "🇧🇷",
       "main.fileSize": "Max file size is <strong>{{fileSize}}kb</strong>.",
       "main.supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
@@ -20,7 +36,7 @@ export default {
       "main.dimensions": "Dimensions (x, y)",
       "main.download": "Download image",
       "main.copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> All rights reserved.",
-      "main.version": "Version: {{version}}"
+      "main.version": "🧵 Version: {{version}}"
     },
     pt: {
       "head.title": "Visualizador de arquivos de bordado online gratuito – Abra PES, DST, EXP e mais",
@@ -28,9 +44,25 @@ export default {
       "head.keywords": "visualizador de arquivos de bordado grátis, abra arquivos PES online, visualize arquivos DST, pré-visualização de arquivos de bordado, visualizador de arquivos EXP, vários arquivos de bordado",
       "head.ogtitle": "Visualizador de arquivos de bordado online gratuito – Abra PES, DST e mais",
       "head.ogdescription": "Carregue e visualize vários arquivos de bordado como PES, DST e EXP online gratuitamente. Não precisa de software!",
-      "nav.home": "Página Inicial",
-      "nav.donate": "Doe",
-      "nav.about": "Sobre",
+      "nav.home": "🏠 Página Inicial",
+      "nav.viewer": "🧵 Visualizador",
+      "nav.donate": "💖 Doe",
+      "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",
+      "home.features.list": "<ul><li>📂 <strong>Suporta vários formatos:</strong> DST, PES, JEF, EXP, VP3 e mais</li><li>⚡ <strong>Visualizações rápidas:</strong> Veja seus arquivos de bordado renderizados como imagens</li><li>🧷 <strong>Vários arquivos de uma só vez:</strong> Carregue vários designs e visualize-os lado a lado</li><li>🔒 <strong>Sem upload para o servidor:</strong> Seus arquivos permanecem privados – todo o processamento acontece localmente</li><li>⬇️ <strong>Baixar como imagem:</strong> Salve cada pré-visualização do desenho do bordado como um PNG</li><li>💸 <strong>Rápido e gratuito:</strong> Sem instalações, sem cadastros – basta abrir e usar</li></ul>",
+      "home.howtouse.title": "📘 Como usar",
+      "home.howtouse.list": "<ol><li>📁 <strong>Clique</strong> no botão de upload <em>ou</em> <strong>arraste e solte</strong> seus arquivos de bordado na área de soltar</li><li>🧵 Selecione um ou mais arquivos de bordado</li><li>▶️ Clique no botão <strong>“Renderizar arquivos”</strong> para visualizar seus designs</li><li>👀 Visualize seus designs instantaneamente no seu navegador – é simples assim</li></ol>",
+      "home.testimonials.title": "❤️ Amado por Hobbyistas e Profissionais",
+      "home.testimonials.description": "<p>Seja você um amador trabalhando em seu próximo projeto \"faça você mesmo\" ou um digitalizador profissional revisando arquivos de clientes, o <strong>Embroidery Viewer</strong> oferece uma maneira fácil e instantânea de visualizar seu trabalho.</p>",
+      "home.donation.title": "💖 Ajude a mantê-lo gratuito",
+      "home.donation.description": "<p><strong>O Embroidery Viewer é totalmente gratuito</strong> para todos usarem, sem anúncios.</p><p>Se você o achar útil e quiser apoiar o desenvolvimento contínuo e os custos de hospedagem, considere fazer uma pequena doação.</p>",
+      "home.donation.cta": "🙌 Doe agora",
+      "home.donation.cta.description": "cada pequena ajuda é bem-vinda!",
+      "home.cta.title": "🚀 Experimente agora",
+      "home.cta.cta": "🧵 Abrir visualizador",
+      "home.cta.cta.description": "o <strong>visualizador de arquivos de bordado online gratuito</strong> mais rápido.",
       "main.title": "Carregar arquivos",
       "main.languageSwitch": "🇺🇸",
       "main.fileSize": "O tamanho máximo do arquivo é <strong>{{fileSize}}kb</strong>.",
@@ -43,6 +75,6 @@ export default {
       "main.dimensions": "Dimensões (x, y)",
       "main.download": "Baixar imagem",
       "main.copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> Todos os direitos reservados.",
-      "main.version": "Versão: {{version}}"
+      "main.version": "🧵 Versão: {{version}}"
     },
   };

src/lib/components/Router.svelte

@@ -14,7 +14,7 @@
 
     let component;
     const unsubscribe = path.subscribe(current => {
-      component = routes[current].component || fallback;
+      component = routes[current] !== undefined ? routes[current].component : fallback;
     });
 
     onMount(() => () => unsubscribe());

src/lib/pages/Home.svelte

@@ -1,2 +1,60 @@
-<h1>Home</h1>
-<p>Welcome to the home page.</p>
+<script>
+    import { t } from "../../i18n"
+    import { path } from '../../utils/stores.js';
+
+    const onNavigateTo = (e, route) => {
+        e.preventDefault()
+        history.pushState({}, '', route);
+        path.set(route);
+      }
+</script>
+
+<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="#" on:click={(e) => onNavigateTo(e, "/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="#" on:click={(e) => onNavigateTo(e, "/viewer")} class="button">{$t("home.cta.cta")}</a> – {@html $t("home.cta.cta.description")}</p>
+</section>
+</div>
+
+
+<style>
+    .home-container {
+        margin: 0 auto;
+        max-width: 70%;
+    }
+
+    @media (max-width: 768px) {
+        .home-container {
+            max-width: 100%;
+        }
+     }
+</style>
+

src/lib/pages/Viewer.svelte

@@ -0,0 +1,4 @@
+<script>
+    import FileViewer from "../components/FileViewer.svelte"
+</script>
+<FileViewer/>

src/utils/routes.js

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