add the tourism section

i18n/lang/en.json

@@ -54,6 +54,16 @@
   "conditions_item_3": "No parties",
   "conditions_item_4": "No smoking or vaping inside",
 
+  "tourism_heading": "Discover around Bréhal",
+  "tourism_attractions_heading": "Places to visit",
+  "tourism_activities_heading": "Activities",
+  "tourism_link_office": "Granville Terre et Mer Tourist Office",
+  "tourism_link_must_see": "Must-see attractions in the region",
+  "tourism_link_beaches": "Beaches",
+  "tourism_link_nautical": "Water activities",
+  "tourism_link_hiking": "Hiking trails",
+  "tourism_link_markets": "Local markets",
+
   "main_image_alt": "La Sauvagerie - Main view",
   "thumbnail_alt_main": "Main view",
   "thumbnail_alt_exterior": "Exterior view",

i18n/lang/fr.json

@@ -54,6 +54,16 @@
   "conditions_item_3": "Pas de fêtes",
   "conditions_item_4": "Interdiction de fumer et de vapoter à l'intérieur",
 
+  "tourism_heading": "À découvrir autour de Bréhal",
+  "tourism_attractions_heading": "Lieux à visiter",
+  "tourism_activities_heading": "Activités",
+  "tourism_link_office": "Office du tourisme de Granville Terre et Mer",
+  "tourism_link_must_see": "Les incontournables de la région",
+  "tourism_link_beaches": "Les plages",
+  "tourism_link_nautical": "Activités nautiques",
+  "tourism_link_hiking": "Randonnées",
+  "tourism_link_markets": "Marchés locaux",
+
   "main_image_alt": "La Sauvagerie - Vue principale",
   "thumbnail_alt_main": "Vue principale",
   "thumbnail_alt_exterior": "Vue extérieure",

pages/index.vue

@@ -28,6 +28,7 @@
             :src="image.src"
             :alt="image.alt"
             height="150"
+            max-height="150"
             cover
             eager
             class="thumbnail rounded-lg"
@@ -106,6 +107,35 @@
       </v-card>
     </div>
 
+    <!-- Tourism Section -->
+    <div class="tourism-container mt-10">
+      <h2>{{ $t('tourism_heading') }}</h2>
+      <v-card class="pa-5 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-card class="px-4 h-100 rounded-lg elevation-1" style="max-width: 100%; overflow-wrap: break-word;">
+              <h3 class="text-h6 mb-3 mt-2">{{ $t('tourism_attractions_heading') }}</h3>
+              <ul class="feature-list">
+                <li><a href="https://www.granville-terre-mer.fr/tourisme/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_office') }}</a></li>
+                <li><a href="https://www.granville-terre-mer.fr/decouvrir/les-incontournables/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_must_see') }}</a></li>
+                <li><a href="https://www.granville-terre-mer.fr/decouvrir/les-plages/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_beaches') }}</a></li>
+              </ul>
+            </v-card>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-card class="px-4 h-100 rounded-lg elevation-1" style="max-width: 100%; overflow-wrap: break-word;">
+              <h3 class="text-h6 mb-3 mt-2">{{ $t('tourism_activities_heading') }}</h3>
+              <ul class="feature-list">
+                <li><a href="https://www.granville-terre-mer.fr/decouvrir/les-activites-nautiques/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_nautical') }}</a></li>
+                <li><a href="https://www.granville-terre-mer.fr/decouvrir/les-randonnees/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_hiking') }}</a></li>
+                <li><a href="https://www.granville-terre-mer.fr/decouvrir/les-marches/" target="_blank" rel="noopener noreferrer">{{ $t('tourism_link_markets') }}</a></li>
+              </ul>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card>
+    </div>
+
     <!-- Contact Section -->
     <div id="contact" class="contact-container mt-10">
       <h2>{{ $t('contact_heading') }}</h2>
@@ -208,7 +238,8 @@ const selectImage = (src: string) => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease;
   max-width: 100%;
-  height: auto !important;
+  max-height: 150px;
+  object-fit: cover;
 
   &:hover {
     transform: scale(1.05);
@@ -239,6 +270,33 @@ const selectImage = (src: string) => {
     &:last-child {
       margin-bottom: 0;
     }
+    
+    a {
+      color: rgb(var(--v-theme-primary));
+      text-decoration: none;
+      position: relative;
+      transition: all 0.3s ease;
+      font-weight: 500;
+      
+      &:hover {
+        color: rgba(var(--v-theme-primary), 0.8);
+        
+        &:after {
+          width: 100%;
+        }
+      }
+      
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 0;
+        height: 2px;
+        background-color: rgba(var(--v-theme-primary), 0.5);
+        transition: width 0.3s ease;
+      }
+    }
   }
 }