src/lib/components/Footer.svelte

@@ -66,7 +66,6 @@
   footer {
     background-color: var(--color-primary);
     width: 100%;
-    margin-top: 50px;
   }
 
   #content-container {

src/lib/components/icons/DonateIcon.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let size = 20;
+  export let color = 'currentColor';
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 115.03736 82.932701"
+  version="1.1"
+  id="svg1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  ><defs id="defs1" /><g id="layer1" transform="translate(46.342105,-326.35286)"
+    ><path
+      style={`fill:${color}`}
+      d="m -33.360673,409.11068 c -0.52052,-0.66147 -13.05506,-29.41883 -12.98111,-29.7819 0.0676,-0.33192 10.25008,-3.75875 11.16875,-3.75875 0.39694,0 -0.23972,-1.36265 6.66385,14.2629 3.11223,7.04422 5.6586,13.00337 5.6586,13.24254 0,0.28356 -1.49602,1.30029 -4.29948,2.92205 -2.36471,1.36794 -4.67009,2.70349 -5.12306,2.96789 -0.65389,0.38166 -0.87798,0.4116 -1.08755,0.14527 z m 51.11115,-7.18941 c -1.0255,-0.19444 -6.26425,-1.60693 -11.6416602,-3.13887 -11.60606,-3.30637 -11.88394,-3.36862 -15.03947,-3.36862 -3.0879598,0 -5.4300198,0.58865 -9.3851798,2.35884 -1.65323,0.73993 -3.20801,1.34533 -3.45507,1.34533 -0.33715,0 -1.59126,-2.59045 -5.02761,-10.38489 -2.51812,-5.7117 -4.63162,-10.51906 -4.69666,-10.68304 -0.065,-0.16398 0.75205,-0.77969 1.81577,-1.36826 1.06372,-0.58856 3.06512,-1.98586 4.44757,-3.1051 1.38245,-1.11925 3.21341,-2.51262 4.06879,-3.09639 5.178,-3.5338 12.3545098,-5.07308 18.9419698,-4.06285 3.59287,0.55099 6.45084,1.42963 10.85591,3.33749 7.3390302,3.17857 11.7920602,4.46814 22.2961402,6.45677 6.83656,1.29429 8.39146,1.84388 9.38771,3.31816 1.351,1.99922 0.46493,4.08861 -2.34074,5.5196 -2.74024,1.39761 -3.54371,1.37687 -13.73269,-0.35444 -8.2986,-1.4101 -9.07435,-1.4986 -12.17084,-1.38851 -2.5834002,0.0919 -3.7126702,0.25703 -5.1593702,0.75463 -1.63768,0.56329 -1.86179,0.72144 -1.93595,1.36615 -0.12182,1.05906 0.46688,1.15204 2.81088,0.44394 3.5053302,-1.05892 6.4809702,-0.89831 16.9844402,0.91671 8.37829,1.44778 8.95895,1.5149 10.60612,1.22601 4.34498,-0.76205 7.62602,-3.6216 7.64432,-6.66234 0.003,-0.56374 -0.31433,-1.57393 -0.76375,-2.42828 -0.88082,-1.67447 -0.97521,-1.4883 1.59586,-3.14763 1.45305,-0.93779 3.67139,-2.74223 8.64098,-7.02876 5.07066,-4.37371 7.8612,-5.88252 9.87621,-5.33994 0.5539,0.14915 1.07867,0.38701 1.16616,0.52858 0.0875,0.14156 0.75876,0.25739 1.49171,0.25739 2.23308,0 3.66323,1.33775 3.66323,3.42656 0,1.22305 -0.39272,1.86203 -5.78067,9.40573 -5.63224,7.88573 -7.41725,9.89443 -10.15569,11.42836 -5.52566,3.09519 -23.79832,12.65577 -25.06445,13.11418 -1.88226,0.68147 -7.21439,0.87102 -9.94397,0.35349 z m 8.93119,-37.4527 c -10.54204,-7.34003 -15.45466,-12.20175 -18.3280302,-18.13812 -2.47555,-5.11448 -2.73882,-10.04227 -0.74529,-13.94992 0.92633,-1.81576 3.3031302,-4.09338 5.2439402,-5.02511 3.14838,-1.51146 7.45008,-1.29668 10.56261,0.52739 1.77607,1.04084 4.13023,3.35279 5.47731,5.37909 0.66799,1.00478 1.26128,1.82688 1.31843,1.82688 0.0571,0 0.69136,-0.8632 1.40937,-1.91822 2.27222,-3.33879 4.61009,-5.23911 7.75182,-6.30101 2.33309,-0.78858 5.77205,-0.63428 7.95915,0.35711 1.75477,0.79542 4.18097,2.97573 5.14853,4.62674 4.08542,6.97124 0.45301,16.98315 -9.18256,25.30961 -4.39191,3.79521 -12.25534,9.42128 -13.13598,9.39843 -0.27047,-0.007 -1.83615,-0.94881 -3.4793,-2.09287 z"
+      id="path2"
+    /></g
+  ></svg
+>

src/lib/styles/fonts.css

@@ -45,3 +45,15 @@
   font-display: swap;
   font-optical-sizing: auto;
 }
+
+@font-face {
+  font-family: 'Merienda';
+  font-display: swap;
+  src:
+    url('/fonts/merienda.extra-bold.woff2') format('woff2'),
+    url('/fonts/merienda.extra-bold.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+  font-optical-sizing: auto;
+}

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

@@ -1,9 +1,34 @@
 {
-  "title": "ℹ About Embroidery Viewer",
+  "seo.title": "About Embroidery Viewer – The Story Behind the Tool",
-  "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>",
-  "seo.title": "ℹ About Embroidery Viewer – The Story Behind the Tool",
   "seo.description": "Learn the story behind Embroidery Viewer — a free, online tool created to make embroidery file previews simple, fast, and accessible to everyone.",
   "seo.keywords": "about embroidery viewer, embroidery viewer story, free embroidery viewer, why embroidery viewer was created, who created embroidery viewer, online embroidery viewer, free embroidery tool, embroidery viewer about",
   "seo.url": "https://embroideryviewer.xyz/about",
-  "seo.image": "https://embroideryviewer.xyz/og/about.png"
+  "seo.image": "https://embroideryviewer.xyz/og/about.png",
+  "hero": {
+    "tagline": "A SMALL ACT OF LOVE",
+    "title": "That became a powerful way to preview embroidery files"
+  },
+  "story": {
+    "title": "The story behind Embroidery Viewer...",
+    "p1": "It didn’t start as a product. It started with a simple frustration.",
+    "p2": "Someone I care about loves embroidery. She enjoys creating, exploring designs, and bringing ideas to life through stitching. But every time she downloaded a new embroidery file, she ran into the same problem:",
+    "quote1": "“How do I even open this?”",
+    "p3": "Most of the tools available were either paid, overly complex, or built for people already familiar with technical embroidery software. For someone who just wanted to quickly preview a design before stitching, it felt unnecessarily difficult.",
+    "p4": "What should have been a simple step—just seeing the design—became a barrier. That’s when I realized something important:",
+    "quote2": "There are probably many people facing the exact same problem."
+  },
+  "product": {
+    "p1": "People don’t want complicated software.",
+    "p2": "People don’t want to install anything.",
+    "p3": "People just want to open an embroidery file and see their design instantly.",
+    "p4": "So instead of searching for a better tool…",
+    "quote": "I decided to build one."
+  },
+  "support": {
+    "title": "If it helped you, you can help it grow",
+    "p1": "Embroidery Viewer is completely free—and I intend to keep it that way.",
+    "p2": "But keeping it fast, improving support for more embroidery formats, and maintaining the infrastructure behind it takes time and resources.",
+    "p3": "If this tool made your workflow easier, helped you preview a design, or saved you from unnecessary hassle, you can support its future.",
+    "cta": "Donate now"
+  }
 }

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

@@ -1,9 +1,34 @@
 {
-  "title": "ℹ Sobre o Embroidery Viewer",
+  "seo.title": "Sobre o Embroidery Viewer - Por que esta ferramenta foi criada",
-  "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>",
-  "seo.title": "ℹSobre o Embroidery Viewer - Por que esta ferramenta foi criada",
   "seo.description": "Conheça a história por trás do Embroidery Viewer — uma ferramenta gratuita e online criada para tornar a visualização de arquivos de bordado simples, rápida e acessível a todos.",
   "seo.keywords": "sobre embroidery viewer, história do embroidery viewer, visualizador de bordado gratuito, motivo da criação do embroidery viewer, quem criou o embroidery viewer, visualizador online de bordado, ferramenta gratuita para bordado, embroidery viewer sobre",
   "seo.url": "https://embroideryviewer.xyz/about",
-  "seo.image": "https://embroideryviewer.xyz/og/about.png"
+  "seo.image": "https://embroideryviewer.xyz/og/about.png",
+  "hero": {
+    "tagline": "UM PEQUENO ATO DE AMOR",
+    "title": "Que se tornou uma forma poderosa de visualizar arquivos de bordado"
+  },
+  "story": {
+    "title": "A história por trás do Embroidery Viewer...",
+    "p1": "Não começou como um produto. Começou com uma frustração simples.",
+    "p2": "Alguém que eu amo gosta de bordado. Ela adora criar, explorar designs e dar vida às ideias através dos pontos. Mas toda vez que baixava um novo arquivo de bordado, enfrentava o mesmo problema:",
+    "quote1": "“Como eu abro isso?”",
+    "p3": "A maioria das ferramentas disponíveis eram pagas, complexas demais ou feitas para pessoas que já entendiam softwares técnicos de bordado. Para alguém que só queria visualizar rapidamente um design antes de bordar, era complicado demais.",
+    "p4": "O que deveria ser um passo simples — apenas ver o design — se tornava uma barreira. Foi aí que percebi algo importante:",
+    "quote2": "Provavelmente existem muitas pessoas passando exatamente pelo mesmo problema."
+  },
+  "product": {
+    "p1": "As pessoas não querem softwares complicados.",
+    "p2": "As pessoas não querem instalar nada.",
+    "p3": "As pessoas só querem abrir um arquivo de bordado e ver o design na hora.",
+    "p4": "Então, em vez de procurar uma ferramenta melhor…",
+    "quote": "Eu decidi criar uma."
+  },
+  "support": {
+    "title": "Se te ajudou, você pode ajudar a crescer",
+    "p1": "O Embroidery Viewer é completamente gratuito — e eu pretendo manter assim.",
+    "p2": "Mas manter ele rápido, melhorar o suporte a mais formatos e sustentar a infraestrutura exige tempo e recursos.",
+    "p3": "Se essa ferramenta facilitou seu fluxo, ajudou você a visualizar um design ou evitou trabalho desnecessário, você pode apoiar o futuro dela.",
+    "cta": "Apoiar agora"
+  }
 }

src/routes/about/+page.svelte

@@ -1,39 +1,240 @@
 <script>
+  import DonateIcon from '$lib/components/icons/DonateIcon.svelte';
+  import { resolve } from '$app/paths';
   import { t } from '$lib/translations';
 
   import Seo from '$lib/components/Seo.svelte';
+  import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
+  import { isMobile } from '$lib/utils/isMobile';
 
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
   // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
+
+  const backgroundImage = isMobile()
+    ? `${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/route-wallpaper-mobile.webp`
+    : `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_1920,h_1080/embroidery-viewer/route-wallpaper.webp`;
 </script>
 
 <Seo {...metadata} />
 
 <section aria-labelledby="about-heading">
-  <h1 id="about-heading">{$t('about.title')}</h1>
+  <div
+    class="heading-container"
+    style={`background: url(${backgroundImage}) center/cover no-repeat`}
+  >
+    <div class="overlay">
+      <p>{$t('about.hero.tagline')}</p>
+      <h1 id="about-heading">{$t('about.hero.title')}</h1>
+    </div>
+  </div>
+</section>
 
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<section id="about-content">
-  {@html $t('about.content')}
+  <div class="embroidery-bg"></div>
+  <h1>{$t('about.story.title')}</h1>
+  <div class="content-split">
+    <div class="split-left">
+      <p>{$t('about.story.p1')}</p>
+      <p>{$t('about.story.p2')}</p>
+      <p style="font-size: 1.7rem;">
+        {$t('about.story.quote1')}
+      </p>
+      <p>{$t('about.story.p3')}</p>
+      <p>{$t('about.story.p4')}</p>
+      <p style="font-size: 1.7rem;">
+        {$t('about.story.quote2')}
+      </p>
+    </div>
+    <div class="split-right">
+      <img
+        src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/woman-sad.webp`}
+        style="border: 3px solid white;"
+        width={isMobile() ? 300 : 400}
+        alt=""
+      />
+    </div>
+  </div>
+
+  <div
+    class="content-split"
+    style={isMobile() ? 'flex-direction: column-reverse' : ''}
+  >
+    <div class="split-left" style={isMobile() ? 'align-items: center' : ''}>
+      <img
+        src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/viewer-screenshot.webp`}
+        style="border: 3px solid black;"
+        width={isMobile() ? 300 : 400}
+        alt=""
+      />
+    </div>
+    <div class="split-right" style="align-items: flex-start;">
+      <p>{$t('about.product.p1')}</p>
+      <p>{$t('about.product.p2')}</p>
+      <p>{$t('about.product.p3')}</p>
+      <p>{$t('about.product.p4')}</p>
+
+      <p style="font-size: 1.7rem;">
+        {$t('about.product.quote')}
+      </p>
+    </div>
+  </div>
+
+  <div class="content-split">
+    <div class="split-left">
+      <h2>{$t('about.support.title')}</h2>
+
+      <p>{$t('about.support.p1')}</p>
+      <p>{$t('about.support.p2')}</p>
+      <p>{$t('about.support.p3')}</p>
+    </div>
+
+    <div
+      class="split-right"
+      style="align-items: center; justify-content: center;"
+    >
+      <DonateIcon color="#ffffff" size={360} />
+    </div>
+  </div>
+  <div class="button-container">
+    <a class="organic-btn-secondary" href={resolve('/donate')}>
+      {$t('about.support.cta')}
+    </a>
+  </div>
 </section>
 
 <style>
