From fbb7c724f50a953a4bfaf7886fff13d103d1218e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Sun, 17 May 2026 12:19:19 -0300
Subject: [PATCH] feat: add dst file page

---
 src/lib/components/Footer.svelte              |   1 +
 .../translations/en-US/dst-file-viewer.json   |  90 ++++
 src/lib/translations/en-US/footer.json        |   1 +
 .../translations/en-US/pes-file-viewer.json   |   2 +-
 src/lib/translations/index.js                 |  14 +
 .../translations/pt-BR/dst-file-viewer.json   |  90 ++++
 src/lib/translations/pt-BR/footer.json        |   1 +
 .../translations/pt-BR/pes-file-viewer.json   |   2 +-
 src/routes/dst-file-viewer/+page.svelte       | 400 ++++++++++++++++++
 src/routes/sitemap.xml/+server.js             |   1 +
 10 files changed, 600 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/translations/en-US/dst-file-viewer.json
 create mode 100644 src/lib/translations/pt-BR/dst-file-viewer.json
 create mode 100644 src/routes/dst-file-viewer/+page.svelte

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 85e274b..548d1ce 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -37,6 +37,7 @@
       <nav class="social-container" aria-label="Social media">
         <a href={resolve('/about')}>{$t('footer.about')}</a>
         <a href={resolve('/pes-file-viewer')}>{$t('footer.pesViewer')}</a>
+        <a href={resolve('/dst-file-viewer')}>{$t('footer.dstViewer')}</a>
         <a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
         <a href={resolve('/terms-of-service')}
           >{$t('footer.terms.of.service')}</a
