Domaine Agency E-commerce Portfolio Landing

Overview

This is a sophisticated, high-performance agency portfolio website for Domaine, an enterprise-level e-commerce firm. It is an excellent reference for builders wanting to combine cinematic full-screen video with a structured, data-rich project showcase using a clean, modern aesthetic.

Design System

• Color Palette & Visual Hierarchy: The system uses a high-contrast monochromatic base (pure black and white) with subtle "glass-ink" overlays. This allows vibrant project imagery and high-fashion brand colors to stand out. Visual hierarchy is achieved through extreme scale—pairing massive H1 headings with tight, technical caption tags.
• Typography: The site employs a geometric sans-serif (Inter-like) across a wide scale. Key elements include large-scale headings (h2 and h1) for value propositions and tiny, uppercase/lowercase metadata "tags" for technical specifications.
• Structure & Flow: The flow starts with a full-height cinematic hero, followed by a "text feed" highlighting stats, then transitions into a complex "Project Feed" and an accordion-style "Services" section. It concludes with a logo marquee and a grid of secondary projects.
• Reusable Components:
  • Project Cards: A sophisticated component featuring a primary brand image that reveals a custom "hover-image" (often a mobile mockup) behind a blur/glassmorphism overlay.
  • Metadata Tags: Rectangular capsules with clear industry/service segmentation (Industries, Enterprise).
  • Glassmorphism Cookie Notice: A bottom-aligned, semi-transparent dark banner with high-contrast text buttons.
  • Navigation Overlay: A centered, pill-shaped search and navigation bar that floats over the hero media.
• Motion Patterns: The capture and HTML indicate a heavy reliance on fade-up and fade entrance animations controlled via scroll viewports. Project cards feature a sophisticated transition where logos invert and secondary images appear on hover.
• Implementation Clues: Built using Astro (revealed by data-astro-cid attributes) and Sanity CMS for media assets. It uses Mux-player for optimized high-definition video backgrounds.

Use Cases

• Who should clone this: Creative agencies, architectural firms, or premium fashion portfolio builders who need to showcase large amounts of metadata without cluttering the visual UI.
• Remix Directions: Swap the industrial white/black palette for a brand-specific color flow (e.g., earthy tones for a sustainability studio). The "Services" section can be adapted for software features or product categories by replacing the tags with feature descriptions.
• Suggested Scope:
  • Quick Clone: The section-home-hero with the floating navigation pill.
  • Full Clone: The entire landing page flow for a comprehensive business presentation, specifically leveraging the project-card-wrapper to build a robust work archive.