floranet/src/components/footer/FooterComponent.vue

<template>
  <q-footer class="custom-q-footer" elevated>
    <container class="footer-container">
      <LogoWhite />

      <div class="footer-body">
        <ul class="footer-list footer-primary">
          <li class="footer-list-item">
            <p class="footer-list-content">
              Contáctanos <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua
              <br /><br />
              Horario: 9 a 14h. y de 15 a 18h.
            </p>
          </li>

          <li class="footer-list-item">
            <p class="footer-list-content">
              Lorem ipsum dolor sit amet,<br />
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua
            </p>
          </li>
        </ul>

        <ul class="footer-list footer-secondary">
          <li class="footer-list-item list-links">
            <router-link to="/">Ramos</router-link><br />
            <router-link to="/">Plantas</router-link><br />
            <router-link to="/">Nosotros</router-link><br />
            <router-link to="/faq">FAQs</router-link><br />
            <router-link to="/contacta">Contacta</router-link>
          </li>

          <li class="footer-list-item">
            <p class="footer-list-content">
              Si tienes cualquier duda o consulta a la hora de localizar tu
              envío, calcular un nuevo envío o solicitar recogida, estamos para
              ayudarte. <br /><br />

              <router-link to="/">
                <IconArrowCircleRight /> Preguntas frecuentes
              </router-link>
              <br />
              <router-link to="/">
                <IconArrowCircleRight /> Contacta con nosotros
              </router-link>
            </p>
          </li>

          <li class="footer-list-item">
            <p class="footer-list-content">
              Floranet &copy;2023 <br /><br />
              <router-link to="/">Aviso Legal</router-link> <br />
              <router-link to="/">Condiciones de uso</router-link><br />
              <router-link to="/">Política de cookies</router-link><br />
              <router-link to="/"> Política de Redes Sociales </router-link>
              <br /><br />

              Desarrollado por diligent
            </p>
          </li>
        </ul>
      </div>
    </container>
  </q-footer>
</template>

<script>
import { defineComponent } from 'vue';

import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
import LogoWhite from '../logo/LogoWhite.vue';
import Container from '../ui/Container.vue';

export default defineComponent({
  name: 'footer-component',
  components: { Container, LogoWhite, IconArrowCircleRight },
});
</script>

<style lang="scss" scoped>
.custom-q-footer {
  position: static;
}

p,
a {
  color: $white;
  font-size: $font-xxxxsm;
}

a:hover {
  text-decoration: underline;
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 66px 31px;
  & .footer-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 86px;
    & .footer-list {
      display: flex;
      flex-wrap: wrap;
      &.footer-primary {
        gap: 56px;
        position: relative;
        flex: 0 0 min(100%, 560px);
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          background-color: $white;
          top: 0;
          right: 0;
          height: 132px;
        }

        & .footer-list-item {
          flex: 0 0 min(100%, 218px);
        }
      }

      &.footer-secondary {
        gap: 79px;
        flex: 0 0 min(100%, 800px);
        & .footer-list-item {
          flex: 0 0 min(100%, 250px);
          &.list-links {
            flex: 0 0 min(100%, 133px);
          }
        }
      }

      @media only screen and (max-width: $med-md) {
        justify-content: space-evenly;
        &.footer-primary {
          flex: 1;
          gap: 20px;

          &::after {
            top: initial;
            right: 0;
            left: 0;
            bottom: -43px;
            height: 1px;
            width: 100%;
          }
          & .footer-list-item {
            flex: 1 0 min(100%, 150px);
          }
        }

        &.footer-secondary {
          gap: 59px;
          & .footer-list-item {
            flex: 1;
            &:last-child {
              flex: 1;
            }

            &:nth-child(2) {
              flex: 1 0 min(100%, 140px);
            }

            &.list-links {
              flex: 0 0 55px;
            }
          }
        }
      }
    }
  }
}
</style>