144 lines
6.6 KiB
Vue
144 lines
6.6 KiB
Vue
<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="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="space-y-4">
|
||
<p class="text-lg leading-relaxed text-justify">
|
||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
|
||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||
la créativité.
|
||
</p>
|
||
|
||
<p class="text-lg leading-relaxed text-justify">
|
||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||
prendre vie.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-2 gap-4">
|
||
<img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="rounded-lg shadow-lg">
|
||
<img src="/images/hutopymedia/homepage/microphone.png" alt="Microphone" class="rounded-lg shadow-lg">
|
||
<img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="rounded-lg shadow-lg">
|
||
<img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="rounded-lg shadow-lg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class=" py-12">
|
||
<div class="max-w-4xl mx-auto px-6 space-y-8">
|
||
<h1 class="text-4xl font-bold text-center text-purple-900">Ils sont sur Hutopy.</h1>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="flex justify-center items-center">
|
||
<RouterLink to="/@Hutopy">
|
||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image"
|
||
class="rounded-2xl shadow-lg">
|
||
</RouterLink>
|
||
</div>
|
||
<div class="flex justify-center items-center">
|
||
<RouterLink to="/@guillaumem">
|
||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||
alt="Profile Image" class="rounded-2xl shadow-lg">
|
||
</RouterLink>
|
||
</div>
|
||
<div class="flex justify-center items-center">
|
||
<RouterLink to="/@chloebeaugrand">
|
||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||
alt="Profile Image" class="rounded-2xl shadow-lg">
|
||
</RouterLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center">
|
||
|
||
|
||
<RouterLink to="/browse">
|
||
<v-btn variant="tonal" density="default" class="mb-2 w-full">
|
||
Découvre les autres créateurs
|
||
</v-btn>
|
||
</RouterLink>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
.overlay p {
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
body {
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
</style>
|