diff --git a/src/lib/translations/en-US/dst-file-viewer.json b/src/lib/translations/en-US/dst-file-viewer.json
new file mode 100644
index 0000000..2a28233
--- /dev/null
+++ b/src/lib/translations/en-US/dst-file-viewer.json
@@ -0,0 +1,90 @@
+{
+  "seo.title": "Free DST File Viewer Online — Open Embroidery Files Instantly",
+  "seo.description": "Open DST files online for free. Preview commercial and home embroidery designs in your browser — no install, no upload to servers. Also supports PES, JEF, EXP & PEC.",
+  "seo.keywords": "DST viewer, open DST file online, DST file viewer, free DST viewer, embroidery file viewer, how to view embroidery files, convert DST to PES, convert PES to DST, what is a DST file, Tajima embroidery file, online embroidery preview",
+  "seo.url": "https://embroideryviewer.xyz/dst-file-viewer",
+  "seo.image": "https://embroideryviewer.xyz/og/dst-viewer.png",
+  "hero.tagline": "Free · Private · No signup",
+  "hero.title": "Free DST File Viewer Online — Open Embroidery Files Instantly",
+  "hero.subtitle": "Preview stitch paths and dimensions in your browser — free, private, and no signup. DST is the industry-standard format for commercial machines and many home brands.",
+  "hero.cta": "Try Your Design",
+  "whatIs.title": "What is a DST file?",
+  "whatIs.p1": "A <strong>DST file</strong> (.dst) is a stitch-data format originally developed by <strong>Tajima</strong> and now the de facto standard for commercial embroidery. Most professional shops and many home machines accept DST.",
+  "whatIs.p2": "DST files store stitch movements, jumps, trims, and color-change stops. Unlike PES or JEF, DST does not embed a full thread palette in the file — colors are assigned by your machine or software, which is why previews focus on stitch paths and layout.",
+  "whatIs.p3": "You will see DST on design marketplaces, factory workflows, and converted downloads. Embroidery Viewer lets you open DST online and check size and stitch structure before loading the file on your machine.",
+  "howTo.title": "How to view DST embroidery files online",
+  "howTo.step1": "Open the <strong>free embroidery viewer</strong> in your browser.",
+  "howTo.step2": "Click <strong>Choose files</strong> or drag your .dst file (or .pes, .jef, .exp, .pec) into the drop zone.",
+  "howTo.step3": "Click <strong>Render files</strong> to generate a stitch preview on screen.",
+  "howTo.step4": "Review stitch count and dimensions — then download a PNG if you need a reference image.",
+  "formats.title": "Embroidery file formats we support",
+  "formats.intro": "Comparing DST with PES, JEF, and other formats Embroidery Viewer opens in your browser:",
+  "formats.table.headers": {
+    "format": "Format",
+    "extension": "Extension",
+    "machines": "Common machines",
+    "notes": "Notes"
+  },
+  "formats.rows.dst.format": "DST",
+  "formats.rows.dst.extension": ".dst",
+  "formats.rows.dst.machines": "Commercial & many home brands",
+  "formats.rows.dst.notes": "Industry standard; stitch data without embedded thread colors",
+  "formats.rows.pes.format": "PES / PEC",
+  "formats.rows.pes.extension": ".pes, .pec",
+  "formats.rows.pes.machines": "Brother, Babylock",
+  "formats.rows.pes.notes": "Popular for home embroidery downloads",
+  "formats.rows.jef.format": "JEF",
+  "formats.rows.jef.extension": ".jef",
+  "formats.rows.jef.machines": "Janome, Elna, Kenmore",
+  "formats.rows.jef.notes": "Janome's native format",
+  "formats.rows.exp.format": "EXP",
+  "formats.rows.exp.extension": ".exp",
+  "formats.rows.exp.machines": "Melco, Bernina (export)",
+  "formats.rows.exp.notes": "Simple stitch list, widely supported",
+  "convert.title": "Can I convert DST to PES online?",
+  "convert.p1": "Embroidery Viewer is a <strong>preview tool</strong>, not a file converter. It lets you open a DST file online and see stitch paths, color stops, and overall size before you stitch or send the file to production.",
+  "convert.p2": "To convert DST to PES (or PES to DST) use embroidery software such as Wilcom, Hatch, Embrilliance, or Ink/Stitch. After converting, use Embroidery Viewer to preview the new file for free.",
+  "screenshots.title": "See your DST design before you stitch",
+  "screenshots.intro": "Preview stitch paths and dimensions without installing desktop software.",
+  "screenshots.viewer.alt": "Embroidery Viewer showing a DST file preview with stitch paths",
+  "screenshots.hero.alt": "Upload interface for opening DST embroidery files online",
+  "faq.title": "Frequently asked questions about DST & embroidery files",
+  "faq.intro": "Answers to common searches — from opening DST online to converting formats and using the embroidery file viewer.",
+  "faq.items": {
+    "openDstOnline": {
+      "summary": "How can I open a DST file online?",
+      "description": "Use Embroidery Viewer: open the free viewer, drag your .dst file into the drop zone, and click Render files. Everything runs in your browser — no Tajima software or Windows-only tools required."
+    },
+    "pesViewer": {
+      "summary": "Can I open PES files too?",
+      "description": "Yes. The same viewer supports PES, DST, JEF, EXP, and PEC. If you work with Brother home formats, see our PES file viewer guide at embroideryviewer.xyz/pes-file-viewer."
+    },
+    "howToView": {
+      "summary": "How do I view embroidery files without software?",
+      "description": "Open embroideryviewer.xyz in any modern browser. Supported formats include DST, PES, JEF, EXP, and PEC. Your files are processed locally and never sent to a server."
+    },
+    "convertDstPes": {
+      "summary": "How do I convert DST to PES or PES to DST?",
+      "description": "Conversion requires embroidery editing software — Embrilliance, Hatch, Wilcom, or Ink/Stitch (free). Export to the format your machine needs, then preview the result in Embroidery Viewer before stitching."
+    },
+    "whatIsJef": {
+      "summary": "What is a JEF file?",
+      "description": "JEF (.jef) is Janome's native embroidery format. It stores stitches and thread colors for Janome, Elna, and compatible machines. You can preview JEF files in the viewer alongside DST and PES."
+    },
+    "embroideryViewer": {
+      "summary": "What is the best free embroidery file viewer?",
+      "description": "Embroidery Viewer is built for quick, private previews: no account, no install, no upload. It supports DST and the formats most embroiderers use daily on desktop and mobile."
+    },
+    "isSafe": {
+      "summary": "Is it safe to open my DST files here?",
+      "description": "Yes. Files are read and rendered inside your browser using JavaScript. They are not uploaded, stored, or shared with any server."
+    },
+    "mobile": {
+      "summary": "Can I open DST files on my phone?",
+      "description": "Yes, on modern mobile browsers. Tap Choose files, select your .dst from Files or cloud storage, and tap Render files to preview."
+    }
+  },
+  "cta.title": "Ready to preview your DST design?",
+  "cta.subtitle": "Open DST, PES, JEF, EXP, or PEC files in seconds — free and private.",
+  "cta.button": "Try Your Design"
+}
diff --git a/src/lib/translations/en-US/footer.json b/src/lib/translations/en-US/footer.json
index a573325..b432af6 100644
--- a/src/lib/translations/en-US/footer.json
+++ b/src/lib/translations/en-US/footer.json
@@ -9,6 +9,7 @@
   },
   "about": "About",
   "pesViewer": "PES File Viewer",
+  "dstViewer": "DST File Viewer",
   "privacy.policy": "Privacy Policy",
   "terms.of.service": "Terms of Service",
   "copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. All rights reserved.",
diff --git a/src/lib/translations/en-US/pes-file-viewer.json b/src/lib/translations/en-US/pes-file-viewer.json
index 5ef6579..ff566eb 100644
--- a/src/lib/translations/en-US/pes-file-viewer.json
+++ b/src/lib/translations/en-US/pes-file-viewer.json
@@ -57,7 +57,7 @@
     },
     "dstViewer": {
       "summary": "Is there a free DST viewer online?",
-      "description": "Yes. Embroidery Viewer opens DST files the same way as PES — upload or drag the file, then preview stitches and dimensions. DST is common for commercial machines and many home brands that accept universal formats."
+      "description": "Yes. Embroidery Viewer opens DST files the same way as PES — upload or drag the file, then preview stitches and dimensions. See our dedicated DST guide at embroideryviewer.xyz/dst-file-viewer."
     },
     "howToView": {
       "summary": "How do I view embroidery files without software?",
diff --git a/src/lib/translations/index.js b/src/lib/translations/index.js
index ba68ee7..79277d4 100644
--- a/src/lib/translations/index.js
+++ b/src/lib/translations/index.js
@@ -80,6 +80,13 @@ const config = {
       loader: async () =>
         (await import('./en-US/pes-file-viewer.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.EN_US,
+      key: 'dst-file-viewer',
+      routes: ['/dst-file-viewer'],
+      loader: async () =>
+        (await import('./en-US/dst-file-viewer.json')).default,
+    },
     {
       locale: SUPPORTED_LOCALES.PT_BR,
       key: 'header',
@@ -141,6 +148,13 @@ const config = {
       loader: async () =>
         (await import('./pt-BR/pes-file-viewer.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.PT_BR,
+      key: 'dst-file-viewer',
+      routes: ['/dst-file-viewer'],
+      loader: async () =>
+        (await import('./pt-BR/dst-file-viewer.json')).default,
+    },
     {
       locale: SUPPORTED_LOCALES.PT_BR,
       key: 'hero',
diff --git a/src/lib/translations/pt-BR/dst-file-viewer.json b/src/lib/translations/pt-BR/dst-file-viewer.json
new file mode 100644
index 0000000..48a42d1
--- /dev/null
+++ b/src/lib/translations/pt-BR/dst-file-viewer.json
@@ -0,0 +1,90 @@
+{
+  "seo.title": "Visualizador de Arquivos DST Online Grátis — Abra Bordados na Hora",
+  "seo.description": "Abra arquivos DST online gratuitamente. Visualize bordados comerciais e domésticos no navegador — sem instalar, sem enviar para servidores. Também suporta PES, JEF, EXP e PEC.",
+  "seo.keywords": "visualizador DST, abrir arquivo DST online, visualizador de bordado, como ver arquivo de bordado, converter DST para PES, converter PES para DST, o que é arquivo DST, arquivo Tajima bordado, preview bordado online",
+  "seo.url": "https://embroideryviewer.xyz/dst-file-viewer",
+  "seo.image": "https://embroideryviewer.xyz/og/dst-viewer.png",
+  "hero.tagline": "Grátis · Privado · Sem cadastro",
+  "hero.title": "Visualizador de Arquivos DST Online Grátis — Abra Bordados na Hora",
+  "hero.subtitle": "Veja caminhos de pontos e dimensões no navegador — grátis, privado e sem cadastro. DST é o padrão da indústria para máquinas comerciais e muitas domésticas.",
+  "hero.cta": "Experimente seu desenho",
+  "whatIs.title": "O que é um arquivo DST?",
+  "whatIs.p1": "Um <strong>arquivo DST</strong> (.dst) é um formato de dados de pontos criado originalmente pela <strong>Tajima</strong> e hoje o padrão de fato no bordado comercial. A maioria das oficinas profissionais e muitas máquinas domésticas aceita DST.",
+  "whatIs.p2": "Arquivos DST armazenam movimentos de ponto, saltos, aparos e paradas de troca de cor. Diferente de PES ou JEF, o DST não embute uma paleta completa de linhas — as cores são definidas pela máquina ou software.",
+  "whatIs.p3": "Você encontra DST em marketplaces, fluxos de fábrica e downloads convertidos. O Embroidery Viewer permite abrir DST online e conferir tamanho e estrutura antes de bordar.",
+  "howTo.title": "Como visualizar arquivos DST de bordado online",
+  "howTo.step1": "Abra o <strong>visualizador de bordado gratuito</strong> no navegador.",
+  "howTo.step2": "Clique em <strong>Escolher arquivos</strong> ou arraste seu .dst (ou .pes, .jef, .exp, .pec) para a área de soltar.",
+  "howTo.step3": "Clique em <strong>Renderizar arquivos</strong> para gerar a prévia na tela.",
+  "howTo.step4": "Revise contagem de pontos e dimensões — e baixe um PNG se precisar de referência.",
+  "formats.title": "Formatos de bordado suportados",
+  "formats.intro": "Comparação entre DST, PES, JEF e outros formatos que o Embroidery Viewer abre no navegador:",
+  "formats.table.headers": {
+    "format": "Formato",
+    "extension": "Extensão",
+    "machines": "Máquinas comuns",
+    "notes": "Observações"
+  },
+  "formats.rows.dst.format": "DST",
+  "formats.rows.dst.extension": ".dst",
+  "formats.rows.dst.machines": "Comercial e várias domésticas",
+  "formats.rows.dst.notes": "Padrão da indústria; dados de ponto sem cores embutidas",
+  "formats.rows.pes.format": "PES / PEC",
+  "formats.rows.pes.extension": ".pes, .pec",
+  "formats.rows.pes.machines": "Brother, Babylock",
+  "formats.rows.pes.notes": "Popular em downloads domésticos",
+  "formats.rows.jef.format": "JEF",
+  "formats.rows.jef.extension": ".jef",
+  "formats.rows.jef.machines": "Janome, Elna, Kenmore",
+  "formats.rows.jef.notes": "Formato nativo Janome",
+  "formats.rows.exp.format": "EXP",
+  "formats.rows.exp.extension": ".exp",
+  "formats.rows.exp.machines": "Melco, Bernina (exportação)",
+  "formats.rows.exp.notes": "Lista simples de pontos, amplamente suportado",
+  "convert.title": "Posso converter DST para PES online?",
+  "convert.p1": "O Embroidery Viewer é uma <strong>ferramenta de prévia</strong>, não um conversor. Ele permite abrir DST online e ver pontos, paradas de cor e tamanho antes de bordar ou enviar para produção.",
+  "convert.p2": "Para converter DST em PES (ou PES em DST) use software de bordado como Wilcom, Hatch, Embrilliance ou Ink/Stitch. Depois visualize o novo arquivo gratuitamente no visualizador.",
+  "screenshots.title": "Veja seu DST antes de costurar",
+  "screenshots.intro": "Visualize pontos e dimensões sem instalar software no computador.",
+  "screenshots.viewer.alt": "Embroidery Viewer exibindo prévia de arquivo DST com caminhos de pontos",
+  "screenshots.hero.alt": "Interface de envio para abrir arquivos DST de bordado online",
+  "faq.title": "Perguntas frequentes sobre DST e arquivos de bordado",
+  "faq.intro": "Respostas às buscas mais comuns — de abrir DST online a converter formatos e usar o visualizador.",
+  "faq.items": {
+    "openDstOnline": {
+      "summary": "Como abrir um arquivo DST online?",
+      "description": "Use o Embroidery Viewer: abra o visualizador gratuito, arraste o .dst para a área e clique em Renderizar arquivos. Tudo roda no navegador — sem software Tajima ou ferramentas só para Windows."
+    },
+    "pesViewer": {
+      "summary": "Posso abrir arquivos PES também?",
+      "description": "Sim. O mesmo visualizador suporta PES, DST, JEF, EXP e PEC. Para formatos Brother, veja o guia em embroideryviewer.xyz/pes-file-viewer."
+    },
+    "howToView": {
+      "summary": "Como ver arquivos de bordado sem software?",
+      "description": "Abra embroideryviewer.xyz em qualquer navegador moderno. Formatos: DST, PES, JEF, EXP e PEC. Os arquivos são processados localmente e nunca enviados a um servidor."
+    },
+    "convertDstPes": {
+      "summary": "Como converter DST para PES ou PES para DST?",
+      "description": "A conversão exige software de edição — Embrilliance, Hatch, Wilcom ou Ink/Stitch (grátis). Exporte para o formato da sua máquina e visualize o resultado no Embroidery Viewer antes de bordar."
+    },
+    "whatIsJef": {
+      "summary": "O que é um arquivo JEF?",
+      "description": "JEF (.jef) é o formato nativo da Janome. Armazena pontos e cores para Janome, Elna e compatíveis. Você pode visualizar JEF junto com DST e PES."
+    },
+    "embroideryViewer": {
+      "summary": "Qual o melhor visualizador gratuito de bordado?",
+      "description": "O Embroidery Viewer foi feito para prévias rápidas e privadas: sem conta, sem instalação, sem upload. Suporta DST e os formatos mais usados no desktop e celular."
+    },
+    "isSafe": {
+      "summary": "É seguro abrir meus arquivos DST aqui?",
+      "description": "Sim. Os arquivos são lidos e renderizados no navegador com JavaScript. Não são enviados, armazenados nem compartilhados com servidores."
+    },
+    "mobile": {
+      "summary": "Posso abrir DST no celular?",
+      "description": "Sim, em navegadores móveis modernos. Toque em Escolher arquivos, selecione o .dst e toque em Renderizar arquivos."
+    }
+  },
+  "cta.title": "Pronto para ver seu DST?",
+  "cta.subtitle": "Abra DST, PES, JEF, EXP ou PEC em segundos — grátis e privado.",
+  "cta.button": "Experimente seu desenho"
+}
diff --git a/src/lib/translations/pt-BR/footer.json b/src/lib/translations/pt-BR/footer.json
index b426685..3695c65 100644
--- a/src/lib/translations/pt-BR/footer.json
+++ b/src/lib/translations/pt-BR/footer.json
@@ -9,6 +9,7 @@
   },
   "about": "Sobre",
   "pesViewer": "Visualizador PES",
+  "dstViewer": "Visualizador DST",
   "privacy.policy": "Política de Privacidade",
   "terms.of.service": "Termos de Serviço",
   "copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. Todos os direitos reservados.",
diff --git a/src/lib/translations/pt-BR/pes-file-viewer.json b/src/lib/translations/pt-BR/pes-file-viewer.json
index 7c15054..232a05b 100644
--- a/src/lib/translations/pt-BR/pes-file-viewer.json
+++ b/src/lib/translations/pt-BR/pes-file-viewer.json
@@ -57,7 +57,7 @@
     },
     "dstViewer": {
       "summary": "Existe visualizador DST online grátis?",
-      "description": "Sim. O Embroidery Viewer abre DST como PES — envie ou arraste o arquivo e veja pontos e dimensões. DST é comum em máquinas comerciais e muitas domésticas."
+      "description": "Sim. O Embroidery Viewer abre DST como PES — envie ou arraste o arquivo e veja pontos e dimensões. Veja o guia DST em embroideryviewer.xyz/dst-file-viewer."
     },
     "howToView": {
       "summary": "Como ver arquivos de bordado sem software?",
diff --git a/src/routes/dst-file-viewer/+page.svelte b/src/routes/dst-file-viewer/+page.svelte
new file mode 100644
index 0000000..394bf31
--- /dev/null
+++ b/src/routes/dst-file-viewer/+page.svelte
@@ -0,0 +1,400 @@
+<script>
+  import { resolve } from '$app/paths';
+  import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
+  import { t, locale } from '$lib/translations';
+
+  import Head from '$lib/components/Head.svelte';
+  import StructuredData from '$lib/components/StructuredData.svelte';
+
+  const NS = 'dst-file-viewer';
+  const baseUrl = 'https://embroideryviewer.xyz/dst-file-viewer';
+
+  const dstFilePreview = `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_800/embroidery-viewer/${$locale}/dst-file-preview.webp`;
+  const viewerInterface = `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_800/embroidery-viewer/${$locale}/viewer-interface.webp`;
+
+  const faqKeys = [
+    'openDstOnline',
+    'pesViewer',
+    'howToView',
+    'convertDstPes',
+    'whatIsJef',
+    'embroideryViewer',
+    'isSafe',
+    'mobile',
+  ];
+
+  $: faqStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqKeys.map((key) => ({
+      '@type': 'Question',
+      name: $t(`${NS}.faq.items.${key}.summary`),
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: $t(`${NS}.faq.items.${key}.description`),
+      },
+    })),
+  };
+
+  $: webAppStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'WebApplication',
+    name: 'Embroidery Viewer — DST File Viewer',
+    url: baseUrl,
+    applicationCategory: 'DesignApplication',
+    operatingSystem: 'Any',
+    offers: {
+      '@type': 'Offer',
+      price: '0',
+      priceCurrency: 'USD',
+    },
+    description: $t(`${NS}.seo.description`),
+    featureList: 'DST, PES, JEF, EXP, PEC embroidery file preview',
+  };
+
+  $: howToStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: $t(`${NS}.howTo.title`),
+    step: ['step1', 'step2', 'step3', 'step4'].map((step, i) => ({
+      '@type': 'HowToStep',
+      position: i + 1,
+      text: $t(`${NS}.howTo.${step}`),
+    })),
+  };
+</script>
+
+<Head
+  title={`${NS}.seo.title`}
+  description={`${NS}.seo.description`}
+  keywords={`${NS}.seo.keywords`}
+  url={`${NS}.seo.url`}
+  ogImage={`${NS}.seo.image`}
+/>
+
+<StructuredData
+  data={[faqStructuredData, webAppStructuredData, howToStructuredData]}
+/>
+
+<section class="hero" aria-labelledby="dst-hero-heading">
+  <p class="tagline">{$t(`${NS}.hero.tagline`)}</p>
+  <h1 id="dst-hero-heading">{$t(`${NS}.hero.title`)}</h1>
+  <p class="hero-subtitle">{$t(`${NS}.hero.subtitle`)}</p>
+  <a class="organic-btn" href={resolve('/viewer')}>{$t(`${NS}.hero.cta`)}</a>
+</section>
+
+<article id="what-is-dst" class="content-section">
+  <h2>{$t(`${NS}.whatIs.title`)}</h2>
+  <!-- eslint-disable svelte/no-at-html-tags -->
+  <p>{@html $t(`${NS}.whatIs.p1`)}</p>
+  <p>{@html $t(`${NS}.whatIs.p2`)}</p>
+  <p>{@html $t(`${NS}.whatIs.p3`)}</p>
+</article>
+
+<article id="how-to-view" class="content-section alt">
+  <h2>{$t(`${NS}.howTo.title`)}</h2>
+  <ol class="steps">
+    {#each ['step1', 'step2', 'step3', 'step4'] as step (step)}
+      <li>{@html $t(`${NS}.howTo.${step}`)}</li>
+    {/each}
+  </ol>
+</article>
+
+<article id="formats" class="content-section">
+  <h2>{$t(`${NS}.formats.title`)}</h2>
+  <p>{$t(`${NS}.formats.intro`)}</p>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>{$t(`${NS}.formats.table.headers.format`)}</th>
+          <th>{$t(`${NS}.formats.table.headers.extension`)}</th>
+          <th>{$t(`${NS}.formats.table.headers.machines`)}</th>
+          <th>{$t(`${NS}.formats.table.headers.notes`)}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each ['dst', 'pes', 'jef', 'exp'] as row (row)}
+          <tr>
+            <td>{$t(`${NS}.formats.rows.${row}.format`)}</td>
+            <td>{$t(`${NS}.formats.rows.${row}.extension`)}</td>
+            <td>{$t(`${NS}.formats.rows.${row}.machines`)}</td>
+            <td>{$t(`${NS}.formats.rows.${row}.notes`)}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</article>
+
+<article id="convert-dst-pes" class="content-section alt">
+  <h2>{$t(`${NS}.convert.title`)}</h2>
+  <p>{@html $t(`${NS}.convert.p1`)}</p>
+  <p>{@html $t(`${NS}.convert.p2`)}</p>
+</article>
+
+<section
+  id="screenshots"
+  class="screenshots-section"
+  aria-labelledby="screenshots-heading"
+>
+  <h2 id="screenshots-heading">{$t(`${NS}.screenshots.title`)}</h2>
+  <p class="screenshots-intro">{$t(`${NS}.screenshots.intro`)}</p>
+  <div class="screenshot-grid">
+    <figure>
+      <img
+        src={dstFilePreview}
+        width="800"
+        height="600"
+        loading="lazy"
+        alt={$t(`${NS}.screenshots.viewer.alt`)}
+      />
+      <figcaption>{$t(`${NS}.screenshots.viewer.alt`)}</figcaption>
+    </figure>
+    <figure>
+      <img
+        src={viewerInterface}
+        width="800"
+        height="533"
+        loading="lazy"
+        alt={$t(`${NS}.screenshots.hero.alt`)}
+      />
+      <figcaption>{$t(`${NS}.screenshots.hero.alt`)}</figcaption>
+    </figure>
+  </div>
+</section>
+
+<section id="faq" class="faq-section" aria-labelledby="faq-heading">
+  <h2 id="faq-heading">{$t(`${NS}.faq.title`)}</h2>
+  <p class="faq-intro">{$t(`${NS}.faq.intro`)}</p>
+  <div class="faq-list">
+    {#each faqKeys as key (key)}
+      <details>
+        <summary>{$t(`${NS}.faq.items.${key}.summary`)}</summary>
+        <p>{$t(`${NS}.faq.items.${key}.description`)}</p>
+      </details>
+    {/each}
+  </div>
+</section>
+
+<section class="cta-section" aria-labelledby="cta-heading">
+  <h2 id="cta-heading">{$t(`${NS}.cta.title`)}</h2>
+  <p>{$t(`${NS}.cta.subtitle`)}</p>
+  <a class="organic-btn-secondary" href={resolve('/viewer')}>
+    {$t(`${NS}.cta.button`)}
+  </a>
+</section>
+
+<style>
+  .hero {
+    padding: 140px 24px 80px;
+    text-align: center;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .tagline {
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 0.85rem;
+    color: var(--color-primary);
+    margin-bottom: 12px;
+  }
+
+  .hero h1 {
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    line-height: 1.25;
+    margin: 0 0 1rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    max-width: 720px;
+    margin: 0 auto 1.5rem;
+    color: #333;
+  }
+
+  .hero .organic-btn {
+    display: block;
+    margin: 0 auto;
+    margin-top: 40px;
+  }
+
+  .content-section {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 48px 24px;
+    line-height: 1.7;
+  }
+
+  .content-section.alt {
+    background: rgba(6, 52, 95, 0.04);
+    max-width: none;
+    padding-left: max(24px, calc((100% - 800px) / 2));
+    padding-right: max(24px, calc((100% - 800px) / 2));
+  }
+
+  .content-section h2 {
+    margin-top: 0;
+    font-size: 1.75rem;
+  }
+
+  .steps {
+    padding-left: 1.25rem;
+  }
+
+  .steps li {
+    margin-bottom: 12px;
+  }
+
+  .table-wrap {
+    overflow-x: auto;
+    margin-top: 24px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.95rem;
+  }
+
+  th,
+  td {
+    border: 1px solid #d3dce6;
+    padding: 12px 14px;
+    text-align: left;
+  }
+
+  th {
+    background: var(--color-primary);
+    color: white;
+  }
+
+  tr:nth-child(even) {
+    background: #f8fafb;
+  }
+
+  .screenshots-section {
+    padding: 64px 24px;
+    max-width: 960px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .screenshots-intro {
+    margin-bottom: 32px;
+    line-height: 1.6;
+  }
+
+  .screenshot-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
+  }
+
+  .screenshot-grid img {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    border: 3px solid var(--color-primary);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  }
+
+  figcaption {
+    margin-top: 10px;
+    font-size: 0.9rem;
+    color: #444;
+    line-height: 1.4;
+  }
+
+  .faq-section {
+    padding: 64px 24px;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .faq-section h2 {
+    text-align: center;
+    font-size: 1.75rem;
+  }
+
+  .faq-intro {
+    text-align: center;
+    margin-bottom: 32px;
+    line-height: 1.6;
+  }
+
+  .faq-list details {
+    border-bottom: 1px solid #eee;
+    padding: 20px 0;
+  }
+
+  .faq-list summary {
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 1.1rem;
+    list-style: none;
+    position: relative;
+    color: var(--color-primary);
+    padding-right: 28px;
+  }
+
+  .faq-list summary::after {
+    content: '+';
+    position: absolute;
+    right: 0;
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+  }
+
+  .faq-list details[open] summary::after {
+    transform: rotate(45deg);
+  }
+
+  .faq-list p {
+    margin-top: 10px;
+    line-height: 1.6;
+  }
+
+  .cta-section {
+    text-align: center;
+    padding: 64px 24px 100px;
+    background: var(--color-primary);
+    color: white;
+  }
+
+  .cta-section h2 {
+    color: white;
+    margin-top: 0;
+  }
+
+  .cta-section p {
+    margin-bottom: 24px;
+    opacity: 0.95;
+  }
+
+  .cta-section .organic-btn-secondary {
+    display: inline-block;
+    margin: 0 auto;
+  }
+
+  @media (max-width: 768px) {
+    .hero {
+      padding-top: 120px;
+    }
+
+    .screenshot-grid {
+      grid-template-columns: 1fr;
+    }
+
+    table {
+      font-size: 0.85rem;
+    }
+
+    th,
+    td {
+      padding: 8px;
+    }
+  }
+</style>
diff --git a/src/routes/sitemap.xml/+server.js b/src/routes/sitemap.xml/+server.js
index 7c15ea4..a17ce96 100644
--- a/src/routes/sitemap.xml/+server.js
+++ b/src/routes/sitemap.xml/+server.js
@@ -4,6 +4,7 @@ export async function GET() {
   const pages = [
     { path: '', priority: '0.8' },
     { path: 'pes-file-viewer', priority: '0.9' },
+    { path: 'dst-file-viewer', priority: '0.9' },
     { path: 'viewer', priority: '0.85' },
     { path: 'about', priority: '0.8' },
     { path: 'donate', priority: '0.8' },