site_logiciels/components/Layout/Footer/Footer.vue

<template>
  <footer ref="footerElement">
    <LayoutContainer>
      <div >
        <v-row>
          <v-col
            :cols="mdAndDown ? 12 : 3"
            :class="mdAndDown ? 'logo-container' : 'flex-container'"
          >
            <nuxt-link to="/">
              <v-img
                :class="mdAndDown ? 'logo-md' : 'logo'"
                src="/images/logo/footer-logo.png"
              />
            </nuxt-link>
          </v-col>

          <v-col cols=" 2" v-if="!mdAndDown">
            <v-row class="title-link">
              <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
            </v-row>
            <v-row>
              <router-link to="/annuaire" class="small-link ml-12"
                >Annuaire</router-link
              >
            </v-row>
            <v-row>
              <router-link to="/actualites" class="small-link ml-12"
                >Actualités</router-link
              >
            </v-row>
            <v-row>
              <router-link to="/annonces" class="small-link ml-12"
                >Annonces</router-link
              >
            </v-row>
          </v-col>

          <v-col cols="2" v-if="!mdAndDown">
            <v-row class="title-link">
              <h5 class="ml-12 mt-10 h5-title">Logiciels culturels</h5>
            </v-row>
            <v-row>
              <router-link to="/opentalent_artist" class="small-link ml-12"
                >Opentalent Artist</router-link
              >
            </v-row>
            <v-row>
              <router-link to="/opentalent_school" class="small-link ml-12"
                >Opentalent School</router-link
              >
            </v-row>
            <v-row>
              <router-link to="/opentalent_manager" class="small-link ml-12"
                >Opentalent Manager</router-link
              >
            </v-row>
          </v-col>

          <v-col cols="2" v-if="!mdAndDown">
            <v-row class="title-link">
              <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
            </v-row>
            <v-row>
              <NuxtLink
                to="https://ressources.opentalent.fr/display/FAQ/Accueil"
                class="small-link ml-12"
                >Foire Aux Questions</NuxtLink
              >
            </v-row>
            <v-row>
              <NuxtLink
                to="https://ressources.opentalent.fr/"
                class="small-link ml-12"
                target="_blank"
                >Support en ligne</NuxtLink
              >
            </v-row>
            <v-row>
              <NuxtLink
                to="/nous-contacter"
                class="small-link ml-12"
                target="_blank"
                >Nous contacter</NuxtLink
              >
            </v-row>
          </v-col>

          <v-col cols="3" v-if="!mdAndDown">
            <v-row class="title-link">
              <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
            </v-row>

            <v-row class="ml-5" no-gutters>
              <v-col cols="2">
                <a
                  href="https://www.facebook.com/opentalent"
                  target="_blank"
                  class="fab fa-facebook brand"
                />
              </v-col>
              <v-col cols="2">
                <a
                  href="https://twitter.com/Opentalent_FRA"
                  target="_blank"
                  class="fa-brands fa-square-twitter brand"
                />
              </v-col>
              <v-col cols="2">
                <a
                  href="https://www.linkedin.com/company/2iopenservice"
                  target="_blank"
                  class="fab fa-linkedin brand"
                />
              </v-col>

              <v-col cols="2">
                <a
                  href="https://www.youtube.com/@Opentalent74300"
                  target="_blank"
                  class="fab fa-youtube brand"
                />
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <v-row class="justify-center" v-if="mdAndDown">
          <v-col cols="12" class="text-center">
            <a
              href="https://www.facebook.com/opentalent"
              target="_blank"
              class="fab fa-facebook brand-md"
            />
            <a
              href="https://twitter.com/Opentalent_FRA"
              target="_blank"
              class="fa-brands fa-square-twitter brand-md"
            />
            <a
              href="https://www.linkedin.com/company/2iopenservice"
              target="_blank"
              class="fab fa-linkedin brand-md"
            />
            <a
              href="https://www.youtube.com/@Opentalent74300"
              target="_blank"
              class="fab fa-youtube brand-md"
            />
          </v-col>
        </v-row>
      </div>
      <v-row v-if="mdAndDown">
        <v-col cols="12" >
          <div v-for="(item, index) in footerLinks" :key="index">
            <v-container>
              <div  class="link-md d-flex justify-space-between align-left" @click="toggle(index)">
              {{ item.label }}
              <v-icon>
                {{
                  isActive(index) ? "fas fa-chevron-up" : "fas fa-chevron-down"
                }}
              </v-icon>
            </div>
              <div class="answer" v-if="isActive(index)">
              <div
                v-for="(sublink, sublinkIndex) in item.sublink"
                :key="sublinkIndex"
                class="mt-3"
              >
                <NuxtLink class="small-link-sm" :to="sublink.link">{{ sublink.label }}</NuxtLink>
              </div>
            </div>
            </v-container>
  
          </div>
        </v-col>
      </v-row>
      <v-row :class="mdAndDown ? '' : 'footer'" justify="center">
        <p class="mt-6">
          <a class="mention" href="/mentions-legales" target="_blank"
            >Mentions légales</a
          >
          -
          <a class="mention" href="/politique-de-confidentialite" target="_blank"
            >Politiques de cookies</a
          >
          -
          <a class="mention" href="/CGV" target="_blank"
            >Conditions Générales de Ventes</a
          >
        </p>
      </v-row>

      <v-row justify="center" class="mb-6">
        <p class="mention">2024 &copy; Tous droits réservés par Opentalent</p>
      </v-row>
    </LayoutContainer>
  </footer>
