site_logiciels/components/Contact/AddressSection.vue

<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: 16px 64px;
    padding: 12px;
  }

  .v-btn {
    margin: 16px 64px;
  }

  a {
    color: var(--on-neutral-color);
    text-decoration: underline;
  }
</style>