Glow - Radiant Teenskin Landing Page Template

Quick summary

Glow is a single-page landing page template designed for a direct-to-consumer teen skincare subscription box. It opens with an editorial before/after slider, moves through three distinct masonry grid acts, and closes with a personalized skin quiz that delivers a matched product preview. The entire flow is built to convert curious teen visitors and reassured parents alike.

Who this template is for

This template is built for founders and marketers running a dermatologist-backed skincare subscription for teens. It speaks directly to two audiences at once: the teenager scrolling on a phone and the parent who approves the purchase.

• Direct-to-consumer skincare brands targeting teens aged 13 to 18
• Subscription box businesses that use a quiz funnel to personalize the first order
• Beauty entrepreneurs who want editorial-quality design without starting from scratch

What problem this template solves

Teen skincare shoppers are overwhelmed by generic drugstore options and unrealistic skin imagery. Most subscription landing pages either feel too clinical or too trendy. This template bridges that gap.

• It replaces guesswork with a guided quiz that makes the visitor feel diagnosed, not sold to
• It replaces airbrushed lifestyle shots with real subscriber skin diary content organized week by week
• It replaces passive product grids with interactive flip cards that explain the science behind each ingredient

What you get with this template

You get a fully structured, single-page landing page layout with every core section pre-built and ready to customize. The design is editorial and warm, and the interaction model is built around engagement first.

• A draggable before/after hero slider with a headline fade-in and a floating quiz call to action
• Three sequential masonry grid acts covering product tiles, cinematic video breaks, and subscriber proof
• A five-step skin quiz modal that ends with a personalized box preview and a subscribe call to action

Feature list

This template covers design, interaction, and conversion in one cohesive layout. Each feature below is part of the built template structure.

Before/After Hero Slider

The header opens with an editorial close-up of real teen skin split down the center of the viewport. A merlot pill-shaped drag handle lets visitors pull left or right to compare an unfiltered morning-light image with the same face eight weeks later. The headline "Your skin isn't the problem. Your routine is." fades in below the slider.

Staggered Masonry Grid with Flip Cards

The first grid act loads product tiles in a staggered masonry sequence. Each card flips on hover to reveal what the highlighted ingredient actually does. This turns a product gallery into a quick science lesson without leaving the page.

Cinematic Full-Width Video Interstitials

Between grid acts, full-width video sections break the scroll with slow-motion texture footage including pours, foam close-ups, and dropper releases. Ambient audio accompanies the visuals, building sensory interest before the subscriber proof section begins.

Subscriber Skin Diary Grid

The third masonry act replaces product tiles with real subscriber progress photos organized from week one through week eight. The grid becomes evidence rather than advertising. Visitors see unfiltered results before they ever reach the quiz.

Five-Step Personalized Skin Quiz

The primary call to action opens a modal quiz with five single-question steps. Each step uses illustrated tap-targets rather than a scrolling form. The quiz covers skin type, top concern, current routine length, age range, and known allergies. It ends with a matched three-product box preview and a "Subscribe and Save 20%" call to action.

Floating Quiz Call to Action

A merlot button labeled "Find My Routine" appears first as a floating element after the hero and reappears pinned at the grid's midpoint. This keeps the primary conversion action visible throughout the scroll without interrupting the content flow.

Page sections overview

Design & branding system

The visual identity uses the Merlot and Smoke color system. The palette feels editorial and warm at the same time, like a velvet pouch turned inside out. Dark, sophisticated tones frame the grid while soft, warm tones keep individual cards approachable.

• Deep merlot (#6B2737) anchors buttons, the slider handle, and progress indicators inside the quiz
• Charcoal smoke (#3B3B3B) grounds body text and card borders throughout the masonry grid
• Blush fog (#F2E0E0) sets the dominant background wash; soft ivory (#FAF5F2) fills individual card faces
• Typography pairs Fraunces serif for display headlines with DM Sans for body and interface text

Mobile & speed optimization

This template is built mobile-first because teens primarily scroll on phones. Desktop users get the full masonry polish, but every interaction is designed around touch behavior.

• The before/after slider is draggable on touch screens with no secondary controls needed
• Quiz steps are single-question tap-target screens, never scrolling forms, keeping them fast on small screens
• Staggered masonry tile reveals use Intersection Observer and CSS transforms only, keeping animation smooth without heavy scripting

How this template helps you convert

The layout is structured as a short film with three acts, and each act builds a different kind of trust before the quiz call to action appears a second time.

1. The hero slider and staggered flip-card grid establish credibility through honest imagery and ingredient transparency, so the visitor arrives at the quiz already informed.
2. The skin diary grid shows real week-by-week subscriber results before any purchase decision is made, replacing skepticism with visible proof.
3. The five-step quiz delivers a personalized box preview rather than a generic sign-up form, making the subscription feel matched and earned rather than sold.

Other information about this template

This template uses the Marketplace Grid theme with a Masonry/Pinterest layout style and a Cinematic Sequence creative direction. It is built for English-language, United States market deployment in USD pricing. The design system and interaction model are pre-set in the template and can be customized to match your specific brand and product lineup.

• Template style: Masonry/Pinterest with Marketplace Grid theme
• Animation level: High, covering staggered tile loads, card flips, slider drag, and quiz step transitions
• Footer pattern: Linear single-row layout
• Primary category: Beauty and Personal Care, subcategory Teen Skin Beauty

Show more