site_logiciels/components/Contact/Map.client.vue

<template>
  <LayoutContainer>
    <h4><span class="line" /> Contactez-nous</h4>

    <v-row>
      <v-col cols="12" md="6">
        <div class="map-container">
          <l-map
            ref="map"
            :zoom="15"
            :center="location"
            :options="{ scrollWheelZoom: false }"
          >
            <l-tile-layer
              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
              layer-type="base"
              name="OpenStreetMap"
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
            />

            <l-marker :icon="icon" :lat-lng="location" />
            <!--              <l-popup>-->
            <!--                <v-row>-->
            <!--                  <v-col cols="4" class="d-flex align-center">-->
            <!--                    <v-img src="/images/Opentalent_Griffe.png"/>-->
            <!--                  </v-col>-->
            <!--                  <v-col cols="8">-->
            <!--                    <div>-->
            <!--                      OPENTALENT-->
            <!--                    </div>-->
            <!--                    <div>-->
            <!--                      217, rue Raoul Follereau-->
            <!--                    </div>-->
            <!--                    <div>-->
            <!--                      74300 - Cluses-->
            <!--                    </div>-->
            <!--                  </v-col>-->
            <!--                </v-row>-->
            <!--              </l-popup>-->
          </l-map>
        </div>
      </v-col>

      <v-col cols="12" md="6" class="infos">
        <div class="name mb-8">Opentalent</div>

        <div class="d-flex flex-row align-center mb-8">
          <v-icon icon="fa fa-map-marker-alt" />
          <span>
            217 rue Raoul Follereau<br />
            74300 CLUSES
          </span>
        </div>

        <div class="d-flex flex-row mb-4">
          <v-icon icon="fa fa-phone" />
          <a href="tel:+33972126017">09.72.12.60.17</a>
        </div>

        <div class="d-flex flex-row mb-4">
          <v-icon icon="far fa-envelope" />
          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
import L from 'leaflet'

const location = [46.075245, 6.570162]

// eslint-disable-next-line import/no-named-as-default-member
const icon = L.icon({
  iconUrl: '/images/pages/contact/map/Pointeur_Opentalent.png',
  iconSize: [80, 80],
  iconAnchor: [22, 94],
  popupAnchor: [5, -100],
})
</script>

<style scoped lang="scss">
h4 {
  display: flex;
  flex-direction: row;
  font-size: 40px;
  line-height: 95px;
  margin-bottom: 1rem;
  align-items: center;
  font-weight: 100;

  @media (max-width: 600px) {
    font-size: 24px;
    line-height: 48px;
  }

  .line {
    display: block;
    height: 1px;
    width: 64px;
    min-width: 64px;
    border-top: solid 1px var(--on-neutral-color);
    margin-right: 18px;
  }
}

.map-container {
  height: 500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.infos {
  padding: 48px 36px;
  font-size: 21px;
  font-weight: 300;

  .name {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .v-icon {
    margin-right: 16px;
    opacity: 0.6;
  }

  a {
    color: var(--on-neutral-color);
  }

  @media (max-width: 600px) {
    order: -1;
  }
}
</style>