About this template
Before rebuilding a hero section for a travel brand, read Wanderful Hero: the composition and the specification behind it are both here. It leads with “Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure” and gives that line the frame rather than shrinking it into a card. The page is set in Inter, with the sizes fixed in the brief. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Treat it as the brief for a travel brand hero section that has to hold up under a rebuild, not just a first look.
Designed for
- Take the 640x470 frame and type from 15px to 17px and 11px spacing steps from this hero section before you take anything else.
- Made for a solo founder shipping one hero section for a travel brand and no design system behind them.
- People who brief a model on a hero section will use the 4,223-character prompt as the starting point.
What's included
- The bar shares the page grid. The wordmark holds the left edge and the links run to the right of it, all of it set in Inter so the bar belongs to the page below rather than to a separate system. The bar sits over the 640x470 composition without a background of its own, so the media runs edge to edge underneath it.
- Measured against the viewport. Sizes are quoted rather than inherited: type from 15px to 17px and 11px spacing steps. Swap the face or the copy and those relationships still hold. The smallest and largest values in that list set the range the composition works in. Where the brief is silent, it is silent on purpose.
- A bar with nothing spare. One action per bar. The reference was captured at 640x470.
- The brief names the steps. Spacing is quoted the same way (type from 15px to 17px and 11px spacing steps), not as a scale that grows on its own.
Motion & interaction
Scroll drives the composition
Parallax is the page's single scroll behaviour, so the effect has a defined place in the composition. The static layout underneath is unchanged, which keeps the composition readable with the effect disabled.
The controls are the interactive layer
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. Feedback is limited to the controls, so the composition stays still around them. Keep the pointer effects on the controls.
Making the hero section yours
You do not need to rebuild the hero section to make it yours. Replace the headline and the media, keep the scale (type from 15px to 17px and 11px spacing steps), and the layout still reads as designed. A different brand can reuse the whole frame.
How Wanderful Hero sequences the first read
Attention is directed rather than left to chance. The page says it out loud: “Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure”. The sequence runs navigation, the headline, the stats row and the background clip, and each stop is sized against type from 15px to 17px and 11px spacing steps so nothing arrives out of order. A travel reader gets the offer before the options.
Reading Wanderful Hero as a spec
A screenshot tells you what the page looks like; the brief tells you why. type from 15px to 17px and 11px spacing steps close the gap between the two. Nothing in this hero section depends on a default.
Frequently asked questions
How long is the prompt behind Wanderful Hero?
The captured brief runs 4,223 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Why does the entry name React and Tailwind CSS at all?
Wanderful Hero was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
Why is Wanderful Hero's prompt not printed here?
Everything quoted on the page comes from the captured 4,223-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
