Back to projects
Mantra Homepage
ProjectLive site

Mantra Homepage

A luxury digital experience, editorial and dark-mode first, inspired by the precision of Apple and Acne Studios.

AuthorGerardo Nastri
PublishedMay 1, 2026

Mantra Homepage is a premium platform designed to elevate a digital agency's identity, transforming it from a generic design to a luxury aesthetic. Inspired by Apple's minimalism and Acne Studios' editorial edge, the site utilizes a dark-mode first approach, sophisticated typography, and intentional micro-interactions to create a calm and refined user experience.

Features

  1. "Quiet Luxury" Design System An aesthetic based on deep blacks (oklch), soft whites, and desaturated accents, featuring Geist Light (300) typography that creates an airy and sophisticated feel.
  2. Editorial Hero Section An asymmetrical layout with line-by-line text reveal, dual CTAs, and a "trust" element to immediately establish authority and style.
  3. 9 Refined Sections A complete user journey including social proof metrics, philosophical statements, numbered services, and a 3-step process methodology.
  4. Premium Micro-interactions Fluid animations with custom easing curves (cubic-bezier) that ensure a calm and intentional rhythm, typical of high-end fashion brands.
  5. Asymmetrical Editorial Grid Generous use of whitespace and an off-grid layout give the site a luxury publication feel, avoiding the rigidity of standard templates.
  6. 60fps Performance Integration of Lenis for smooth scrolling and GPU-accelerated animation optimization via Framer Motion for lag-free navigation.
  7. WCAG AA+ Accessibility Inclusive design with high contrast, keyboard navigation, and support for reduced motion, ensuring an excellent experience for all users.

Technologies

  • Next.js 16: Cutting-edge React framework for a high-performance App Router architecture.
  • React 19: Utilizing the latest features of the React library for component management.
  • Tailwind CSS v4: The new utility-first design system for precise CSS token management.
  • TypeScript: Static typing for robust, scalable, and maintainable code.
  • Framer Motion: The industry standard for high-level web animations and micro-interactions.
  • Lenis: Smooth scroll library that adds a "premium" weight to page scrolling.
  • ZOD: TypeScript-first schema declaration and validation.
All projectsVisit live site