various style improvements

app.vue

@@ -37,22 +37,25 @@ html {
   scroll-behavior: smooth;
   height: 100%;
   overflow-x: hidden;
+  font-size: 16px;
 }
 
 body {
   min-height: 100%;
   padding: 0;
   margin: 0;
+  line-height: 1.6;
 }
 
 .v-application {
   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;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   min-height: 100vh;
   padding: 20px 0 0 0; /* Removed padding to allow footer to extend to the edges */
   box-sizing: border-box;
+  letter-spacing: 0.015em;
 }
 
 .content-wrapper {
@@ -62,24 +65,25 @@ body {
 }
 
 .body {
-  padding: 28px;
+  padding: 32px;
   display: flex;
   flex-direction: column;
   flex: 1;
-  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);
+  margin: 24px 15% 24px 15%; /* Increased margins for better spacing */
+  background-color: rgba(var(--v-theme-card-background), 0.75); /* Slightly more opaque for better readability */
+  border-radius: 16px; /* Slightly larger border radius */
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
+  backdrop-filter: blur(8px); /* Increased blur for better contrast with background */
+  border: 1px solid rgba(255, 255, 255, 0.4); /* Slightly more visible border */
 
   @media (max-width: 1600px) {
-    margin: 20px 6% 20px 6%; /* Reduced bottom margin */
+    margin: 24px 8% 24px 8%; /* Increased margins */
+    padding: 28px;
   }
 
   @media (max-width: 600px) {
-    margin: 20px 3% 20px 3%; /* Reduced bottom margin */
-    padding: 16px;
+    margin: 20px 4% 20px 4%; /* Increased margins */
+    padding: 20px;
   }
 }
 

i18n/lang/en.json

@@ -28,10 +28,13 @@
   "contact_heading": "Contact",
 
   "general_info_item_1": "Holiday home for 6 people",
-  "general_info_item_2": "Weekly rental from Saturday to Saturday, €700 per week",
-  "general_info_item_3": "Arrival between 5pm and 7pm, departure before noon",
-  "general_info_item_4": "Area: 95m²",
-  "general_info_item_5": "2 parking spaces",
+  "general_info_item_2": "Price: €110 per night",
+  "general_info_item_3": "Rental from Saturday to Saturday between June 15 and September 30",
+  "general_info_item_4": "Minimum 3 days for the rest of the year",
+  "general_info_item_5": "Arrival between 5pm and 7pm, departure before noon",
+  "general_info_item_6": "Area: 95m²",
+  "general_info_item_7": "2 parking spaces",
+  "general_info_item_8": "€300 security deposit check required",
 
   "equipment_item_1": "3 bedrooms (capacity 6 people)",
   "equipment_item_2": "1 bathroom with shower",
@@ -46,12 +49,10 @@
   "location_item_4": "Green and peaceful setting",
 
   "conditions_heading": "Conditions",
-  "conditions_item_1": "House rented from Saturday to Saturday between June 15 and September 30",
-  "conditions_item_2": "Minimum 3 days for the rest of the year",
-  "conditions_item_3": "Rented for maximum 6 people",
-  "conditions_item_4": "No pets",
-  "conditions_item_5": "No parties",
-  "conditions_item_6": "No smoking or vaping inside",
+  "conditions_item_1": "Rented for maximum 6 people",
+  "conditions_item_2": "No pets",
+  "conditions_item_3": "No parties",
+  "conditions_item_4": "No smoking or vaping inside",
 
   "main_image_alt": "La Sauvagerie - Main view",
   "thumbnail_alt_main": "Main view",

i18n/lang/fr.json

@@ -28,10 +28,13 @@
   "contact_heading": "Contact",
 
   "general_info_item_1": "Maison de vacances pour 6 personnes",
-  "general_info_item_2": "Location semaine du samedi au samedi, 700€ la semaine",
-  "general_info_item_3": "Arrivée entre 17h et 19h, départ avant midi",
-  "general_info_item_4": "Surface: 95m²",
-  "general_info_item_5": "2 places de parking",
+  "general_info_item_2": "Prix: 110€ la nuit",
+  "general_info_item_3": "Location du samedi au samedi entre le 15 juin et le 30 septembre",
+  "general_info_item_4": "Minimum 3 jours le reste de l'année",
+  "general_info_item_5": "Arrivée entre 17h et 19h, départ avant midi",
+  "general_info_item_6": "Surface: 95m²",
+  "general_info_item_7": "2 places de parking",
+  "general_info_item_8": "Chèque de caution de 300€ demandé",
 
   "equipment_item_1": "3 chambres (capacité 6 personnes)",
   "equipment_item_2": "1 salle de bain avec douche",
@@ -46,12 +49,10 @@
   "location_item_4": "Cadre verdoyant et paisible",
 
   "conditions_heading": "Conditions",
