About this template
Nexora Automation was captured at 800x552 and kept as a specification rather than as a gallery image. The headline reads “Now with GPT-5 support ✨”, and the rest of the hero section is arranged around it. Colour is limited to white #FFFFFF underneath and deep teal #092128 for the type, set in Instrument Serif. Delivery is React and Tailwind CSS, captured at 800x552 so the frame is fixed before any code is written. The brief spends its motion budget on 0.6s transitions. Keep it open while you write: the 5,344-character brief is the part that transfers to your own page.
Designed for
- If three people have to edit this hero section, give content leads 100vh sections and 25px spacing steps rather than a screenshot.
- Made for content leads rewriting a hero section whose headline has to stay as long as Nexora Automation's.
- If the launch is close, take the 800x552 frame and the 0.6s entrance and leave the rest of the composition alone.
What's included
- The nav is deliberately thin. The bar overlays the hero section instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 800x552 composition without a background of its own, so the media runs edge to edge underneath it.
- Tracking tightens as it grows. The type is Instrument Serif at the top of the scale, with the supporting copy dropped well below it so the hierarchy needs no colour to read. Tracking is set per size, so the display line and the caption do not share one letter-spacing value. One face, clear roles.
- One row, no drawers. A short run of links and a single action sit over the hero section, held at 100vh sections and 25px spacing steps so the bar never competes with the composition behind it.
- Numbers carried into the build. Sizes were read off the render at 800x552: 100vh sections, 25px spacing steps and 0.6s transitions. The type and the layout share the same steps, so nothing drifts when one of them is substituted.
Motion & interaction
Short, matched timings
Motion in the controls is short and repeatable: 0.6s on each state change. Easing is specified alongside the duration (0.6s), so a rebuild cannot quietly substitute a different feel.
A small interactive surface
Interaction is local to each control here (hover states on the buttons and links rather than on every card), so nothing on the page moves as a side effect. Nothing on the page opens a modal or hijacks the scroll; the interactions stay local to the element.
How Nexora Automation sequences the first read
Read the first screen in one pass and the offer is already clear. navigation, the headline, the announcement badge, the stats row and the card grid arrive in sequence, separated by 100vh sections and 25px spacing steps rather than by decorative dividers. A SaaS reader gets the offer before the options.
How the hero section reflows
You cannot fix a narrow screen by shrinking it. This brief handles the change in the type and the navigation instead: the section is held at 100vh. The hierarchy is what survives the reflow.
What moves in Nexora Automation
Motion is limited to 0.6s transitions and hover and press states; it runs once on entry and then gets out of the way, which is the right budget for the hero section to stay readable. Nothing animates for its own sake in this hero section.
Frequently asked questions
What do I get when I copy the Nexora Automation brief?
It is a build brief rather than a mood description: it names the composition at 800x552, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Nexora Automation hero section in a different stack?
Nexora Automation 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.
Where did the Nexora Automation design come from?
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 800x552.
