﻿<template>
  
<!--  lg et xl-->
  <div class="hidden lg:block xl:block background-container-lg">
    <img src="/images/hutopymedia/banners/hutopy.png" alt="Image bgwhite" class="block mx-auto max-w-[500px] mt-15"/>
    <div class="flex flex-row space-x-3.5 justify-center py-15">
           <div class="flex flex-column max-w-[500px]">
        <img src="/images/hutopymedia/others/ctaappdemo.png" alt="Image bgwhite" class="max-w-[500px]"/>
      </div>
      <div class="flex flex-column space-y-16 max-w-[475px] ma-12 text-justify">
        <h1 class="font-bold text-4xl font-serif">Monétisez votre contenu à sa vraie valeur.</h1>

        <p>Nous créons une plateforme qui vous rémunère équitablement et vous aide à évoluer comme créateur. Rejoignez-nous et participez au prototype !</p>

        <div class="flex flex-col items-center">
          <!-- Boîte pour courriel et bouton Participez -->
          <div class="flex items-center space-x-2 w-full">
            <v-text-field
                v-model="email"
                label="Votre courriel"
                variant="outlined"
                type="email"
                placeholder="Votre courriel"
                class="w-full mt-6"
            />
            <v-btn class="text-white " height="60px" style="border-radius: 8px; background-color: #9F2E8D;">
              Participez
            </v-btn>
          </div>
        </div>



      </div>
    </div>

    <div class=" border-t-[4px] border-b-[4px] p-8 flex justify-center text-3xl text-white" style="background-color: #9F2E8D; border-color: #23393B;">

      <div class="flex flex-row space-x-[250px]">
        <a href="https://www.facebook.com/Hutopy" target="_blank" aria-label="Facebook" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-facebook</v-icon>
        </a>
        <a href="https://www.instagram.com/hutopy.inc/" target="_blank" aria-label="Instagram" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-instagram</v-icon>
        </a>
        <a href="https://x.com/Hutopyinc" target="_blank" aria-label="X" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-twitter</v-icon>
        </a>
      </div>

    </div>
     </div>

  
<!--  md et plus petit-->
  <div class="background-container-md block lg:hidden xl:hidden">
    <img src="/images/hutopymedia/banners/hutopy.png" alt="Image bgwhite" class="block mx-auto max-w-[400px] py-10"/>
  
      <div class="max-w-[400px] mx-auto py-5">
        <img src="/images/hutopymedia/others/ctaappdemo.png" alt="Image bgwhite"/>
      </div>
      <div class="text-justify  px-10">
        <h1 class="font-bold text-3xl font-serif hyphenated-text mb-10">Monétisez votre contenu à sa vraie valeur.</h1>

       
          
          <v-text-field
              v-model="email"
              label="Votre courriel"
              variant="outlined"
              type="email"
              placeholder="Votre courriel"
              class="w-full"
              density="compact"
          />
        <v-btn class="text-white w-100" height="100px" style=" border-radius: 8px; background-color: #9F2E8D; font-size: 24px;">
          Participez
        </v-btn>



        <p class="py-15">Nous créons une plateforme qui vous rémunère équitablement et vous aide à évoluer comme créateur. Rejoignez-nous et participez au prototype !</p>

    
    

      </div>
  

    <div class=" border-t-[4px] p-8 flex justify-center text-3xl text-white" style="background-color: #9F2E8D; border-color: #23393B;">

      <div class="flex flex-row space-x-[100px]">
        <a href="https://www.facebook.com/Hutopy" target="_blank" aria-label="Facebook" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-facebook</v-icon>
        </a>
        <a href="https://www.instagram.com/hutopy.inc/" target="_blank" aria-label="Instagram" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-instagram</v-icon>
        </a>
        <a href="https://x.com/Hutopyinc" target="_blank" aria-label="X" class="hover:scale-125 transition-transform duration-300">
          <v-icon>mdi-twitter</v-icon>
        </a>
      </div>

    </div>
  </div>
</template>

<style scoped>
.background-container-lg {
  width: 100%;
  height: 100%;

  background-image: url('/images/hutopymedia/others/ctabgwhite.png');
  background-size: cover;
  background-position: center;
}

.background-container-md {
  width: 100%;
  height: 100%;

  max-height: 1600px;
  background-image: url('/images/hutopymedia/others/ctabgwhite.png');
  background-size: cover;
  background-position: center;
}

.hyphenated-text {
  text-align: justify;
  hyphens: auto;
}
</style>
<script setup lang="ts">
</script>