From 5f5e77b4f808fe1cc39863ac2b70576be10a4a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 17 Apr 2026 11:28:17 -0300
Subject: [PATCH] feat: add language switch and localize nav links

---
 src/lib/components/Header.svelte         |  12 +-
 src/lib/components/LanguageSwitch.svelte | 145 +++++++++++++++++++++++
 src/lib/sections/Hero.svelte             |   7 +-
 src/lib/translations/en-US/header.json   |   9 +-
 src/lib/translations/pt-BR/header.json   |   9 +-
 5 files changed, 165 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/LanguageSwitch.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index b13d208..ebf3b3d 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,7 +1,9 @@
 <script>
+  import { t } from '$lib/translations';
   import { resolve } from '$app/paths';
   import { page } from '$app/state';
   import logo from '$lib/assets/logo.webp';
+  import LanguageSwitch from './LanguageSwitch.svelte';
   import MediaQuery from './MediaQuery.svelte';
 
   let isOpen = $state(false);
@@ -33,9 +35,11 @@
     <span></span>
 
     <ul id="menu">
-      <a href={resolve('/about')}><li>About</li></a>
-      <a href={resolve('/viewer')}><li>Viewer</li></a>
-      <a href={resolve('/donate')}><li>Donate</li></a>
+      <a href={resolve('/about')}><li>{$t('header.aboutNav')}</li></a>
+      <a href={resolve('/viewer')}><li>{$t('header.viewerNav')}</li></a>
+      <a href={resolve('/donate')}><li>{$t('header.donateNav')}</li></a>
+
+      <li><LanguageSwitch /></li>
     </ul>
   </nav>
 </header>
@@ -188,7 +192,7 @@
     background-color: var(--color-primary) !important;
   }
 
-  @media (max-width: 1339px) {
+  @media (max-width: 1458px) {
     #menuToggle span {
       background-color: var(--color-primary);
     }
diff --git a/src/lib/components/LanguageSwitch.svelte b/src/lib/components/LanguageSwitch.svelte
new file mode 100644
index 0000000..3f749a6
--- /dev/null
+++ b/src/lib/components/LanguageSwitch.svelte
@@ -0,0 +1,145 @@
+<script>
+  import { locale, SUPPORTED_LOCALES } from '$lib/translations';
+
+  const isEnglish = $derived($locale === SUPPORTED_LOCALES.EN_US);
+
+  /**
+   * Switches the current locale to the opposite language (EN_US <-> PT_BR).
+   * Prevents the default link behavior (e.g., page jump).
+   */
+  const onSwitchToOppositeLang = () => {
+    $locale =
+      $locale === SUPPORTED_LOCALES.EN_US
+        ? SUPPORTED_LOCALES.PT_BR
+        : SUPPORTED_LOCALES.EN_US;
+  };
+</script>
+
+<center>
+  <div class="switch">
+    <input
+      id="language-toggle"
+      class="check-toggle check-toggle-round-flat"
+      type="checkbox"
+      onclick={onSwitchToOppositeLang}
+      checked={isEnglish}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onSwitchToOppositeLang();
+        }
+      }}
+    />
+    <label for="language-toggle"></label>
+    <span class="off">EN</span>
+    <span class="on">PT</span>
+  </div>
+</center>
+
+<style>
+  .switch {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    font-weight: 700;
+    z-index: 1;
+  }
+
+  .switch > span {
+    position: absolute;
+    top: 7px;
+    pointer-events: none;
+    font-weight: bold;
+    font-size: 12px;
+    text-transform: uppercase;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    width: 50%;
+    text-align: center;
+  }
+
+  input.check-toggle-round-flat:checked ~ .off {
+    color: white !important;
+  }
+
+  input.check-toggle-round-flat:checked ~ .on {
+    color: var(--color-primary) !important;
+  }
+
+  .switch > span.on {
+    left: 0;
+    padding-left: 2px;
+    color: white;
+  }
+
+  .switch > span.off {
+    right: 0;
+    padding-right: 4px;
+    color: var(--color-primary) !important;
+  }
+
+  .check-toggle {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+  }
+  .check-toggle + label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  input.check-toggle-round-flat + label {
+    padding: 2px;
+    width: 97px;
+    height: 35px;
+    background-color: white;
+    -webkit-border-radius: 60px;
+    -moz-border-radius: 60px;
+    -ms-border-radius: 60px;
+    -o-border-radius: 60px;
+    border-radius: 60px;
+  }
+  input.check-toggle-round-flat + label:before,
+  input.check-toggle-round-flat + label:after {
+    display: block;
+    position: absolute;
+    content: '';
+  }
+
+  input.check-toggle-round-flat + label:before {
+    top: 2px;
+    left: 2px;
+    bottom: 2px;
+    right: 2px;
+    background-color: white;
+
+    -moz-border-radius: 60px;
+    -ms-border-radius: 60px;
+    -o-border-radius: 60px;
+    border-radius: 60px;
+  }
+  input.check-toggle-round-flat + label:after {
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
+    width: 48px;
+    background-color: var(--color-primary);
+    -webkit-border-radius: 52px;
+    -moz-border-radius: 52px;
+    -ms-border-radius: 52px;
+    -o-border-radius: 52px;
+    border-radius: 52px;
+    -webkit-transition: margin 0.2s;
+    -moz-transition: margin 0.2s;
+    -o-transition: margin 0.2s;
+    transition: margin 0.2s;
+  }
+
+  input.check-toggle-round-flat:checked + label:after {
+    margin-left: 42px;
+  }
+</style>
diff --git a/src/lib/sections/Hero.svelte b/src/lib/sections/Hero.svelte
index 5f3f52d..c92d489 100644
--- a/src/lib/sections/Hero.svelte
+++ b/src/lib/sections/Hero.svelte
@@ -1,6 +1,7 @@
 <script>
   import { resolve } from '$app/paths';
   import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
