Remake of the landing page. Needs to be converted for mobile.
This commit is contained in:
PascalMarchesseault
BIN
frontend/public/images/hutopymedia/banners/bannerbg.png
Normal file
BIN
frontend/public/images/hutopymedia/banners/bannerbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
BIN
frontend/public/images/hutopymedia/banners/heart.png
Normal file
BIN
frontend/public/images/hutopymedia/banners/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
frontend/public/images/hutopymedia/homepage/brain.png
Normal file
BIN
frontend/public/images/hutopymedia/homepage/brain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
frontend/public/images/hutopymedia/homepage/hands.png
Normal file
BIN
frontend/public/images/hutopymedia/homepage/hands.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,81 +1,119 @@
|
||||
<script setup>
|
||||
import Footer from "@/views/main/Footer.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="bg-gray-100">-->
|
||||
<!-- <div class="py-6">-->
|
||||
<!-- <div class=" mx-auto flex justify-center">-->
|
||||
<!-- <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="mx-auto flex justify-center pt-10 max-w-[980px]">-->
|
||||
<!-- <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction"-->
|
||||
<!-- class="max-w-full block rounded-none md:rounded-2xl">-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">-->
|
||||
<!-- <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">-->
|
||||
<!-- <img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="w-full rounded-2xl">-->
|
||||
<!-- <div-->
|
||||
<!-- class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">-->
|
||||
<!-- <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">-->
|
||||
<!-- <img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="w-full rounded-2xl">-->
|
||||
<!-- <div-->
|
||||
<!-- class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">-->
|
||||
<!-- <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">-->
|
||||
<!-- <img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="w-full rounded-2xl">-->
|
||||
<!-- <div-->
|
||||
<!-- class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">-->
|
||||
<!-- <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div>
|
||||
|
||||
<!-- Main Content Section -->
|
||||
<div class="max-w-4xl mx-auto px-6 py-8 space-y-6">
|
||||
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="mx-auto mb-8">
|
||||
|
||||
<div class="flex flex-row space-x-10 justify-center">
|
||||
<div class="py-6">
|
||||
<div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-lg leading-relaxed text-justify">
|
||||
Notre plateforme offre à ses utilisateurs un espace dédié pour centraliser leurs réseaux sociaux sur leur page personnelle. Grâce à cette fonctionnalité, chaque utilisateur peut rediriger son audience vers ses différents comptes et sites web de manière simple et efficace.
|
||||
|
||||
De plus, notre site permet aux créateurs de recevoir des donations directement via leur page, leur offrant un moyen supplémentaire de soutien financier.
|
||||
|
||||
Ainsi, les utilisateurs peuvent facilement connecter leurs visiteurs à leur univers digital tout en renforçant leur communauté et en augmentant les interactions sur leurs autres plateformes de réseaux sociaux.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-48">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-13 flex flex-col space-y-3">
|
||||
<v-btn to="/login" class="text-white" style="background-color: #6A0164;">Inscription</v-btn>
|
||||
<v-btn to="/create-creator" variant="outlined" style="color: #6A0164;">Créer ma page</v-btn>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- text-->
|
||||
<div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
|
||||
<div class="support-text text-justify md:text-left">
|
||||
<span> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br>
|
||||
<span> les <span class="highlight2">CRÉATEURS</span>, </span><br>
|
||||
<span> les <span class="highlight2">PROJETS</span> </span><br>
|
||||
<span> que vous <span class="highlight">AIMEZ</span> </span>
|
||||
</div>
|
||||
<img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="relative mt-10">
|
||||
<img
|
||||
src="/images/hutopymedia/banners/bannerbg.png"
|
||||
alt="YourHutopy"
|
||||
class="w-screen h-[540px] object-cover"
|
||||
>
|
||||
<div class="absolute inset-0 flex justify-center items-center space-x-14 pa-1">
|
||||
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 h-[500px]">
|
||||
<div class="text-xl font-semibold mb-2">Je soutiens</div>
|
||||
<img
|
||||
src="/images/hutopymedia/homepage/hands.png"
|
||||
alt="YourHutopy"
|
||||
class="max-h-56 mx-auto"
|
||||
>
|
||||
<div class="text-sm text-justify px-6">
|
||||
Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion.
|
||||
</div>
|
||||
<!-- <v-btn>Soutenir</v-btn>-->
|
||||
</div>
|
||||
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 h-[500px]">
|
||||
<div class="text-xl font-semibold mb-2">Je crée</div>
|
||||
<img
|
||||
src="/images/hutopymedia/homepage/brain.png"
|
||||
alt="YourHutopy"
|
||||
class="max-h-56 mx-auto"
|
||||
>
|
||||
<div class="text-sm text-justify px-6">
|
||||
Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous.
|
||||
</div>
|
||||
<v-btn to="/login" style="color: white; background-color: #6A0164; font-size: 18px; height: 40px; width: auto; padding: 0 32px; font-weight: bold; border-radius: 10px ">Inscription</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 py-8">
|
||||
<div class="grid grid-cols-2 gap-8 items-start">
|
||||
<!-- Section gauche : Image bannière et texte -->
|
||||
<div class="space-y-6">
|
||||
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6">
|
||||
<div class="space-y-4">
|
||||
<p class="text-lg leading-relaxed text-justify">Hutopy, c'est quoi ?</p>
|
||||
<p class="text-lg leading-relaxed text-justify">
|
||||
Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
|
||||
</p>
|
||||
<p class="text-lg leading-relaxed text-justify">
|
||||
Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<v-btn
|
||||
to="/create-creator"
|
||||
class="text-white mt-12 flex items-center justify-center round "
|
||||
style="background-color: #6A0164; font-size: 18px; height: 48px; width: auto; padding: 0 32px; font-weight: bold; border-radius: 10px "
|
||||
>
|
||||
Créer ma page
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section droite : 4 images -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div>
|
||||
<div><img src="/images/hutopymedia/homepage/microphone.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div>
|
||||
<div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div>
|
||||
<div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer class="mt-10"></Footer>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.overlay p {
|
||||
@@ -88,4 +126,40 @@ body {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
.support-container {
|
||||
display: flex;
|
||||
justify-content: center; /* Centre le bloc horizontalement */
|
||||
align-items: center; /* Centre le bloc verticalement (optionnel) */
|
||||
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 4.6rem; /* Ajustez la taille du texte */
|
||||
line-height: 1.1; /* Ajustez l'espacement entre les lignes */
|
||||
text-align: left; /* Alignement du texte à gauche */
|
||||
font-weight: bold; /* Rend le texte gras */
|
||||
}
|
||||
|
||||
.support-text .highlight {
|
||||
color: #6A0164; /* Remplacez par la couleur souhaitée */
|
||||
font-weight: bold; /* Mettre en gras */
|
||||
}
|
||||
|
||||
.highlight2 {
|
||||
color: #B81286; /* Remplacez par la couleur souhaitée */
|
||||
|
||||
}
|
||||
.custom-image {
|
||||
max-height: 220px; /* Limite la hauteur de l'image */
|
||||
position: absolute; /* Permet de positionner manuellement */
|
||||
top: 300px; /* Ajuste verticalement (déplace vers le haut) */
|
||||
left: 1670px; /* Ajuste horizontalement (déplace vers la gauche) */
|
||||
transform: translate(0, 0); /* Optionnel : ajuste de manière plus précise */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
Reference in New Issue
Block a user