add the index and legal pages

app.vue

@@ -2,18 +2,19 @@
   <NuxtLayout>
     <v-app>
       <a id="top" />
+      <div class="content-wrapper">
+        <div class="body">
+          <header>
+            <Topbar />
+          </header>
 
-      <div class="body">
-        <header>
-          <Topbar />
-        </header>
+          <NuxtPage />
 
-        <NuxtPage />
+          <BackToTheTop />
+        </div>
 
-        <BackToTheTop />
+        <Footer />
       </div>
-
-      <Footer />
     </v-app>
   </NuxtLayout>
 </template>
@@ -34,27 +35,51 @@ useHead(() => ({
 <style lang="scss">
 html {
   scroll-behavior: smooth;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 .v-application {
-  background: rgb(var(--v-theme-background));
-  color: rgb(var(--v-theme-on-background));
+  background: url('/images/photos/20250624_220653.jpg') no-repeat center center fixed !important;
+  background-size: cover !important;
+  color: rgb(var(--v-theme-on-background)) !important;
   font-family: Inter, sans-serif;
+  min-height: 100vh;
+  padding: 20px 0 0 0; /* Removed padding to allow footer to extend to the edges */
+  box-sizing: border-box;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 20px); /* Account for top padding of v-application */
 }
 
 .body {
-  padding: 18px;
+  padding: 28px;
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin: 0 15%;
+  margin: 20px 15% 20px 15%; /* Reduced bottom margin since footer is not fixed anymore */
+  background-color: rgba(var(--v-theme-card-background), 0.65);
+  border-radius: 12px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 
   @media (max-width: 1600px) {
-    margin: 0 6%;
+    margin: 20px 6% 20px 6%; /* Reduced bottom margin */
   }
 
   @media (max-width: 600px) {
-    margin: 0 3%;
+    margin: 20px 3% 20px 3%; /* Reduced bottom margin */
+    padding: 16px;
   }
 }
 
@@ -64,7 +89,8 @@ html {
   margin-bottom: 3rem;
   position: sticky;
   top: 0;
-  background: rgb(var(--v-theme-background));
+  background-color: rgb(var(--v-theme-card-background));
+  backdrop-filter: blur(5px);
   z-index: 1000;
 }
 
@@ -85,6 +111,7 @@ html {
   justify-content: center;
   border-top: rgb(var(--v-theme-on-surface));
   font-size: 12px;
+  margin-top: 20px; /* Add some space between content and footer */
 
   a {
     color: rgb(var(--v-theme-on-background));
@@ -95,4 +122,4 @@ html {
   }
 }
 
-</style>
+</style>

components/Footer.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="spacer" />
-  <v-footer no-gutters :height="36">
-    Olivier Massot, 2024-2025 - Built with Nuxt.js
+  <v-footer no-gutters :height="36" class="footer">
+    <div class="footer-content">
+      <span>© La Sauvagerie 2024 - Location de vacances en Normandie</span>
+      <span class="divider">|</span>
+      <NuxtLink to="/mentions-legales" class="legal-link">Mentions légales</NuxtLink>
+    </div>
   </v-footer>
 </template>
 
@@ -10,15 +13,46 @@
 </script>
 
 <style scoped lang="scss">
-.spacer {
-  margin-top: 64px;
-}
-
-footer {
-  position: absolute;
-  bottom: 0;
+.footer {
+  background-color: rgba(var(--v-theme-card-background), 0.65) !important;
+  color: rgb(var(--v-theme-on-background)) !important;
+  text-align: center;
+  font-size: 0.85rem;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0;
+  margin: 0;
   width: 100%;
-  height: 50px;
-  background-color: rgb(var(--v-theme-primary));
+
+  .footer-content {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 0;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+
+      .divider {
+        display: none;
+      }
+    }
+
+    .divider {
+      margin: 0 12px;
+    }
+
+    .legal-link {
+      color: rgb(var(--v-theme-on-background));
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        color: rgb(var(--v-theme-primary));
+      }
+    }
+  }
 }
-</style>
+</style>

components/Topbar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="topbar">
-    <IdCard v-if="lgAndUp" />
+    <NuxtLink to="/" class="logo-link">
+      <div class="logo-container">
+        <h1 class="site-title">La Sauvagerie</h1>
+        <p class="site-subtitle">Location de vacances en Normandie</p>
+      </div>
+    </NuxtLink>
 
     <v-spacer />
 
@@ -9,32 +14,13 @@
 
       <ThemeSwitcher />
 
-      <nuxt-link
-          href="https://github.com/olinox14"
-          target="_blank"
-          :aria-label="i18n.t('Find me on Github')"
-          class="logo"
+      <v-btn
+          variant="text"
+          class="contact-btn"
+          prepend-icon="fas fa-phone"
       >
-        <v-icon>fab fa-github</v-icon>
-      </nuxt-link>
-
-      <nuxt-link
-          href="https://stackoverflow.com/users/4279120/olinox14"
-          target="_blank"
-          :aria-label="i18n.t('Find me on Stackoverflow')"
-          class="logo"
-      >
-        <v-icon>fab fa-stack-overflow</v-icon>
-      </nuxt-link>
-
-      <nuxt-link
-          href="https://www.linkedin.com/in/olivier-massot-60b87b181"
-          target="_blank"
-          :aria-label="i18n.t('Find me on LinkedIn')"
-          class="logo"
-      >
-        <v-icon>fab fa-linkedin</v-icon>
-      </nuxt-link>
+        Contact
+      </v-btn>
     </div>
   </div>
 </template>
@@ -50,7 +36,7 @@
 
 <style scoped lang="scss">
 .topbar {
-  height: 64px;
+  min-height: 64px;
   display: flex;
   flex-direction: row;
   margin: 0;
@@ -62,12 +48,53 @@
 
   @media (max-width: 600px) {
     margin: 0 5%;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .logo-link {
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .logo-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .site-title {
+      font-size: 1.8rem;
+      font-weight: 700;
+      margin: 0;
+      color: rgb(var(--v-theme-primary));
+      font-family: 'Georgia', serif;
+    }
+
+    .site-subtitle {
+      font-size: 0.9rem;
+      margin: 0;
+      color: rgb(var(--v-theme-on-background));
+      font-style: italic;
+    }
   }
 
   .v-btn {
     color: rgb(var(--v-theme-on-background));
   }
 
+  .contact-btn {
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-on-primary)) !important;
+    font-weight: 500;
+    border-radius: 4px;
+    padding: 0 16px;
+  }
+
   .icon-links {
     font-size: 14px;
     display: flex;
@@ -78,7 +105,7 @@
       margin-left: 24px;
 
       @media (max-width: 540px) {
-        margin-left: 4px;
+        margin-left: 12px;
       }
     }
 
@@ -91,4 +118,4 @@
     }
   }
 }
