262 lines
7.6 KiB
Vue
262 lines
7.6 KiB
Vue
<script setup>
|
||
import Footer from "@/views/main/Footer.vue";
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="pa-4 flex flex-col justify-center md:flex-row">
|
||
<div class="py-6">
|
||
<div>
|
||
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto">
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col space-y-3 header-btn">
|
||
<v-btn
|
||
to="/login"
|
||
class="text-white w-full sm:w-auto inscription-btn-header">
|
||
Inscription
|
||
</v-btn>
|
||
<v-btn
|
||
to="/create-creator"
|
||
variant="outlined"
|
||
class="w-full sm:w-auto inscription-btn-header-outlined">
|
||
Créer ma page
|
||
</v-btn>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<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="responsive-banner"
|
||
/>
|
||
<div class="absolute inset-0 flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
|
||
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
|
||
<div class="text-xl mb-2 box-text">Je soutiens</div>
|
||
<img
|
||
src="/images/hutopymedia/homepage/hands.png"
|
||
alt="YourHutopy"
|
||
class="max-h-56 mx-auto"
|
||
>
|
||
<div class="text-md 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 shadow-xl h-[520px]">
|
||
<div class="text-xl mb-2 box-text">Je crée</div>
|
||
<img
|
||
src="/images/hutopymedia/homepage/brain.png"
|
||
alt="YourHutopy"
|
||
class="max-h-56 mx-auto"
|
||
>
|
||
<div class="text-md 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"
|
||
class="inscription-btn"
|
||
>
|
||
Inscription
|
||
</v-btn>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="max-w-5xl mx-auto px-6 py-8">
|
||
<div class="gap-8 items-start flex flex-col md:flex-row">
|
||
<!-- Section de 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 sm:mx-5 md:mx-1">Hutopy, c'est quoi ?</p>
|
||
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1">
|
||
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 sm:mx-5 md:mx-1">
|
||
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 create-btn"
|
||
>
|
||
Créer ma page
|
||
</v-btn>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section droite : 4 images -->
|
||
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
|
||
<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/sign.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>
|
||
.bg-primary{
|
||
background-color: #6A0164;
|
||
}
|
||
|
||
.box-text{
|
||
color: #6A0164;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.inscription-btn-header{
|
||
color: white;
|
||
background-color: #6A0164;
|
||
font-size: 18px;
|
||
height: 40px;
|
||
width: auto;
|
||
padding: 0 32px;
|
||
font-weight: bold;
|
||
|
||
}
|
||
|
||
.inscription-btn-header-outlined{
|
||
color: #6A0164;
|
||
font-size: 18px;
|
||
height: 40px;
|
||
width: auto;
|
||
padding: 0 32px;
|
||
font-weight: bold;
|
||
|
||
}
|
||
|
||
.inscription-btn{
|
||
color: white;
|
||
background-color: #6A0164;
|
||
font-size: 18px;
|
||
height: 40px;
|
||
width: auto;
|
||
padding: 0 32px;
|
||
font-weight: bold;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.create-btn {
|
||
background-color: #6A0164;
|
||
font-size: 18px;
|
||
height: 48px;
|
||
width: auto;
|
||
padding: 0 32px;
|
||
font-weight: bold;
|
||
border-radius: 10px
|
||
}
|
||
|
||
.overlay p {
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
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: 2.5rem; /* 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 */
|
||
|
||
}
|
||
|
||
|
||
.responsive-banner {
|
||
width: 100vw; /* Prend toute la largeur de l'écran */
|
||
height: 1100px; /* Hauteur par défaut pour les petits écrans */
|
||
object-fit: cover; /* Maintient les proportions de l'image */
|
||
}
|
||
|
||
.header-btn {
|
||
}
|
||
|
||
.logo-image {
|
||
margin-left: auto;
|
||
|
||
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.header-btn{
|
||
margin-top: 25px;
|
||
margin-bottom: 25px;
|
||
}
|
||
.responsive-banner {
|
||
height: 1100px; /* Pour les écrans >= 640px */
|
||
}
|
||
|
||
.support-text {
|
||
font-size: 3.0rem; /* 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 */
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.responsive-banner {
|
||
height: 1100px; /* Pour les écrans >= 768px */
|
||
}
|
||
.header-btn{
|
||
margin-top: 60px;
|
||
}
|
||
.logo-image {
|
||
margin-right: 20px;
|
||
margin-left: 0;
|
||
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.responsive-banner {
|
||
height: 750px; /* Pour les écrans >= 1024px */
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1280px) {
|
||
.responsive-banner {
|
||
height: 600px; /* Pour les écrans >= 1280px */
|
||
}
|
||
}
|
||
</style> |