SkyTechSport

Design System

Foundations · Primitives · Components · Sections · Modules · Blog

Token	Width	Prefix	Usage
--breakpoint-sm	480px	sm:	Mobile landscape → small tablets
--breakpoint-md	768px	md:	Tablets, 2-column grids kick in
--breakpoint-lg	992px	lg:	Desktop — sidebar shows, 3-col grids, nav unfolds
--breakpoint-xl	1280px	xl:	Wide desktop
--breakpoint-2xl	1440px	2xl:	Design-width — max-w containers hit cap
--breakpoint-3xl	2561px	3xl:	Ultra-wide — heading scale-up for large displays

Container	max-width	Where used
max-w-[1440px]	1440px	Content sections, Header nav, CardGrid, SplitSection, etc.
max-w-[1366px]	1366px	Footer (all sub-containers)
max-w-[900px]	900px	TextSection (prose), legal pages, blog posts
max-w-[700px]	700px	CTA blocks, centered narrow content
full-bleed	100%	Hero sections, dark-bg sections, FullImage

Breakpoint	Tailwind class	Value	Note
base	px-6	24px	Mobile — all sections
lg:	lg:px-10	40px	Desktop — most content sections
lg:	lg:px-20	80px	Desktop — Header, Footer, wide pages

Context	Class	Value
Content sections (standard)	py-16 lg:py-24	64px → 96px
Hero sections	py-20	80px (+ min-height)
Compact sections	py-12 lg:py-16	48px → 64px
Footer sub-sections	py-5 / py-8	20px / 32px

Props
href (required)	Link target URL
label (required)	Link text
external?	Opens in new tab (target="_blank" rel="noopener")
size?	"base" (16px, default) or "sm" (14px)
class?	Color+hover classes from parent (e.g. "text-white hover:text-white/60")
Visual
Arrow icon	Always text-accent, 20×20 SVG, flex-shrink-0
Layout	inline-flex items-center gap-2.5
Transition	transition-colors on the anchor
Usage
SplitSection	CTA array, color from theme (dark → white, light → black)
HeroVideo	CTA array, "text-white hover:text-white/80"
AppDownload	iOS/Android links, external
ContactForm	"Book A Meeting" CTA, external size="sm"

Props
label (required)	Button text
href?	Renders as <a> when provided, <button> otherwise
variant?	"filled" (default), "outlined", "ghost"
size?	"sm" (px-4 py-2), "md" (default, px-6 py-3), "lg" (px-8 py-4)
fullWidth?	Adds w-full (form submits)
external?	Opens in new tab
type?	"button" (default) or "submit"
class?	Color override (replaces default palette per variant)
Default colors per variant
filled	bg-accent text-white hover:bg-accent/90
outlined	bg-white border border-black text-black hover:bg-gray-50
ghost	bg-transparent border border-white/50 text-white hover:bg-white/10
Usage
ProductGrid	filled (default) for "Build Your Own" CTA
SlopeShowcase	filled for slope CTA
DemoLocationCard	outlined (primary) + filled (secondary), fullWidth
VirtualDemoCard	ghost with white border, fullWidth
ConfiguratorCTA	filled, size="lg"
VideoCTA	filled, size varies by variant
PromoBanner	filled with ctaColor override (lime/accent/white)
RevenueCalculator	ghost (default white border)
NotifyMeForm	filled, fullWidth, type="submit"

Props
class?	Tailwind size/color classes. Default w-4 h-4
Behavior
Color	Inherits currentColor from parent
Accessibility	aria-hidden="true" (decorative)

Props
direction?	"right" \| "left" \| "down" \| "up". Default "right"
class?	Tailwind size/color classes. Default w-4 h-4
Behavior
Color	Inherits currentColor via fill
Rotation	CSS rotate-90 / rotate-180 / -rotate-90
Accessibility	aria-hidden="true" (decorative)

Props
fixedNav?	Boolean. Default true — sticky on scroll
overlay?	Boolean. Default false — transparent over hero, switches to solid dark on scroll
Layout
Top banner (lg+)	bg-[rgb(7,7,7)] h-10 — phone/email + social icons
Main navbar	absolute z-[1000] — transitions to fixed on scroll via JS
Logo	Dark on light bg, white on dark/overlay
Nav items
Snowsports Simulator	Dropdown: Home / Business
BotBoxer	Dropdown: Home / Business
BalancePlay Pro	Direct link with green badge
Smart Hoop	Direct link
More	Dropdown: Contact / About / Blog / Grant Program / Rentals / Custom Software / Owner's Guides
Behavior
Overlay mode	On scroll > 50px: switches to solid dark bg + white logo
Mobile	Hamburger menu, slide-down panel with nested dropdowns