-  section {
+  .embroidery-bg {
-    width: 70%;
+    position: absolute;
-    margin: 0 auto;
+    inset: 0;
-    margin-top: 130px;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0.15;
+
+    background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-width='1.5' fill='none'%3E%3C!-- curved thread lines --%3E%3Cpath d='M50 100 Q150 50 250 120 T450 100' stroke-dasharray='6 6'/%3E%3Cpath d='M100 300 Q200 250 300 320 T500 300' stroke-dasharray='4 8'/%3E%3C!-- small crosses (stitches) --%3E%3Cg stroke-width='2'%3E%3Cpath d='M100 200 l10 10 M110 200 l-10 10'/%3E%3Cpath d='M300 400 l10 10 M310 400 l-10 10'/%3E%3Cpath d='M500 150 l10 10 M510 150 l-10 10'/%3E%3C/g%3E%3C!-- circular embroidery hoop hint --%3E%3Ccircle cx='500' cy='500' r='80' stroke-dasharray='5 10'/%3E%3C/g%3E%3C/svg%3E");
+    background-size: 600px 600px;
+  }
+  .button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 70px;
   }
 
-  h1 {
+  .organic-btn-secondary {
-    padding: 0;
+    font-size: 1.3rem;
-    margin-bottom: 7px;
+    padding: 20px 100px;
+  }
+
+  h2 {
+    color: white;
+    margin: 0;
+    text-align: center;
+    font-size: 2.3rem;
+    margin-top: 100px;
+    line-height: 1.5;
+  }
+
+  .content-split {
+    width: 85%;
+    display: flex;
+    margin: 0 auto;
+    padding-top: 150px;
+  }
+
+  .split-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .split-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+  }
+
+  .split-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+  }
+
+  .heading-container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .overlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 80%;
+    z-index: 1;
+    text-align: center;
+    margin-bottom: 100px;
+  }
+
+  .heading-container h1 {
+    font-size: clamp(3.5rem, 4vw, 3.5rem);
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+    margin-top: 0;
+  }
+
+  #about-content {
+    position: relative; /* IMPORTANT */
+    margin: 0;
+    background-color: var(--color-primary);
+    color: white;
+    padding: 100px;
+    overflow: hidden;
+  }
+
+  #about-content > *:not(.embroidery-bg) {
+    position: relative;
+    z-index: 1;
+  }
+
+  #about-content h1 {
+    color: white;
+    margin: 0;
+    text-align: center;
+    font-size: 2.3rem;
+  }
+
+  #about-content p {
+    font-size: 1.2rem;
+    line-height: 1.6;
   }
 
   @media (max-width: 768px) {
-    section {
+    .heading-container {
-      width: 90%;
+      width: 100%;
+    }
+    .heading-container h1 {
+      font-size: clamp(2.8rem, 4vw, 3.5rem);
+    }
+
+    .content-split {
+      width: 100%;
+      flex-direction: column;
+      padding-top: 50px;
+    }
+
+    #about-content {
+      padding: 30px 20px;
+      line-height: 1.5;
     }
   }
 </style>