-</style>
+</style>

i18n/i18n.config.ts

@@ -0,0 +1,23 @@
+export default defineI18nConfig({
+  langDir: './lang',
+  lazy: true,
+  locales: [
+    {
+      code: 'en',
+      iso: 'en-US',
+      file: 'en.json',
+      name: 'English',
+    },
+    {
+      code: 'fr',
+      iso: 'fr-FR',
+      file: 'fr.json',
+      name: 'Français',
+    },
+  ],
+  compilation: {
+    strictMessage: false,
+  },
+  defaultLocale: 'fr',
+  detectBrowserLanguage: true,
+})

i18n/lang/en.json

@@ -0,0 +1,12 @@
+{
+  "anti-bot-test": "Anti-bot check",
+  "email_must_be_valid": "Email adress shall be valid",
+  "message_must_be_valid": "Message is too short (10 characters minimum)",
+  "captcha_must_be_validated": "Catcha shall be validated",
+  "captcha_already_verified": "Captcha verified.",
+  "contact_email": "Email",
+  "contact_name": "Name",
+  "contact_message": "Message",
+  "contact_submit": "Send",
+  "contact_confirmation": "Your message has been sent. We will get back to you soon."
+}

i18n/lang/fr.json

@@ -0,0 +1,12 @@
+{
+  "anti-bot-test": "Contrôle anti-robots",
+  "email_must_be_valid": "L'adresse e-mail doit être valide",
+  "message_must_be_valid": "Le message est trop court (10 caractères minimum)",
+  "captcha_must_be_validated": "Le Captcha doit être validé",
+  "captcha_already_verified": "Captcha vérifié.",
+  "contact_email": "Email",
+  "contact_name": "Nom",
+  "contact_message": "Message",
+  "contact_submit": "Envoyer",
+  "contact_confirmation": "Votre message a été envoyé. Nous vous répondrons bientôt."
+}

