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:+33485300403"> 04.85.30.04.03 </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>