<template>
  <DefaultLayout></DefaultLayout>
  <!--PC -->
  <div class="hutopy-backgroud-color">
    <div class="hidden-xs flex-col items-center page-margin">
      <v-container>

        <!-- Banner -->
        <v-row class="text-center align-center row-between-logo-text home-row">
          <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
          <img class="hutopy-header-image" src="../../../public/images/hutopy.png">
          <v-col class="ml-0 text-left ">
            <!-- Home btn -->
            <RouterLink :to="{ name: 'home' }">
              <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
            </RouterLink>
          </v-col>
        </v-row>
      </v-container>

      <!-- Home btn -->
      <v-container class="row-between-logo-text">
        <v-row>
          <v-spacer></v-spacer>
          <v-col xl="8" lg="11" md="12" sm="12" xs="12">
            <v-row>
              <!-- Contact image -->
              <v-col>
                <img class="contact-image" src="../../../public/images/contactpage/contactpicture.png">
              </v-col>
              <!-- Form Information  -->
              <v-col class="row-joinus">
                <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
                <v-text-field label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
                <v-text-field label="Courriel" style="color: rgb(107, 0, 101);"></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>
                <RouterLink :to="{ name: 'home' }">
                  <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
                    class="mt-4 send-btn" block>Envoyez </v-btn>
                </RouterLink>
              </v-col>
            </v-row>

            <!-- Text about joining us -->
            <v-row>
              <v-container>
                <p class="h3-text paragraph">Rejoignez l'aventure
                  Hutopy : une
                  invitation à façonner l'avenir de la création.
                  Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
                  plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
                  collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
                  inspirer.

                </p>
                <p class="h3-text paragraph {">
                  Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
                  d'élargir
                  votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
                  profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
                  et
                  l'innovation.
                </p>
                <p class="h3-text h3-last-text paragraph {">
                  Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
                  créateurs
                  visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
                  votre
                  numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
                  Hutopy.
                  Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
                  Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
                  dans le ciel de notre utopie partagée.
                </p>
              </v-container>
            </v-row>
          </v-col>
          <!-- Offset -->
          <v-spacer></v-spacer>
        </v-row>
      </v-container>
    </div>


    <!-- Mobile low dimensions -->
    <div class="hidden-sm-and-up flex-col items-center justify-center">

      <!-- Offset -->
      <v-spacer style="margin-bottom: 25px;"></v-spacer>

      <!-- Contact image -->
      <v-img src="../../../public/images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
        style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>

      <!-- Title -->
      <v-row class="labelgroup">
        <v-col cols="12">
          <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
        </v-col>
      </v-row>

      <!-- Form Information  -->
      <v-text-field class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
      <v-text-field class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
      <v-textarea class="labelsize" 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 class="labelsize" 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>
      <RouterLink :to="{ name: 'home' }">
        <v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
          class="mt-4 send-btn" block>
          Envoyez
        </v-btn>
      </RouterLink>


      <!-- Text about joining us -->
      <p class="h3-text paragraph">Rejoignez l'aventure
        Hutopy : une
        invitation à façonner l'avenir de la création.
        Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
        plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
        collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
        inspirer.
      </p>

      <p class="h3-text paragraph">
        Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
        d'élargir
        votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
        profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
        et
        l'innovation.
      </p>

      <p class="h3-text h3-last-text paragraph">
        Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
        créateurs
        visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
        votre
        numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
        Hutopy.
        Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
        Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
        dans le ciel de notre utopie partagée.
      </p>
    </div>
    <FooterLayout></FooterLayout>
  </div>
</template>


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


<style scoped>
.hutopy-backgroud-color {
  background-color: #f4f4f4;
}

.Scale-80 {
  transform: translateY(-30%);
}

@media (min-width: 150px) and (max-width: 598px) {

  .labelgroup {
    margin-top: -50%;
  }

  .contact-image {

    width: auto;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
    margin-top: -40%;
    margin-bottom: -30%;
  }

  .hutopy-header-image {

    height: 70px;
    margin-left: 5%;
    margin-top: 5%;
  }


  .h2-Participez-au-développement {
    font-size: 1.4rem;
    margin-top: 5%;
    margin-bottom: 6%;
    margin-left: 5%;
    font-weight: 600;
  }

  .home-btn {
    margin-left: 20%;
    margin-top: 16%;
    border-radius: 150px;
  }

  .paragraph {
    font-size: 1.2rem;
    text-align: justify;

    margin-bottom: 10%;
    margin-top: 3%;
    margin-left: 3%;
    margin-right: 3%;
  }

  .labelsize {
    max-width: 95%;
    margin-left: 3%;
  }



}