lang/en.json

@@ -1,7 +0,0 @@
-{
-  "anti-bot-test": "Anti-bot check",
-  "email_must_be_valid": "Email adress shall be valid",
-  "message_must_be_valid": "Message is too short (10 characters minimum)",
-  "captcha_must_be_validated": "Catcha shall be validated",
-  "captcha_already_verified": "Captcha verified."
-}

lang/fr.json

@@ -1,7 +0,0 @@
-{
-  "anti-bot-test": "Contrôle anti-robots",
-  "email_must_be_valid": "L'adresse e-mail doit être valide",
-  "message_must_be_valid": "Le message est trop court (10 caractères minimum)",
-  "captcha_must_be_validated": "Le Captcha doit être validé",
-  "captcha_already_verified": "Captcha vérifié."
-}

nuxt.config.ts

@@ -82,34 +82,10 @@ export default defineNuxtConfig({
   site: {
     url: 'https://sauvagerie.fr'
   },
-  i18n: {
-    langDir: 'lang',
-    lazy: true,
-    locales: [
-      {
-        code: 'en',
-        iso: 'en-US',
-        file: 'en.json',
-        name: 'English',
-      },
-      {
-        code: 'fr',
-        iso: 'fr-FR',
-        file: 'fr.json',
-        name: 'Français',
-      },
-    ],
-    compilation: {
-      strictMessage: false,
-    },
-    defaultLocale: 'fr',
-    //@ts-ignore
-    detectBrowserLanguage: true,
-  },
   googleFonts: {
     families: {
       Inter: true,
     },
   },
   compatibilityDate: '2024-07-02',
-})
+})

package.json

@@ -16,7 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/i18n": "^8.3.1",
+    "@nuxtjs/i18n": "^9.3.0",
     "@nuxtjs/mdc": "^0.7.1",
     "@nuxtjs/sitemap": "^5.2.0",
     "@pinia/nuxt": "^0.5.4",

pages/index.vue

@@ -1,21 +1,277 @@
 <template>
   <PageMeta
       title="La Sauvagerie - Location de vacances"
-      description=""
+      description="Maison de vacances pour 6 personnes à proximité de la mer en Normandie"
   />
 
