package.json

@@ -1,7 +1,7 @@
 {
   "name": "embroidery-viewer",
   "private": true,
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src/lib/components/AnnouncementBar.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { t } from '$lib/translations';
+
+  const trackEvent = () => {
+    // @ts-ignore
+    window.hk?.event?.('install_now');
+  };
+</script>
+
+<div class="bar">
+  <div class="content">
+    <p>
+      {$t('announcement.message')}
+      <a
+        href="https://play.google.com/store/apps/details?id=xyz.embroideryviewer.android"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="cta"
+        onclick={trackEvent}
+      >
+        {$t('announcement.cta-text')}
+      </a>
+    </p>
+  </div>
+</div>
+
+<style>
+  .bar {
+    width: 100%;
+    background: #06345f;
+    color: white;
+    font-size: 0.95rem;
+    z-index: 3;
+  }
+
+  .content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0.6rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  p {
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .cta {
+    margin-left: 0.5rem;
+    font-weight: 600;
+    text-decoration: underline;
+    color: #ffffff;
+    white-space: nowrap;
+  }
+
+  .cta:hover {
+    opacity: 0.85;
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>

src/lib/components/Header.svelte

@@ -51,7 +51,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 30px 10px 100px;
+    padding: 45px 30px 10px 100px;
     width: 100%;
   }
 
@@ -212,14 +212,20 @@
     }
   }
 
+  @media (max-width: 1159px) {
+    header {
+      padding-top: 70px;
+    }
+  }
+
   @media (max-width: 768px) {
     header {
-      padding: 10px 20px;
+      padding: 110px 20px 10px 20px;
     }
 
     #menu {
       width: 100vw;
-      top: -80px;
+      top: -110px;
       margin: 0px 0 0 0;
       right: -20px;
       border-radius: 0;

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

@@ -0,0 +1,4 @@
+{
+  "message": "🚀 Embroidery Viewer is now on Android — view your designs anywhere, customize thread & background colors.",
+  "cta-text": "Install now"
+}

src/lib/translations/index.js

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

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

@@ -0,0 +1,4 @@
+{
+  "message": "🚀 Embroidery Viewer agora está no Android — visualize seus designs em qualquer lugar, personalize as cores das linhas e do fundo.",
+  "cta-text": "Instale agora"
+}

src/routes/+layout.svelte

@@ -9,6 +9,7 @@
   import Header from '$lib/components/Header.svelte';
   import Footer from '$lib/components/Footer.svelte';
   import Analytics from '$lib/components/Analytics.svelte';
+  import AnnouncementBar from '$lib/components/AnnouncementBar.svelte';
 
   let { children } = $props();
 
@@ -24,6 +25,7 @@
 <Analytics />
 
 {#if mounted}
+  <AnnouncementBar />
   <Header />
   <main>
     {@render children()}