![Placeholder hero](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
<rect fill="%23cbd5e1" width="1920" height="1080"/>
<rect fill="%2394a3b8" x="900" y="526" width="120" height="28" rx="4"/>
<text x="960" y="545" font-family="system-ui,sans-serif" font-size="14" fill="%23fff" text-anchor="middle">Hero 1920×1080</text>
</svg>)
Page Layout Preview
Sandbox for verifying page assembly. All images are placeholders.
Section Heading Example
Subtitle text goes here to describe the section
Split Section — Direction Right
This is a standard split section with text on the left and media on the right. The layout switches to stacked on mobile. Content area uses max-w-[1440px] with px-6 on mobile and px-10 on desktop.
![Placeholder](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="960" height="720" viewBox="0 0 960 720">
<rect fill="%23cbd5e1" width="960" height="720"/>
<rect fill="%2394a3b8" x="420" y="346" width="120" height="28" rx="4"/>
<text x="480" y="365" font-family="system-ui,sans-serif" font-size="14" fill="%23fff" text-anchor="middle">Media 960×720</text>
</svg>)
Split Section — Direction Left, Dark
Dark theme variant with media on the left. Demonstrates how text color inverts and how padding behaves in the dark theme context.
Split 70/30 — Media Left
Wide-media variant: image takes 70% and fills the full section height. Text column is 30% with the same padding and type as the standard split.
![Placeholder wide](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1344" height="800" viewBox="0 0 1344 800">
<rect fill="%23cbd5e1" width="1344" height="800"/>
<rect fill="%2394a3b8" x="612" y="386" width="120" height="28" rx="4"/>
<text x="672" y="405" font-family="system-ui,sans-serif" font-size="14" fill="%23fff" text-anchor="middle">Media 1344×800</text>
</svg>)
Split 70/30 — Media Right
Same variant with media on the right side. Image fills the full height of the section.
Card Grid — 3 Columns
Cards adapt from 1-column on mobile to 3 on desktop
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<rect fill="%23cbd5e1" width="64" height="64"/>
<rect fill="%2394a3b8" x="-28" y="18" width="120" height="28" rx="4"/>
<text x="32" y="37" font-family="system-ui,sans-serif" font-size="14" fill="%23fff" text-anchor="middle">Icon</text>
</svg>)
Feature One
Description of the first feature. This demonstrates a card with an icon, title, and text block.
Feature Two
Description of the second feature. Cards maintain equal height within a row.
Feature Three
Description of the third feature. The grid wraps naturally on smaller screens.
Benefits Section
Benefit Item One
Explanation of the first benefit. Benefits sections alternate between title+text pairs in a vertical list.
Benefit Item Two
Explanation of the second benefit. On desktop, these display in a two-column layout.
Benefit Item Three
Explanation of the third benefit. Content container is constrained to max-w-[1440px].
![Full-bleed placeholder](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="600" viewBox="0 0 1920 600">
<rect fill="%23cbd5e1" width="1920" height="600"/>
<rect fill="%2394a3b8" x="900" y="286" width="120" height="28" rx="4"/>
<text x="960" y="305" font-family="system-ui,sans-serif" font-size="14" fill="%23fff" text-anchor="middle">Full-bleed 1920×600</text>
</svg>)
Card Grid — 2 Columns, Dark
Item Alpha
Two-column layout on desktop. Single column on mobile. Dark background with light text.
Item Beta
Cards maintain consistent padding and spacing across all breakpoints.
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.
Demo in
Los Angeles, CA
Feel the slope at our LA showroom
Smart sensors capture your technique while a coach gives instant feedback.
Virtual Demo
Book a 1-on-1 demo with a product expert
No Sports Simulators In Your City Yet?
Notify me when the SkyTechSport simulator in my area becomes available!
CTA Section
This is a narrow centered CTA block. It uses SectionHeading in section mode with a Button in the default slot. Typical pattern for call-to-action at the bottom of a page.