+  <div class="rental-container">
+    <!-- Main Image Section -->
+    <div class="main-image-container">
+      <v-img
+        src="/images/photos/IMG_2216.min.JPG"
+        alt="La Sauvagerie - Vue principale"
+        cover
+        eager
+        height="500"
+        class="main-image rounded-lg"
+        :loading="loading"
+        @click="selectImage('/images/photos/IMG_2216.min.png')"
+        @load="onImageLoad"
+        @error="onImageError"
+        style="cursor: pointer;"
+      ></v-img>
+    </div>
+
+    <!-- Thumbnails Section -->
+    <div class="thumbnails-container mt-4">
+      <v-row>
+        <v-col v-for="(image, index) in thumbnailImages" :key="index" cols="12" sm="6" md="3">
+          <v-img
+            :src="image.src"
+            :alt="image.alt"
+            height="150"
+            cover
+            eager
+            class="thumbnail rounded-lg"
+            @click="selectImage(image.src)"
+            @load="onImageLoad"
+            @error="onImageError"
+          ></v-img>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Description Section -->
+    <div class="description-container mt-8">
+      <h2>Bienvenue à La Sauvagerie</h2>
+      <v-card class="pa-4">
+        <p class="text-body-1">
+          Bienvenue à la Sauvagerie, maison de vacances de 95m², idéale pour des séjours en famille ou entre amis. 
+          Située dans un cadre verdoyant et paisible, cette maison offre trois chambres pouvant accueillir jusqu'à six personnes. 
+          Profitez de la tranquillité ambiante, et de la proximité d'une voie pédestre et cyclable qui vous mènera facilement 
+          aux commerces du bourg à 1,5 km, ou à la plage et la mer à seulement 3 km.
+        </p>
+      </v-card>
+    </div>
+
+    <!-- Features Summary Section -->
+    <div class="features-container mt-8">
+      <h2>Caractéristiques</h2>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-card class="pa-4 h-100">
+            <h3 class="text-h6 mb-4">Informations générales</h3>
+            <ul class="feature-list">
+              <li>Maison de vacances pour 6 personnes</li>
+              <li>Location semaine du samedi au samedi, 700€ la semaine</li>
+              <li>Arrivée entre 17h et 19h, départ avant midi</li>
+              <li>Surface: 95m²</li>
+              <li>2 places de parking</li>
+            </ul>
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-card class="pa-4 h-100">
+            <h3 class="text-h6 mb-4">Équipements</h3>
+            <ul class="feature-list">
+              <li>3 chambres (capacité 6 personnes)</li>
+              <li>1 salle de bain avec douche</li>
+              <li>2 WC</li>
+              <li>Salon / cuisine équipée</li>
+              <li>Terrasse en bois fermée de 30m²</li>
+              <li>Électroménager complet (lave-linge, lave-vaisselle, etc.)</li>
+            </ul>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Location Section -->
+    <div class="location-container mt-8">
+      <h2>Situation</h2>
+      <v-card class="pa-4">
+        <ul class="feature-list">
+          <li>Accès à la mer à 3 km</li>
+          <li>Commerces du bourg à 1,5 km</li>
+          <li>Voie pédestre et cyclable à proximité</li>
+          <li>Cadre verdoyant et paisible</li>
+        </ul>
+      </v-card>
+    </div>
+
+    <!-- Contact Section -->
+    <div class="contact-container mt-8">
+      <h2>Contact</h2>
+      <v-card class="pa-4">
+        <Contact />
+      </v-card>
+    </div>
+
+    <!-- Image Modal -->
+    <v-dialog v-model="showImageModal" max-width="90vw" content-class="image-modal-dialog">
+      <v-card class="image-modal-card">
+        <v-btn icon class="close-btn" @click="showImageModal = false">
+          <v-icon>fas fa-times</v-icon>
+        </v-btn>
+        <v-card-text class="text-center pa-0">
+          <v-img
+            :src="selectedImageSrc"
+            class="enlarged-image"
+            :loading="loading"
+            cover
+          >
+            <template v-slot:placeholder>
+              <div class="d-flex align-center justify-center" style="height: 300px;">
+                <v-progress-circular indeterminate color="primary"></v-progress-circular>
+              </div>
+            </template>
+          </v-img>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-
 import { useDisplay, useTheme } from 'vuetify'
 import type { Ref } from '@vue/reactivity'
+import { ref } from 'vue'
 
 const i18n = useI18n()
-
 const theme = useTheme()
 
