src/i18n/translations.js

@@ -9,6 +9,8 @@ export default {
       "nav.viewer": "🧵 Viewer",
       "nav.donate": "💖 Donate",
       "nav.about": "ℹ About",
+      "nav.privacy.policy": "🔐 Privacy Policy",
+      "nav.terms.of.service": "📝 Terms of Service",
       "main.title": "Upload files",
       "home.main.title": "🧵 Free Online Embroidery File Viewer",
       "home.main.description": "<p>✨Upload and preview your embroidery designs instantly – no software needed.</p> <p><strong>Embroidery Viewer</strong> is a free, browser-based tool that supports multiple embroidery file formats. View your designs quickly and securely, right in your browser.</p>",
@@ -68,6 +70,8 @@ export default {
       "nav.viewer": "🧵 Visualizador",
       "nav.donate": "💖 Doe",
       "nav.about": "ℹ Sobre",
+      "nav.privacy.policy": "🔐 Política de Privacidade",
+      "nav.terms.of.service": "📝 Termos de Serviço",
       "home.main.title": "🧵 Visualizador de arquivos de bordado online gratuito",
       "home.main.description": "<p>✨Carregue e visualize seus desenhos de bordado instantaneamente – sem necessidade de software</p> <p><strong>Embroidery Viewer</strong> é uma ferramenta gratuita para navegador que suporta diversos formatos de arquivo de bordado. Visualize seus designs de forma rápida e segura, diretamente no seu navegador.</p>",
       "home.features.title": "🚀 Funcionalidades",

src/lib/sections/Footer.svelte

@@ -1,49 +1,87 @@
 <script>
-  import { t } from "../../i18n"
+  import { t } from "../../i18n";
   import { appVersion } from "../../utils/env";
+  import { footerRoutes } from "../../utils/routes"
 </script>
 
 <footer>
   <div class="footer-content">
-    <p>{@html $t("main.copyright", { year: new Date().getFullYear(), website: "https://leomurca.xyz" })}</p>
+    <div class="footer-info">
-    <p>{@html $t("main.version", { version: appVersion() })}</p>
+      <p>{@html $t("main.copyright", {
+        year: new Date().getFullYear(),
+        website: "https://leomurca.xyz"
+      })}</p>
+      <p>{@html $t("main.version", { version: appVersion() })}</p>
+    </div>
 
+    <nav class="footer-nav">
+      {#each Object.entries(footerRoutes) as [route, config]}
+      <a href={route} >{$t(config.nameKey)}</a>
+      {/each}
+    </nav>
   </div>
 </footer>
 
 <style>
   footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
     background-color: #f8f9fa;
     border-top: 1px solid #ddd;
+    padding: 20px;
     width: 100%;
-    bottom: 0;
   }
 
   .footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 960px;
+    margin: 0 auto;
     text-align: center;
   }
 
-  footer p {
+  .footer-info {
-    margin: 5px 0;
+    flex: 1 1 100%;
+    margin-bottom: 10px;
+  }
+
+  .footer-info p {
+    margin: 4px 0;
     font-size: 14px;
     color: #333;
   }
 
-  footer p:first-child {
+  .footer-info p:first-child {
     font-weight: bold;
   }
 
-  @media (max-width: 768px) {
+  .footer-nav {
-    footer {
+    flex: 1 1 100%;
-      padding: 15px;
+  }
+
+  .footer-nav a {
+    margin: 0 10px;
+    font-size: 14px;
+  }
+
+  @media (min-width: 600px) {
+    .footer-content {
+      flex-wrap: nowrap;
+      text-align: left;
     }
 
-    footer p {
+    .footer-info,
-      font-size: 12px;
+    .footer-nav {
+      flex: 1 1 50%;
+      margin-bottom: 0;
+    }
+
+    .footer-info {
+      text-align: left;
+    }
+
+    .footer-nav {
+      text-align: right;
     }
   }
 </style>

src/utils/routes.js

@@ -33,4 +33,19 @@ export const routes = {
   },
 };
 
+export const footerRoutes = {
+  '/about': {
+    component: About,
+    nameKey: "nav.about"
+  },
+  '/privacy-policy': {
+    component: PrivacyPolicy,
+    nameKey: "nav.privacy.policy"
+  },
+  '/terms-of-service': {
+    component: TermsOfService,
+    nameKey: "nav.terms.of.service"
+  },
+}
+
 export const fallback = NotFound;