Tez - Ancestral Heritage Skincare Landing Page Template

Quick summary

Tez is a single-page immersive landing page template for a Latin heritage skincare brand. It opens with a cinematic lifestyle hero, moves through parallax ingredient photography and clinical result cards, and centers on a five-question skin assessment quiz. The Desert Rose color system and bilingual brand voice create a tone that feels both ancestral and clinically credible.

Who this template is for

This template is purpose-built for founders and creatives launching a direct-to-consumer Latina skincare brand. It serves anyone who needs a heritage-forward, quiz-driven conversion page that speaks directly to melanin-rich skin concerns.

• DTC skincare brand owners targeting first-generation Latina professionals aged 25 to 38
• Beauty entrepreneurs who want a landing page that blends ancestral ingredient storytelling with clinical positioning
• Designers and agencies building high-interactivity beauty pages for Latin or Hispanic skin product lines

What problem this template solves

Most skincare landing pages treat melanin-rich skin as an afterthought. They use generic before-and-after imagery, culturally flat copy, and one-size-fits-all product recommendations. This template fixes that by building every section around the specific concerns of hyperpigmentation, scarring, and sun sensitivity on medium-to-deep skin tones.

• No representation gap: before-and-after result cards feature medium-to-deep skin tones specifically
• No generic funnel: the quiz asks about scarring history, sun exposure habits, and use of home remedies
• No cultural disconnect: the bilingual brand voice and heritage visual direction speak to the audience as peers, not as a marketing target

What you get with this template

This template delivers a complete, section-led landing page ready for a skincare brand launch or redesign. Every section is planned, sequenced, and styled to move a visitor from curiosity to a personalized product recommendation.

• Six structured page sections: hero, ingredient origins, hyperpigmentation results, heritage process footage, the interactive quiz, and a footer with Arc Split layout
• A five-step skin assessment quiz with a skin tone selector, illustrated retro-style icons, and a bundled discount result screen
• A full Neo-Retro design system with the Desert Rose color palette, Fraunces serif headlines, and DM Sans body type

Feature list

This template's capabilities are grounded in its immersive structure, quiz interactivity, and culturally specific visual direction.

Cinematic Full-Bleed Hero Section

The header fills the full viewport with a lifestyle shot of a Latina woman in a golden-hour bathroom setting. A curving Fraunces serif headline enters with a slow animation, and a floating call-to-action button labeled "Descubre Tu Fórmula" appears after the hero, keeping the quiz entry point immediately visible on scroll.

Five-Step Interactive Skin Assessment Quiz

The quiz opens with an inclusive visual skin tone selector, then walks through five illustrated questions covering scarring history, sun exposure, and home remedy habits. Each screen transitions with a slide animation styled like a telenovela scene change. Results deliver a personalized three-product routine with a bundled discount.

Referral-Ready "Gift a Quiz" Path

Every completed quiz result screen includes a secondary call to action: "Gift a Quiz." This path lets users share the assessment directly with family members, turning each completed result into a natural referral entry point without additional setup.

Parallax Ingredient Origin Section

The second section displays full-bleed photography of nopal pads and rosa mosqueta berries floating over cream backgrounds with GSAP scroll parallax. Each ingredient is paired with a handwritten-style origin story, connecting the formula back to its geographic and cultural source.

Clinical Hyperpigmentation Result Cards

A dedicated section presents before-and-after result cards focused exclusively on medium-to-deep skin tones. This section builds clinical trust through direct representation, addressing hyperpigmentation, scarring, and uneven tone in a way that speaks to the primary audience's lived experience.

Heritage Process Film Loop

A looping footage section styled with Super 8 film grain and rounded corners shows hands grinding, pouring, and bottling ingredients. The warm grain and soft vignette reinforce the artisanal origin story while keeping the visual language consistent with the rest of the Desert Rose system.

Page sections overview

Design & branding system

The template runs a Neo-Retro visual identity that layers vintage warmth over clinical precision. The Desert Rose color system is drawn from sun-baked terracotta, aged cream, dusty rose, deep piloncillo brown, and a flash of vintage gold that appears on hover states and call-to-action elements.

• Color palette: terracotta (#C2705B) as the primary tone, cream (#F5E6D3) as the page background, piloncillo brown (#3B1F0B) for foreground text, and gold (#C9A84C) reserved for hover states and call-to-action highlights
• Typography: Fraunces curving serif for all headlines, paired with DM Sans for body copy, creating a contrast between warm emotional expression and clean clinical readability
• Animation style: GSAP-powered scroll parallax, staggered section reveals, and quiz slide transitions that match the telenovela scene-change aesthetic described in the brief

Mobile & speed optimization

The template is built mobile-first, reflecting the primary audience's browsing behavior. Layout decisions, touch interactions, and scroll animations are all designed to perform on phone screens before scaling up.

• Mobile-first layout structure ensures the hero, quiz, and result screens are fully usable on small screens without horizontal scrolling
• CSS-native smooth scroll is implemented alongside optimized images to support fast loading across the full-bleed visual sections
• Quiz interactions, including skin tone selection and illustrated question screens, are touch-friendly and sized for thumb navigation

How this template helps you convert

Every section of this landing page is sequenced to reduce hesitation and move visitors toward the quiz and product routine result.

1. The floating "Descubre Tu Fórmula" call-to-action button appears directly after the hero and reappears as a full-width interactive section midpage, so the quiz entry point is never more than one scroll away.
2. The quiz result screen delivers a personalized three-product bundle with a discount, giving visitors a concrete, low-friction reason to purchase immediately after completing the assessment.
3. The "Gift a Quiz" secondary path on the result screen converts satisfied users into referral sources, extending the reach of each completed quiz to hermanas, primas, and mothers in the same target audience.

Other information about this template

Tez is built specifically for the Latin and Hispanic skin beauty subcategory within the broader beauty and personal care market. It is a strong fit for brand launches, product line expansions, or heritage skincare repositioning campaigns.

• The bilingual brand voice uses English as the primary language with Spanish phrases woven naturally into headlines and calls to action, targeting the US market with USD pricing
• The template style is Full-Width Immersive, meaning every section is designed to fill the browser width and create an editorial, magazine-quality scroll experience
• The Arc Split footer pattern places the brand logo and tagline on the left with navigation links on the right, giving the page a clean, editorial close consistent with the Neo-Retro identity

Show more