@media (min-width: 599px) and (max-width: 749px) {

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    margin-top: 4%;
    height: 103%;
  }

  .home-btn {
    margin-top: 20%;

    border-radius: 30px;
    width: 140px;

    min-width: 140px;
    margin-left: 55%;
  }

  .h2-Participez-au-développement {
    font-size: 1.6rem;
    margin-top: 10%;
    margin-bottom: 6%;
  }


  .paragraph {
    font-size: 1.3rem;
    text-align: justify;

    margin-bottom: 4%;
    margin-top: 3%;
  }


  .hutopy-header-image {
    margin-top: 6%;
    width: 400px;
    margin-left: 2%;
  }

}


@media (min-width: 750px) and (max-width: 999px) {

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    margin-top: 4%;
  }

  .home-btn {
    margin-top: 35%;

    border-radius: 30px;
    width: auto;
    min-width: 160px;
    max-width: 180px;
    margin-left: 40%;


  }

  .h2-Participez-au-développement {
    font-size: 2rem;
    margin-top: 10%;
    margin-bottom: 6%;
  }


  .paragraph {
    font-size: 1.3rem;
    text-align: justify;

    margin-bottom: 4%;
    margin-top: 3%;
  }

  .hutopy-header-image {
    margin-top: 6%;
    width: 500px;
    margin-left: 1%;
  }

}

@media (min-width: 1000px) and (max-width: 1279px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 120px;
    margin-left: 1%;
  }


  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 30%;
    margin-top: 37%;


  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 3%;
    margin-bottom: 6%;
  }



  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);

  }


  .row-joinus {
    margin-right: -4%;
    margin-left: -1%;
  }

  .paragraph {
    font-size: 1.5rem;
    text-align: justify;
    margin-right: -4%;
    margin-bottom: 4%;
    margin-top: 3%;
  }



}


@media (min-width: 1280px) and (max-width: 1600px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 165px;
    margin-left: -2.8%;
  }

  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 53%;
    margin-top: 45%;


  }




  .row-between-logo-text {
    margin-top: 2%;

  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0%;
    margin-left: -13%
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -8%;
    margin-left: -10%;
  }

  .paragraph {
    margin-right: -6%;
    margin-left: -7%;
  }



}


@media (min-width: 1600px) and (max-width: 1919px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 165px;
    margin-left: -3%;
  }

  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 82%;
    margin-top: 40%;


  }




  .row-between-logo-text {
    margin-top: 2%;

  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0%;
    margin-left: -13%
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -15%;
    margin-left: -13%;
  }

  .paragraph {
    margin-right: -16%;
    margin-left: -9%;
  }



}

@media (min-width: 1920px) and (max-width: 2559px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 160px;
    margin-left: -4.6%;
  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  }


  .home-btn {
    margin-top: 5%;
    margin-left: 53%;
    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-bottom: -15%;

  }

  .send-btn {
    margin-bottom: 4%;
    margin-top: -1%;
  }

  .row-between-logo-text {
    margin-top: 3%;


  }

  .home-row {
    margin-left: 20%;
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -18%;
    margin-left: -10%;
  }

  .paragraph {
    margin-right: -20%;
  }

  .page-margin {
    margin-left: -9%;
  }

}

@media (min-width: 2559px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 180px;
    margin-left: 3.5%;
  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-left: 20%;
  }


  .home-btn {
    margin-top: 5%;
    margin-left: 30%;
    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-bottom: -15%;

  }

  .send-btn {
    margin-bottom: 4%;
    margin-top: -1%;
  }

  .row-between-logo-text {
    margin-top: 3%;


  }

  .home-row {
    margin-left: 20%;

  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .paragraph {
    margin-left: 10%;
  }

  .page-margin {
    margin-left: -5.5%;
  }
}
</style>
