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>