First draft of legal page

app.vue

@@ -47,7 +47,7 @@ const { isSidebarOpened } = storeToRefs(useUiStore())
           <Sidebar />
 
           <div
-            class="wrapper max-h-screen transition-all"
+            class="wrapper max-h-screen transition-all overflow-y-auto"
           >
             <NuxtPage />
           </div>

assets/_content.css

@@ -0,0 +1,42 @@
+.content {
+  > * + * {
+    margin-top: .5em;
+
+    @variant md {
+      margin-top: .75rem;
+    }
+  }
+
+  h1 {
+    font-size: var(--text-3xl);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-5xl);
+    }
+  }
+  h2 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-4xl);
+    }
+  }
+  h3 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-2xl);
+    }
+  }
+  h4 {
+    font-size: var(--text-md);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-lg);
+    }
+  }
+}

assets/main.css

@@ -7,6 +7,8 @@
 @import "./_colors.css" layer(theme);
 @import "./_colors.css" layer(utilities);
 
+@import "./_content.css";
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

components/global/sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhX } from "@phosphor-icons/vue"
+import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhInfo, PhX } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
 import { cn } from "~/lib/utils";
 import { breakpointsTailwind } from "@vueuse/core"
@@ -96,6 +96,40 @@ const breakpoints = useBreakpoints(
         </UiTooltipProvider>
       </li>
 
+      <li class="max-md:self-start">
+        <UiTooltipProvider :delay-duration="50" :disabled="!breakpoints.md.value">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full max-md:hidden"
+                as-child
+              >
+                <RouterLink to="/about">
+                  <PhInfo size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+              <RouterLink
+                to="/about"
+                class="md:hidden flex items-center gap-[.6ch] underline-offset-4 hover:underline"
+              >
+                <PhInfo size="22" weight="fill" />
+
+                <span class="text-[.9em]">
+                  {{ $t('pages.about.menuLabel') }}
+                </span>
+              </RouterLink>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'" :side-offset="6">
+              <p>
+                {{ $t('pages.about.menuLabel') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
+
       <ClientOnly>
         <li v-for="(item, i) in currentMenu" :key="i">
           <UiTooltipProvider :delay-duration="50">

content.config.ts

@@ -0,0 +1,10 @@
+import { defineCollection, defineContentConfig } from "@nuxt/content"
+
+export default defineContentConfig({
+  collections: {
+    sections: defineCollection({
+      type: "page",
+      source: "sections/**/*.md"
+    })
+  }
+})

content/sections/en/legal.md

@@ -0,0 +1,2 @@
+## legal text
+test

content/sections/fr/legal.md

@@ -0,0 +1,102 @@
+## Mentions légales
+### Propriétaire du site
+Alexis Pelé
+
+**Email** — contact@alexcreates.fr
+
+**Email de support** — rpg@alexcreates.fr
+
+# Conditions Générales d'Utilisation
+
+## Application de Création de Mondes Fantastiques
+
+**Date d'entrée en vigueur : 5 mai 2025**
+
+## 1. Acceptation des Conditions
+
+En accédant à notre application de création de mondes fantastiques (ci-après dénommée "l'Application"), vous acceptez d'être lié par les présentes Conditions Générales d'Utilisation. Si vous n'acceptez pas ces conditions, veuillez ne pas utiliser l'Application.
+
+## 2. Description du Service
+
+L'Application permet aux utilisateurs de créer, gérer et partager des calendriers et des mondes imaginaires pour leurs univers fantastiques. Les fonctionnalités incluent, sans s'y limiter :
+- La création de comptes utilisateurs
+- La conception de calendriers personnalisés 
+- La création d'univers fantastiques
+- Le partage de contenus avec d'autres utilisateurs
+
+## 3. Inscription et Compte Utilisateur
+
+### 3.1 Création de compte
+Pour utiliser pleinement l'Application, vous devez créer un compte utilisateur. Vous vous engagez à fournir des informations exactes, complètes et à jour lors de votre inscription.
+
+### 3.2 Sécurité du compte
+Vous êtes responsable du maintien de la confidentialité de vos identifiants de connexion et de toutes les activités qui se produisent sous votre compte. Vous devez nous informer immédiatement de toute utilisation non autorisée de votre compte.
+
+## 4. Contenus de l'Utilisateur
+
+### 4.1 Propriété intellectuelle
+Vous conservez tous vos droits de propriété intellectuelle sur les contenus que vous créez via l'Application (calendriers, descriptions de mondes, etc.). Cependant, vous nous accordez une licence mondiale, non exclusive, gratuite, transférable et pouvant faire l'objet d'une sous-licence pour utiliser, reproduire, modifier, adapter, publier et afficher ces contenus dans le cadre de la fourniture de l'Application.
+
+### 4.2 Contenus prohibés
+Vous vous engagez à ne pas créer ou partager de contenus qui :
+- Violent les droits de propriété intellectuelle d'autrui
+- Sont illégaux, diffamatoires, obscènes ou offensants
+- Contiennent des virus ou autres codes malveillants
+- Harcèlent, intimident ou discriminent d'autres utilisateurs
+
+## 5. Utilisation de l'Application
+
+### 5.1 Utilisation autorisée
+Vous vous engagez à utiliser l'Application conformément aux présentes conditions, aux lois applicables et aux bonnes pratiques en ligne.
+
+### 5.2 Restrictions
+Il est interdit de :
+- Utiliser l'Application d'une manière susceptible de l'endommager ou d'en altérer le fonctionnement
+- Tenter d'accéder sans autorisation aux systèmes ou réseaux connectés à l'Application
+- Utiliser l'Application pour distribuer des publicités non sollicitées ou du contenu malveillant
+- Usurper l'identité d'une autre personne ou entité
+
+## 6. Confidentialité et Données Personnelles
+
+Le traitement de vos données personnelles est soumis à notre Politique de Confidentialité, disponible séparément. En utilisant l'Application, vous consentez à la collecte et au traitement de vos données conformément à cette politique.
+
+## 7. Modification et Résiliation
+
+### 7.1 Modification du service
+Nous nous réservons le droit de modifier, suspendre ou interrompre tout aspect de l'Application à tout moment, avec ou sans préavis.
+
+### 7.2 Résiliation
+Nous pouvons résilier ou suspendre votre accès à l'Application immédiatement, sans préavis ni responsabilité, pour toute raison, y compris, sans limitation, si vous enfreignez les présentes conditions.
+
+## 8. Limitation de Responsabilité
+
+### 8.1 Garantie
+L'Application est fournie "telle quelle" et "selon disponibilité", sans garantie d'aucune sorte, expresse ou implicite.
+
+### 8.2 Responsabilité
+Dans toute la mesure permise par la loi, nous déclinons toute responsabilité pour tout dommage indirect, consécutif, exemplaire, accessoire ou punitif, y compris la perte de profits, même si nous avons été avisés de la possibilité de tels dommages.
+
+## 9. Dispositions Générales
+
+### 9.1 Droit applicable
+Les présentes conditions sont régies par le droit français.
+
+### 9.2 Règlement des litiges
+Tout litige relatif à l'interprétation, l'exécution ou la validité des présentes conditions sera soumis à la compétence exclusive des tribunaux français.
+
+### 9.3 Intégralité de l'accord
+Ces conditions constituent l'intégralité de l'accord entre vous et nous concernant l'utilisation de l'Application et remplacent tous les accords antérieurs.
+
+### 9.4 Divisibilité
+Si une disposition des présentes conditions est jugée invalide ou inapplicable, les autres dispositions resteront en vigueur.
+
+### 9.5 Cession
+Vous ne pouvez pas céder vos droits ou obligations en vertu des présentes conditions sans notre consentement écrit préalable.
+
+## 10. Contact
+
+Pour toute question concernant ces conditions d'utilisation, veuillez nous contacter à : [votre-email@domaine.com]
+
+---
+
+En utilisant notre Application, vous reconnaissez avoir lu, compris et accepté les présentes Conditions Générales d'Utilisation.

i18n/i18n.config.ts

@@ -318,6 +318,11 @@ export default defineI18nConfig(() => ({
         profile: {
           title: "{user} — My universe",
           metaTitle: "My universe",
+        },
+        about: {
+          title: "About this app",
+          metaTitle: "About this app",
+          menuLabel: "About",
         }
       },
       breadcrumbs: {
@@ -647,6 +652,11 @@ export default defineI18nConfig(() => ({
         profile: {
           title: "{user} — Mon univers",
           metaTitle: "Mon univers",
+        },
+        about: {
+          title: "À propos",
+          metaTitle: "À propos",
+          menuLabel: "À propos",
         }
       },
       breadcrumbs: {

nuxt.config.ts

@@ -12,7 +12,8 @@ export default defineNuxtConfig({
     "@nuxt/eslint",
     "shadcn-nuxt",
     "@nuxtjs/i18n",
-    "@nuxthub/core"
+    "@nuxthub/core",
+    "@nuxt/content",
   ],
 
   css: ["~/assets/main.css"],

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@intlify/message-compiler": "^11.1.3",
+    "@nuxt/content": "3.5.1",
     "@nuxt/eslint": "^1.3.0",
     "@nuxthub/core": "^0.8.25",
     "@nuxtjs/i18n": "^9.5.4",

pages/about.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const { locale } = useI18n()
+
+const { data: page, refresh } = await useAsyncData(locale, () => {
+  return queryCollection("sections").path(`/sections/${locale.value}/legal`).first()
+})
+
+watch(locale, () => refresh())
+</script>
+
+<template>
+  <main class="py-8 px-5 md:px-8 overflow-y-auto">
+    <Head>
+      <Title>{{ $t("pages.about.title") }}</Title>
+    </Head>
+
+    <Spacing size="lg">
+      <Heading level="h1">
+        {{ $t("pages.about.title") }}
+      </Heading>
+
+      <ContentRenderer v-if="page" :value="page" class="content" />
+    </Spacing>
+  </main>
+</template>