shadcn.io is not affiliated with official shadcn/ui
Split Layout Travel Video Hero Block for Ark UI
A compact split hero for a trip planner: the headline and a Shine Button beside a dark video player in a hairline frame, paused part of the way in over a poster of a day's itinerary.
Installation
Overview
A compact split hero between solid rails, for React with Ark UI. On one side sit an announcement link, the headline, a supporting sentence and two calls to action: a ShineButton, the only primary control, and an outline Button, both links. Past a divider, a dark video player in a hairline frame with + marks on its corners is paused 48 seconds into a 2:34 video. Its poster is built from UI over a map's contours: the day and the place, an itinerary card with three stops, and a play button; a control bar along its foot holds the scrubber, the buttons and the running time. The block follows your theme; only the player is dark, because it carries a dark scope. The product is Wanderlist, a fictional trip planner with local hosts. For travel services, streaming and media products, and any experience that's better watched than described.
FAQ
How do I put a real video in the player?
Replace the poster and the control bar inside Player with a video that fills the 16:9 box (size-full object-cover) with controls, a poster image and a track of captions, or embed a hosted player in an iframe with a title. Then remove aria-hidden and inert from the column: it's real content now and its controls must be reachable.
Why is the player dark when the page is light?
The page follows your theme, but a video frame is dark by nature, so only the player carries the dark class, and every token inside it takes the theme's dark values. Take the class off for a player that follows the page.
How do I change where the video is paused?
Edit PLAYBACK at the top of the file: elapsed and duration are the two times as shown, and percent is how far the scrubber's fill and thumb go. The control bar is always laid out left to right, even in right-to-left pages, as media controls are, and the thumb is placed with a logical offset.
What does a screen reader hear?
The announcement link, the headline (the block's one h1), the paragraph and the two links. The player is a drawing: it's hidden from assistive technology and out of the tab order, so nobody lands on a control that does nothing.
How does the layout adapt to phones?
The two columns stack below the lg breakpoint, the copy first, with the player under it and a rule between them. The player keeps its 16:9 shape, drops the itinerary card and uses a smaller play button below sm, and the Shine Button ends within the first screen, with nothing scrolling sideways down to 320 px.