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

Fixe - home view

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-30 18:45:41 -04:00
parent 5476f64d09
commit cac25f04d2
2 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/main/Home.vue
View File

@@ -1,24 +1,48 @@
<template> <template>
<div class="bg-gray-100 min-h-screen"> <div class="bg-gray-100">
<div class="py-6">
<!-- Header Section --> <div class=" mx-auto flex justify-center">
<div class="px-6 py-12">
<div class="max-w-4xl mx-auto flex items-center justify-center">
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24"> <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24">
</div> </div>
</div> </div>
</div>
<!-- Banner Section --> <div class="mx-auto flex justify-center pt-10 max-w-[980px]">
<div class="relative"> <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction" class="max-w-full block rounded-none md:rounded-2xl">
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Hutopy Banner" class="w-full rounded-xl shadow-lg"> </div>
</div>
<!-- Call-to-Action Section --> <div>
<div class="flex justify-center py-8 space-x-4 overflow-auto"> <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">
<img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12"> <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="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12"> <img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="w-full rounded-2xl">
<img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12"> <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>
<div>
<!-- Main Content Section --> <!-- Main Content Section -->
<div class="max-w-4xl mx-auto px-6 py-8 space-y-6"> <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">
@@ -26,7 +50,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-4"> <div class="space-y-4">
<p class="text-lg leading-relaxed text-gray-800"> <p class="text-lg leading-relaxed text-justify">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au 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 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, écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
@@ -35,7 +59,7 @@
la créativité. la créativité.
</p> </p>
<p class="text-lg leading-relaxed text-gray-800"> <p class="text-lg leading-relaxed text-justify">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est 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 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 réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
@@ -53,14 +77,13 @@
</div> </div>
</div> </div>
<!-- Profile Section --> <div class=" py-12">
<div class="bg-white py-12">
<div class="max-w-4xl mx-auto px-6 space-y-8"> <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> <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="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<RouterLink to="/"> <RouterLink to="/@Hutopy">
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg"> <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
</RouterLink> </RouterLink>
</div> </div>
@@ -77,16 +100,21 @@
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<RouterLink to="/browse"> <RouterLink to="/browse">
<button class="px-6 py-3 bg-purple-700 text-white rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out">Découvre les autres créateurs</button> <v-btn variant="tonal" density="default" class="mb-2 w-full">
Découvre les autres créateurs
</v-btn>
</RouterLink> </RouterLink>
</div> </div>
<selected-footer></selected-footer>
</div>
</div>
</div> </div>
<selected-footer></selected-footer>
</div>
</div>
</template> </template>
@@ -106,4 +134,6 @@ body {
background-color: #F4F4F4; background-color: #F4F4F4;
} }
</style> </style>

2
src/views/main/SelectedFooter.vue
View File

@@ -1,7 +1,9 @@
<template> <template>
<router-link to="/">
<div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto"> <div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
<img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"> <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
</div> </div>
</router-link>
<div class="flex flex-row justify-center space-x-10 py-10"> <div class="flex flex-row justify-center space-x-10 py-10">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <a href="https://www.facebook.com/profile.php?id=61556819217561">