+  import { t } from '$lib/translations';
   import { isMobile } from '$lib/utils/isMobile';
 
   const backgroundImage = isMobile()
@@ -13,10 +14,10 @@
   style={`background: url(${backgroundImage}) center/cover no-repeat`}
 >
   <div class="overlay">
-    <h1>Preview your embroidery designs instantly — no software needed</h1>
-    <p>Fast, private & no signup required</p>
+    <h1>{$t('hero.title')}</h1>
+    <p>{$t('hero.description')}</p>
 
-    <a class="organic-btn" href={resolve('/viewer')}>Try Your Design</a>
+    <a class="organic-btn" href={resolve('/viewer')}>{$t('hero.cta')}</a>
   </div>
 </section>
 
diff --git a/src/lib/translations/en-US/header.json b/src/lib/translations/en-US/header.json
index 9ad8c6c..7700202 100644
--- a/src/lib/translations/en-US/header.json
+++ b/src/lib/translations/en-US/header.json
@@ -1,7 +1,6 @@
 {
-  "languageSwitch": "🇧🇷",
-  "homeNav": "🏠 Home",
-  "aboutNav": "ℹ About",
-  "viewerNav": "🧵 Viewer",
-  "donateNav": "💖 Donate"
+  "homeNav": "Home",
+  "aboutNav": "About",
+  "viewerNav": "Viewer",
+  "donateNav": "Donate"
 }
diff --git a/src/lib/translations/pt-BR/header.json b/src/lib/translations/pt-BR/header.json
index b47bfff..bac0aa6 100644
--- a/src/lib/translations/pt-BR/header.json
+++ b/src/lib/translations/pt-BR/header.json
@@ -1,7 +1,6 @@
 {
-  "languageSwitch": "🇺🇸",
-  "homeNav": "🏠 Página Inicial",
-  "aboutNav": "ℹ Sobre",
-  "viewerNav": "🧵 Visualizador",
-  "donateNav": "💖 Doe"
+  "homeNav": "Página Inicial",
+  "aboutNav": "Sobre",
+  "viewerNav": "Visualizador",
+  "donateNav": "Doe"
 }