jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

Browse Source 
git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d
This commit is contained in:
Jonathan Bourdon
2025-01-15 15:24:17 -05:00
parent 205a3bd14b c070c0315d
commit ab911955ed
318 changed files with 29301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/src/views/CTA01.vue Normal file
View File

@@ -0,0 +1,134 @@
<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>