Tez - Radiant Skincare Landing Page Template Template | Build Fully Functional Applications with Rocket
Tez - Radiant Skincare Landing Page Template
Tez is a single-page skincare landing page template built for Latin and Hispanic melanin-rich skin brands. It pairs a 3D hero product spin with a modular concern-based card grid and a five-step personalized quiz funnel. The warm Desert Rose palette and editorial layout guide visitors from discovery through a tailored ritual recommendation and straight into the cart.
by Rocket studio
Loading preview…
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
Theme
Soft Gradient
Creative direction
Curated Collection
Color system
Desert Rose
Style
Card Grid (Modular)
Direction
Quiz/Assessment
Page Sections
3D Animated Hero Bottle
Concern-based Card Grid
Five-step Visual Quiz Overlay
Personalized Regimen with Cart Action
Ingredient Story Split Layout
Floating and Header Call-to-action
Related questions
Can I use this template without running a quiz funnel?
Does the template support custom skin-tone swatches in the quiz?
Is this template suitable for a brand with fewer than five products?
What animation tools are used in this template?
Can the ingredient story section be edited for different botanicals?
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
Section
Purpose
Hero with 3D Spin
Introduce the brand with an animated rotating product bottle
Product Card Grid
Browse products by skin concern with hover ingredient reveals
Ingredient Story
Connect ancestral botanicals to clinical actives in split layout
Quiz Overlay Funnel
Guide visitors through five questions to a personalized regimen
Ritual Bundle Cards
Present complete regimens with a single add-to-cart action
Social Proof Block
Display skin-tone matched testimonials and ritual completion context
Footer
Horizontal flow layout with navigation and brand links
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.
The concern-based card grid reduces decision fatigue by grouping products around a specific skin story rather than showing everything at once
The "Find Your Ritual" quiz funnel moves hesitant visitors from passive browsing to an active, personalized recommendation in five steps
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
