<template>
  <v-app>




    <!--PC -->
    <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 2%;">
      <v-container style="margin-bottom: -.1%;">
        <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 justify="end">
          <v-col cols="1">
            <RouterLink :to="{ name: 'contact' }">
              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
                Connexion
              </v-btn>
            </RouterLink>
          </v-col>
          <v-col cols="1">
            <RouterLink :to="{ name: 'contact' }">
              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
                Inscription
              </v-btn>
            </RouterLink>
          </v-col>
        </v-row>
      </v-container>



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




      <!-- Colonnes -->
      <v-container>
        <v-row>
          <v-col cols="1" class="ml-4 ml-sm-0">
            <!-- vide de gauche -->
          </v-col>

          <v-col cols="9" style="margin-left: 3%;">



            <!-- Créer Profiter Inspirer  -->

            <div class="d-flex justify-center align-center">
              <div>
                <div style="margin-top: 30px;">
                  <v-container class="d-flex ">

                    <v-hover v-slot="{ isHovering, props }">
                      <v-card class=" mx-auto" max-width="400" v-bind="props">
                        <v-img src="../../../images/homepage/creer.png"
                          style="border-radius: 20px; min-width: 344px;"></v-img>
                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                          contained>
                          <v-container>
                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                CRÉER</h3>
                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
                                Hutopy,
                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli
                                de possibilités
                                infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
                            </v-card>
                          </v-container>
                        </v-overlay>
                      </v-card>
                    </v-hover>

                    <v-space style="margin-left: 30px;"></v-space>

                    <v-hover v-slot="{ isHovering, props }">
                      <v-card class="mx-auto" max-width="400" v-bind="props">
                        <v-img src="../../../images/homepage/profiter.png"
                          style="border-radius: 20px; min-width: 344px;"></v-img>
                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                          contained>
                          <v-container>
                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                PROFITER</h3>
                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy
                                et découvrez un
                                espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
                                interactions authentiques
                                et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre
                                quotidien.</p>
                            </v-card>
                          </v-container>
                        </v-overlay>
                      </v-card>
                    </v-hover>

                    <v-space style="margin-left: 30px;"> </v-space>



                    <v-hover v-slot="{ isHovering, props }">
                      <v-card class="mx-auto" max-width="400" v-bind="props">
                        <v-img src="../../../images/homepage/inspirer.png"
                          style="border-radius: 20px; min-width: 344px;"></v-img>
                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                          contained>
                          <v-container>
                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                INSPIRER</h3>
                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
                                d'inspiration sur Hutopy, en
                                partageant votre vision, votre talent et vos histoires. Influencez positivement la
                                communauté, éveillez
                                la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle
                                vertueux de créativité et
                                d'inspiration.</p>
                            </v-card>
                          </v-container>
                        </v-overlay>
                      </v-card>
                    </v-hover>

                  </v-container>
                </div>
              </div>
            </div>


            <!-- Description D'hutopy -->
            <v-container style="margin-top: 4%;">
              <v-row>
                <v-col>
                  <h1 style="margin-bottom: 5%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">C'est
                    quoi Hutopy</h1>

                  <p style="margin-bottom: 5%; font-size: 1.2rem; text-align: justify;">Découvrez Hutopy, une plateforme
                    révolutionnaire
                    conçue pour célébrer la
                    créativité, l'authenticité
                    et l'inspiration. Ici, chaque créateur trouve un espace pour exprimer sa passion et partager ses
                    œuvres avec une communauté engagée. Hutopy se distingue par son engagement envers une expérience
                    numérique enrichissante, offrant une interface intuitive où profiter, créer et inspirer deviennent
                    un quotidien enrichi et significatif. Hutopy n'est pas seulement une plateforme, c'est un mouvement
                    vers une interaction plus humaine et créative dans l'espace numérique. Avec un modèle économique
                    équitable et une variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où
                    les idées prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
                    l'expression authentique et construit un avenir où la technologie enrichit véritablement nos vies.
                    Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de notre communauté
                    mondiale. Ensemble, façonnons l'avenir de la création et du partage de contenu. Bienvenue sur
                    Hutopy, où vous pouvez créer votre propre univers.</p>


                  <v-row>
                    <v-col>

                    </v-col>

                    <v-col>
                      <RouterLink :to="{ name: 'contact' }">
                        <v-btn color="rgb(0, 0, 0)" style="width: 300px;" class="ml-auto">CRÉER UN COMPTE</v-btn>
                      </RouterLink>
                    </v-col>
                  </v-row>



                </v-col>

                <v-col>
                  <v-img src="../../../images/homepage/cestquoihutopy.png"
                    style="border-radius: 90px; min-width: 344px;"></v-img>
                </v-col>
              </v-row>
            </v-container>







            <!-- Fin Description D'hutopy -->



            <!-- ILS SONT SUR HUTOPY -->
            <v-container>
              <v-card-text>
                <h1
                  style="text-align: center; margin-top: 4%; margin-bottom: 2%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">
                  Ils sont sur Hutopy</h1>


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

                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-bottom: 70px;">
                  </div>
                  <v-row justify="center" class="profile-images">
                    <router-link :to="{ name: 'creatorfolio' }">
                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
                        style="border: 3px solid rgb(163, 14, 121);">
                    </router-link>
                    <router-link :to="{ name: 'creatorfolio' }">
                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
                        style="border: 3px solid rgb(163, 14, 121);">
                    </router-link>

                    <router-link :to="{ name: 'creatorfolio' }">
                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
                        style="border: 3px solid rgb(163, 14, 121);">
                    </router-link>
                  </v-row>

                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
                  </div>

                </v-container>
              </v-card-text>
            </v-container>
          </v-col>


          <!-- vide de droite -->
          <v-col cols="2" class="mr-4 mr-sm-0">
          </v-col>
        </v-row>
      </v-container>







    </div>

    <!-- Mobile -->
    <div class="md:hidden flex flex-col items-center justify-center">
      <div>

        <DefaultLayout></DefaultLayout>

        <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">

        <div>
          <v-card-text>
            <div>
              <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
              <p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
                la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
                exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
                par son engagement envers une expérience numérique enrichissante, offrant une interface
                intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
                Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
                humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
                variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
                prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
                l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
                vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
                notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
                contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
            </div>

            <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
            <router-link :to="{ name: 'contact' }">
              <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
                CONNECTEZ-VOUS
              </v-btn>
            </router-link>

          </v-card-text>
        </div>

        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
          <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
          <p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
            où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
            possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>

        </v-container>

        <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
          <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
          <p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
            espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une
            expérience
            personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>

        </v-container>


        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
          <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
          <p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
            partageant votre vision,
            votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les
            autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
            d'inspiration.</p>

        </v-container>

        <v-container>
          <v-card-text>
            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
            </div>
            <h1 style="text-align: center; color: #a30e79; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
            </h1>
            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
            </div>

            <div class="d-flex justify-content-center"
              style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
              </router-link>

              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: 120px;" />
              </router-link>

              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: 120px;" />
              </router-link>
            </div>


          </v-card-text>
        </v-container>

      </div>
    </div>




  </v-app>
  <FooterLayout></FooterLayout>
