Back to work
Landing Page

EONA Official - Landing Page for Perfume Business

EONA Official is a brand-faithful, direct-to-consumer (D2C) luxury fragrance storefront — a near-black, gold-accented web experience where the bottle is the icon, the copy is poetry, and customers become a community of "Spellcasters." It turns a fragrance brand's identity into a complete online shopping journey, from discovery to checkout.

020-landing-page-eona-1.vercel.app
Open ↗

The problem

Independent luxury and beauty brands usually sell through generic marketplaces or templated e-commerce themes that flatten their identity. The result: a premium product wrapped in a cheap-feeling, off-brand storefront, no way to tell the brand's story, no guided product discovery, and a checkout experience that feels nothing like the brand promises. Distinctive brands end up looking like everyone else, which erodes perceived value and conversion.

Purpose

This project answers that problem by delivering a bespoke, brand-exact storefront instead of a template. Every detail — palette, typography, voice, motion, even the price formatting — is derived from the brand's design tokens, so the digital experience matches the premium product. It adds a guided "Find Your Spell" quiz to help customers choose, editorial storytelling to build connection, and a smooth cart-to-confirmation flow — proving that a small brand can own a luxury online presence that drives discovery, trust, and sales.

Features

  • Luxury landing page: Hero, brand statement, product grid, philosophy, testimonials, Instagram feed, and community signup.
  • Product catalog: (`/spells`) with scent-family filtering and a Discovery Set banner.
  • Rich product pages: purchase controls, brand narrative, an interactive Fragrance Notes Pyramid, performance details, reviews, recommendations, and SEO JSON-LD.
  • "Find Your Spell" quiz: a 3-question flow that weights answers into a matched scent recommendation, remembered via localStorage.
  • About / brand story page: founder story, craft, and timeline.
  • Editorial journal/blog: (`/journal`) — CMS-ready content.
  • Full commerce flow: cart → checkout → mock/real payment → thank-you confirmation → account.
  • Email capture & subscription: for the "coven" community.
  • SEO & technical polish: generated sitemap & robots, JSON-LD, OG metadata, Rupiah price formatting, BPOM compliance numbers.
  • Accessibility & motion care: full `prefers-reduced-motion` support (animations gracefully disabled).
  • Signature custom components: CSS-rendered bottle visual, sparkle particle canvas, animated cart drawer.