projets

Contexte

NOMAX est une marque de casquettes de running, à la signature « Endure More ». Avant le lancement de son premier modèle, la NMX-01, la marque avait besoin d’une page unique : montrer le produit et recueillir les e-mails des premiers intéressés.

La page tient sur un seul écran : le logo, la casquette en rendu radiographique, l’accroche « TESTED ON 100M • NMX-01 » et un champ d’inscription à l’avant-première.

La landing n’est qu’une première étape : la boutique e-commerce de la marque est en cours de construction, en headless avec Hydrogen, le framework React de Shopify. Les visuels, les assets 3D et les rotations à 360° du produit sont créés en interne.

Outils

• —Site : Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4.
• —Inscriptions : route API Next.js reliée à l’API Contacts de Brevo.
• —Hébergement : Vercel.
• —Boutique (en cours) : Shopify Hydrogen.

Démarche

• —Une page volontairement minimaliste, en noir et gris, centrée sur le visuel produit.
• —Assets créés en interne : visuels produit, assets 3D et rotations à 360°.
• —Formulaire d’inscription traité côté serveur : validation de l’e-mail, champ anti-spam caché, ajout direct à une liste Brevo.
• —Erreurs gérées de bout en bout : message clair si l’envoi échoue, réponse dédiée si la configuration Brevo manque ou si Brevo refuse le contact.
• —Accessibilité : label pour le lecteur d’écran, états d’envoi, de succès et d’erreur annoncés.
• —Une première version animait la casquette (effet VHS, alternance noir et blanc, désactivée si l’utilisateur réduit les animations) ; le visuel a ensuite été figé pour garder la page sobre.

Résultat

Une page d’avant-première prête à recueillir les inscriptions, directement reliée à Brevo.

• —Parcours : saisie de l’e-mail, confirmation « INSCRIPTION CONFIRMÉE » ou message d’erreur.
• —Adaptée au mobile, sur un seul écran.
• —Identité de marque : logo, favicons et visuel produit intégrés.