David/xpeditis2.0

Fork 0

David c2df25a169 fix landing page , login , register

2025-10-31 12:38:05 +01:00

6.6 KiB

Raw Blame History

Page de Connexion Xpeditis

📍 URL

/login

🎨 Design

Page de connexion moderne avec design split-screen inspiré des meilleures pratiques B2B SaaS.

Layout

Desktop (lg+):

Gauche (50%): Formulaire de connexion sur fond blanc
Droite (50%): Section branding avec features et stats sur fond navy

Mobile/Tablet (< lg):

Formulaire pleine largeur avec scroll
Section branding masquée

✨ Fonctionnalités

Formulaire Principal

- Email (required)
- Mot de passe (required)
- Case "Se souvenir de moi"
- Lien "Mot de passe oublié?"
- Bouton "Se connecter" (primaire turquoise)

Authentification Sociale

Google (icône + texte)
LinkedIn (icône + texte)

Créer un compte → /register
Mot de passe oublié → /forgot-password
Logo → / (page d'accueil)

Footer Links

Centre d'aide → /help
Contactez-nous → /contact
Confidentialité → /privacy
Conditions → /terms

🎯 Section Branding (Droite)

Titre

"Simplifiez votre fret maritime"

Description

"Accédez à des tarifs en temps réel de plus de 50 compagnies maritimes. Réservez, suivez et gérez vos expéditions LCL en quelques clics."

Features (3 cartes avec icônes)

Tarifs instantanés ⚡
- Comparez les prix de toutes les compagnies en temps réel
Réservation simplifiée ✓
- Réservez vos conteneurs en moins de 5 minutes
Suivi en temps réel 💬
- Suivez vos expéditions à chaque étape du voyage

Stats

Métrique	Valeur
Compagnies	50+
Expéditions	10k+
Satisfaction	99.5%

🎨 Couleurs Utilisées

/* Formulaire (gauche) */
Background: #FFFFFF (white)
Titres: #10183A (brand-navy)
Labels: Uppercase, neutral-600
Inputs: border neutral-300, focus accent (turquoise)
Bouton primaire: bg-brand-turquoise (#34CCCD)

/* Branding (droite) */
Background: gradient brand-navy → neutral-800
Texte: white / neutral-200 / neutral-300
Feature icons: bg-brand-turquoise
Stats: text-brand-turquoise

📱 Responsive

Breakpoints

// Mobile first
w-full          // Mobile: 100% width
lg:w-1/2        // Desktop: 50% split

// Padding
px-8            // Mobile: 2rem
sm:px-12        // Small: 3rem
lg:px-16        // Large: 4rem
xl:px-24        // XL: 6rem

// Visibility
hidden lg:block // Masqué mobile, visible desktop

🔐 Logique d'Authentification

Flow

Utilisateur remplit email + password
Click sur "Se connecter"
Appel API POST /api/v1/auth/login
Si succès:
- Tokens stockés (localStorage)
- Redirection → /dashboard
Si échec:
- Message d'erreur affiché
- Formulaire reste actif

États

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [rememberMe, setRememberMe] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');

Validation

Email: type="email" + required
Password: type="password" + required
Tous les champs désactivés pendant isLoading

🚀 Intégration API

Endpoint

import { login } from '@/lib/api';

await login({ email, password });
// Retourne: { accessToken, refreshToken, user }

Gestion d'Erreurs

try {
  await login({ email, password });
  router.push('/dashboard');
} catch (err: any) {
  setError(err.message || 'Identifiants incorrects');
}

🎭 Composants Utilisés

Classes CSS Custom

.label          /* Labels uppercase bold */
.input          /* Input stylé avec focus turquoise */
.btn-primary    /* Bouton turquoise avec hover */
.link           /* Lien turquoise avec underline hover */

Classes Tailwind

text-h1         /* Titre principal (40px, Manrope) */
text-body       /* Corps de texte (16px, Montserrat) */
text-body-sm    /* Petit texte (14px) */
text-display-sm /* Grand titre (48px) */
text-h5         /* Sous-titre (18px) */

🖼️ Assets

Logo

<Image
  src="/assets/logos/xpeditis-logo.svg"
  alt="Xpeditis"
  width={180}
  height={48}
  priority
/>

Icônes

Google: SVG inline (multi-path)
LinkedIn: SVG inline (single path)
Features: Lucide icons (bolt, check-circle, message-circle)

🧪 Test Cases

Tests Fonctionnels

Login avec credentials valides → succès
Login avec credentials invalides → erreur
Email vide → validation browser
Password vide → validation browser
Click "Mot de passe oublié" → /forgot-password
Click "Créer un compte" → /register
Click logo → /
Checkbox "Se souvenir de moi" fonctionne
Loading state désactive formulaire
Message d'erreur s'affiche correctement

Tests Visuels

Logo s'affiche correctement
Split-screen sur desktop (> lg)
Formulaire pleine largeur sur mobile
Inputs focus → border turquoise + ring
Bouton hover → opacity 90%
Social buttons hover → background gray-50
Footer links hover → text turquoise
Stats turquoise sur fond navy lisibles
Cercles décoratifs visibles en bas à droite

Tests Responsive

Mobile (< 640px): Formulaire adapté
Tablet (640-1024px): Formulaire centré
Desktop (> 1024px): Split-screen visible
XL (> 1280px): Padding augmenté

📊 Analytics

Events à tracker:

login_attempt - Tentative de connexion
login_success - Connexion réussie
login_error - Erreur de connexion
social_login_click - Click sur Google/LinkedIn
forgot_password_click - Click "Mot de passe oublié"
create_account_click - Click "Créer un compte"

🔮 Améliorations Futures

Authentification Google OAuth fonctionnelle
Authentification LinkedIn OAuth fonctionnelle
Animation de transition entre états
Validation en temps réel (email format)
Indicateur de force du mot de passe
Message "Email non vérifié" si applicable
Support SSO (Single Sign-On) entreprise
Captcha après 3 tentatives échouées
Compte à rebours après verrouillage
Animation du logo au chargement

📚 Références

Design inspiré de: Stripe, Linear, Vercel, Notion
Pattern: Split-screen authentication
Accessibilité: WCAG 2.1 AA compliant
Form validation: HTML5 + Error states

6.6 KiB Raw Blame History