</template>

<script setup>
import { useDisplay } from "vuetify";
import { ref, provide } from "vue";

const footerElement = ref(null);
const footerLinks = ref([
  {
    label: "AGENDA CULTUREL",
    sublink: [
      {
        label: "Annuaire",
        link: "/annuaire",
      },
      {
        label: "Actualités",
        link: "/actualites",
      },
      {
        label: "Annonces",
        link: "/annonces",
      },
    ],
  },
  {
    label: "LOGICIELS CULTURELS ",
    sublink: [
      {
        label: "Opentalent Artist",
        link: "/opentalent_artist)",
      },
      {
        label: "Opentalent School",
        link: "/opentalent_school",
      },
      {
        label: "Opentalent Manager",
        link: "/opentalent_manager",
      },
    ],
  },
  {
    label: "À PROPOS ",
    sublink: [
      {
        label: "Qui sommes-nous",
        link: "/qui-sommes-nous)",
      },
      {
        label: "Nous rejoindre",
        link: "/nous-rejoindre",
      },
      {
        label: "Nous contacter",
        link: "/nous-contacter",
      },
    ],
  },
  {
    label: "ESPACE CLIENT ",
    sublink: [
      {
        label: "Foire Aux Questions ",
        link: "/ https://ressources.opentalent.fr/)",
      },
      {
        label: "Support en ligne ",
        link: "/https://ressources.opentalent.fr/?contact",
      },
      {
        label: "Nous contacter ",
        link: "/nous-contacter",
      },
    ],
  },
]);
const activeIndex = ref(-1);

function toggle(index) {
  activeIndex.value = activeIndex.value === index ? -1 : index;
}

function isActive(index) {
  return activeIndex.value === index;
}
provide("footerElement", footerElement);
const { mdAndDown } = useDisplay();
</script>

<style scoped>


.jusitfy-center {
  justify-content: center;
}
.logo-md {
  width: 18rem;
}
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mention {
  text-decoration: none;
  color: #ffffff;
  font-size: 0.8rem;
}

.brand {
  color: #ecfbfc;
  font-size: 1.9rem;
  text-decoration: none !important;
}

.brand-md {
  color: #ecfbfc;
  font-size: 3rem;
  text-decoration: none !important;
  margin: 0 1rem;
}
/* .flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
} */

.vertical-bar {
  height: 4rem;
  border: 0.1rem solid #ecfbfc;
  margin-left: 10px;
  margin-top: 3rem;
}

.right-reserved {
  color: rgba(255, 255, 255, 0.6);
  font-family: Space Grotesk;
  font-size: 0.6rem;
  letter-spacing: 1px;
}
.h5-title {
  font-size: 1.1rem;
  font-style: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.link-md {
  display: flex;
  flex-direction: row;
  text-align: left;
  text-transform: uppercase;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  
}

.logo-opentalent-md {
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon:nth-child(2) {
  margin-left: 10px;
}
.title-link,
.title-link-sm {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 20px;
  margin-bottom: 1rem;
}

.title-link-sm {
  margin-bottom: 0.1rem;
}
.small-link-sm {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 20px;
  color: #ffffff;
  text-decoration: none !important;
  text-align: left;
}
.small-link {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 20px;
  color: #ffffff;
  text-decoration: none !important;
  margin-bottom: 0.5rem;
}
.container {
  background: #091d20;
  color: aliceblue;
}

.activities {
  height: 12rem;
  background: #091d20;
  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
}

.footer {
  margin-top: 2rem;
  border-top: 0.4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
}

.logo {
  margin-bottom: 3rem;
  width: 25rem;
}

.logo-jaune {
  margin-left: 307.74px;
}

.logo-rouge {
  margin-left: 117px;
}

.logo-bleu {
  margin-left: 91.74px;
}

.text-logo-jaune {
  margin-left: 10rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;

  color: #ecfbfc;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
    0px 4px 4px rgba(0, 0, 0, 0.25);
}

.text-logo-rouge {
  margin-left: 37.74px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;

  color: #ecfbfc;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
    0px 4px 4px rgba(0, 0, 0, 0.25);
}

.text-logo-bleu {
  height: 24px;
  left: 897px;
  top: 7858px;
  margin-left: 25.74px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  color: #ecfbfc;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
    0px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>