From d68cc17042a4c976d9f0f21776afa9ffdc35ceaf Mon Sep 17 00:00:00 2001
From: sucupira <sucupira@nhedkxone.net>
Date: Mon, 21 Jul 2025 02:15:01 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feature:=20Syst=C3=A8me=20solaire?=
 =?UTF-8?q?=20anim=C3=A9=20dans=20Hero=20+=20Nettoyage=20patterns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remplacement du pattern .pattern-adinkra par système solaire complet
- Système solaire positionné à gauche (10%) pour éviter conflit avec texte
- 6 orbites : 5 planètes + Sirius avec couleurs et tailles réalistes
- Animations CSS fluides : rotation orbites, pulsation soleil, scintillement Sirius
- Suppression patterns géométriques mobiles (kente, bogolan) et animations JS
- Conservation étoiles, étoiles filantes et arrière-plan cosmique
- Interface épurée focalisée sur éléments astronomiques

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Hero.svelte | 235 ++++++++++++++++++++++++++-----------
 1 file changed, 169 insertions(+), 66 deletions(-)

diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
index 0fface2..b128d3b 100644
--- a/src/components/Hero.svelte
+++ b/src/components/Hero.svelte
@@ -52,30 +52,7 @@
     }, '-=400');
     
     // Animation des patterns africains
-    anime({
-      targets: '.pattern-kente',
-      translateX: [0, 200],
-      duration: 30000,
-      easing: 'linear',
-      loop: true
-    });
-    
-    anime({
-      targets: '.pattern-adinkra',
-      rotate: 360,
-      duration: 40000,
-      easing: 'linear',
-      loop: true
-    });
-    
-    anime({
-      targets: '.pattern-bogolan',
-      scale: [1, 1.2, 1],
-      opacity: [0.05, 0.15, 0.05],
-      duration: 20000,
-      easing: 'easeInOutSine',
-      loop: true
-    });
+    // Animation du système solaire gérée par CSS
     
     // Attendre que le DOM soit prêt
     setTimeout(() => {
@@ -219,10 +196,28 @@
   <canvas bind:this={starsCanvas} class="stars-canvas"></canvas>
   
   <div class="hero-pattern">
-    <!-- Patterns africains visibles -->
-    <div class="pattern-overlay pattern-kente"></div>
-    <div class="pattern-overlay pattern-adinkra"></div>
-    <div class="pattern-overlay pattern-bogolan"></div>
+    <!-- Système solaire à gauche -->
+    <div class="solar-system">
+      <div class="sun"></div>
+      <div class="orbit orbit-1">
+        <div class="planet planet-1"></div>
+      </div>
+      <div class="orbit orbit-2">
+        <div class="planet planet-2"></div>
+      </div>
+      <div class="orbit orbit-3">
+        <div class="planet planet-3"></div>
+      </div>
+      <div class="orbit orbit-4">
+        <div class="planet planet-4"></div>
+      </div>
+      <div class="orbit orbit-5">
+        <div class="planet planet-5"></div>
+      </div>
+      <div class="orbit orbit-sirius">
+        <div class="planet sirius"></div>
+      </div>
+    </div>
   </div>
   
   <div class="hero-content">
@@ -303,46 +298,154 @@
     mix-blend-mode: overlay;
   }
   
-  .pattern-kente {
-    background-image: 
-      repeating-linear-gradient(
-        45deg,
-        var(--color-primary) 0px,
-        var(--color-primary) 10px,
-        transparent 10px,
-        transparent 20px,
-        var(--color-secondary) 20px,
-        var(--color-secondary) 30px,
-        transparent 30px,
-        transparent 40px
-      ),
-      repeating-linear-gradient(
-        -45deg,
-        var(--color-accent) 0px,
-        var(--color-accent) 10px,
-        transparent 10px,
-        transparent 20px
-      );
+  
+  .solar-system {
+    position: absolute;
+    left: 10%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 400px;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    opacity: 0.8 !important;
+    mix-blend-mode: normal !important;
+  }
+
+  .sun {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: radial-gradient(circle, #FFD700, #FFA500);
+    border-radius: 50%;
+    box-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500;
+    z-index: 10;
+    animation: pulse 4s ease-in-out infinite;
+  }
+
+  .orbit {
+    position: absolute;
+    border: 1px solid rgba(255, 215, 0, 0.1);
+    border-radius: 50%;
+    animation: rotate linear infinite;
+  }
+
+  .orbit-1 {
+    width: 80px;
+    height: 80px;
+    animation-duration: 8s;
+  }
+
+  .orbit-2 {
+    width: 120px;
+    height: 120px;
+    animation-duration: 12s;
+  }
+
+  .orbit-3 {
+    width: 160px;
+    height: 160px;
+    animation-duration: 16s;
+  }
+
+  .orbit-4 {
+    width: 200px;
+    height: 200px;
+    animation-duration: 20s;
+  }
+
+  .orbit-5 {
+    width: 240px;
+    height: 240px;
+    animation-duration: 24s;
+  }
+
+  .orbit-sirius {
+    width: 300px;
+    height: 300px;
+    animation-duration: 30s;
+    border-color: rgba(135, 206, 250, 0.3);
+  }
+
+  .planet {
+    position: absolute;
+    border-radius: 50%;
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .planet-1 {
+    width: 4px;
+    height: 4px;
+    background: #8C7853;
+  }
+
+  .planet-2 {
+    width: 6px;
+    height: 6px;
+    background: #FFC649;
+  }
+
+  .planet-3 {
+    width: 6px;
+    height: 6px;
+    background: #6B93D6;
+  }
+
+  .planet-4 {
+    width: 5px;
+    height: 5px;
+    background: #C1440E;
+  }
+
+  .planet-5 {
+    width: 8px;
+    height: 8px;
+    background: #D8CA9D;
+  }
+
+  .sirius {
+    width: 8px;
+    height: 8px;
+    background: radial-gradient(circle, #87CEEB, #4169E1);
+    box-shadow: 0 0 10px #87CEEB, 0 0 20px #4169E1;
+    animation: twinkle 2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.1);
+      opacity: 0.8;
+    }
+  }
+
+  @keyframes twinkle {
+    0%, 100% {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: translateX(-50%) scale(1.2);
+    }
   }
   
-  .pattern-adinkra {
-    background-image: 
-      radial-gradient(circle at 20% 20%, var(--color-primary) 2px, transparent 2px),
-      radial-gradient(circle at 80% 80%, var(--color-secondary) 2px, transparent 2px),
-      radial-gradient(circle at 50% 50%, var(--color-accent) 3px, transparent 3px);
-    background-size: 50px 50px;
-  }
-  
-  .pattern-bogolan {
-    background-image: 
-      repeating-conic-gradient(
-        from 0deg at 50% 50%,
-        var(--color-primary) 0deg 10deg,
-        transparent 10deg 20deg
-      );
-    background-size: 100px 100px;
-    opacity: 0.05;
-  }
   
   .hero-content {
     position: relative;