src/lib/sections/MobileApp.svelte

@@ -0,0 +1,138 @@
+<script>
+  import { locale, t } from '$lib/translations';
+  import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
+</script>
+
+<section class="app">
+  <div class="container">
+    <!-- LEFT: TEXT -->
+    <div class="content">
+      <h2>
+        {$t('mobile.title.prefix')}
+        <span>{$t('mobile.title.highlight')}</span>
+      </h2>
+
+      <p class="description">
+        {$t('mobile.description')}
+      </p>
+
+      <!-- FEATURES -->
+      <div class="features">
+        <div>✅ {$t('mobile.features.formats')}</div>
+        <div>🎨 {$t('mobile.features.customization')}</div>
+        <div>🎯 {$t('mobile.features.highlight')}</div>
+        <div>📏 {$t('mobile.features.metadata')}</div>
+        <div>🚀 {$t('mobile.features.performance')}</div>
+        <div>♿ {$t('mobile.features.accessibility')}</div>
+      </div>
+
+      <!-- CTA -->
+      <a
+        class="cta-link"
+        href="https://play.google.com/store/apps/details?id=xyz.embroideryviewer.android"
+        target="_blank"
+      >
+        <img
+          src={`${PUBLIC_IMAGE_BASE_URL}/t/w_240,h_76,f_webp/embroidery-viewer/${$locale}/android-download.webp`}
+          alt={$t('mobile.cta_alt')}
+          width="240"
+          height="76"
+        />
+      </a>
+    </div>
+
+    <!-- RIGHT: IMAGE -->
+    <div class="visual">
+      <img
+        src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/${$locale}/app-with-frame.webp`}
+        alt={$t('mobile.image_alt')}
+      />
+    </div>
+  </div>
+
+  <div class="blob"></div>
+</section>
+
+<style>
+  .cta-link {
+    padding: 0;
+    margin-top: 50px;
+    width: fit-content;
+    height: fit-content;
+    border: none;
+  }
+
+  .cta-link:hover {
+    border: none;
+    background-color: transparent;
+  }
+
+  .app {
+    position: relative;
+    padding: 6rem 1.5rem;
+    background: #ffffff;
+    overflow: hidden;
+  }
+
+  .container {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1.1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+  }
+
+  h2 {
+    font-size: clamp(2rem, 4vw, 2.6rem);
+    color: #06345f;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  h2 span {
+    font-weight: 900;
+    background: linear-gradient(120deg, #06345f, #194795);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .description {
+    font-size: 1.1rem;
+  }
+
+  .features {
+    margin-top: 0.5rem;
+    display: grid;
+    gap: 0.4rem;
+    font-size: 0.95rem;
+    color: #06345f;
+  }
+
+  .visual {
+    display: flex;
+    justify-content: center;
+  }
+
+  .visual img {
+    width: 100%;
+    max-width: 380px;
+  }
+
+  @media (max-width: 900px) {
+    .container {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+
+    .content {
+      align-items: center;
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+{
+  "title": {
+    "prefix": "Embroidery Viewer on ",
+    "highlight": "Android"
+  },
+  "description": "Visualize and explore your embroidery files directly on your phone — fast, simple, and built for real workflows.",
+  "features": {
+    "formats": "Supports PES, JEF, PEC, VP3, DST and EXP formats",
+    "customization": "Customize background and thread colors",
+    "highlight": "Tap to highlight thread sequences",
+    "metadata": "View stitches, size and color breakdown",
+    "performance": "Fast, lightweight and works offline",
+    "accessibility": "Accessible and easy to use"
+  },
+  "cta_alt": "Download on Google Play",
+  "image_alt": "Android Embroidery Viewer preview"
+}

src/lib/translations/index.js

@@ -157,6 +157,16 @@ const config = {
       key: 'faq',
       loader: async () => (await import('./en-US/faq.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.PT_BR,
+      key: 'mobile',
+      loader: async () => (await import('./pt-BR/mobile.json')).default,
+    },
+    {
+      locale: SUPPORTED_LOCALES.EN_US,
+      key: 'mobile',
+      loader: async () => (await import('./en-US/mobile.json')).default,
+    },
   ],
 };
 

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

@@ -0,0 +1,17 @@
+{
+  "title": {
+    "prefix": "Embroidery Viewer no ",
+    "highlight": "Android"
+  },
+  "description": "Visualize e explore seus arquivos de bordado diretamente no celular — rápido, simples e feito para o uso real.",
+  "features": {
+    "formats": "Suporte para formatos PES, JEF, PEC, VP3, DST e EXP",
+    "customization": "Personalize cores de fundo e das linhas",
+    "highlight": "Toque para destacar sequências de cores",
+    "metadata": "Veja pontos, tamanho e detalhes das cores",
+    "performance": "Rápido, leve e funciona offline",
+    "accessibility": "Acessível e fácil de usar"
+  },
+  "cta_alt": "Baixar na Google Play",
+  "image_alt": "Prévia do Embroidery Viewer no Android"
+}

src/routes/+page.svelte

@@ -3,6 +3,7 @@
   import Hero from '$lib/sections/Hero.svelte';
   import Features from '$lib/sections/Features.svelte';
   import Faq from '$lib/sections/Faq.svelte';
+  import MobileApp from '$lib/sections/MobileApp.svelte';
 
   let { data } = $props();
 
@@ -14,4 +15,5 @@
 
 <Hero />
 <Features />
+<MobileApp />
 <Faq />