feat: improve footer section

src/lib/components/Footer.svelte

@@ -2,97 +2,185 @@
   import { resolve } from '$app/paths';
   import { t } from '$lib/translations';
   import { appVersion } from '$lib/utils/env';
+
+  import MailIcon from '$lib/components/icons/MailIcon.svelte';
+  import ArrowTopIcon from './icons/ArrowTopIcon.svelte';
+  import logo from '$lib/assets/logo-white.webp';
 </script>
 
-<!-- eslint-disable svelte/no-at-html-tags -->
 <footer>
-  <div class="footer-content">
+  <div id="content-container">
-    <div class="footer-info">
+    <section class="footer-block">
-      <p>
+      <img
-        {@html $t(
+        src={logo}
-          'footer.copyright',
+        style="height: 80px; width: auto; margin-lft: -5px;"
-          /** @type {any} */ ({
+        alt="Logotipo da Embroidery Viewer."
-            year: new Date().getFullYear(),
+      />
-            website: 'https://leomurca.xyz',
+      <p>{$t('footer.slogan')}</p>
-          }),
+    </section>
-        )}
+    <section class="footer-block" aria-labelledby="contact-title">
-      </p>
+      <h1 id="contact-title">{$t('footer.contact-title')}</h1>
-      <p>
+      <p>{$t('footer.contact-description')}</p>
-        {@html $t(
-          'footer.version',
-          /** @type {any} */ ({ version: appVersion() }),
-        )}
-      </p>
-    </div>
 
-    <nav class="footer-nav">
+      <address class="contact-container">
+        <div class="contact-item">
+          <MailIcon size={30} />
+
+          <a href="mailto:leo@leomurca.xyz}" aria-label="leo@leomurca.xyz"
+            >leo@leomurca.xyz</a
+          >
+        </div>
+      </address>
+    </section>
+    <section class="footer-block">
+      <h1>{$t('footer.resources')}</h1>
+      <nav class="social-container" aria-label="Social media">
         <a href={resolve('/about')}>{$t('footer.about')}</a>
         <a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
-      <a href={resolve('/terms-of-service')}>{$t('footer.terms.of.service')}</a>
+        <a href={resolve('/terms-of-service')}
+          >{$t('footer.terms.of.service')}</a
+        >
       </nav>
+      <button
+        class="back-to-top-button"
+        aria-label={$t('footer.back-to-top.aria-label')}
+        onclick={() => scrollTo({ top: 0, behavior: 'smooth' })}
+      >
+        <ArrowTopIcon size={30} /> {$t('footer.back-to-top.label')}</button
+      >
+    </section>
   </div>
+  <section class="credits-container">
+    Copyright {new Date().getFullYear()}
+
+    <a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
+      >Leonardo Murça</a
+    >
+    |
+    {$t('footer.version')}:
+    <span style="font-family: var(--font-bold);">{appVersion()}</span>
+  </section>
 </footer>
 
 <style>
   footer {
-    background-color: #f8f9fa;
+    background-color: var(--color-primary);
-    border-top: 1px solid #ddd;
+    width: 100%;
-    padding: 20px;
+    margin-top: 50px;
+  }
+
+  #content-container {
+    width: 85%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 60px 0 60px 30px;
+    scroll-margin-top: 100px;
+    color: white;
+    gap: 20px;
+  }
+
+  .footer-block {
     width: 100%;
   }
 
-  .footer-content {
+  h1 {
+    font-weight: 700;
+    color: white;
+    font-size: 1.2rem;
+  }
+
+  .contact-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    letter-spacing: 0.1rem;
+    font-style: normal;
+  }
+
+  .contact-container a {
+    color: white;
+  }
+
+  .contact-item {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
+    gap: 8px;
-    max-width: 960px;
+    margin-top: 10px;
-    margin: 0 auto;
+  }
+
+  .contact-item:hover {
+    font-weight: 700;
+  }
+
+  .social-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .social-container a {
+    color: white;
+  }
+
+  .social-container a:hover {
+    font-weight: 700;
+  }
+
+  .back-to-top-button {
     text-align: center;
+    background-color: transparent;
+    border-radius: 20px;
+    border: none;
+    padding: 13px;
+    text-decoration: none;
+    color: white;
+    font-size: 1rem;
+    width: 40%;
+    margin-top: 30px;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
   }
 
-  .footer-info {
+  .back-to-top-button:hover {
-    flex: 1 1 100%;
+    background-color: #ffffff;
-    margin-bottom: 10px;
+    color: var(--color-primary);
   }
 
-  .footer-info p {
+  .credits-container {
-    margin: 4px 0;
+    background-color: var(--color-secondary);
-    font-size: 14px;
+    color: white;
-    color: #333;
+    margin: 0 auto;
+    padding: 20px 30px;
+    padding-left: 9%;
+    width: 100%;
   }
 
-  .footer-info p:first-child {
+  .credits-container a {
-    font-weight: bold;
+    color: white;
+    border-bottom: 1px solid white;
   }
 
-  .footer-nav {
+  .credits-container a:hover {
-    flex: 1 1 100%;
+    background-color: white;
+    color: var(--color-secondary);
   }
 
-  .footer-nav a {
+  /* Responsive */
-    margin: 0 10px;
+  @media (max-width: 768px) {
-    font-size: 14px;
+    #content-container {
+      width: 100%;
+      margin: 0;
+      padding: 60px 30px;
+      flex-direction: column;
     }
 
-  @media (min-width: 600px) {
+    .back-to-top-button {
-    .footer-content {
+      width: 100%;
-      flex-wrap: nowrap;
+      justify-content: center;
-      text-align: left;
+      gap: 5px;
-    }
-
-    .footer-info,
-    .footer-nav {
-      flex: 1 1 50%;
-      margin-bottom: 0;
-    }
-
-    .footer-info {
-      text-align: left;
-    }
-
-    .footer-nav {
-      text-align: right;
     }
   }
 </style>

src/lib/components/icons/ArrowTopIcon.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let size = 20;
+  export let color = 'currentColor';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height={size}
+  viewBox="0 -960 960 960"
+  width={size}
+  fill={color}
+>
+  <path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" />
+</svg>

src/lib/components/icons/MailIcon.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let size = 20;
+  export let strokeWidth = 2;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
+  <polyline points="3,7 12,13 21,7" />
+</svg>

src/lib/styles/variables.css

@@ -1,5 +1,6 @@
 :root {
   --color-primary: #06345f;
+  --color-secondary: #094275;
 
   --font-base: 'Merienda';
 }

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

@@ -1,7 +1,15 @@
 {
-  "about": "ℹ About",
+  "slogan": "Preview your embroidery designs instantly — no software needed",
-  "privacy.policy": "🔐 Privacy Policy",
+  "resources": "Resources",
-  "terms.of.service": "📝 Terms of Service",
+  "contact-title": "Contact",
-  "copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> All rights reserved.",
+  "contact-description": "Do you want to help or have any questions? Contact us.",
-  "version": "🧵 Version: {{version}}"
+  "back-to-top": {
+    "label": "Back To Top",
+    "aria-label": "Back to top of the page"
+  },
+  "about": "About",
+  "privacy.policy": "Privacy Policy",
+  "terms.of.service": "Terms of Service",
+  "copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. All rights reserved.",
+  "version": "Version {{version}}"
 }

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

@@ -1,7 +1,15 @@
 {
-  "about": "ℹ Sobre",
+  "slogan": "Visualize bordados instantaneamente — sem software",
-  "privacy.policy": "🔐 Política de Privacidade",
+  "resources": "Recursos",
-  "terms.of.service": "📝 Termos de Serviço",
+  "contact-title": "Contato",
-  "copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> Todos os direitos reservados.",
+  "contact-description": "Quer ajudar ou tirar alguma dúvida? Contate-nos.",
-  "version": "🧵 Versão: {{version}}"
+  "back-to-top": {
+    "label": "Voltar ao topo",
+    "aria-label": "Voltar ao topo da página"
+  },
+  "about": "Sobre",
+  "privacy.policy": "Política de Privacidade",
+  "terms.of.service": "Termos de Serviço",
+  "copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. Todos os direitos reservados.",
+  "version": "Versão {{version}}"
 }