|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<PageMeta
|
|
|
- title="La Sauvagerie - Location de vacances"
|
|
|
- description="Maison de vacances pour 6 personnes à proximité de la mer en Normandie"
|
|
|
+ :title="$t('page_title')"
|
|
|
+ :description="$t('page_description')"
|
|
|
/>
|
|
|
|
|
|
<div class="rental-container">
|
|
|
@@ -9,15 +9,13 @@
|
|
|
<div class="main-image-container">
|
|
|
<v-img
|
|
|
src="/images/photos/IMG_2216.min.JPG"
|
|
|
- alt="La Sauvagerie - Vue principale"
|
|
|
+ :alt="$t('main_image_alt')"
|
|
|
cover
|
|
|
eager
|
|
|
height="500"
|
|
|
class="main-image rounded-lg"
|
|
|
:loading="loading"
|
|
|
- @click="selectImage('/images/photos/IMG_2216.min.png')"
|
|
|
- @load="onImageLoad"
|
|
|
- @error="onImageError"
|
|
|
+ @click="selectImage('/images/photos/IMG_2216.min.JPG')"
|
|
|
style="cursor: pointer;"
|
|
|
></v-img>
|
|
|
</div>
|
|
|
@@ -25,7 +23,7 @@
|
|
|
<!-- 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-col v-for="(image, index) in thumbnailImages" :key="index" cols="12" sm="6" md="4">
|
|
|
<v-img
|
|
|
:src="image.src"
|
|
|
:alt="image.alt"
|
|
|
@@ -34,8 +32,6 @@
|
|
|
eager
|
|
|
class="thumbnail rounded-lg"
|
|
|
@click="selectImage(image.src)"
|
|
|
- @load="onImageLoad"
|
|
|
- @error="onImageError"
|
|
|
></v-img>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
@@ -43,43 +39,40 @@
|
|
|
|
|
|
<!-- Description Section -->
|
|
|
<div class="description-container mt-8">
|
|
|
- <h2>Bienvenue à La Sauvagerie</h2>
|
|
|
+ <h2>{{ $t('welcome_heading') }}</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.
|
|
|
+ {{ $t('welcome_description') }}
|
|
|
</p>
|
|
|
</v-card>
|
|
|
</div>
|
|
|
|
|
|
<!-- Features Summary Section -->
|
|
|
<div class="features-container mt-8">
|
|
|
- <h2>Caractéristiques</h2>
|
|
|
+ <h2>{{ $t('features_heading') }}</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>
|
|
|
+ <h3 class="text-h6 mb-4">{{ $t('general_info_heading') }}</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>
|
|
|
+ <li>{{ $t('general_info_item_1') }}</li>
|
|
|
+ <li>{{ $t('general_info_item_2') }}</li>
|
|
|
+ <li>{{ $t('general_info_item_3') }}</li>
|
|
|
+ <li>{{ $t('general_info_item_4') }}</li>
|
|
|
+ <li>{{ $t('general_info_item_5') }}</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>
|
|
|
+ <h3 class="text-h6 mb-4">{{ $t('equipment_heading') }}</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>
|
|
|
+ <li>{{ $t('equipment_item_1') }}</li>
|
|
|
+ <li>{{ $t('equipment_item_2') }}</li>
|
|
|
+ <li>{{ $t('equipment_item_3') }}</li>
|
|
|
+ <li>{{ $t('equipment_item_4') }}</li>
|
|
|
+ <li>{{ $t('equipment_item_5') }}</li>
|
|
|
+ <li>{{ $t('equipment_item_6') }}</li>
|
|
|
</ul>
|
|
|
</v-card>
|
|
|
</v-col>
|
|
|
@@ -88,20 +81,35 @@
|
|
|
|
|
|
<!-- Location Section -->
|
|
|
<div class="location-container mt-8">
|
|
|
- <h2>Situation</h2>
|
|
|
+ <h2>{{ $t('location_heading') }}</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>
|
|
|
+ <li>{{ $t('location_item_1') }}</li>
|
|
|
+ <li>{{ $t('location_item_2') }}</li>
|
|
|
+ <li>{{ $t('location_item_3') }}</li>
|
|
|
+ <li>{{ $t('location_item_4') }}</li>
|
|
|
+ </ul>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Conditions Section -->
|
|
|
+ <div class="conditions-container mt-8">
|
|
|
+ <h2>{{ $t('conditions_heading') }}</h2>
|
|
|
+ <v-card class="pa-4">
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>{{ $t('conditions_item_1') }}</li>
|
|
|
+ <li>{{ $t('conditions_item_2') }}</li>
|
|
|
+ <li>{{ $t('conditions_item_3') }}</li>
|
|
|
+ <li>{{ $t('conditions_item_4') }}</li>
|
|
|
+ <li>{{ $t('conditions_item_5') }}</li>
|
|
|
+ <li>{{ $t('conditions_item_6') }}</li>
|
|
|
</ul>
|
|
|
</v-card>
|
|
|
</div>
|
|
|
|
|
|
<!-- Contact Section -->
|
|
|
- <div class="contact-container mt-8">
|
|
|
- <h2>Contact</h2>
|
|
|
+ <div id="contact" class="contact-container mt-8">
|
|
|
+ <h2>{{ $t('contact_heading') }}</h2>
|
|
|
<v-card class="pa-4">
|
|
|
<Contact />
|
|
|
</v-card>
|
|
|
@@ -118,7 +126,6 @@
|
|
|
:src="selectedImageSrc"
|
|
|
class="enlarged-image"
|
|
|
:loading="loading"
|
|
|
- cover
|
|
|
>
|
|
|
<template v-slot:placeholder>
|
|
|
<div class="d-flex align-center justify-center" style="height: 300px;">
|
|
|
@@ -136,12 +143,11 @@
|
|
|
import { useDisplay, useTheme } from 'vuetify'
|
|
|
import type { Ref } from '@vue/reactivity'
|
|
|
import { ref } from 'vue'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
|
|
|
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[]>([])
|
|
|
@@ -152,14 +158,12 @@ 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' },
|
|
|
+ { src: '/images/photos/IMG_2219.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
+ { src: '/images/photos/IMG_2220.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
+ { src: '/images/photos/IMG_2222.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
+ { src: '/images/photos/IMG_2223.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
+ { src: '/images/photos/IMG_2224.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
+ { src: '/images/photos/IMG_2225.min.JPG', alt: i18n.t('thumbnail_alt_interior') },
|
|
|
])
|
|
|
|
|
|
// Function to select an image and show it in the modal
|
|
|
@@ -168,27 +172,6 @@ const selectImage = (src: string) => {
|
|
|
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">
|
|
|
@@ -250,8 +233,9 @@ h3 {
|
|
|
width: auto;
|
|
|
}
|
|
|
|
|
|
-.image-modal-dialog {
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
+:deep(.image-modal-dialog) {
|
|
|
+ background-color: rgba(0, 0, 0, 0.9);
|
|
|
+ padding: 6px;
|
|
|
}
|
|
|
|
|
|
.image-modal-card {
|
