First Commit

2024-02-25 21:57:15 -05:00
parent 75a02235f6
commit 8266833a5f
36 changed files with 3377 additions and 20 deletions
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -0,0 +1,100 @@
+<template>
+    <nav class="py-4 px-8 border-b border-gray-200 bg-custom">
+      <div class="max-w-7xl mx-auto">
+        <div class="flex items-center justify-between">
+          <div class="menu-left flex items-center">
+            <router-link :to="{ name: 'home' }">
+              <img src="/public/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
+            </router-link>
+            <router-link :to="{ name: 'home' }">
+              <h1 class="textLogo">HUTOPIA</h1>
+             
+            </router-link>
+         
+          </div>
+          <div class="menu-center flex space-x-12">
+            <router-link :to="{ name: 'home' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+              </svg>
+            </router-link>
+            <router-link :to="{ name: 'contact' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+              </svg>
+            </router-link>
+            <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+              </svg>
+            </router-link>
+          </div>
+          <div class="menu-right"> 
+            <router-link :to="{ name: 'yourprofile' }">
+              <img src="/public/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
+            </router-link>  
+            
+          </div>
+        </div>
+      </div>
+    </nav>
+  
+    <main class="px-8 py-6 bg-gray-100">
+      <router-view />
+    </main>
+  </template>
+  
+  <script>
+  export default {
+    name: 'App',
+  };
+  </script>
+  
+  <style>
+  /* CSS pour ajuster la taille de l'image */
+  .img-small {
+    width: 70px;
+    height: 70px;
+  }
+  
+  .text-custom {
+    color: #000000; /* Couleur de texte spécifique */
+  }
+  
+  /* CSS pour le texte du menu-left */
+  .menu-left a {
+    color: #000000; /* Couleur du texte */
+    font-weight: bold; /* Gras */
+    text-decoration: none; /* Pas de soulignement */
+    font-size: 24px; /* Taille de la police en pixels */
+  }
+  
+  /* CSS pour le texte des liens du menu-center */
+  .menu-center {
+    display: flex;
+    justify-content: center; /* Centrer les éléments horizontalement */
+    align-items: center; /* Centrer les éléments verticalement */
+    flex: 1; /* Utiliser tout l'espace disponible */
+  }
+  
+  /* CSS pour le texte du menu-right */
+  .menu-right a {
+    color: #e4e4e4; /* Couleur du texte */
+  }
+  
+  .bg-custom {
+    background-color: #ffffff; /* Définissez la couleur de fond souhaitée */
+  }
+  
+  .textLogo{
+    font-size: 35px; /* Taille de la police en pixels */
+  }
+  
+  .logo {
+    margin-right: 5px; /* Réduire la marge entre le logo et le texte */
+  
+  }
+  
+  
+  </style>
+