Miti Navi Luxury Nautical Portfolio

Overview

Miti Navi is a sophisticated nautical portfolio that uses a distinctive curved mask and parallax imagery to convey luxury and scale. It is an excellent clone reference for high-end boutique brands looking to combine minimalist layouts with advanced custom-shaped visual framing and smooth scroll interactions.

Design System

• Color Palette: A refined, warm neutral base (#E6E0D3) paired with deep black (#000000) for text and accents. The imagery provides the primary color through deep blues and clear skies, creating a cohesive maritime aesthetic.
• Typography: Features a prominent high-contrast serif typeface for headings (e.g., "Les voiliers de nos rêves"), creating a fashion-forward, editorial feel. Subheadings and navigation use a clean, wide-spaced sans-serif for functional clarity.
• Page Structure:
  • Hero: A unique "V-shape" curved mask overlaying a parallax image background.
  • Service Tiers: A horizontal range selector (26m to 50m) utilizing scale-based visual hierarchy.
  • Product Showcase: Alternating card layouts for specific vessel models under the "Notre Gamme" section.
  • Service Grid: A three-column grid for secondary services (Chantier Naval, Location, Réparation).
• Reusable Components:
  • Curved Hero Mask: The defining visual element created via a banner-mask overlay.
  • Sticky Side CTA: A vertical "Brochure" button fixed to the right edge.
  • Hover-State Buttons: Links featuring a "split-line" animation where text shifts or scales on hover (item-hvr).
  • Parallax Image Cards: Image containers that use data-scroll-speed for depth during scrolling.
• Interaction and Motion: The site relies heavily on Locomotive Scroll (validated by data-scroll-section and c-scrollbar in HTML). Elements use vertical parallax (data-scroll-speed) and fade-in triggers (anim-titre, is-inview) to create a fluid, premium browsing experience.
• Implementation Clues: The HTML uses a BEM-like naming convention (e.g., m-heroBanner__image) and Barba.js (data-barba="container") for seamless page transitions.

Use Cases

• Who should clone this: Designers building portfolios for luxury real estate, high-end architecture firms, or private aviation services.
• What products can remix it: Narrative-driven e-commerce sites, boutique hotel landing pages, or bespoke manufacturing catalogs.
• Remix Directions:
  • Shape Swap: Replace the "V" hero mask with an organic or geometric shape that matches a different brand's visual identity.
  • Info Architecture: Adapt the range selector (26m, 34m, etc.) to showcase product categories, pricing tiers, or project timelines.
  • Typography Shift: Swap the editorial serif for a heavy grotesque sans-serif to transition from "luxury heritage" to "modern tech."
• Clone Scope: A full-page clone is ideal for those wanting a unified, smooth-scroll experience, but the individual card-boat and card-service components are highly reusable for simpler grid-based layouts.