+// Variables de débogage
+const showDebug = ref(true)
+const loading = ref(true)
+const imageErrors = ref<string[]>([])
+const imagesLoaded = ref<string[]>([])
+
+// Variables for image modal
+const showImageModal = ref(false)
+const selectedImageSrc = ref('')
+
+// List of thumbnail images
+const thumbnailImages = ref([
+  { src: '/images/photos/IMG_2216.min.JPG', alt: 'Vue principale' },
+  { src: '/images/photos/IMG_2217.min.JPG', alt: 'Vue extérieure' },
+  { src: '/images/photos/IMG_2219.min.JPG', alt: 'Intérieur' },
+  { src: '/images/photos/IMG_2220.min.JPG', alt: 'Intérieur' },
+  { src: '/images/photos/IMG_2222.min.JPG', alt: 'Intérieur' },
+  { src: '/images/photos/IMG_2223.min.JPG', alt: 'Intérieur' },
+  { src: '/images/photos/IMG_2224.min.JPG', alt: 'Intérieur' },
+  { src: '/images/photos/IMG_2225.min.JPG', alt: 'Intérieur' },
+])
+
+// Function to select an image and show it in the modal
+const selectImage = (src: string) => {
+  console.log('Selected image:', src)
+  selectedImageSrc.value = src
+  showImageModal.value = true
+}
+
+// Fonctions de débogage
+const onImageLoad = (event: Event) => {
+  const target = event.target as HTMLImageElement
+  console.log('✅ Image chargée:', target.src)
+  imagesLoaded.value.push(target.src)
+  loading.value = false
+}
+
+const onImageError = (event: Event) => {
+  const target = event.target as HTMLImageElement
+  console.error('❌ Erreur image:', target.src)
+  imageErrors.value.push(target.src)
+  loading.value = false
+}
+
+// Masquer le debug après 10 secondes
+setTimeout(() => {
+  showDebug.value = false
+}, 10000)
+
 </script>
 
 <style scoped lang="scss">
-</style>
+.rental-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.main-image {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.01);
+  }
+}
+
+.thumbnail {
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.feature-list {
+  list-style-type: none;
+  padding-left: 0;
+
+  li {
+    padding: 8px 0;
+    position: relative;
+    padding-left: 24px;
+
+    &:before {
+      content: "•";
+      color: rgb(var(--v-theme-primary));
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+h2 {
+  color: rgb(var(--v-theme-primary));
+  font-weight: 600;
+}
+
+h3 {
+  color: rgb(var(--v-theme-primary));
+}
+
+.enlarged-image {
+  border-radius: 0;
+  margin: 0 auto;
+  max-height: 90vh;
+  width: auto;
+}
+
+.image-modal-dialog {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.image-modal-card {
+  background: transparent;
+  box-shadow: none;
+  position: relative;
+  overflow: visible;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: white;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+</style>

pages/mentions-legales.vue

@@ -0,0 +1,95 @@
+<template>
+  <PageMeta
+      title="La Sauvagerie - Mentions Légales"
+      description="Mentions légales de La Sauvagerie, location de vacances en Normandie"
+  />
+
+  <div class="legal-container">
+    <h1 class="text-h4 mb-6">Mentions Légales</h1>
+
+    <v-card class="mb-6" variant="outlined">
+      <v-card-text>
+        <h2>Éditeur du site</h2>
+        <p class="text-body-1">
+          Le site La Sauvagerie est édité par [Nom du propriétaire ou de la société], domicilié à [Adresse complète].
+        </p>
+        <p class="text-body-1">
+          Téléphone : [Numéro de téléphone]<br>
+          Email : [Adresse email]
+        </p>
+      </v-card-text>
+    </v-card>
+
+    <v-card class="mb-6" variant="outlined">
+      <v-card-text>
+        <h2>Hébergement</h2>
+        <p class="text-body-1">
+          Ce site est hébergé par [Nom de l'hébergeur], [Forme juridique], [Capital social], dont le siège social est situé [Adresse de l'hébergeur].
+        </p>
+        <p class="text-body-1">
+          Téléphone : [Numéro de téléphone de l'hébergeur]<br>
+          Email : [Email de l'hébergeur]
+        </p>
+      </v-card-text>
+    </v-card>
+
+    <v-card class="mb-6" variant="outlined">
+      <v-card-text>
+        <h2>Propriété intellectuelle</h2>
+        <p class="text-body-1">
+          L'ensemble de ce site relève de la législation française et internationale sur le droit d'auteur et la propriété intellectuelle. Tous les droits de reproduction sont réservés, y compris pour les documents téléchargeables et les représentations iconographiques et photographiques.
+        </p>
+        <p class="text-body-1">
+          La reproduction de tout ou partie de ce site sur un support électronique quel qu'il soit est formellement interdite sauf autorisation expresse du directeur de la publication.
+        </p>
+      </v-card-text>
+    </v-card>
+
+    <v-card class="mb-6" variant="outlined">
+      <v-card-text>
+        <h2>Protection des données personnelles</h2>
+        <p class="text-body-1">
+          Conformément à la loi « Informatique et Libertés » du 6 janvier 1978 modifiée, vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant. Pour exercer ce droit, veuillez nous contacter par email à l'adresse indiquée ci-dessus.
+        </p>
+        <p class="text-body-1">
+          Les informations recueillies sur ce site sont destinées exclusivement à [Nom du propriétaire ou de la société] et ne seront en aucun cas transmises à des tiers.
+        </p>
+      </v-card-text>
+    </v-card>
+
+    <v-card variant="outlined">
+      <v-card-text>
+        <h2>Cookies</h2>
+        <p class="text-body-1">
+          Ce site utilise des cookies pour améliorer l'expérience utilisateur. En naviguant sur ce site, vous acceptez l'utilisation de cookies conformément à notre politique de confidentialité.
+        </p>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+
+const theme = useTheme()
+</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>

plugins/vuetify.ts

@@ -14,22 +14,25 @@ interface Theme {
     'on-surface': string,
     'primary': string,
     'on-primary': string,
+    'card-background': string,
   }
 }
 
 export const lightTheme: Theme = {
   dark: false,
   colors: {
-    'background': '#ffffff',
-    'on-background': '#333333',
-    'on-background--clickable': '#404040',
+    'background': '#f8f3e9', // Warm sand color
+    'on-background': '#3a3a3a',
+    'on-background--clickable': '#4d4d4d',
 
-    'surface': '#f9f9f9',
+    'surface': '#fff9ed', // Light cream
     'on-surface': '#4d4d4d',
 
-    'primary': '#e6e6e6',
-    'on-primary': '#1a1a1a',
-    'on-primary--clickable': '#4d4d4d',
+    'primary': '#5b88a5', // Ocean blue
+    'on-primary': '#ffffff',
+    'on-primary--clickable': '#e6e6e6',
+
+    'card-background': '#ffffffd9', // White with 85% opacity (rgba(255, 255, 255, 0.85))
   }
 }
 
@@ -43,9 +46,11 @@ export const darkTheme: Theme = {
     'surface': '#262626',
     'on-surface': '#ffffff',
 
-    'primary': '#13263a',
+    'primary': '#7ba4d1',
     'on-primary': '#e6e6e6',
     'on-primary-alt--clickable': '#ffffff',
+
+    'card-background': '#2a2a2ad9', // Dark gray with 85% opacity
   }
 }
 
@@ -57,7 +62,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       messages: { en },
     },
     theme: {
-      defaultTheme: 'dark',
+      defaultTheme: 'light',
       themes: {
         light: lightTheme,
         dark: darkTheme

prompt.txt

@@ -1 +0,0 @@
-créé un projet nuxt.js dans sa version la plus récente et en mode ssr, avec vuetify, pour un site internet présentant une maison à louer. Tu trouveras les photos dans le répertoire 'Photos', et les informations relatives à la location dans les fichiers joints. Fais une page moderne et simple, avec juste la photo IMG_2216 comme image principale, et les autres en miniatures en dessous, puis la description du logement en dessous, et un récapitulatif des caractéristiques du logement. Fais seulement une page index pour l'instant, avec un layout default.