Ecommerce Product Hero

Figma Component: 23690-196863

Last modified with commit 74094e5 on January 23, 2026 at 10:24 AM by Martin Jagodic.

Full-screen hero section with video/image background, countdown timer, event title and metadata, and integrated CTA box with pricing and booking options.

Functional Documentation

Role	Scenario	Description
system	Display hero with media background	Shows video or image background with dark gradient overlay for text readability.
system	Display countdown timer	Shows four boxes (days, hours, minutes, seconds) with semi-transparent backgrounds and white text.
system	Display title and metadata	Shows large heading, location with pin icon, and dates with calendar icons.
system	Position CTA box	Desktop shows CTA box in right column. Mobile overlaps CTA box below hero content.
editor	Select product variant	Choose product determines background media and content.
editor	Set event information	Configure title, location, dates, and countdown target.
editor	Configure pricing	Set prices, discount percentage, urgency messaging, and button text.
user	View event information	Sees hero with countdown, title, location, and dates.
user	Take action	Clicks primary or secondary CTA button to book or view offer.
system	Display urgency messaging	Shows urgency section with bold title, description, pricing tier arrows, and link.
system	Apply responsive spacing	Uses responsive spacing variables for navigation offset, padding, and CTA positioning.
system	Apply gradient overlay effect	Background has top and bottom gradients for dramatic lighting and text contrast.
editor	Select background media	Choose between auto-play looping video or static image background.
editor	Configure countdown timer	Set target date/time. Timer shows days, hours, minutes, seconds with real-time updates.
editor	Configure event details	Set title, location, and date ranges (supports multi-week events).
editor	Configure pricing and CTA	Set prices, discount percentage, urgency messaging, tier labels, and button text.
editor	Choose product variant	Select variant to apply corresponding background and CTA configuration.
user	View event information at a glance	Sees hero with title, location, dates, and countdown. High contrast ensures readability.
user	Monitor countdown timer	Sees real-time countdown with visually distinct timer boxes.
user	Read urgency messaging	Sees early bird pricing message with tier arrows and link for more info.
user	View pricing comparison	Sees discounted price next to strikethrough original with discount badge.
user	Take action with CTAs	Clicks primary "Reserve now" button or secondary "View offer" button. Reassurance text reduces friction.
user	Experience responsive layout	On desktop, user sees cinematic wide layout with CTA box elegantly positioned alongside content. On mobile, CTA box floats above hero creating card-like focus on pricing and action buttons, while hero content remains visible below countdown timer.

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile