CupidBox Premium Dark Landing Page
CupidBox is a premium dark-themed landing page design featuring a deep navy and black color palette (#0f0d13) with vibrant purple accents (#8c52ff). It utilizes editorial typography with a pairing of Clash Display for bold headlines and DM Sans for clean body text. The layout is structured with a high-impact hero section containing floating 3D phone mockups, followed by glassmorphic cards, editorial theme grids, and an accordion-style FAQ. This design is ideal for high-end SaaS, creative agencies, digital gifting platforms, or fintech applications that require a sophisticated, modern, and trustworthy aesthetic with subtle glassmorphism and smooth micro-interactions.
Summary
A high-end, premium dark landing page with a deep navy background, vibrant purple CTAs, editorial typography, and floating 3D layered mockups. It features glassmorphism card components and smooth scroll-triggered-style transitions.
Style
The style is 'Premium Dark Editorial' characterized by high-contrast white text on a deep navy background (#0f0d13). Primary accent is a vibrant purple (#8c52ff) used for buttons and active states. Typography uses 'Clash Display' (Bold) for a boutique, editorial feel and 'DM Sans' for readability. Key visual elements include 12px blur glassmorphism, 24px-48px border radii, and soft background glows in purple and rose tones.
Layout & Structure
A vertical scrolling landing page with a fixed navigation, hero section with product visualization, horizontal stats bar, 3-column feature grid, editorial theme showcase, and a centered FAQ accordion.
Navigation
Hero Section
Stats Bar
Features Grid
Editorial Themes
FAQ
Components
Floating Phone Stack
Three layered smartphone frames that animate vertically at different intervals.
Theme Swatch Row
A specific UI pattern for showing a color palette.
Special Notes
Must maintain high contrast between text and background. Must use the exact background color #0f0d13 to ensure depth. Do not use standard squares; all corners must have a minimum of 12px radius, with main cards at 24px and buttons at full round. Background glow effects (purple/rose) must be very subtle (blur 120px+) to avoid looking messy.