Normally used via <Header slot="header" /> in BaseLayout. The overlay prop is true on homepage only; all other pages use solid dark. Live demo below renders inside a contained wrapper.

+1 (310) 992-8992 info@skytechsport.com

Shop

Sections (top to bottom)
Apps section	bg-[rgb(43,46,52)] — iOS/Android download buttons
Link columns	3 columns: Products / Services / Resources, max-w-1366px
Contact	"Los Angeles, California" + address + phone
Copyright	bg-[rgb(42,44,50)] — year + name
Background colors
Main bg	bg-[rgb(35,37,42)]
Apps section	bg-[rgb(43,46,52)] (slightly lighter for visual separation)
Copyright	bg-[rgb(42,44,50)]
Typography
Column headings	14px / 400 / rgb(129,129,129) (gray-500)
Links	14px / 400 / rgb(167,167,167)
Contact city	20px / 400 / white
Contact address	14px / 300 / white

Normally used via <Footer slot="footer" /> in BaseLayout. No props.

SectionHeading standard centered H2 with optional arrow + subtitle

Props
text (required)	Heading content
subtitle?	Lead paragraph below heading (max-w-4xl, mt-6)
variant?	"black" (default) · "white" (on dark/video bg) · "accent"
arrow?	Show arrow-down-big.svg icon above (48px, mb-2, pt-10 on heading)
as?	"h1" \| "h2" \| "h3" (default h2)
align?	"center" (default) · "left"
Typography Scale
Mobile (< 992)	34px / 40px, font-normal (400)
lg (992+)	56px / 62px, font-light (300)
3xl (2561+)	84px / 93px
Font	Graphik (primary), tracking-[-0.02em] (inherited from base h2)
Subtitle Style
Size	text-base (16px) → md:text-lg (18px)
Weight / line-height	font-normal leading-[1.6]
Width	max-w-4xl (56rem / 896px)
Spacing	mt-6 (24px) below heading
Arrow Icon
Size	w-12 h-auto (48px wide — native SVG size)
Spacing	mx-auto mb-2 (8px below arrow), heading gets pt-10 (40px above text)
Section padding	When arrow + section: top padding reduced to pt-1 (arrow sits near previous section)

Reusable across index.astro, ski-simulators-home.astro, ski-simulators-business.astro. The wrapping <section> controls outer padding/margin; this component only handles the heading + optional subtitle block.

arrow + black arrow on top, default heading color

Our Products

with subtitle heading + lead paragraph below

Demo Interactive Sports Simulators

We offer in-person demos at our showroom in Los Angeles or request a virtual demo to learn about our sports simulators from anywhere.

variant="white" on dark/video background

SkyTechSport Plus Subscription

variant="accent" + as="h3" + align="left" smaller H3 in accent color, left-aligned

World-Class Ski Slopes at Home

Card unified card shell · 4 bg variants × icon × heading × free-form slot

Props
variant?	"light" (default) · "accent" · "white" · "dark"
icon?	Image path. Auto-inverts to white on accent/dark variants
iconAlt?	Alt text for icon
heading?	Card heading. Use \n for line breaks
align?	"center" (default) · "left"
class?	Additional CSS classes on outer div
<slot />	Free-form content: buttons, checklist, form, text — anything
Card Shell
Border radius	rounded-3xl (24px)
Padding	p-4 lg:p-5 xl:p-8
Layout	flex flex-col
Variant backgrounds
light	bg-gray-100 + text-black heading
accent	bg-accent + text-white heading + icon auto-invert
white	bg-white + text-black heading
dark	bg-dark + text-white heading + icon auto-invert
Icon (optional)
Size	w-full h-48 object-contain mb-6
Invert	brightness-0 invert auto-applied on accent/dark
Composition patterns
Action card	icon + heading + tagline + 1–2 Buttons + footnote (replaces DemoLocationCard)
Feature card	icon + heading + lead + checklist + ghost Button (replaces VirtualDemoCard)
Form card	heading + body + form fields + submit Button (replaces NotifyMeForm)

Card is the base shell. Specific card types (DemoLocationCard, VirtualDemoCard, NotifyMeForm) will migrate to Card + slot content. The variant + slot pattern keeps the shell consistent while allowing arbitrary inner content.

variant="light" + action buttons DemoLocationCard pattern

Demo in
Los Angeles, CA

Feel the slope at our LA showroom

Request a Product Demo Book Instructor Lesson

Smart sensors capture your technique while a coach gives instant feedback.

Virtual Demo

Book a 1-on-1 demo with a product expert

Customized to your goals

Every question answered on the spot

No obligation to purchase

Book a Virtual Call

No Sports Simulators In Your City Yet?

Notify me when the SkyTechSport simulator in my area becomes available!

Your email address

