feat: Initialize backend with Express and MySQL, and restructure frontend with new routing and language support.

2025-12-15 17:03:03 +01:00
parent 56897a0c2d
commit 6c11cf5213
54 changed files with 2000 additions and 174 deletions
--- a/frontend/src/styles/components/_hero.scss
+++ b/frontend/src/styles/components/_hero.scss
@@ -0,0 +1,209 @@
+// ========================
+// HERO SECTION SCSS
+// ========================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: var(--section-padding);
+  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+  overflow: hidden;
+
+  &-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+    max-width: map-get($breakpoints, xl);
+    margin: 0 auto;
+    padding: var(--container-padding);
+
+    @include respond-to(md) {
+      grid-template-columns: 1fr;
+      text-align: center;
+      gap: 40px;
+    }
+  }
+
+  &-text {
+    z-index: 2;
+  }
+
+  &-title {
+    font-size: map-get($font-sizes, 4xl);
+    font-weight: 800;
+    margin: 20px;
+    @include gradient-text();
+
+    @include respond-to(sm) {
+      font-size: map-get($font-sizes, 3xl);
+    }
+  }
+
+  &-subtitle {
+    font-size: map-get($font-sizes, xl);
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 24px;
+
+    @include respond-to(sm) {
+      font-size: map-get($font-sizes, lg);
+    }
+  }
+
+  &-description {
+    font-size: map-get($font-sizes, lg);
+    color: var(--text-secondary);
+    margin-bottom: 40px;
+    line-height: 1.7;
+  }
+
+  &-buttons {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 40px;
+
+    @include respond-to(md) {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @include respond-to(sm) {
+      gap: 12px;
+    }
+
+    .btn {
+      @include button-base();
+
+      @include respond-to(sm) {
+        padding: 12px 20px;
+        font-size: 0.9rem;
+      }
+
+      &-primary {
+        @include button-primary();
+      }
+
+      &-secondary {
+        @include button-secondary();
+      }
+    }
+  }
+
+  &-social {
+    display: flex;
+    gap: 16px;
+
+    @include respond-to(md) {
+      justify-content: center;
+    }
+
+    .social-link {
+      @include flex-center();
+      width: 48px;
+      height: 48px;
+      background: var(--bg-secondary);
+      color: var(--text-secondary);
+      border-radius: 50%;
+      @include box-shadow(light);
+      @include transition();
+
+      &:hover {
+        color: $primary-color;
+        background: white;
+        transform: translateY(-2px);
+        @include box-shadow(medium);
+      }
+    }
+  }
+
+  &-image {
+    @include flex-center();
+  }
+
+  &-avatar {
+    position: relative;
+
+    &:hover {
+      transform: scale(1.05) rotate(5deg);
+      @include transition(transform, 0.5s, spring);
+    }
+  }
+
+  .avatar-image {
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center;
+    @include box-shadow(large);
+    border: 4px solid white;
+    
+    // Ajouter un effet de dégradé subtil en overlay
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      background: linear-gradient(135deg, 
+        rgba($primary-color, 0.1) 0%, 
+        rgba($accent-color, 0.1) 100%);
+      pointer-events: none;
+    }
+
+    @include respond-to(md) {
+      width: 250px;
+      height: 250px;
+      border-width: 3px;
+    }
+
+    @include respond-to(sm) {
+      width: 200px;
+      height: 200px;
+      border-width: 2px;
+    }
+    
+    // Effet de survol amélioré pour les images
+    @media (hover: hover) {
+      &:hover {
+        transform: scale(1.02);
+        @include box-shadow(large);
+        
+        &::after {
+          background: linear-gradient(135deg, 
+            rgba($primary-color, 0.2) 0%, 
+            rgba($accent-color, 0.2) 100%);
+        }
+      }
+    }
+  }
+
+  &-particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+
+    .particle {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: $primary-color;
+      border-radius: 50%;
+      opacity: 0.3;
+    }
+  }
+}