134 lines
4.7 KiB
Vue
134 lines
4.7 KiB
Vue
<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> |