Your city

4 shell variants light / accent / white / dark

Light

bg-gray-100

Accent

bg-accent

White

bg-white

Dark

bg-dark

StoreCard horizontal product card linking to checkout/store

Props
href (required)	Link target (typically checkout/store)
image (required)	Product image (object-contain, fitted to fixed-width area)
imageAlt (required)	Alt text
storeLabel?	"Store" SVG label above title (default img_store_lable.svg)
title (required)	Card title (e.g. "Ready-made Sets")
subtitle (required)	Card subtitle (e.g. "Go to Store")
Layout
Element	<a> with class .store-card
Layout	flex items-center bg-white
Border	rounded-xl border-2 border-transparent transition-colors
Hover	border-color: var(--color-accent) — theme-aware (red/lime/violet/orange)
Image Area
Mobile	173x88px
md+	216x110px
Image fit	w-full h-full object-contain mix-blend-multiply (drops white background)
Text Area
Padding	px-5 py-4
Store label	h-5 mb-2 (auto width SVG)
Title	text-base font-medium text-gray-800
Subtitle	text-sm text-gray-500

Used inside SplitSection as a "buy directly" shortcut. Hover border auto-picks the accent color of the parent product theme via var(--color-accent).

Ready-made Sets

Go to Store

Props
backgroundImage (required)	Background image URL
gradientOverlay?	CSS gradient string applied on top of image (multiple comma-separated)
heading (required)	Section heading
paragraphs (required)	Array of { text, variant? }. Variant: "body" (default) or "emphasis"
size?	"default" · "large" (more padding on lg+)
as?	Heading element h1 \| h2 \| h3 (default h2)
textColor?	"white" (default) · "black"
Layout
Container	max-w-[1440px] mx-auto flex flex-col gap-5 lg:gap-8
Padding (default)	py-12 px-6 lg:py-20 lg:px-10
Padding (large)	py-20 px-6 lg:py-[140px] lg:px-[60px]
Background
Composition	Gradient overlay layer(s) + image, both via background-image
Sizing	background-size: cover; background-position: center
Heading Typography
Mobile	34/40 px, font-normal
md (768+)	36/44 px
lg (992+)	48/56 px, font-light
2xl (1440+)	54/62 px
Body Paragraph (variant="body")
Style	text-base md:text-lg leading-relaxed lg:max-w-[50vw]
Emphasis Paragraph (variant="emphasis")
Mobile	30/36 px, font-light
md (768+)	28/36 px
lg (992+)	36/44 px
2xl (1440+)	40/50 px
Width	lg:max-w-[70%]

