<template>

  <body style="background-color: #f4f4f4;">

    <DefaultLayout></DefaultLayout>
    <v-container>
      <div class="margin-top-mobile">
        <v-row style="margin-top: 8%; margin-bottom: 2%" class="d-flex justify-center align-center">
          <v-col cols="12" xxl="3" xl="4" lg="6" md="7" sm="9"> <v-card class="custom-dialog"
              style="background-color: white;">
              <v-container>
                <!-- Title Card -->
                <v-card-text style="font-weight: 600; margin-top: 25px; margin-bottom: 25px; font-size: 2.5rem;"
                  class="text-center">
                  Paiement complété
                </v-card-text>
                <v-row justify="center">

                  <!-- Icon Check -->
                  <v-col cols="12" class="text-center">
                    <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
                  </v-col>
                </v-row>
                <!-- Informations -->
                <v-row justify="center">
                  <v-col cols="12">
                    <v-card-text style="font-size: 1.2rem; text-align: center;">
                      Merci de supporter
                    </v-card-text>
                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
                      Guillaume Mousseau
                    </v-card-text>
                  </v-col>
                </v-row>
                <!-- Ok btn -->
                <v-row>
                  <v-col cols="12">
                    <v-card-actions class="justify-center">
                      <v-btn color="white" outlined elevation="2"
                        style="font-size: 2rem; width: 250px; height: 50px; margin-bottom: 25px; background-color: #a30e79;"
                        @click="this.$router.push({ path: '/guillaumeaime' })">Ok</v-btn>
                    </v-card-actions>
                  </v-col>
                </v-row>
              </v-container>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </v-container>
    <FooterLayout></FooterLayout>

  </body>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>

<style scoped>
@media (min-width: 200px) and (max-width: 960px) {
  .margin-top-mobile {
    margin-top: 60px;
  }
}
</style>
