110 lines
4.8 KiB
Vue
110 lines
4.8 KiB
Vue
<template>
|
||
<div class="bg-gray-100 min-h-screen">
|
||
|
||
<!-- Header Section -->
|
||
<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">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Banner Section -->
|
||
<div class="relative">
|
||
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Hutopy Banner" class="w-full rounded-xl shadow-lg">
|
||
</div>
|
||
|
||
<!-- Call-to-Action Section -->
|
||
<div class="flex justify-center py-8 space-x-4 overflow-auto">
|
||
<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">
|
||
<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/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>
|
||
|
||
<!-- 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-gray-800">
|
||
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-gray-800">
|
||
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>
|
||
|
||
<!-- Profile Section -->
|
||
<div class="bg-white 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="/">
|
||
<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="/@guillaumeaime">
|
||
<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">
|
||
<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>
|
||
</RouterLink>
|
||
|
||
</div>
|
||
<selected-footer></selected-footer>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
||
</script>
|
||
|
||
<style scoped>
|
||
.overlay p {
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
body {
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
</style>
|