Props
heading (required)	Section heading (h2)
heroImage (required)	Large hero photo with diagonal gradient overlay
heroImageAlt?	Optional ARIA label
heroText (required)	Text overlaid bottom-left of hero photo
cards (required)	Array of { image, imageAlt, text } — 2 supporting cards
background?	Tailwind bg class. Default bg-[#303237]
Layout
Section padding	py-[60px] pb-[80px] px-6 lg:px-[60px]
Container	max-w-[1440px] mx-auto
Heading	text-white mb-6 (base h2 from global)
Hero Photo Block
Height	h-[60vh]
Border radius	rounded-xl + mb-[40px]
Text alignment	flex flex-col justify-end pb-[60px] px-6 lg:px-[60px]
Overlay	Diagonal: linear-gradient(217deg, transparent, #000)
Overlay text	text-base font-light text-white max-w-lg leading-relaxed
Cards Row
Layout	flex flex-col md:flex-row gap-[30px]
Card shell	bg-white rounded-xl overflow-hidden flex-1
Card image	w-full h-[300px] object-cover
Card text	p-5 + text-sm text-gray-700 leading-relaxed

Props
image (required)	Full-width hero photo
imageAlt (required)	Alt text
caption (required)	Small caption (athlete name + titles)
quote (required)	Quote text (rendered as h3)
logo (required)	Endorsement logo image
logoAlt (required)	Logo alt
background?	Tailwind bg class. Default bg-[#23252a]
Layout
Photo	w-full h-auto (full-width, intrinsic height)
Caption row	text-center px-6 py-4
Quote row	flex flex-row justify-center items-center gap-10 pt-5 pb-[60px]
Quote padding	px-5 lg:pl-5 lg:pr-[60px]
Caption
Style	text-sm text-gray-400
Quote (h3)
Style	text-xl lg:text-2xl font-light text-white text-right max-w-lg
Logo
Size	w-[20%] max-w-[231px] object-contain flex-shrink-0

Props
heading (required)	Section heading (accent color)
body (required)	Body text in text cell
ctaLabel (required)	CTA button label
ctaHref (required)	CTA target
ctaExternal?	Open in new tab
slopes (required)	Array of { image, flag, city, desc }
Layout
Mobile	grid-cols-1 — stacked vertically
lg+ (992)	grid-cols-3 — cell 1 = text+CTA, rest = slope cards (auto-flow)
Section padding	py-[60px] lg:py-[100px] bg-white
Container	max-w-[1440px] mx-auto px-6 lg:px-10
Grid gap	gap-5 (20px)
Heading (accent color)
Mobile	34/40 px, font-light tracking-[-0.02em]
xl (1280+)	48/56 px
2xl (1440+)	54/62 px
Color	text-accent (theme-aware)
Slope Card
Layout	flex flex-col gap-5
Image	w-full aspect-video object-cover rounded-lg (16:9 ratio)
Flag	w-[43px] h-auto object-contain flex-shrink-0
City (h3)	text-xl lg:text-2xl font-normal text-accent
Description	text-sm text-gray-500
CTA Button
Style	inline-block bg-accent text-white font-medium rounded-lg py-3 px-6
Hover	hover:bg-accent/90

Props
id?	Section anchor id (for in-page links)
tagline?	Accent-colored label above heading (e.g. "TRAINING MODE"). Rendered as same heading tag, text-xl font-normal text-accent uppercase
heading (required)	Heading text
headingTag?	"h2" (default, larger scale) · "h3" (product-showcase scale)
body (required)	Body text. Supports inline HTML (e.g. <span class="text-accent">)
ctas?	Array of { label, href } arrow links
direction?	"right" (default, media right) · "left"
theme?	"white" (default) · "gray" (bg-gray-50) · "dark" · "darker" · "darkgray"
accentTheme?	"ski" \| "botboxer" \| "balanceplay" \| "smarthoop" — overrides --color-accent for descendants
headingAccent?	Use text-accent for heading regardless of theme
image (required)	Image (or mobile fallback when video is set)
imageAlt?	Alt text
imageSrcSet?	Responsive srcset string
imageSizes?	Sizes attribute (auto-calculated if omitted)
mediaFit?	"cover" (default, photos) · "contain" (illustrations with padding)
mediaRatio?	"50" (default, 50/50) · "70" (media 70% / text 30%, image fills full height)
videoMp4?	Desktop video MP4 — if set, video shown on lg+, image as mobile fallback
videoWebm?	Desktop video WebM (preferred)
videoPoster?	Video poster image
imageAlwaysVisible?	Image always shown, video stacks on top on desktop (BalancePlay pattern)
slot "lead"	Optional content between heading and body (subtitle/lead text)
slot (default)	Optional content below CTAs (e.g. <StoreCard>)
Layout (Grid)
Mobile	grid-template-columns: 1fr — stacked, media on top via order: -1
lg+ (992)	50/50 grid, min-height: 50vw
Text column	Always first in DOM (SEO); CSS reorders for direction="left"
H2 Typography (default)
Mobile	34/40, font-normal
md	36/44
lg	48/56, font-light
2xl	54/62
3xl	81/93
H3 Typography (headingTag="h3")
Mobile	30/36, font-normal
lg	48/1.08, font-light
3xl	72px
Text Column Padding
h2 vertical	py-16 lg:py-24
h3 vertical	py-12 lg:py-16 xl:py-24
Horizontal (media right)	px-6 lg:pl-20 lg:pr-12 + .container-fluid-padding >1441px
Horizontal (media left)	px-6 lg:pl-12 lg:pr-20 + .container-fluid-padding-r >1441px
Theme Color Logic
"white"	bg-white · heading/text text-black
"gray"	bg-gray-50 · heading/text text-black
"dark" isDark	bg-dark (#17191d) · heading text-white · text text-gray-300
"darker" isDark	bg-darker (#121217) · heading text-white · text text-gray-300
"darkgray" isDark	bg-gray-750 (#23252a) · heading text-white · text text-gray-300
CTA Arrow Links
Layout	flex flex-wrap gap-6
Arrow	Inline SVG 20x20 with text-accent
Hover	light: text-black/60 · dark: text-white/60
Media Column
Mobile aspect	aspect-square
Desktop	lg:aspect-auto (stretches to grid row)
cover	absolute inset-0 w-full h-full object-cover
contain	Container p-8 lg:p-16; image object-contain
Video pattern	video hidden lg:block · image lg:hidden
imageAlwaysVisible	image always visible · video overlays on lg+
Product Theme Classes
theme-ski	--color-accent: #ea484d (red)
theme-botboxer	--color-accent: #c6f144 (lime)
theme-balanceplay	--color-accent: #8576ff (violet)
theme-smarthoop	--color-accent: #ff6c31 (orange)

Props
heading?	Optional section heading (uses SectionHeading)
subtitle?	Lead paragraph below heading
features (required)	Array of { image, imageAlt, imageSrcSet, imageSizes, heading, text }
columns?	2 (default) · 3 — columns on lg+
theme?	"white" (default) · "gray" · "dark"
headingAccent?	Section heading uses accent color
Layout
Section	py-16 lg:py-24 + bg per theme
Container	max-w-[1440px] mx-auto px-6 lg:px-10
Heading bottom margin	mb-12
Grid (2 cols)	grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 lg:gap-12
Grid (3 cols)	grid-cols-1 md:grid-cols-2 lg:grid-cols-3
Feature Card
Image	w-full rounded-lg mb-5 (auto-height, supports srcset)
Heading (h3)	text-xl lg:text-2xl font-normal
Heading color	light: text-gray-900 · dark: text-white
Heading margin	mb-3
Body	text-base leading-relaxed
Body color	light: text-gray-600 · dark: text-gray-300

Props
heading?	Section heading (default: "Testimonials")
testimonials (required)	Array of { name, title, quote, image }
theme?	"white" (default) · "dark" (bg-dark, accent names, white quotes)

Props
tagline?	Small tagline above heading (e.g. "Reach New Heights")
heading (required)	Main heading (uses accent color, font-light on lg+)
screenshot (required)	App screenshot/preview image
screenshotAlt (required)	Alt text
body (required)	Body text below screenshot
iosHref (required)	iOS App Store URL
androidHref (required)	Android Play Store URL
theme?	"white" (default) · "gray"
Layout
Section	py-16 lg:py-24 + theme bg
Container	max-w-[1440px] mx-auto px-6 lg:px-10 flex flex-col items-center
Screenshot wrapper	w-full max-w-[800px] mx-auto mb-8
Tagline
Mobile	22/28 px font-light text-gray-800
md (768+)	24/30 px
lg (992+)	30/36 px
2xl (1440+)	34/42 px
Spacing	text-center mb-2
Heading (accent color)
Mobile	34/40 px font-normal
md (768+)	36/44 px
lg (992+)	48/56 px font-light
2xl (1440+)	54/62 px
Color · spacing	text-accent text-center mb-8
Body Text
Style	text-base text-gray-600 text-center max-w-2xl mx-auto mb-8
Download Links (arrow style)
Layout	flex flex-wrap justify-center gap-6
Link	inline-flex items-center gap-2.5 text-black hover:text-black/60
Arrow icon	w-5 h-5 text-accent — SVG arrow
Behavior	Both links open in new tab (target="_blank" rel="noopener")

Shared Props
variant?	"slider" (default) \| "iframe"
heading (required)	Passed to SectionHeading
body (required)	Lead text between heading and CTA
ctaLabel (required)	Button label
ctaHref (required)	Button target URL
Slider Variant Props
beforeImage	Bottom layer image src (room without simulator)
afterImage	Top layer image src (room with simulator)
beforeAlt?	Default: "Before configuration"
afterAlt?	Default: "After configuration"
Iframe Variant Props
iframeSrc?	Default: /sections/hotspot-configurator.html
iframeTitle?	A11y title (default "Interactive Sports Simulator Configurator")
Slider Layout
Container	max-w-[1440px] mx-auto
Height	h-[40vh] → md:h-[60vh] → lg:h-[70vh] → xl:h-[80vh]
Mobile (<md)	Slider handle hidden, only "after" image shown full
Interaction	Drag handle via pointer events, clip-path: inset()
Handle
Line	2px, white gradient (transparent → white → transparent)
Knob	40px circle, white bg, <> arrows icon, shadow-lg
Text + CTA
Container	max-w-[900px] mx-auto px-6 lg:px-20 py-10 lg:py-16
Heading	SectionHeading (default variant black, h2)
Body	text-base md:text-lg font-normal text-black leading-[1.6] mt-6 mb-8 text-center
CTA	Button size="lg"

Props
text (required)	Banner text
logo?	Optional partner/source logo
logoAlt?	Logo alt
logoSize?	Tailwind height class (default h-8)
linkLabel (required)	Right-side link label
linkHref (required)	Link target
linkExternal?	Open in new tab
Layout
Section	py-8 bg-gray-50
Inner card	bg-white rounded-xl p-6 lg:p-8
Direction	Mobile column, sm+ row with space-between
Text
Style	text-lg font-semibold text-gray-800
Link
Style	text-primary font-medium hover:underline + arrow SVG

Props
icon (required)	Large icon SVG/PNG
iconAlt?	Alt text
heading (required)	Banner heading (h2)
body (required)	Body text
ctaLabel (required)	Button label
ctaHref (required)	Button target
ctaExternal?	Open in new tab
ctaColor?	"lime" (default) · "accent" · "white"
Layout
Outer section	py-16 lg:py-24 bg-gray-900
Inner card	bg-gray-800 rounded-xl p-8 lg:p-12
Direction	Mobile column, lg+ row, gap-8
Icon
Size	w-24 h-24 lg:w-32 lg:h-32 flex-shrink-0
Heading + Body
Heading (h2)	heading-card text-white mb-3
Body	text-base text-gray-300 mb-6
CTA Button
Style	inline-flex px-6 py-3 font-medium rounded-lg
lime variant	bg-lime text-gray-900
accent variant	bg-accent text-white
white variant	bg-white text-gray-900

Props
videoMp4 (required)	MP4 source URL
videoWebm?	WebM source (preferred, MP4 fallback)
poster (required)	Poster image (shown before video loads)
logo?	Logo SVG/PNG above heading (h-12, mb-6)
logoAlt?	Logo alt text
heading (required)	Passed to SectionHeading
body (required)	Lead text between heading and CTA
ctaLabel (required)	Button label
ctaHref (required)	Button target
ctaExternal?	If true, adds target="_blank" rel="noopener"
minHeight?	"90vh" (default) · "80vh" · "70vh"
headingVariant?	"white" (default) · "accent"
Layout
Section	relative overflow-hidden flex items-center + minHeight
Content max-width	max-w-[900px] mx-auto
Content padding	px-6 lg:px-20 py-20
Alignment	text-center
Content z-index	z-10
Background Video
Behavior	autoplay loop muted playsinline
Fit	absolute inset-0 w-full h-full object-cover
Sources	WebM first, MP4 fallback, poster shown until first frame
Overlay
Color	bg-black/40 (40% opacity)
aria-hidden	true (decorative)
Logo (optional)
Size	h-12 (48px), auto width
Spacing	mx-auto mb-6
Body Text
Style	text-base md:text-lg leading-[1.6] mt-6 mb-8
Color	text-white (white variant) · text-black (accent variant)
CTA Button
Style	px-8 py-4 bg-accent text-white font-medium rounded-lg
Hover	hover:bg-accent/90

cross-promo Variant Differences
Height	h-[90vh] (fixed) vs min-h-[90vh] (hero)
Overlay	Spotlight (gradient + radial vignette) vs flat bg-black/40
Content max-width	max-w-[640px] vs max-w-[900px]
Heading scale	Base h2 (34px / 40px from global.css) vs SectionHeading scale (34→56→84)
Logo	h-14 w-auto vs h-12 mx-auto mb-6
Layout	flex flex-col items-center text-center gap-5 vs flat text-center with mt-6/mb-8 spacing
Body	text-base font-light text-white/90 (lighter, smaller)
Button	Smaller padding py-3 px-6 vs py-4 px-8

Props
heading (required)	Card heading (h3 scale)
body (required)	Body text below heading
formAction?	Submit endpoint (currently unused — logs to console)
successMessage?	Text shown after submit (default provided)
Card Shell
Background	bg-gray-100
Border radius · padding	rounded-3xl p-4 lg:p-5 xl:p-8
Form Fields
email (required)	Email input + privacy disclaimer
city (required)	Text input
phone (optional)	Tel input + SMS consent checkbox + disclaimer
Spacing	space-y-4 between groups
Input Style
Style	w-full px-4 py-3.5 bg-white rounded-xl text-sm text-gray-650
Placeholder	placeholder:text-gray-400
Border / focus	border-0 outline-none focus:ring-2 focus:ring-accent/30
Label	text-sm text-gray-500 mb-1.5
Submit Button
Style	w-full py-3.5 bg-accent text-white font-medium rounded-lg
Submit Behavior
Listener	Document-level submit event delegation, idempotent install guard
Action	preventDefault → logs FormData to console → hides form → shows .notify-success
Scoping	Uses form.closest(".notify-me-form") — multiple instances on a page work independently
Backend	TODO: replace console.log with real API call
Success State
Style	bg-green/10 rounded-lg text-sm text-green font-medium

Props (all optional, defaults match ski-business usage)
heading?	Default "Revenue Calculator"
body?	Default "Move the sliders to see..."
ctaLabel?	Default "Choose a simulator"
ctaHref?	Default config.skytechsport.com
ctaExternal?	Default true
costMin/Max/Step/Default?	Cost slider params (20/200/5/100)
sessionsMin/Max/Default?	Sessions slider params (2/36/18)
workDays?	Default 355 days/year
Layout
Section	py-16 lg:py-24 bg-dark text-white
Grid	Mobile single col, lg+ 2-col with gap-8 lg:gap-16 items-center
Calc widget	bg-gray-800/50 rounded-xl p-6 lg:p-8
Revenue Display
Style	text-3xl lg:text-4xl font-bold text-white
Format	$N,NNN,NNN (comma thousand separators)
Sliders
Track	w-full h-1 bg-gray-600 rounded-lg
Thumb color	accent-white
Min/max labels	text-xs text-gray-500 mt-1
Behavior
Calculation	cost × sessions × workDays
Update trigger	input events on both sliders
Idempotent install	Guard via window.__revenueCalcInstalled — safe to render multiple instances

Props
tagline (required)	Accent-colored label above heading (rendered as <h2>, text-xl text-accent uppercase)
heading (required)	Section heading (rendered as <h3>, text-[30px] font-light)
body (required)	Body text
artworkImage (required)	Background image for artwork section
artworkTitle (required)	Game title on artwork overlay (rendered as <h2>)
artworkGradient?	CSS gradient overlay on artwork (e.g. "linear-gradient(transparent 41%, rgba(0,0,0,0.84))")
artworkHeight?	Tailwind height class (default: "h-[450px]")
brandLabel?	Brand label above title (default: "BotBoxer Play!")
footerText?	Optional paragraph below artwork
Structure
Text block	bg-dark · centered · tagline (h2) + heading (h3) + body
Artwork	Full-bleed bg-image with optional gradient · overlay: brand label + game title (h2)
Footer	Optional bg-dark text block below artwork

Layout
Height	h-[90vh] mobile → lg:h-[95vh] desktop
Alignment	flex items-end — content pinned to bottom
Overlay	bg-black/20 over video
Content max-width	max-w-[1100px]
Padding
Horizontal	px-6 (24px) → lg:px-20 (80px)
Bottom	pb-8 (32px) → md:pb-10 → xl:pb-[60px]
Top	pt-40 (160px) — clears fixed header
H1 Typography (Work Sans, uppercase, 300, -0.01em)
Mobile	36px / 42px
md (768+)	40px / 48px
lg (992+)	56px / 62px
2xl (1440+)	64px / 70px
3xl (2561+)	96px / 105px
Bottom margin	mb-6 (24px)
Subtitle
Visibility	hidden md:block — hidden on mobile
Style	Graphik 300, 16px → lg:18px, text-white leading-relaxed mb-10
CTA Links
Layout	flex flex-wrap gap-6 (24px), mb-6
Arrow icon	Inline SVG 20x20, text-accent — inherits theme color
Text	text-base text-white → hover:text-white/80
Video
Behavior	autoplay loop muted playsinline
Sources	WebM first, MP4 fallback, poster image

Layout
Container	.container-section (max-width 1440px)
Background	bg-white
Alignment	text-center
Padding
Top	pt-10 (40px) → lg:pt-16 (64px)
Bottom	pb-[60px]
Horizontal	Inherited: 24px → lg:40px
Arrow Icon
Size	w-6 h-auto (24px wide)
Opacity	opacity-60
Margin	mx-auto mb-8
H2 Typography (Graphik, -0.02em — STANDARD section heading)
Mobile (< 992)	34px / 40px, font-normal (400)
lg (992+)	56px / 62px, font-light (300)
3xl (2561+)	84px / 93px
Color	text-black

Grid Layout
Mobile	grid-template-columns: 1fr — stacked
lg (992+)	[text-start] 1fr [text-end media-start] 1fr [media-end] — 50/50
Min height (desktop)	min-height: 50vw
Background	bg-gray-50 (#f9f9f9)
Class	.split-right (defined in homepage <style>)
Text Column Padding
Mobile	py-12 px-6 (48 / 24px)
lg (992+)	py-16 pl-20 pr-12 (64 / 80 / 48px)
xl (1280+)	py-24 (96px)
> 1441px	.container-fluid-padding: pl clamp(80px, 8.25vw, 210px), pr clamp(72px, 7.43vw, 189px)
H3 Typography (Graphik 300, -0.02em)
Mobile (< 992)	30px / 36px
lg (992+)	48px / 1.08
3xl (2561+)	72px
Color	text-black
Bottom margin	mb-4 → lg:mb-6
Body Text
Size / weight	text-base → md:text-lg, font-normal (400), leading-[1.6]
Color	text-black, mb-8
Arrow CTA Links
Layout	flex flex-wrap gap-8 (32px)
Icon	arrow-right-line_1.svg (dark), 20x20
Hover	text-black/60
Media Column
Min height (mobile)	min-h-[280px]
Min height (desktop)	0 — stretches to grid row
Image	absolute inset-0 w-full h-full object-cover
Video (desktop)	hidden lg:block — autoplay loop muted
Image (mobile)	lg:hidden — static fallback

Differences from Light variant
Background	bg-dark (#17191d)
Grid	.split-left: [media-start] 1fr [media-end text-start] 1fr [text-end]
CSS reorder	Text first in DOM (SEO), CSS moves text→col 2, media→col 1
Text padding	.container-fluid-padding-r (mirrored: pr outer, pl inner)
H3 color	text-white
Body color	text-gray-300 with <span class="text-accent"> highlight
CTA hover	text-white/60
Arrow icon	arrow-right-line-green.svg (lime accent)
Product Theme
Class	.theme-botboxer (applied to section)
Effect	Overrides --color-accent from #ea484d (red) to #c6f144 (lime)
Where it applies	Any descendant using text-accent, bg-accent, accent CSS vars

Differences from base Light variant
Product theme	.theme-balanceplay → --color-accent: #8576ff (violet)
Extra element	Store card link after CTA links, mb-8 gap before it
Store Card
Element	<a class="store-card"> linking to checkout
Layout	flex items-center bg-white
Border	rounded-xl border-2 border-transparent → hover: border-color: var(--color-accent)
Image area	173x88px → md:216x110px, object-contain mix-blend-multiply
Text area	px-5 py-4; SVG label (h-5), title 16px/500, subtitle 14px text-gray-500
Media Column (layered)
Layer 1	<img> always visible (mobile + desktop fallback)
Layer 2	<video> stacked on top, hidden lg:block — loaded only on desktop
Image srcset	Responsive: 500w, 800w, 1080w, 2560w with sizes="100vw"

Layout
Height	min-h-[90vh]
Alignment	flex items-center — vertically centered
Content max-width	max-w-[900px] mx-auto w-full text-center
Overlay	bg-black/40 over video
Content z-index	z-10
Padding
Horizontal	px-6 → lg:px-20
Vertical	py-20 (80px)
Logo
Height	h-12 (48px), mx-auto mb-6
H2 Typography
Scale	Standard: 34/40 → lg:56/62 → 3xl:84/93
Color	text-white mb-6
Body Text
Style	text-base md:text-lg text-white leading-[1.6] mb-8
CTA Button
Same style	px-8 py-4 bg-accent text-white rounded-lg
Background Video
Behavior	autoplay loop muted playsinline, absolute inset-0 object-cover

Homepage Pattern
Sequence	right/white → left/dark → right/white → left/dark
Spacing	Wrapped in flex flex-col gap-[3px] — thin separator lines between sections
Heading	h2 (default) — larger scale

Design System

Typography

Cutting-Edge Interactive Sports Simulators

Next-Level Training Technology

Experience the Future of Sports Training

Advanced Snowsports Simulator Technology

Smart sensors capture your technique while a coach gives instant feedback

Colors

Product Themes

Breakpoints

Page Layout

Spacing

Our Products

Demo Interactive Sports Simulators

SkyTechSport Plus Subscription

World-Class Ski Slopes at Home

Demo inLos Angeles, CA

Virtual Demo

No Sports Simulators In Your City Yet?

Light

Accent

White

Dark

365 Days of Skiing

Reshaping the Way We Learn & Train

Cutting-Edge Interactive Sports Simulators

Bring the Mountains Closer to Home

Skiing With No Limits

The only snowsports simulator in the world trusted by the U.S. Ski & Snowboard Team.

Ski And Snowboard Simulators

BotBoxer

BalancePlay Pro

World-Class Ski Slopes at Home

Wengen

Kitzbuhel

PyeongChang

Sochi

Beaver Creek

Choose Your Space

Access Your Stats, Live Leaderboards and More

Real G-force Is Our Secret

Real-Time Vision

Training Mode

Intense and structured workouts for serious boxers.

Drills Mode

Practice to perfection.

Real-Time Vision

Precision Sensors

Terms of Service

1. Introduction

1.1 Definitions

Who We Are

We are a team of highly-skilled engineers, pro athletes, tech geeks and visionaries

We challenge the status quo

Our simulators are for accomplishing your ambitious goals

Real Sports -- Real Fun

Great For Any Skill Level

Multiple Rental Options

Our Staff Will Guide You

Intelligence at the Core

High Sensitivity Sensors

World-Famous Ski Resorts

Fully Immersive Virtual Reality

Powerful Motors Create Real G-Force

Software Creates the Sensation of Skiing

Live Leaderboards

Mountains of Business Ideas

Making That First Run

Getting a Workout

Improve Your Skiing

Two-Column Layout

High Sensitivity Sensors

World-Famous Ski Resorts

Fully Immersive Virtual Reality

Powerful Motors

The Most Up to Date Ski Technology

Host a League and Race Events

Infinite Slope With Infinite Possibilities

Trusted by professional instructors and national teams

Get Inspiration from Previous Projects

Demo in
Los Angeles, CA

Demo in
Los Angeles, CA