Quench - Luxe Dryskin Landing Page Template

Feature list

This template includes purpose-built components that serve the dry skin subscription category directly.

3D Product Spin Hero

The header section features a CSS 3D animation of the signature overnight barrier balm jar rotating on a matte charcoal pedestal. The jar is uncapped and the cream inside catches light as it turns, showing texture. The thin serif headline appears only after one full rotation, creating a cinematic reveal that holds attention from the first second.

Gallery Walk Card Grid

Each card in the modular grid is designed as a standalone exhibit. Card types include a serum dropper close-up, a three-line ingredient story with botanical illustration, a timestamped before-and-after wrist photograph, a product flat lay, and a subscriber quote. Cards entrance with staggered animation and hover states activate gallery-style interactions.

Skin Quiz Conversion Path

A 60-second interactive skin quiz lets visitors select their skin concern, tightness, flaking, redness, or all three, and receive a personalized box tier recommendation. This secondary conversion path is designed to convert quiz-completers at a higher rate than cold visitors arriving directly at the sign-up form.

Progressive Three-Step Form

The sign-up form reveals its steps one at a time: skin concern selector, shipping address, then payment details. The final step shows a clear "$0 today, $44/month after" disclosure. Progressive disclosure reduces form anxiety and keeps the commitment feel proportional to the visitor's readiness.

Sticky Trial Call-to-Action Bar

After the visitor scrolls past the third row of gallery cards, a sticky bar appears at the bottom of the screen. It carries the primary call to action, "Try Your First Box Free," in crushed rose on charcoal. A scroll trigger activates it at exactly the right moment, when social proof has already done its work.

Asymmetric Bento What's Inside Section

The "What's Inside" section uses an asymmetric bento layout to present box contents with ingredient callouts. This section gives curious visitors a detailed look at what arrives each month without turning the page into a spec sheet.

Page sections overview

Design & branding system

The visual identity follows a Luxe Minimal theme. Think of a velvet-lined drawer in a dim apothecary: soft enough to feel safe against bare skin, dark enough to feel like indulgence rather than medicine. Every design decision pushes away from clinical and toward ritual.

• Color system uses deep wine (#4A0E2E) as the primary tone, charcoal smoke (#3B3B3D) as the dark background, warm parchment (#F0E6DA) as the light background, and crushed rose (#C28A8A) strictly reserved for buttons and hover states
• Typography pairs Fraunces serif for headlines with DM Sans for body copy and interface elements, keeping the editorial feel grounded in readability
• Animation layers include a CSS 3D jar rotation, a shimmer effect, intersection observer card reveals, staggered card entrance timing, and scroll-triggered sticky bar activation

Mobile & speed optimization

This template is built mobile-first because the primary audience browses on their phone during a commute or a work break. Every layout decision starts from the smallest screen and scales up rather than the reverse.

• The card grid reflows cleanly on small screens so each exhibit card remains a standalone, full-attention unit rather than a crowded tile
• Static sections use server-rendered components while interactive elements, the quiz, the form, and the animations, are handled client-side to keep the initial load lean
• The sticky trial bar is sized and positioned specifically for thumb reach on mobile, keeping the call to action reachable without interrupting the scroll experience

How this template helps you convert

Quench is designed around a freemium trial model where the first conversion goal is a zero-cost commitment, not an immediate $44 purchase. Every structural decision supports that path.

1. The 3D hero and delayed headline create a moment of genuine intrigue before any offer appears, priming the visitor emotionally before the call to action is shown
2. The gallery card grid builds a layered, evidence-based case for the product through photography, ingredient storytelling, and real subscriber proof, each card adding weight before the form is reached
3. The skin quiz provides a personalized recommendation that makes the visitor feel understood, lowering the psychological barrier to entering payment details for a box chosen specifically for their concern

Other information about this template

This template is part of a Beauty and Personal Care category build focused on the dry skin subscription box niche. It is localized for English-language audiences using United States dollars and United States date formatting.

• The footer follows a split layout pattern with the brand logo and tagline on the left and navigation links on the right
• Social proof components include nurse testimonials, before-and-after wrist photography with timestamps, and subscriber quotes tied to specific skin concerns like tightness, flaking, and redness
• The template is scoped as a single landing page, not a multi-page website, and all conversion paths remain within the one-page flow