About this template
Alertix was captured at 1932x1400 and kept as a specification rather than as a gallery image. The page's own headline reads “Stay Ahead With *Cutting-Edge*”, and the composition is built around those exact words. The whole page is built on deep blue #0A0F14 underneath, muted teal #C3DFE8 for the type and blue #1D1D6D carrying the accents. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. The brief spends its motion budget on a looping video bed. It is the right reference for an AI or SaaS product hero section that has to look deliberate on the first screen.
Designed for
- In-house squads extending this hero section who need 120px spacing steps carried into the new blocks unchanged.
- People who brief a model on a hero section will use the 3,245-character prompt as the starting point.
- Product marketers who need the hero section to still read with 7.9s of looping video behind the copy.
What's included
- The nav is deliberately thin. Links sit on one line at a single size, and the #1D1D6D action closes the row on the right so the eye finishes where the navigation ends. The links are set below the wordmark in size, and the #1D1D6D action is the only element in the bar with any weight.
- Values you can check. The layout is solved against fixed values (120px spacing steps), which is what keeps the first screen composed at any width. The list is short enough that a reviewer can check it element by element.
- Video at the bottom layer. The first screen is a single clip at 1932x1400, and everything else is arranged on top of it. A poster frame at 1932x1400 holds the composition when autoplay is unavailable, so the layout never collapses. Export at 1932x1400 or wider to keep the crop honest.
- Links before the action. The bar sits over the 1932x1400 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
The loop does the ambient work
Ambient movement comes from the 7.9s 1932x1400 loop rather than from scroll effects, which keeps the page calm and the type readable. Because it is muted, the loop can run under the copy without competing for sound or focus.
Hover where it means something
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card), so the page feels responsive without turning every element into a target. Feedback is limited to the controls, so the composition stays still around them.
What to change first in Alertix
A template asks you to accept its layout; this reference asks you to keep it and change everything inside. The difference is that 120px spacing steps stay fixed while the subject moves. The subject is the part that should change.
How the hero section reflows
Responsive here means the scale changes and the sequence does not. the navigation collapses into a mobile menu, and the reading order stays where the brief put it. The order is the last thing to change.
How Alertix sequences the first read
When a SaaS reader lands on a single screen, they scan before they read. The layout answers that: navigation and the background clip are sized to be scanned, with 120px spacing steps keeping each stop distinct. A SaaS reader gets the offer before the options.
Frequently asked questions
What does the brief behind Alertix actually contain?
It is a build brief rather than a mood description: it names the composition at 1932x1400, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Alertix depends on React and Tailwind CSS?
Alertix 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 use Alertix in a client project?
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 1932x1400.
