app/pages/helloasso.vue

<template>
  <LayoutContainer>
    <v-card>
      <v-row>
        <v-col cols="12" md="4" class="d-flex justify-center">
          <v-img src="/images/logos/Logo-HelloAsso.svg" class="logo" />
        </v-col>

        <v-col cols="12" md="8">
          {{ $t('helloasso_presentation') }}
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" class="d-flex justify-center align-center w-100 mt-6">
          <UiButtonHelloAssoConnect @click="onHelloAssoConnectClicked"/>
        </v-col>
      </v-row>
    </v-card>
  </LayoutContainer>
</template>

<script setup lang="ts">

const onHelloAssoConnectClicked = () => {
  console.log('helloasso connect clicked')
}

</script>

<style scoped lang="scss">
  .v-card {
    padding: 48px;
    max-width: 70%;
    margin: 36px auto;

    @media (max-width: 600px) {
      max-width: 90%;
    }
  }

  .logo {
    max-width: 80%;
  }
</style>