social-media/src/views/main/ContactView.vue

<template>


  <!--PC -->
  <div class="md:flex hidden items-center justify-between flex-col">
    <v-container style="margin-bottom: -.1%; margin-top: 2%;">
      <v-row justify="center">
        <v-col style="margin-left: 4%;" cols="6">
          <img src="../../../images/hutopyblack.png" height="100px">
        </v-col>
      </v-row>

      <v-row style="margin-bottom: -4%;" justify="end">
        <v-col cols="auto">
          <router-link :to="{ name: 'home' }">
            <v-btn size="x-large" style="min-width: 200px; max-width: 200px;" elevation="0">
              Accueil
            </v-btn>
          </router-link>
        </v-col>
      </v-row>







    </v-container>

    <img src="../../../images/homepage/bannierenousjoindre.png" class="banner-image" alt="Bannière"
      style="min-height: 500px; margin-top: 3%;">




    <main class="top-aligned-column grid grid-cols-3 gap-4">

      <div class="column"></div>
      <div class="center-column" style="width: 100vw; margin: auto;">
        <h1 style="font-size: 3rem; margin-top: 7%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
          développement de </h1>

        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 10%;">
          <div class="rectangular-image h-full flex justify-center items-center">

            <img src="../../../images/homepage/love.png" alt="Bannière" class="contactpicture" style="float: right;">

          </div>

          <div>



            <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">
              Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
              nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
              passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
              rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
              utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
            </p>

            <v-text-field label="Nom ($)"
              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>

            <v-text-field label="Courriel ($)"
              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>

            <v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>

            <v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>

            <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
              class="mt-4" block>Envoyez</v-btn>
          </div>
        </div>
      </div>

      <div class="column"></div>
    </main>
  </div>


  <!-- Mobile -->

  <v-container style="margin-top: -100px;">

    <div class="md:hidden flex flex-col items-center justify-center">
      <DefaultLayout></DefaultLayout>
      <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>



      <div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
        <img src="../../../images/contactpicturemobile.png" alt="Bannière">
      </div>
      <p class="text-justify pa-4" style="font-size: 1em;">
        Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
        nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
        passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
        rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
        utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
      </p>

      <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
      </div>

      <FormInscriptionBeta></FormInscriptionBeta>

      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
        block>Envoyez</v-btn>



    </div>
  </v-container>

  <FooterLayout></FooterLayout>
</template>


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

<style scoped>
.contactpicture {
  height: 800px;
  width: auto;

  /* ajustez cette valeur selon votre besoin */
  margin-bottom: 45px;
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
  /* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
  z-index: 2;
  /* Met l'image derrière */
}

.mallowbanner {

  top: 0;
  left: 0;
  z-index: -2;
  /* Met l'image derrière */
  margin-top: 5.5vw;
  /* ajustez cette valeur selon votre besoin */
  margin-bottom: 4.5vw;
  margin-left: -1.0vw;
}

.center-column {
  width: 70vw;
  /* ajustez cette valeur selon votre besoin */
  margin: auto;
  /* centre le contenu horizontalement */
}

.h1-inscription-beta {
  font-size: 25px;
  /* Taille de la police de 20 pixels */
  font-weight: bold;
  /* Texte en gras */
  text-align: center;
  /* Centrer le texte */
  margin-top: 20px;
  margin-bottom: 5px;

}

.h1-inscription-betacolor {
  font-size: 65px;
  /* Taille de la police de 20 pixels */
  font-weight: bold;
  /* Texte en gras */
  text-align: center;
  /* Centrer le texte */

  margin-bottom: 25px;
  color: rgba(163, 14, 121, 0.85);
  /* Couleur du texte (utilisez la couleur souhaitée) */
}

.para-inscription {
  margin-bottom: 20px;
  text-align: justify;
}
</style>