Tez - Radiant Skincare Landing Page Template

Quick summary

Tez is a landing page template designed for direct-to-consumer skincare brands serving melanin-rich Latin and Hispanic skin. The page opens with a 3D spinning hero bottle, moves into a concern-based product card grid, and closes the loop with a full-screen quiz funnel that recommends a personalized regimen and converts it to a cart in one step.

Who this template is for

This template is built for skincare founders, product marketers, and creative teams launching or refreshing a brand rooted in Latin and Hispanic skin science. It suits anyone who wants their store to feel curated and personal, not clinical and generic.

• Direct-to-consumer skincare brands focused on melanin-rich Latin or Hispanic skin
• Founders who want a quiz-driven funnel to replace a standard product listing page
• Gift-market sellers looking for a culturally resonant, visually warm storefront

What problem this template solves

Most skincare templates are built for a universal, one-size-fits-all audience. They leave out the nuance that melanin-rich skin requires and offer no path to personalization. Tez solves that gap with a structured funnel that matches visitor skin concerns to specific products.

• Generic templates do not reflect the specific concerns of golden undertones, hyperpigmentation, or humidity-driven texture needs
• Standard product grids show items without context, making it hard for buyers to self-select
• A missing quiz layer means visitors browse and leave without a clear recommendation

What you get with this template

Tez delivers a fully designed, high-interactivity landing page with every section ready to customize. The layout is concern-led rather than catalog-led, meaning each card earns its place by addressing a specific skin story.

• A hero section with a CSS 3D animated product bottle on a sand-to-mauve gradient background
• A modular bento-style card grid with hover states that reveal single-line ingredient stories
• A full-screen five-step quiz overlay that ends with a personalized three-product regimen and a direct add-to-cart button

Feature list

This section covers the core built-in capabilities included in the Tez template.

3D Spinning Hero Bottle

The hero opens with a product serum bottle rotating slowly on a sand-to-mauve gradient. As the rotation completes, the camera eases back to show the full product line arranged in a soft arc. Light catches the glass to show the golden liquid shifting inside, with visible micro-droplets on the surface.

Concern-Based Modular Card Grid

The product grid uses a bento-style layout organized by skin concern: dark spots, dullness, dryness, and texture. Each card lifts subtly on hover and reveals a single-line ingredient pairing such as "nopal extract + niacinamide." The scroll rhythm moves from surface concerns down to complete ritual bundles.

Five-Step Visual Quiz Funnel

The quiz opens in a full-screen overlay triggered by the "Find Your Ritual" call-to-action button. It presents five visual-choice screens covering skin tone swatches, primary concern, routine complexity, climate or region, and ingredient sensitivities. Each step transitions smoothly with gradient animations between screens.

Personalized Regimen Delivery

The quiz results page displays a tailored three-product regimen matched to the visitor's answers. An "Add My Ritual to Bag" button converts the assessment directly into a cart action, collapsing the gap between discovery and purchase.

Floating and Anchored Call-to-Action Placement

The "Find Your Ritual" button appears in the header and returns as a floating button after the first card row scrolls into view. This keeps the primary conversion path visible throughout the browsing experience without interrupting the layout.

Ingredient Story Section

An asymmetric split layout connects ancestral Latin botanicals such as sábila and rose water with clinical active ingredients. This section gives the brand a narrative foundation and helps visitors understand the formulation philosophy before they reach the quiz.

Page sections overview

Design & branding system

The visual identity follows a Soft Gradient theme built around the Desert Rose color system. The palette feels warm and editorial, like a dried flower pressed in the pages of a journal: faded but deliberate, never loud.

• Colors: sun-baked terracotta (#C4736E), dusted mauve (#B8879A), warm sand (#E8D5C4), deep adobe (#6B3A3A), and luminous champagne (#F5E6D3)
• Typography: Fraunces serif for headlines paired with DM Sans for body text, creating an editorial warmth with clean legibility
• Gradients move from sand to mauve across product card backgrounds; adobe anchors all primary text; terracotta marks hover and interactive states

Mobile & speed optimization

The template is built mobile-first, reflecting the browsing behavior of its target demographic. Desktop layouts receive equal polish, but every decision starts from a small-screen experience.

• Server components handle all static content sections, while client components are isolated to the quiz overlay and animations
• GSAP ScrollTrigger powers scroll-based reveals, card hover lifts, and quiz gradient transitions without blocking the initial page render
• The quiz overlay and floating call-to-action are touch-optimized for one-handed mobile interaction

How this template helps you convert

Tez is structured around a single conversion journey: browse by concern, take the quiz, add the regimen to cart. Every layout decision supports that path.

1. The concern-based card grid reduces decision fatigue by grouping products around a specific skin story rather than showing everything at once
2. The "Find Your Ritual" quiz funnel moves hesitant visitors from passive browsing to an active, personalized recommendation in five steps
3. The "Add My Ritual to Bag" button on the quiz results screen removes friction by converting the assessment output directly into a cart action

Other information about this template

Tez was designed with a specific cultural and demographic focus that shapes every layout and copy decision. The following points cover additional context that may help you evaluate fit.

• The template includes English copy with Spanish accent phrases such as abuela, sábila, and ritual woven into the design system
• Pricing and geography defaults are set for USD and the United States market
• Skin-tone matched testimonial slots and ritual completion stat placeholders are included in the social proof block
• Animation intensity is high throughout, including GSAP ScrollTrigger reveals, CSS 3D bottle rotation, quiz overlay transitions, and card hover lifts
• The footer uses a horizontal flow layout pattern suited to minimal brand navigation

Show more