← Retour au portfolio
Landing Page20261 semaine

Northbound

Landing page éditoriale pour une agence de voyages outdoor

01

Le contexte

Création d'une landing page fictive pour Northbound, une agence de voyages spécialisée dans les escapades outdoor — randonnées en montagne, retraites en pleine nature, voyages lents au cœur du sauvage. L'objectif était de transmettre une promesse claire : « Go Beyond », des aventures pour les âmes curieuses qui veulent ralentir et se connecter à la nature.

02

Le défi

Évoquer la nature et l'aventure sans tomber dans le décoratif ou le générique : composer une page magazine, contemplative, avec un hero panoramique impactant, des sections éditoriales calmes, une mise en page typée print et des micro-détails (papier déchiré entre les sections, fondus blancs radial sur les images) qui donnent ce côté « édition imprimée ».

03

La solution

Mise en place d'une architecture Next.js 14 + Tailwind CSS avec une direction artistique éditoriale : Playfair Display pour les titres, Inter pour le texte, un hero plein écran avec divider papier déchiré en SVG inline, des sections feature avec image masquée en gradient radial, un footer newsletter immersif. Tout est typographique, sans librairie d'animation lourde — juste un fade-up CSS pour le hero. Le tout est exporté en static (output:'export') pour être servi directement sous /projects/northbound/.

04

Le résultat

Une landing page calme, premium et lisible, qui montre la facette « direction artistique » du studio : sens du détail, typographie soignée, mise en page magazine, intégration propre. Le contraste avec les démos plus techniques (Three.js, GSAP) renforce la diversité du portfolio.

Technologies

Next.js 14TypeScriptTailwind CSSStatic exportDirection artistique

Fonctionnalités clés

  • Hero plein écran avec divider papier déchiré (SVG inline)
  • Navigation centrée logo / nav split
  • Sections feature alternées avec fondu radial
  • Section mission contemplative
  • Footer newsletter immersif
  • Build statique optimisé (next export)
← Projet précédentVELORAProjet suivant →ABYSS

Un projet similaire ?

Discutons de comment je peux vous aider à concrétiser votre idée.

Parlons de votre projet