review Map component and add the address section to the contact page

components/Contact/AddressSection.vue

@@ -0,0 +1,92 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="6" class="px-8">
+        <ContactMap class="contact-map" />
+      </v-col>
+      <v-col cols="6" class="address-col px-8">
+
+        <h4>
+          <v-icon icon="fas fa-envelope"/> Pour nous écrire
+        </h4>
+
+        <v-card>
+          <div>
+            2iOpenService
+          </div>
+          <div>
+            217, rue Raoul Follereau
+          </div>
+          <div>
+            74300 - Cluses
+          </div>
+        </v-card>
+
+        <div class="mb-6" />
+
+        <h4>
+          <v-icon icon="fas fa-phone"/>
+          Ou par téléphone
+        </h4>
+
+        <div>
+          <v-btn
+            v-if="!revealPhoneNumber"
+            @click="revealPhoneNumber = !revealPhoneNumber"
+          >
+            Cliquer pour afficher le numéro de téléphone
+          </v-btn>
+          <span v-else>
+            <v-card>
+              Contactez nous au 
+              <a href="tel:+33972126017">
+                09 72 12 60 17
+              </a>
+            </v-card>
+          </span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+  const revealPhoneNumber = ref(false)
+</script>
+
+<style scoped lang="scss">
+  .container {
+    width: 70%;
+  }
+
+  h4 {
+    display: flex;
+    flex-direction: row;
+    color: var(--primary-color);
+    font-size: 20px;
+    font-weight: 500;
+    margin: 24px 0;
+  }
+
+  .v-icon {
+    margin-right: 16px;
+  }
+
+  .address-col > div, .address-col > .v-card > div {
+    padding: 8px 16px;
+  }
+
+  .v-card {
+    margin: 32px 64px;
+    padding: 12px;
+  }
+
+  .v-btn {
+    margin: 16px 64px;
+  }
+
+  a {
+    color: var(--on-neutral-color);
+    text-decoration: underline;
+  }
+</style>

components/Contact/Map.vue

@@ -1,27 +1,35 @@
 <template>
-  <div id="map" style="height: 500px" />
+  <div class="map-container">
+    <l-map
+      ref="map"
+      :zoom="15"
+      :center="location"
+      :options="{scrollWheelZoom: false}"
+    >
+      <l-tile-layer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        layer-type="base"
+        name="OpenStreetMap"
+      />
+
+      <l-marker
+        :lat-lng="location"
+      />
+    </l-map>
+  </div>
 </template>
 
 <script setup lang="ts">
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-onMounted(() => {
-  const map = L.map("map").setView([46.075245, 6.570162], 16);
-
-  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    maxZoom: 19,
-    attribution: "© OpenStreetMap contributors",
-  }).addTo(map);
+import 'leaflet/dist/leaflet.css'
+import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
 
-  const marker = L.marker([46.075245, 6.570162]).addTo(map);
-});
+const location = [46.075245, 6.570162]
 </script>
 
 <style scoped lang="scss">
-#map {
-  height: 100%;
-  width: 70%;
+.map-container {
+  height: 500px;
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
 }

nuxt.config.ts

@@ -96,6 +96,7 @@ export default defineNuxtConfig({
     "nuxt-lodash",
     "@nuxtjs/i18n",
     "@nuxt/devtools",
+    'nuxt3-leaflet'
   ],
   webfontloader: {
     google: {

package.json

@@ -30,7 +30,6 @@
     "@splidejs/vue-splide": "^0.6.12",
     "@syncfusion/ej2-vue-calendars": "^20.4.54",
     "@turf/turf": "^6.5.0",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.2.2",
@@ -43,6 +42,7 @@
     "libphonenumber-js": "^1.9.38",
     "nuxt": "3.2.0",
     "nuxt-lodash": "^2.4.1",
+    "nuxt3-leaflet": "^1.0.12",
     "ohmyfetch": "^0.4.21",
     "pinia": "^2.0.33",
     "pinia-orm": "^1.5.1",

pages/nous-contacter.vue

@@ -5,7 +5,7 @@
 
   <ContactForm />
 
-  <ContactMap class="contact-map" />
+  <ContactAddressSection />
 
   <LayoutFooterPrefooter />
 
@@ -17,3 +17,5 @@
   margin-top: 48px;
 }
 </style>
+<script setup lang="ts">
+</script>

yarn.lock

@@ -1303,7 +1303,7 @@
     unimport "^2.2.4"
     untyped "^1.2.2"
 
-"@nuxt/kit@^3.2.2", "@nuxt/kit@^3.5.0", "@nuxt/kit@^3.7.3", "@nuxt/kit@^3.7.4", "@nuxt/kit@^3.8.0", "@nuxt/kit@^3.8.2", "@nuxt/kit@^3.9.3":
+"@nuxt/kit@^3.2.2", "@nuxt/kit@^3.5.0", "@nuxt/kit@^3.5.2", "@nuxt/kit@^3.7.3", "@nuxt/kit@^3.7.4", "@nuxt/kit@^3.8.0", "@nuxt/kit@^3.8.2", "@nuxt/kit@^3.9.3":
   version "3.10.2"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.10.2.tgz#90f271f4e667027db23cbac1343a45cac214e859"
   integrity sha512-Bua7taY9CIm7HCTpHXqFyM1xlZkrUl6HOqWrkGjLLQg9eeWAdKT7ppT0iEMiGnb9f+5T0uL5Ec3TvuR5J8P9WA==
@@ -3273,7 +3273,7 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/leaflet@^1.9.1":
+"@types/leaflet@^1.9.1", "@types/leaflet@^1.9.3":
   version "1.9.8"
   resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.8.tgz#32162a8eaf305c63267e99470b9603b5883e63e8"
   integrity sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==
@@ -7719,7 +7719,7 @@ leaflet.markercluster@^1.5.3:
   resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
   integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
 
-leaflet@^1.9.3:
+leaflet@^1.9.3, leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
@@ -8603,6 +8603,16 @@ nuxt-lodash@^2.4.1:
     "@types/lodash-es" "^4.17.10"
     lodash-es "^4.17.21"
 
+nuxt3-leaflet@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/nuxt3-leaflet/-/nuxt3-leaflet-1.0.12.tgz#86551434006d0885ef332b3b73b0794a829654a4"
+  integrity sha512-nxG5rqosoX6p+xs/IqB0tGyawcte6FGWUUI/H2ZSVrGCQ7oN6GIj8DvQEb16sFXRlJeUDQfP0v4nLBCcqF58NQ==
+  dependencies:
+    "@nuxt/kit" "^3.5.2"
+    "@types/leaflet" "^1.9.3"
+    "@vue-leaflet/vue-leaflet" "^0.10.1"
+    leaflet "^1.9.4"
+
 nuxt@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.2.0.tgz#d952f8d2c2776a74656b80cc72a6533b56c0ad6c"
@@ -10295,6 +10305,7 @@ streamx@^2.15.0:
     bare-events "^2.2.0"
 
 "string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10354,6 +10365,7 @@ string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11551,6 +11563,7 @@ wide-align@^1.1.2, wide-align@^1.1.5:
     string-width "^1.0.2 || 2 || 3 || 4"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==