Some changes

src/views/main/Home.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="px-40 flex flex-column items-center border-4 border-amber-700 ">
+
+    <div class="py-20 w-1/2">
+      <img src="/images/hutopymedia/banners/hutopy.png"
+           alt="Hutopy Logo">
+    </div>
+
+    <div class="py-2 w-full ">
+      <img src="/images/hutopymedia/homepage/bannierehomepage.png"
+           alt="Hutopy Banner"
+           class="rounded-xl">
+    </div>
+
+    <div class="flex flex-row justify-center h-40 w-full bg-red overflow-auto ">
+      
+      <img src="/images/hutopymedia/homepage/creer.png"
+           alt="Create CallToAction"
+           class="rounded-xl">
+
+      <img src="/images/hutopymedia/homepage/partager.png"
+           alt="Share CallToAction"
+           class="rounded-xl">
+
+      <img src="/images/hutopymedia/homepage/inspirer.png"
+           alt="Inspire CallToAction"
+           class="rounded-xl">
+
+    </div>
+
+    <div class="flex flex-column">
+
+      <img src="/images/hutopymedia/homepage/votrehutopy.png"
+           alt="YourHutopy">
+
+      <div class="grid grid-cols-2">
+
+        <div>
+          <p>
+            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>
+            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 space-x-2 space-y-2">
+
+          <v-img src="/images/hutopymedia/homepage/grinding.png"
+                 class="rounded-lg">
+          </v-img>  
+
+          <v-img src="/images/hutopymedia/homepage/microphone.png"
+                 class="rounded-lg">
+          </v-img>
+
+          <v-img src="/images/hutopymedia/homepage/girlarmy.png"
+                 class="rounded-lg">
+          </v-img>
+
+          <v-img src="/images/hutopymedia/homepage/girlvr.png"
+                 class="rounded-lg skew-x-12">
+          </v-img>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+
+  <!-- They are on the Hutopy section -->
+  <v-row style="margin-top: 20px; margin-bottom: 10px;">
+    <v-spacer></v-spacer>
+
+    <!-- Subtitle :Ils sont sur Hutopy -->
+    <v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
+      <h1 style=" margin-bottom: 20px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
+        Ils sont sur Hutopy.</h1>
+      <v-spacer></v-spacer>
+      <v-col>
+
+        <!-- Account links  -->
+        <v-row justify="center" class="profile-images">
+          <v-col>
+            <RouterLink to="/">
+              <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
+                   alt="Profile Image" class="profile-image  ">
+            </RouterLink>
+          </v-col>
+          <v-col>
+            <RouterLink to="/@guillaumeaime">
+              <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
+                   alt="Profile Image" class="profile-image">
+            </RouterLink>
+          </v-col>
+          <v-col>
+            <RouterLink to="@chloebeaugrand">
+              <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                   alt="Profile Image" class="profile-image">
+            </RouterLink>
+          </v-col>
+        </v-row>
+      </v-col>
+      <v-row justify='center'>
+        <RouterLink to="/browse">
+          <v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
+          </v-btn>
+        </RouterLink>
+      </v-row>
+      <v-spacer></v-spacer>
+    </v-col>
+    <v-spacer></v-spacer>
+  </v-row>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+p {
+  @apply my-4 font-semibold font-sans
+}
+
+.container-spacer {
+  margin-bottom: 50px;
+}
+
+.profile-images {
+  gap: 15px;
+  transform: scale(.92);
+}
+
+.profile-image {
+  width: auto;
+  border-radius: 35px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.overlay p {
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+body {
+  background-color: #F4F4F4;
+}
+
+</style>