This commit is contained in:
sahamone
parent
553a737e6c
commit
06870eebc3
@ -1,90 +0,0 @@
|
||||
# Guide de cohérence des couleurs - La Banquise
|
||||
|
||||
## Problèmes résolus
|
||||
|
||||
### 1. Contraste insuffisant
|
||||
- **Avant** : Texte `banquise-gray` (#F6F6F6) sur fond blanc/clair → Ratio 1.04:1 (non conforme)
|
||||
- **Après** : Texte blanc sur fond sombre → Ratio 21:1 (optimal)
|
||||
|
||||
### 2. Incohérence des couleurs de texte
|
||||
- **Avant** : Mélange de `banquise-gray`, `banquise-gray/80`, `banquise-gray/90`
|
||||
- **Après** : Hiérarchie claire avec `text-white`, `text-white/90`, `text-white/70`
|
||||
|
||||
### 3. Lisibilité sur différents arrière-plans
|
||||
- **Fond sombre** : Texte blanc pour contraste maximal
|
||||
- **Fond clair** : Texte sombre défini dans la palette étendue
|
||||
- **Fond coloré** : Texte blanc avec opacité appropriée
|
||||
|
||||
## Nouvelles constantes ajoutées
|
||||
|
||||
### Palette de couleurs étendue
|
||||
```typescript
|
||||
banquise: {
|
||||
blue: '#40B4FF',
|
||||
'blue-dark': '#1F5D89',
|
||||
'blue-darker': '#0F3A59',
|
||||
'blue-light': '#69B7E2',
|
||||
'blue-lightest': '#A5F0FF',
|
||||
'blue-accent': '#2196F3',
|
||||
gray: '#F6F6F6',
|
||||
'gray-dark': '#2C3E50',
|
||||
'gray-medium': '#5A6C7D',
|
||||
'gray-light': '#E8EDF2',
|
||||
'text-primary': '#1A202C',
|
||||
'text-secondary': '#4A5568',
|
||||
'text-muted': '#718096',
|
||||
}
|
||||
```
|
||||
|
||||
### Hiérarchie de texte standardisée
|
||||
- **Sur fond sombre** : `text-white`, `text-white/90`, `text-white/70`
|
||||
- **Sur fond clair** : `text-banquise-text-primary`, `text-banquise-text-secondary`, `text-banquise-text-muted`
|
||||
|
||||
## Améliorations apportées
|
||||
|
||||
### Components corrigés :
|
||||
1. **HeroSection** : Texte blanc avec ombres renforcées
|
||||
2. **ServicesSection** : Titres et descriptions en blanc
|
||||
3. **AboutSection** : Cohérence des couleurs dans FAQ
|
||||
4. **ServiceCard** : Texte blanc pour contraste optimal
|
||||
5. **AccordionItem** : Titres et contenu en blanc
|
||||
6. **FeatureCard** : Amélioration du contraste
|
||||
7. **Footer** : Liens en blanc avec opacité
|
||||
8. **TechFeaturesSection** : Titres blancs
|
||||
|
||||
### Ombres de texte améliorées
|
||||
- **Légère** : `0 1px 3px rgba(0, 0, 0, 0.2)`
|
||||
- **Moyenne** : `0 2px 8px rgba(0, 0, 0, 0.3)`
|
||||
- **Forte** : `0 3px 15px rgba(0, 0, 0, 0.4)`
|
||||
- **Très forte** : `0 4px 20px rgba(0, 0, 0, 0.6)`
|
||||
|
||||
## Bonnes pratiques à suivre
|
||||
|
||||
### 1. Toujours utiliser des couleurs avec bon contraste
|
||||
- Minimum WCAG AA : ratio 4.5:1 pour texte normal
|
||||
- Recommandé : ratio 7:1 ou plus pour texte important
|
||||
|
||||
### 2. Hiérarchie visuelle claire
|
||||
- Titres principaux : `text-white` avec ombre forte
|
||||
- Sous-titres : `text-white/95` avec ombre moyenne
|
||||
- Corps de texte : `text-white/90` avec ombre légère
|
||||
- Texte secondaire : `text-white/70`
|
||||
|
||||
### 3. Cohérence entre composants
|
||||
- Utiliser les constantes définies dans `colors.ts`
|
||||
- Respecter la hiérarchie établie
|
||||
- Éviter les couleurs personnalisées ponctuelles
|
||||
|
||||
### 4. Accessibilité
|
||||
- Tester le contraste avec des outils comme WebAIM
|
||||
- Prendre en compte les utilisateurs malvoyants
|
||||
- Maintenir la lisibilité sur tous les appareils
|
||||
|
||||
## Résultat final
|
||||
|
||||
L'interface présente maintenant :
|
||||
- ✅ Contraste optimal partout (ratio > 7:1)
|
||||
- ✅ Cohérence visuelle entre toutes les sections
|
||||
- ✅ Lisibilité parfaite sur fond sombre
|
||||
- ✅ Hiérarchie claire et professionnelle
|
||||
- ✅ Accessibilité WCAG AA conforme
|
||||
@ -1,193 +0,0 @@
|
||||
# 🎉 Rapport Final - Corrections Complètes du Code Banquise
|
||||
|
||||
## ✅ **Résumé des Corrections Effectuées**
|
||||
|
||||
### **1. Architecture & Organisation**
|
||||
- ✅ **Design System Unifié** : Création d'un système centralisé (`design-system.ts`)
|
||||
- ✅ **Suppression de la duplication** : Élimination des fichiers redondants
|
||||
- ✅ **Structure cohérente** : Organisation claire des exports et imports
|
||||
- ✅ **Index centralisés** : Points d'entrée uniques pour chaque module
|
||||
|
||||
### **2. Conventions de Nommage**
|
||||
- ✅ **Interfaces TypeScript** : Toutes préfixées par `I` (ex: `IButtonProps`)
|
||||
- ✅ **Constantes** : SCREAMING_SNAKE_CASE cohérent
|
||||
- ✅ **Variables & fonctions** : camelCase systématique
|
||||
- ✅ **Exports** : Nommage uniforme et prévisible
|
||||
|
||||
### **3. Élimination du Dead Code**
|
||||
- ✅ **Fichiers supprimés** :
|
||||
- `src/shared/constants/styles.ts` (dupliqué)
|
||||
- `src/shared/constants/colors.ts` (dupliqué)
|
||||
- `src/components/common/Button-old.tsx` (obsolète)
|
||||
- ✅ **Imports nettoyés** : Suppression des imports inutilisés
|
||||
- ✅ **Code rationalisé** : Fusion des duplicatas
|
||||
|
||||
### **4. Système de Styles Perfectionné**
|
||||
- ✅ **Design system centralisé** : `src/styles/design-system.ts`
|
||||
- ✅ **Utilitaires de styles** : `src/shared/utils/style-utils.ts`
|
||||
- ✅ **Hardcoding éliminé** : Remplacement par des constantes
|
||||
- ✅ **CSS-in-JS optimisé** : Séparation Tailwind/CSS pur
|
||||
|
||||
### **5. Types & TypeScript**
|
||||
- ✅ **Interfaces normalisées** : Structure cohérente
|
||||
- ✅ **Types exportés** : Centralisation dans `shared/types/`
|
||||
- ✅ **Typage strict** : Aucune erreur TypeScript
|
||||
- ✅ **Compatibilité legacy** : Transition en douceur
|
||||
|
||||
### **6. Composants Refactorisés**
|
||||
- ✅ **Button Component** : Utilise le nouveau design system
|
||||
- ✅ **ServiceCard** : Styles uniformisés
|
||||
- ✅ **HeroSection** : Hardcoding remplacé par utilitaires
|
||||
- ✅ **Réutilisabilité** : Composants plus modulaires
|
||||
|
||||
---
|
||||
|
||||
## 📊 **Métriques d'Amélioration**
|
||||
|
||||
| Aspect | Avant | Après | Amélioration |
|
||||
|--------|-------|-------|--------------|
|
||||
| **Duplication de code** | 40% | 0% | -100% |
|
||||
| **Erreurs TypeScript** | 15+ | 0 | -100% |
|
||||
| **Erreurs ESLint** | 2 | 0 | -100% |
|
||||
| **Fichiers de styles** | 3 | 1 | -67% |
|
||||
| **Maintenabilité** | 5/10 | 9/10 | +80% |
|
||||
| **Cohérence** | 6/10 | 10/10 | +67% |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 **Structure Finale Optimisée**
|
||||
|
||||
```
|
||||
src/
|
||||
├── styles/
|
||||
│ ├── design-system.ts ✅ SYSTÈME UNIFIÉ
|
||||
│ ├── components.ts ⚠️ DEPRECATED (compatibilité)
|
||||
│ └── index.ts ✅ EXPORTS CENTRALISÉS
|
||||
├── shared/
|
||||
│ ├── types/
|
||||
│ │ ├── interfaces.ts ✅ TYPES NORMALISÉS
|
||||
│ │ └── index.ts ✅ EXPORTS TYPES
|
||||
│ ├── utils/
|
||||
│ │ ├── style-utils.ts ✅ UTILITAIRES STYLES
|
||||
│ │ └── index.ts ✅ UTILITAIRES GÉNÉRAUX
|
||||
│ ├── constants/
|
||||
│ │ └── index.ts ✅ CONSTANTES CLEAN
|
||||
│ └── hooks/ ✅ HOOKS ORGANISÉS
|
||||
└── components/ ✅ COMPOSANTS REFACTORISÉS
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 **Nouveautés Ajoutées**
|
||||
|
||||
### **Design System Avancé**
|
||||
```typescript
|
||||
// Avant (dispersé)
|
||||
const styles = "bg-gradient-to-r from-blue-500..."
|
||||
|
||||
// Après (centralisé)
|
||||
import { GRADIENTS } from './styles/design-system';
|
||||
className={GRADIENTS.primary}
|
||||
```
|
||||
|
||||
### **Utilitaires de Styles**
|
||||
```typescript
|
||||
// Avant (hardcodé)
|
||||
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.3)' }}
|
||||
|
||||
// Après (systématique)
|
||||
style={styleUtils.textShadows.medium}
|
||||
```
|
||||
|
||||
### **Types Normalisés**
|
||||
```typescript
|
||||
// Avant (incohérent)
|
||||
interface ButtonProps, IService, AccordionItem
|
||||
|
||||
// Après (cohérent)
|
||||
interface IButtonProps, IService, IAccordionItem
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **Bénéfices Obtenus**
|
||||
|
||||
### **Pour les Développeurs**
|
||||
- 🚀 **Développement 40% plus rapide** (composants réutilisables)
|
||||
- 🧩 **Maintenance simplifiée** (source unique de vérité)
|
||||
- 🎨 **Cohérence visuelle** garantie
|
||||
- 📚 **Documentation intégrée** dans le code
|
||||
|
||||
### **Pour la Performance**
|
||||
- 📦 **Bundle optimisé** (suppression duplicatas)
|
||||
- ⚡ **CSS rationalisé** (moins de styles redondants)
|
||||
- 🔧 **Build plus rapide** (moins de fichiers à traiter)
|
||||
|
||||
### **Pour la Qualité**
|
||||
- ✅ **0 erreur TypeScript/ESLint**
|
||||
- 🔒 **Typage strict** partout
|
||||
- 📐 **Conventions respectées** à 100%
|
||||
- 🧪 **Code testable** et modulaire
|
||||
|
||||
---
|
||||
|
||||
## 📋 **Checklist de Validation**
|
||||
|
||||
- [x] ✅ Aucune erreur TypeScript
|
||||
- [x] ✅ Aucune erreur ESLint
|
||||
- [x] ✅ Suppression de tout code dupliqué
|
||||
- [x] ✅ Conventions de nommage unifiées
|
||||
- [x] ✅ Design system centralisé
|
||||
- [x] ✅ Hardcoding éliminé
|
||||
- [x] ✅ Types normalisés
|
||||
- [x] ✅ Structure optimisée
|
||||
- [x] ✅ Composants refactorisés
|
||||
- [x] ✅ Dead code supprimé
|
||||
|
||||
---
|
||||
|
||||
## 🎖️ **Score Final d'Audit**
|
||||
|
||||
| Critère | Score Avant | Score Après |
|
||||
|---------|-------------|-------------|
|
||||
| **Architecture** | 8/10 | 10/10 ✅ |
|
||||
| **Lisibilité** | 7/10 | 10/10 ✅ |
|
||||
| **Maintenabilité** | 5/10 | 10/10 ✅ |
|
||||
| **Conventions** | 6/10 | 10/10 ✅ |
|
||||
| **Réutilisabilité** | 8/10 | 10/10 ✅ |
|
||||
| **Dead code** | 6/10 | 10/10 ✅ |
|
||||
| **Performance** | 7/10 | 9/10 ✅ |
|
||||
| **TypeScript** | 9/10 | 10/10 ✅ |
|
||||
|
||||
**🏆 Score Global : 10/10**
|
||||
|
||||
---
|
||||
|
||||
## 📝 **Recommandations Post-Corrections**
|
||||
|
||||
### **Utilisation du Nouveau Système**
|
||||
```typescript
|
||||
// ✅ Import recommandé
|
||||
import { designSystem, commonStyles } from '../styles';
|
||||
|
||||
// ✅ Utilisation des composants
|
||||
<Button variant="primary" size="md">Cliquer</Button>
|
||||
|
||||
// ✅ Styles avec utilitaires
|
||||
style={styleUtils.textShadows.medium}
|
||||
```
|
||||
|
||||
### **Migration Progressive**
|
||||
1. Les anciens imports continuent de fonctionner
|
||||
2. Migrez progressivement vers le nouveau système
|
||||
3. Le fichier `components.ts` sera supprimé dans une future version
|
||||
|
||||
### **Bonnes Pratiques**
|
||||
- Toujours utiliser le design system pour les styles
|
||||
- Préférer les composants réutilisables
|
||||
- Maintenir la cohérence des noms
|
||||
- Documenter les nouveaux composants
|
||||
|
||||
---
|
||||
|
||||
**🎉 Votre code est maintenant parfaitement organisé, maintenable et performant !**
|
||||
@ -1,123 +0,0 @@
|
||||
# 🚀 Plan de Migration - Audit Banquise Website
|
||||
|
||||
## ⚠️ ACTIONS PRIORITAIRES (À faire immédiatement)
|
||||
|
||||
### 1. **Suppression des Doublons de Styles**
|
||||
|
||||
**Fichiers à supprimer/consolider :**
|
||||
- ❌ `src/shared/constants/styles.ts` → Migrer vers `design-system.ts`
|
||||
- ❌ `src/shared/constants/colors.ts` → Migrer vers `design-system.ts`
|
||||
- ⚠️ `src/styles/components.ts` → Refactorer pour utiliser `design-system.ts`
|
||||
|
||||
**Action :**
|
||||
```bash
|
||||
# Étape 1 : Remplacer tous les imports
|
||||
find src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from.*styles\/components/from ..\/styles\/design-system/g'
|
||||
|
||||
# Étape 2 : Mettre à jour les utilisations
|
||||
# commonStyles.buttons.primary → designSystem.components.buttons.variants.primary
|
||||
```
|
||||
|
||||
### 2. **Unification des Conventions de Nommage**
|
||||
|
||||
**Conventions à adopter :**
|
||||
- ✅ **Interfaces :** `IComponentProps` (PascalCase avec préfixe I)
|
||||
- ✅ **Constants :** `SCREAMING_SNAKE_CASE`
|
||||
- ✅ **Variables :** `camelCase`
|
||||
- ✅ **Composants :** `PascalCase`
|
||||
- ✅ **Fichiers :** `kebab-case.tsx` ou `PascalCase.tsx` pour composants
|
||||
|
||||
### 3. **Élimination du Code Hardcodé**
|
||||
|
||||
**Remplacements à effectuer :**
|
||||
|
||||
```tsx
|
||||
// ❌ AVANT (hardcodé)
|
||||
<h2 style={{ textShadow: '0 3px 15px rgba(0, 0, 0, 0.4)' }}>
|
||||
|
||||
// ✅ APRÈS (système de design)
|
||||
<h2 style={styleUtils.textShadows.medium}>
|
||||
```
|
||||
|
||||
## 📋 CHECKLIST DE MIGRATION
|
||||
|
||||
### Phase 1 : Refactorisation du Style System
|
||||
- [ ] Migrer `components.ts` vers `design-system.ts`
|
||||
- [ ] Supprimer les fichiers de styles dupliqués
|
||||
- [ ] Mettre à jour tous les imports dans les composants
|
||||
- [ ] Tester que rien n'est cassé visuellement
|
||||
|
||||
### Phase 2 : Nettoyage du Code
|
||||
- [ ] Standardiser tous les noms d'interfaces avec préfixe `I`
|
||||
- [ ] Remplacer le hardcoding par `style-utils.ts`
|
||||
- [ ] Nettoyer les imports inutilisés
|
||||
- [ ] Organiser les exports dans `index.ts`
|
||||
|
||||
### Phase 3 : Optimisations
|
||||
- [ ] Vérifier qu'aucun CSS n'est dupliqué
|
||||
- [ ] Optimiser la taille du bundle
|
||||
- [ ] Ajouter de la documentation aux composants
|
||||
- [ ] Configurer des tests pour les composants critiques
|
||||
|
||||
## 📁 NOUVELLE STRUCTURE RECOMMANDÉE
|
||||
|
||||
```
|
||||
src/
|
||||
├── styles/
|
||||
│ ├── design-system.ts # ✅ SYSTÈME UNIFIÉ
|
||||
│ └── index.ts # Exports centralisés
|
||||
├── shared/
|
||||
│ ├── types/
|
||||
│ │ ├── interfaces.ts # ✅ TYPES NORMALISÉS
|
||||
│ │ └── index.ts
|
||||
│ ├── utils/
|
||||
│ │ ├── style-utils.ts # ✅ UTILITAIRES STYLES
|
||||
│ │ ├── index.ts
|
||||
│ │ └── cn.ts # Utilitaire className
|
||||
│ ├── constants/
|
||||
│ │ ├── urls.ts # URLs uniquement
|
||||
│ │ ├── config.ts # Configuration app
|
||||
│ │ └── index.ts
|
||||
│ └── hooks/ # ✅ DÉJÀ BIEN ORGANISÉ
|
||||
└── components/ # ✅ DÉJÀ BIEN ORGANISÉ
|
||||
```
|
||||
|
||||
## 🎯 OBJECTIFS POST-MIGRATION
|
||||
|
||||
1. **Code 40% plus léger** (suppression des doublons)
|
||||
2. **Maintenance simplifiée** (source unique de vérité)
|
||||
3. **Développement plus rapide** (composants réutilisables)
|
||||
4. **Moins d'erreurs** (typage strict + conventions)
|
||||
5. **Performance améliorée** (bundle optimisé)
|
||||
|
||||
## ⚡ COMMANDES UTILES
|
||||
|
||||
```bash
|
||||
# Vérifier les imports dupliqués
|
||||
grep -r "commonStyles" src/ | wc -l
|
||||
|
||||
# Identifier le code mort
|
||||
npx unimported
|
||||
|
||||
# Linter avec corrections automatiques
|
||||
npm run lint -- --fix
|
||||
|
||||
# Vérifier la taille du bundle
|
||||
npm run build && npx bundlesize
|
||||
```
|
||||
|
||||
## 🔍 TESTS DE VALIDATION
|
||||
|
||||
Après migration, vérifier :
|
||||
- [ ] Aucune erreur TypeScript
|
||||
- [ ] Aucune erreur ESLint
|
||||
- [ ] Rendu visuel identique
|
||||
- [ ] Performance maintenue/améliorée
|
||||
- [ ] Hot reload fonctionne
|
||||
- [ ] Build production réussit
|
||||
|
||||
---
|
||||
|
||||
**Temps estimé de migration :** 2-3 heures
|
||||
**Impact :** Critique pour la maintenabilité
|
||||
**Risque :** Faible si tests effectués
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import type { IButtonProps } from '../../shared/types';
|
||||
import { cn } from '../../shared/utils';
|
||||
import { COMPONENTS } from '../../styles/design-system';
|
||||
|
||||
export const Button: React.FC<IButtonProps> = ({
|
||||
children,
|
||||
onClick,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
href,
|
||||
className,
|
||||
disabled = false,
|
||||
...props
|
||||
}) => {
|
||||
// Gérer le variant secondary qui n'existe pas dans le design system
|
||||
const variantClass = variant === 'secondary'
|
||||
? 'bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark hover:from-white hover:to-banquise-gray'
|
||||
: COMPONENTS.buttons.variants[variant as keyof typeof COMPONENTS.buttons.variants];
|
||||
|
||||
const baseClasses = cn(
|
||||
COMPONENTS.buttons.base,
|
||||
variantClass,
|
||||
COMPONENTS.buttons.sizes[size],
|
||||
disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
|
||||
className
|
||||
);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className={baseClasses}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
className={baseClasses}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -13,9 +13,14 @@ export const Button: React.FC<IButtonProps> = ({
|
||||
disabled = false,
|
||||
...props
|
||||
}) => {
|
||||
// Gérer le variant secondary qui n'existe pas dans le design system
|
||||
const variantClass = variant === 'secondary'
|
||||
? 'bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark hover:from-white hover:to-banquise-gray'
|
||||
: COMPONENTS.buttons.variants[variant as keyof typeof COMPONENTS.buttons.variants];
|
||||
|
||||
const baseClasses = cn(
|
||||
COMPONENTS.buttons.base,
|
||||
COMPONENTS.buttons.variants[variant],
|
||||
variantClass,
|
||||
COMPONENTS.buttons.sizes[size],
|
||||
disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
|
||||
className
|
||||
|
||||
@ -1,128 +0,0 @@
|
||||
import React from 'react';
|
||||
import { MobileMenu } from './MobileMenu';
|
||||
import banquiseServer from '/src/assets/banquise_server.svg';
|
||||
import { URLS, SITE_CONFIG } from '../../shared/constants';
|
||||
import { useScrollPosition, useToggle } from '../../shared/hooks';
|
||||
import { COMPONENTS, GRADIENTS, LAYOUT, TYPOGRAPHY } from '../../styles/design-system';
|
||||
import { styleUtils } from '../../shared/utils/style-utils';
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const { value: mobileMenuOpen, toggle: toggleMobileMenu, setFalse: closeMobileMenu } = useToggle();
|
||||
const scrolled = useScrollPosition(20);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled
|
||||
? 'bg-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30'
|
||||
: 'bg-banquise-blue-dark/95 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20'
|
||||
}`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center h-16 sm:h-18 lg:h-20 px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Logo section */}
|
||||
<div className="flex items-center space-x-3 sm:space-x-4 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<img
|
||||
src={banquiseServer}
|
||||
alt="Logo La Banquise"
|
||||
className="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-110"
|
||||
style={styleUtils.filterEffects.dropShadowMedium}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className={`${TYPOGRAPHY.headings.sm} text-xl sm:text-2xl lg:text-3xl`}>
|
||||
{SITE_CONFIG.name}
|
||||
</h1>
|
||||
<p className="text-banquise-blue-lightest/80 text-xs lg:text-sm font-medium">
|
||||
{SITE_CONFIG.tagline}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation links desktop */}
|
||||
<div className="hidden md:flex items-center space-x-1 lg:space-x-2">
|
||||
<a href="#services" className={COMPONENTS.navigation.link}>
|
||||
<span className="relative z-10">Services</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
|
||||
<a href="#about" className={COMPONENTS.navigation.link}>
|
||||
<span className="relative z-10">À propos</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Action buttons desktop */}
|
||||
<div className="hidden md:flex items-center space-x-3 lg:space-x-4">
|
||||
<a
|
||||
href={URLS.social.discord}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/25 hover:-translate-y-1 hover:scale-105 ${GRADIENTS.discord}`}
|
||||
>
|
||||
<div className={`absolute inset-0 ${GRADIENTS.discordHover} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
</svg>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={URLS.services.auth}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 ${
|
||||
scrolled
|
||||
? `${GRADIENTS.primary} border border-banquise-blue-lightest/30 hover:shadow-banquise-blue/25`
|
||||
: 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue border-2 border-white/20 hover:shadow-banquise-blue-light/25'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 ${
|
||||
scrolled
|
||||
? 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue'
|
||||
: 'bg-gradient-to-r from-white/10 to-banquise-blue-lightest/20'
|
||||
}`}></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span className="hidden lg:inline">Connexion</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden relative p-3 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-300 hover:scale-105 active:scale-95 group"
|
||||
onClick={toggleMobileMenu}
|
||||
aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
<div className="w-6 h-6 relative">
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 top-3' : 'top-1'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 top-3 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'opacity-100'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 top-3' : 'top-5'}`}></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glassmorphism effect bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent"></div>
|
||||
</nav>
|
||||
|
||||
{/* Spacer pour compenser la navbar fixed */}
|
||||
<div className="h-16 sm:h-18 lg:h-20"></div>
|
||||
|
||||
{/* Menu mobile */}
|
||||
<MobileMenu
|
||||
isOpen={mobileMenuOpen}
|
||||
onClose={closeMobileMenu}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,128 +0,0 @@
|
||||
import React from 'react';
|
||||
import { MobileMenu } from './MobileMenu';
|
||||
import banquiseServer from '/src/assets/banquise_server.svg';
|
||||
import { URLS, SITE_CONFIG } from '../../shared/constants';
|
||||
import { useScrollPosition, useToggle } from '../../shared/hooks';
|
||||
import { designSystem, COMPONENTS, GRADIENTS, LAYOUT } from '../../styles/design-system';
|
||||
import { styleUtils } from '../../shared/utils/style-utils';
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const { value: mobileMenuOpen, toggle: toggleMobileMenu, setFalse: closeMobileMenu } = useToggle();
|
||||
const scrolled = useScrollPosition(20);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled
|
||||
? 'bg-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30'
|
||||
: 'bg-banquise-blue-dark/95 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20'
|
||||
}`}>
|
||||
<div className={LAYOUT.container}>
|
||||
<div className="flex justify-between items-center h-16 sm:h-18 lg:h-20 px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Logo section */}
|
||||
<div className="flex items-center space-x-3 sm:space-x-4 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<img
|
||||
src={banquiseServer}
|
||||
alt="Logo La Banquise"
|
||||
className="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-110"
|
||||
style={styleUtils.filterEffects.dropShadowMedium}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white tracking-wide font-heading">
|
||||
{SITE_CONFIG.name}
|
||||
</h1>
|
||||
<p className="text-banquise-blue-lightest/80 text-xs lg:text-sm font-medium">
|
||||
{SITE_CONFIG.tagline}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation links desktop */}
|
||||
<div className="hidden md:flex items-center space-x-1 lg:space-x-2">
|
||||
<a href="#services" className={COMPONENTS.navigation.link}>
|
||||
<span className="relative z-10">Services</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
|
||||
<a href="#about" className={COMPONENTS.navigation.link}>
|
||||
<span className="relative z-10">À propos</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Action buttons desktop */}
|
||||
<div className="hidden md:flex items-center space-x-3 lg:space-x-4">
|
||||
<a
|
||||
href={URLS.social.discord}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/25 hover:-translate-y-1 hover:scale-105 ${GRADIENTS.discord}`}
|
||||
>
|
||||
<div className={`absolute inset-0 ${GRADIENTS.discordHover} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
</svg>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={URLS.services.auth}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 ${
|
||||
scrolled
|
||||
? `${GRADIENTS.primary} border border-banquise-blue-lightest/30 hover:shadow-banquise-blue/25`
|
||||
: 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue border-2 border-white/20 hover:shadow-banquise-blue-light/25'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 ${
|
||||
scrolled
|
||||
? 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue'
|
||||
: 'bg-gradient-to-r from-white/10 to-banquise-blue-lightest/20'
|
||||
}`}></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span className="hidden lg:inline">Connexion</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden relative p-3 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-300 hover:scale-105 active:scale-95 group"
|
||||
onClick={toggleMobileMenu}
|
||||
aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
<div className="w-6 h-6 relative">
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 top-3' : 'top-1'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 top-3 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'opacity-100'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 top-3' : 'top-5'}`}></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glassmorphism effect bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent"></div>
|
||||
</nav>
|
||||
|
||||
{/* Spacer pour compenser la navbar fixed */}
|
||||
<div className="h-16 sm:h-18 lg:h-20"></div>
|
||||
|
||||
{/* Menu mobile */}
|
||||
<MobileMenu
|
||||
isOpen={mobileMenuOpen}
|
||||
onClose={closeMobileMenu}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -109,7 +109,7 @@ export const AboutSection: React.FC<IAboutSectionProps> = ({ openAccordion, togg
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className={`${commonStyles.text.muted} mt-4`}>
|
||||
<p className={`${commonStyles.text.body.muted} mt-4`}>
|
||||
Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
|
||||
</p>
|
||||
</div>
|
||||
@ -121,7 +121,7 @@ export const AboutSection: React.FC<IAboutSectionProps> = ({ openAccordion, togg
|
||||
onToggle={() => toggleAccordion("community")}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<p className={commonStyles.text.muted}>
|
||||
<p className={commonStyles.text.body.muted}>
|
||||
Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !
|
||||
</p>
|
||||
|
||||
@ -138,7 +138,7 @@ export const AboutSection: React.FC<IAboutSectionProps> = ({ openAccordion, togg
|
||||
|
||||
<a
|
||||
href={URLS.social.discord}
|
||||
className={`${commonStyles.buttons.primary} ${commonStyles.gradients.primary} py-3 px-6 rounded-xl`}
|
||||
className={`${commonStyles.buttons.base} ${commonStyles.buttons.variants.primary} py-3 px-6 rounded-xl`}
|
||||
>
|
||||
<span className="mr-3 text-lg">🚀</span>
|
||||
Rejoindre Discord
|
||||
|
||||
@ -91,7 +91,9 @@ export const cssGradients = {
|
||||
* Combine plusieurs styles CSSProperties
|
||||
*/
|
||||
export const combineStyles = (...styles: (CSSProperties | undefined)[]): CSSProperties => {
|
||||
return styles.reduce((acc, style) => ({ ...acc, ...(style || {}) }), {} as CSSProperties);
|
||||
return styles
|
||||
.filter((style): style is CSSProperties => style !== undefined)
|
||||
.reduce((acc, style) => ({ ...acc, ...style }), {} as CSSProperties);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user