embroidery-viewer/src/lib/components/Footer.svelte

<script>
  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>

<footer>
  <div id="content-container">
    <section class="footer-block">
      <img
        src={logo}
        style="height: 80px; width: auto; margin-lft: -5px;"
        alt="Logotipo da Embroidery Viewer."
      />
      <p>{$t('footer.slogan')}</p>
    </section>
    <section class="footer-block" aria-labelledby="contact-title">
      <h1 id="contact-title">{$t('footer.contact-title')}</h1>
      <p>{$t('footer.contact-description')}</p>

      <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
        >
      </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: var(--color-primary);
    width: 100%;
  }

  #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%;
  }

  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;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }

  .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;
  }

  .back-to-top-button:hover {
    background-color: #ffffff;
    color: var(--color-primary);
  }

  .credits-container {
    background-color: var(--color-secondary);
    color: white;
    margin: 0 auto;
    padding: 20px 30px;
    padding-left: 9%;
    width: 100%;
  }

  .credits-container a {
    color: white;
    border-bottom: 1px solid white;
  }

  .credits-container a:hover {
    background-color: white;
    color: var(--color-secondary);
  }

  /* Responsive */
  @media (max-width: 768px) {
    #content-container {
      width: 100%;
      margin: 0;
      padding: 60px 30px;
      flex-direction: column;
    }

    .back-to-top-button {
      width: 100%;
      justify-content: center;
      gap: 5px;
    }
  }
</style>