-  "conditions_item_1": "Maison louée du samedi au samedi entre le 15 juin et le 30 septembre",
-  "conditions_item_2": "Minimum 3 jours le reste de l'année",
-  "conditions_item_3": "Maximum 6 personnes",
-  "conditions_item_4": "Animaux non acceptés",
-  "conditions_item_5": "Pas de fêtes",
-  "conditions_item_6": "Interdiction de fumer et de vapoter à l'intérieur",
+  "conditions_item_1": "Maximum 6 personnes",
+  "conditions_item_2": "Animaux non acceptés",
+  "conditions_item_3": "Pas de fêtes",
+  "conditions_item_4": "Interdiction de fumer et de vapoter à l'intérieur",
 
   "main_image_alt": "La Sauvagerie - Vue principale",
   "thumbnail_alt_main": "Vue principale",

pages/index.vue

@@ -38,9 +38,9 @@
     </div>
 
     <!-- Description Section -->
-    <div class="description-container mt-8">
+    <div class="description-container mt-10">
       <h2>{{ $t('welcome_heading') }}</h2>
-      <v-card class="pa-4">
+      <v-card class="pa-5 rounded-lg elevation-2">
         <p class="text-body-1">
           {{ $t('welcome_description') }}
         </p>
@@ -48,11 +48,11 @@
     </div>
 
     <!-- Features Summary Section -->
-    <div class="features-container mt-8">
+    <div class="features-container mt-10">
       <h2>{{ $t('features_heading') }}</h2>
       <v-row>
         <v-col cols="12" md="6">
-          <v-card class="pa-4 h-100">
+          <v-card class="pa-5 h-100 rounded-lg elevation-2">
             <h3 class="text-h6 mb-4">{{ $t('general_info_heading') }}</h3>
             <ul class="feature-list">
               <li>{{ $t('general_info_item_1') }}</li>
@@ -60,11 +60,12 @@
               <li>{{ $t('general_info_item_3') }}</li>
               <li>{{ $t('general_info_item_4') }}</li>
               <li>{{ $t('general_info_item_5') }}</li>
+              <li>{{ $t('general_info_item_8') }}</li>
             </ul>
           </v-card>
         </v-col>
         <v-col cols="12" md="6">
-          <v-card class="pa-4 h-100">
+          <v-card class="pa-5 h-100 rounded-lg elevation-2">
             <h3 class="text-h6 mb-4">{{ $t('equipment_heading') }}</h3>
             <ul class="feature-list">
               <li>{{ $t('equipment_item_1') }}</li>
@@ -80,9 +81,9 @@
     </div>
 
     <!-- Location Section -->
-    <div class="location-container mt-8">
+    <div class="location-container mt-10">
       <h2>{{ $t('location_heading') }}</h2>
-      <v-card class="pa-4">
+      <v-card class="pa-5 rounded-lg elevation-2">
         <ul class="feature-list">
           <li>{{ $t('location_item_1') }}</li>
           <li>{{ $t('location_item_2') }}</li>
@@ -93,24 +94,22 @@
     </div>
 
     <!-- Conditions Section -->
-    <div class="conditions-container mt-8">
+    <div class="conditions-container mt-10">
       <h2>{{ $t('conditions_heading') }}</h2>
-      <v-card class="pa-4">
+      <v-card class="pa-5 rounded-lg elevation-2">
         <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 id="contact" class="contact-container mt-8">
+    <div id="contact" class="contact-container mt-10">
       <h2>{{ $t('contact_heading') }}</h2>
-      <v-card class="pa-4">
+      <v-card class="pa-5 rounded-lg elevation-2">
         <Contact />
       </v-card>
     </div>
@@ -180,6 +179,12 @@ const selectImage = (src: string) => {
   margin: 0 auto;
 }
 
+.text-body-1 {
+  line-height: 1.7;
+  margin-bottom: 1rem;
+  font-size: 1.05rem;
+}
+
 .main-image {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
@@ -202,28 +207,46 @@ const selectImage = (src: string) => {
 .feature-list {
   list-style-type: none;
   padding-left: 0;
+  margin: 0.5rem 0;
 
   li {
-    padding: 8px 0;
+    padding: 10px 0;
     position: relative;
-    padding-left: 24px;
+    padding-left: 28px;
+    margin-bottom: 4px;
+    line-height: 1.5;
 
     &:before {
       content: "•";
       color: rgb(var(--v-theme-primary));
       position: absolute;
-      left: 0;
+      left: 8px;
+      font-size: 18px;
+      top: 8px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 }
 
 h2 {
   color: rgb(var(--v-theme-primary));
-  font-weight: 600;
+  font-weight: 700;
+  font-size: 1.8rem;
+  margin: 2rem 0 1.5rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid rgba(var(--v-theme-primary), 0.3);
+  letter-spacing: 0.02em;
 }
 
 h3 {
   color: rgb(var(--v-theme-primary));
+  font-weight: 600;
+  font-size: 1.4rem;
+  margin: 1.5rem 0 1rem 0;
+  letter-spacing: 0.01em;
 }
 
 .enlarged-image {