From f90f2bafa495dfbe2ba999d04b3f2c0128bdb9d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mr=C2=A4KayJayDee?= <minitouchilink@gmail.com>
Date: Sun, 22 Jun 2025 19:24:33 +0200
Subject: [PATCH] =?UTF-8?q?feat(nav):=20ajout=20du=20lien=20Fiverr=20et=20?=
 =?UTF-8?q?am=C3=A9lioration=20du=20style=20de=20l'en-t=C3=AAte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout d'un lien vers la page Fiverr dans le composant HomePage
- Mise à jour du composant AppFooter pour inclure le lien Fiverr dans les liens rapides
- Réorganisation et amélioration des styles CSS pour le composant AppHeader
- Ajout de styles pour le menu mobile et les éléments de navigation
---
 src/components/layout/AppFooter.vue |   3 +-
 src/components/styles/AppHeader.css | 126 ++++++++++++++++++++++++----
 src/views/HomePage.vue              |   8 ++
 3 files changed, 121 insertions(+), 16 deletions(-)

diff --git a/src/components/layout/AppFooter.vue b/src/components/layout/AppFooter.vue
index da8acb9..babd4f7 100644
--- a/src/components/layout/AppFooter.vue
+++ b/src/components/layout/AppFooter.vue
@@ -12,7 +12,8 @@ const quickLinks = computed(() => [
   { name: t('nav.home'), path: '/' },
   { name: t('nav.projects'), path: '/projects' },
   { name: t('nav.about'), path: '/about' },
-  { name: t('nav.contact'), path: '/contact' }
+  { name: t('nav.contact'), path: '/contact' },
+  { name: t('nav.fiverr'), path: '/fiverr' }
 ])
 
 const services = computed(() => [
diff --git a/src/components/styles/AppHeader.css b/src/components/styles/AppHeader.css
index ca16d8b..2f1a5d6 100644
--- a/src/components/styles/AppHeader.css
+++ b/src/components/styles/AppHeader.css
@@ -1,10 +1,36 @@
 /* AppHeader Styles */
 
-/* Header actions */
-.header-actions {
+/* Header container */
+.header {
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  backdrop-filter: blur(10px);
+  background: rgba(var(--bg-primary-rgb), 0.95);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) 0;
+}
+
+/* Logo */
+.logo {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  text-decoration: none;
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.logo:hover {
+  color: var(--color-primary);
 }
 
 /* Logo styling */
@@ -15,26 +41,96 @@
   border-radius: var(--border-radius-md);
 }
 
-/* Mobile responsive utilities */
-@media (min-width: 768px) {
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
+/* Navigation */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
 }
 
-.hidden {
-  display: none;
+.nav-link {
+  position: relative;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  padding: var(--space-sm) 0;
+  transition: color var(--transition-fast);
 }
 
-/* Navigation active state */
+.nav-link:hover {
+  color: var(--text-primary);
+}
+
+.nav-link.active,
 .nav-link.router-link-active {
   color: var(--color-primary);
 }
 
+.nav-link.active::after,
 .nav-link.router-link-active::after {
-  width: 100%;
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 2px;
+  background: var(--color-primary);
+  border-radius: 1px;
+}
+
+/* Header actions */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* Mobile menu */
+.mobile-menu {
+  display: none;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-color);
+  padding: var(--space-md) 0;
+}
+
+.mobile-menu.open {
+  display: block;
+}
+
+.mobile-menu-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.mobile-menu .nav-link {
+  padding: var(--space-md);
+  border-radius: var(--border-radius-md);
+  display: block;
+}
+
+.mobile-menu .nav-link:hover {
+  background: var(--bg-secondary);
+}
+
+/* Mobile responsive utilities */
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex !important;
+  }
+
+  .md\:hidden {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .hidden {
+    display: none;
+  }
+
+  .nav {
+    display: none;
+  }
 }
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 9ac60d2..f861b1a 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -67,6 +67,14 @@ const services = computed(() => [
                 </path>
               </svg>
             </RouterLink>
+            <RouterLink to="/fiverr" class="btn btn-secondary btn-lg">
+              {{ t('nav.fiverr') }}
+              <svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
+                </path>
+              </svg>
+            </RouterLink>
             <RouterLink to="/contact" class="btn btn-secondary btn-lg">
               {{ t('home.cta.contactMe') }}
               <svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">