About this template
Datacore Booking shows one way to build the hero section for an AI or SaaS product, and publishes the instructions that produced it. The headline reads “Book your perfect stay instantly and hassle-free”, and the rest of the hero section is arranged around it. Colour is limited to black #171717 underneath, gray #D4D4D4 for the type and bright indigo #7B39FC carrying the accents, set in Manrope. Delivery is React and Tailwind CSS, captured at 800x553 so the frame is fixed before any code is written. Keep it open while you write: the 2,826-character brief is the part that transfers to your own page.
Designed for
- Teams building an AI or SaaS product hero section who want the measured detail (14px spacing steps) rather than a screenshot to copy.
- Made for content leads rewriting a hero section whose headline has to stay as long as Datacore Booking's.
- Made for a team that already has Manrope loaded, a 800x553 export waiting and a build slot this week.
What's included
- Links before the action. The top row holds the wordmark, four to five links and a single action tinted #7B39FC, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #7B39FC action is the only element in the bar with any weight.
- The sizes are in the brief, not in a scale. Nothing here is eyeballed. The spec fixes 14px spacing steps, and the rest of the layout derives from those values. A rebuild that hits those numbers looks like the reference without further tuning. Where the brief is silent, it is silent on purpose.
- Type sets the hierarchy. Typography is Manrope, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. Substituting the face is possible, but the proportions have to survive the swap.
- The nav is deliberately thin. The bar sits over the 800x553 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Hover where it means something
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. Hover and focus are specified together, so the pointer and the keyboard get the same information.
Motion that stays out of the way
There is no scroll library here: the 800x553 composition holds still and only the elements that respond to you move. The composition holds still, so the hierarchy has to carry the page and it does.
What an AI or SaaS product gains here
Most SaaS pages fail by adding: more sections, more gradients, more claims. Datacore Booking goes the other way. The page says it out loud: “Book your perfect stay instantly and hassle-free”. The composition stays on black #171717 with bright indigo #7B39FC for actions, which is enough to look deliberate. Datacore Booking states the offer once and lets the composition repeat it rather than adding a second claim.
How the hero section reflows
A fixed desktop scale would have been easier. The brief adds a clamp between 96px and 14px, which is what keeps the display line proportionate between widths. The scale changes with the viewport; the sequence does not.
How Datacore Booking sequences the first read
The page has a deliberate order. Navigation establishes the product and gives a returning visitor a familiar way around. The headline takes the display size, the supporting line explains the offer, and the bright indigo #7B39FC accent marks the primary action, so the next step is never in question. Nothing else competes: there is no card grid before the first decision, which is what keeps the hero section from feeling heavy in SaaS work. A SaaS reader gets the offer before the options.
Frequently asked questions
How long is the prompt behind Datacore Booking?
It is a build brief rather than a mood description: it names the composition at 800x553, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Datacore Booking 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.
Can I ship a page rebuilt from Datacore Booking without crediting it?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 800x553.
