sauvagerie/pages/mentions-legales.vue

<template>
  <PageMeta
      :title="$t('legal_page_title')"
      :description="$t('legal_page_description')"
  />

  <div class="legal-container">
    <h1 class="text-h4 mb-6">{{ $t('legal_heading') }}</h1>

    <v-card class="mb-6" variant="outlined">
      <v-card-text>
        <h2>{{ $t('legal_publisher_heading') }}</h2>
        <p class="text-body-1">
          {{ $t('legal_publisher_text') }}
        </p>
      </v-card-text>
    </v-card>

    <v-card class="mb-6" variant="outlined">
      <v-card-text>
        <h2>{{ $t('legal_hosting_heading') }}</h2>
        <p class="text-body-1">
          {{ $t('legal_hosting_text') }}
        </p>
      </v-card-text>
    </v-card>

    <v-card class="mb-6" variant="outlined">
      <v-card-text>
        <h2>{{ $t('legal_intellectual_property_heading') }}</h2>
        <p class="text-body-1">
          {{ $t('legal_intellectual_property_text1') }}
        </p>
        <p class="text-body-1">
          {{ $t('legal_intellectual_property_text2') }}
        </p>
      </v-card-text>
    </v-card>

    <v-card class="mb-6" variant="outlined">
      <v-card-text>
        <h2>{{ $t('legal_data_protection_heading') }}</h2>
        <p class="text-body-1">
          {{ $t('legal_data_protection_text1') }}
        </p>
        <p class="text-body-1">
          {{ $t('legal_data_protection_text2') }}
        </p>
      </v-card-text>
    </v-card>

    <v-card variant="outlined">
      <v-card-text>
        <h2>{{ $t('legal_cookies_heading') }}</h2>
        <p class="text-body-1">
          {{ $t('legal_cookies_text') }}
        </p>
      </v-card-text>
    </v-card>

    <div class="d-flex justify-center py-4">
      <v-btn to="/">{{ $t('home') }}</v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTheme } from 'vuetify'
import { useI18n } from 'vue-i18n'

const theme = useTheme()
const { t } = useI18n()
</script>

<style scoped lang="scss">
.legal-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

h1 {
  color: rgb(var(--v-theme-primary));
  font-weight: 600;
  margin-bottom: 2rem;
}

h2 {
  color: rgb(var(--v-theme-primary));
  font-weight: 600;
  margin-bottom: 1rem;
}
</style>