app/layouts/freemium.vue

<template>
  <div class="layout-wrapper">
    <!-- Show the loading page -->
    <client-only placeholder-tag="client-only-placeholder" placeholder=" " />

    <v-app class="app-wrapper">
      <LayoutLoadingScreen />

      <LayoutHeader />

      <v-main class="main">
        <!-- Page will be rendered here-->
        <div>
          <LayoutSubheader />

          <LayoutAlertBar />

          <slot />
        </div>
      </v-main>

      <!-- Footer -->
      <v-footer class="white--text footer theme-secondary">
        <v-row v-if="smAndUp">
          <v-col cols="12" sm="3">
            <p class="text-h6 font-weight-bold text-center">
              {{ $t('DÉCOUVREZ NOS SOLUTIONS') }}
            </p>
          </v-col>
          <v-col cols="12" sm="2" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-artist"
              target="_blank"
            >
              <img
                src="/images/Opentalent_Artist-Blanc.png"
                height="70"
                class="mb-2"
              />
              <p>{{ $t('artist_def') }}</p>
            </a>
          </v-col>
          <v-col cols="12" sm="2" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-school"
              target="_blank"
            >
              <img
                src="/images/Opentalent_School-Blanc.png"
                height="70"
                class="mb-2"
              />
              <p>{{ $t('school_def') }}</p>
            </a>
          </v-col>
          <v-col cols="12" sm="2" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-manager"
              target="_blank"
            >
              <img
                src="/images/Opentalent_Manager-Blanc.png"
                height="70"
                class="mb-2"
              />
              <p>{{ $t('manager_def') }}</p>
            </a>
          </v-col>
          <v-col cols="12" sm="2" class="text-center text-product">
            <a href="https://opentalent.fr/" target="_blank">
              <img src="/images/OT_Logo_Agenda.png" height="70" class="mb-2" />
              <p>{{ $t('agenda_def') }}</p>
            </a>
          </v-col>
        </v-row>

        <v-row v-else>
          <v-col cols="12">
            <p class="text-h6 font-weight-bold text-center">
              {{ $t('DÉCOUVREZ NOS SOLUTIONS') }}
            </p>
          </v-col>
          <v-col cols="3" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-artist"
              target="_blank"
            >
              <img
                src="/images/Opentalent_Artist_Griffe.png"
                height="70"
                class="mb-2"
              />
            </a>
          </v-col>
          <v-col cols="3" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-school"
              target="_blank"
            >
              <img
                src="/images/Opentalent_School_Griffe.png"
                height="70"
                class="mb-2"
              />
            </a>
          </v-col>
          <v-col cols="3" class="text-center text-product">
            <a
              href="https://logiciels.opentalent.fr/opentalent-manager"
              target="_blank"
            >
              <img
                src="/images/Opentalent_Manager_Griffe.png"
                height="70"
                class="mb-2"
              />
            </a>
          </v-col>
          <v-col cols="3" class="text-center text-product">
            <a href="https://opentalent.fr" target="_blank">
              <img
                src="/images/Opentalent_Griffe.png"
                height="70"
                class="mb-2"
              />
            </a>
          </v-col>
        </v-row>
      </v-footer>

      <LazyLayoutAlertContainer />
    </v-app>
  </div>
</template>

<script setup lang="ts">
import { useLayoutStore } from '~/stores/layout'
import { useDisplay } from 'vuetify'

const { smAndUp, sm } = useDisplay()
const layoutStore = useLayoutStore()
layoutStore.name = 'freemium'

const route = useRoute()
const i18n = useI18n()

const pageTitle = computed(() => i18n.t(route.name || 'freemium_page'))
</script>

<style scoped lang="scss">
.layout-wrapper,
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 0 auto; /* Prend tout l’espace restant */
}

.v-footer {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  flex: 0 0 auto !important;

  .text-product {
    font-size: 13px;
  }

  a {
    color: white;
    text-decoration: none;
  }
}
</style>