Arvane Luxury Real Estate Portfolio
A luxury real estate landing page design featuring a sophisticated, minimalist aesthetic with an earth-toned palette of charcoal, cream, and gold. This style utilizes editorial typography (Cabinet Grotesk and Satoshi) and high-impact layouts like bento-style grids and floating search bars. Ideal for high-end residential agencies, interior design portfolios, or architectural firms. Key features include scroll-triggered hover effects, glassmorphism elements in the navigation, and a focus on lead generation through prominent CTA forms and property search tools.
Summary
Create a high-end luxury real estate portfolio landing page with a minimalist, editorial design. Use a neutral earth-tone palette (#FDFCF9, #1A1A1A, #8B7D6B) combined with gold accents (#D4AF37). Incorporate bold sans-serif typography, generous whitespace, and a sophisticated lead-capture form.
Style
The style is defined by a clean, upscale 'Modern Luxury' aesthetic. It pairs the heavy weights of 'Cabinet Grotesk' for headlines with the clean, geometric readability of 'Satoshi' for body text. The color scheme is predominantly cream and charcoal, creating a high-contrast yet warm atmosphere. Micro-interactions focus on smooth transitions, such as image scaling and sliding underlines.
Layout & Structure
A vertical-scrolling landing page structure beginning with a 2-column hero and moving into structured content grids (stats, properties, process) before concluding with a dark-themed lead capture section.
Navigation Bar
Hero Section
About & Statistics
Featured Properties
How It Works
CTA Lead Capture
Components
Floating Search Bar
An interactive filter bar that overlaps hero images.
Property Specs Bar
Small icons with metadata at the bottom of property cards.
Special Notes
MUST use 'Cabinet Grotesk' for all headings to maintain the luxury feel. MUST maintain a minimum of 96px (24 units) of vertical padding between major sections. MUST NOT use bright colors outside the defined gold accent. DO ensure all image containers have a consistent overflow-hidden property to facilitate the zoom animation.