ARCHDEVS
3D · E-Commerce · SaaS

MOP — Imperméabilisation Marine

Une plateforme SaaS à deux applications pour les produits de protection des mâts marins — avec un héro 3D immersif avec voilier animé, pluie de particules, effets bloom, configurateur de produits et un tableau de bord admin complet.

Type
E-Commerce + Admin SaaS
Moteur 3D
Three.js / R3F
Applications
Landing + Tableau de Bord
Statut
Production
Le Défi

Les produits marins méritent une expérience immersive.

Le Problème

Une entreprise de produits marins avait besoin d'une plateforme e-commerce client avec des capacités de configuration de produits et un tableau de bord admin B2B pour les opérations. Aucun système existant ne gérait la gestion des commandes, la tarification dynamique ou la gestion des clients pour ce créneau.

Notre Solution

Deux applications partageant un backend : une page de présentation avec un héro 3D immersif (voilier animé, particules de pluie, effets bloom), configurateur de produits interactif avec tarification en temps réel, et un tableau de bord admin basé sur Vue avec analytique, gestion des commandes et fonctionnalités CRM.

Fonctionnalités Clés

La 3D rencontre le commerce.

Héro 3D Immersif

Modèle GLTF de voilier avec superposition wireframe lumineux, surface d'eau dynamique, plus de 200 particules de pluie avec physique et post-traitement bloom.

⟨/⟩

Configurateur de Produits

Sélection de taille de mât (S/M/L/XL), dimensions personnalisées, calcul de prix en temps réel et paiement multi-étapes avec Stripe & PayPal.

Performance Optimisée

Détection matérielle avec fallback WebP statique, code splitting, optimisation de géométrie (128→64 segments) et clampage delta-time.

Tableau de Bord Admin

Tableau de bord Vue 3 + Inertia.js avec tendances de revenus sur 6 mois, distribution des produits, meilleurs clients, filtrage des commandes et export de factures en masse.

Programme de Parrainage

Codes de parrainage uniques, suivi des commissions, tableau de bord des gains et validation côté serveur avec anti-rebond pendant le paiement.

Commande Flotte

Achat individuel ou en masse de flotte avec sélection taille/quantité, support multi-devises (EUR/USD) et workflows de statut de commande.

Stack Technique

Architecture à deux applications.

Landing (3D)

React 19React Three FiberThree.jsDreiVite 7Tailwind v4

Animation

Framer MotionLenisBloom Post-Processing

Tableau de Bord

Vue 3Inertia.jsVite 7Tailwind v3

Backend

LaravelREST APIMySQL

Paiements

StripePayPalMulti-currency

Design

RoundexPoppinsGlass MorphismNavy + Papaya

Vous avez un défi similaire ?

Construisons votre prochaine plateforme ensemble.

Contactez-nousVoir Plus de Projets