</template>

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



</script>

<script>
export default {
  data: () => ({
    overlays: [false, false, false],
  }),
  methods: {
    showOverlay(index) {
      this.overlays[index] = true;
    },
    hideOverlay(index) {
      this.overlays[index] = false;
    },
  },
}
</script>

<style src="../../cssstyle/index.css"></style>

<style src="../../cssstyle/homeView.css"></style>

<style>
.phototexte {
  margin-left: 10px;
  margin-right: 10px;

}

.layer1-background {
  background-color: rgba(163, 14, 121, 0.03);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

.layer1-backgroundmobile {
  background-color: rgba(163, 14, 121, 0.1);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

}

.layer2-backgroundmobile {

  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

}



.layer2-background {
  background-color: rgba(107, 0, 101, 0.02);
  border-radius: 20px;
}

.v-container {
  margin-bottom: 50px;
  /* Augmente l'espace entre les v-containers */
}

.h2ilssontsurutopy {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 100px;
  /* Ajoute de l'espace en bas du titre */
  margin-top: 25px;
}

.h2ilssontsurutopytitle {
  color: rgba(107, 0, 101, 0.85);
}

.profile-images {
  gap: 90px;
  /* Espace entre les images */
  margin-top: 50px;
  /* Ajoute de l'espace en haut des images */



}

.profile-image {
  width: auto;
  /* Largeur des images */
  height: 180px;
  /* Hauteur des images */
  border-radius: 20%;
  /* Coins arrondis */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.image-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.image-container {
  position: relative;
  width: 23vw;
  /* Utilisation de 20% de la largeur de la vue */
  margin: 5px 8px;
}

.image {
  width: 100%;
  height: auto;
  border-radius: 8px;

}

.v-card-text h2 {
  margin-bottom: 20px;
  /* Ajoute de l'espace en bas du titre h2 */
  font-size: 2rem;
  /* Taille du texte */
  font-weight: bold;
  /* Texte en gras */
  color: rgba(163, 14, 121, 0.85);
  /* Couleur du texte (utilisez la couleur souhaitée) */
}

.v-card-text p {
  font-size: 1rem;
  /* Taille du texte */
}

.textjustify {
  text-align: justify;
}

.overlay {
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(163, 14, 121, 0.80);
  /* Voile noir avec une opacité de 0.5 */
  display: flex;
  text-align: left;
  font-size: 1.5rem;


  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.banner-image {

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  /* Ombre douce */
}

.image-container:hover .overlay {
  opacity: 1;
}

.overlay p {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

.custom-container {
  position: relative;
  max-width: 100vw;
  /* Limiter la largeur de la v-container à la largeur de l'écran */


}

.v-card {
  max-width: calc(100% - 20px);
  /* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
}

.v-card-imagecontainerpos {
  margin-top: 55px;
  /* Déplace l'image vers le bas de 10 pixels */
  border-radius: 8px;
}

.overlay p.image-text {
  display: none;
}

.overlay:hover p.image-text {
  display: block;
}
</style>
