Mihan Aromatics Minimalist Fragrance E-commerce

Overview

Mihan Aromatics is a luxury fragrance boutique utilizing a sophisticated, minimalist e-commerce layout that prioritizes atmospheric brand storytelling over traditional retail density. This reference is excellent for high-end brands seeking a premium "experience-first" digital presence that balances cinematic visuals with clean usability.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochrome aesthetic (white text on dark, atmospheric video backgrounds) in the hero, transitioning to a stark white background with black text for product areas. Hierarchy is established through generous whitespace and centered alignment rather than bold colors.
• Typography: The system relies on a clean, geometric sans-serif font. Headers for product titles (e.g., "Kirra Curl") use a larger, widely tracked scale to evoke luxury, while body text (e.g., "Parfums that conjure...") uses a balanced weight for high legibility.
• Structure & Flow: The page begins with an animated marquee announcement bar, followed by a transparent header that overlays a full-bleed (750px height) cinematic video hero section. Below the fold, the layout transitions to a clean white section with centered descriptive text, leading into a modular grid for products.
• Reusable Components:
  • Animated Marquee: A continuous horizontal ticker for brand slogans.
  • Transparent Sticky Nav: A header that remains at the top, featuring a centered logo and minimalist icon-only utilities (profile, search, cart).
  • Outline Buttons: High-contrast, thin-border buttons with hover state transitions.
  • Localized Cart Drawer: A slide-out side panel containing subtotal calculations, shipping progress bars, and high-quality product upsells.
• Interaction & Motion: The UI uses a continuous marquee animation for the announcement bar and "AOS" (Animate On Scroll) data attributes visible in the code, suggesting subtle fade-in and slide-up effects for text and buttons as the user scrolls.
• Mobile Adaptation: The HTML reveals a dedicated mobile drawer menu and a screen-height-full--mobile class for the hero section, ensuring the atmospheric video fills the entire viewport on handheld devices.

Use Cases

• Who Should Clone This: Developers building for boutique perfume houses, high-end skincare brands, or luxury fashion labels that rely on mood and sensory storytelling.
• Remix Directions: Replace the grayscale coastal video with vibrant lifestyle photography for a streetwear brand, or adapt the centered typography system to a left-aligned grid for a more industrial tech aesthetic. The cart drawer's "shipping progress bar" is a high-conversion feature worth reusing across any e-commerce vertical.
• Scope: A full-page clone is ideal for brands with an existing high-quality video library. For smaller projects, cloning the transparent header and marquee ticker provides an instant "premium" utility boost to a standard layout.