About this template
Zyphor keeps its decision trail: the brief that produced this hero section runs 3,562 characters. The page's own headline reads “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive”, and the composition is built around those exact words. The colour scheme is deep blue #0B0C10 underneath, and the page is set in Inter. Delivery is React and Tailwind CSS, captured at 1930x1400 so the frame is fixed before any code is written. Motion is confined to a looping video bed. Start from the captured brief, then edit the hero section rather than rebuilding it from scratch.
Designed for
- Start from 20px spacing steps and let the palette follow, because the spacing is what makes this hero section read.
- Product marketers who need the hero section to still read with 7.2s of looping video behind the copy.
- Made for content leads rewriting a hero section whose headline has to stay as long as Zyphor's.
What's included
- The nav is deliberately thin. Navigation is a single row with no second level under it. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1930x1400 composition without a background of its own, so the media runs edge to edge underneath it. Give the wordmark no more room than its type needs.
- Sizes fixed in the brief. The brief names the numbers: 20px spacing steps. That is why the composition holds together, because there is no invented spacing step between the type and the frame. The list is short enough that a reviewer can check it element by element.
- The type carries the tone. Type is the styling system here: Inter at the display size, the same face across the interface, and no second accent colour doing the work. The size steps are fixed values, which is what lets a face swap keep the same hierarchy.
- Top row: wordmark, links, one action. Nothing in the bar animates on scroll; it is present from the first frame and stays out of the way after that. Copy this pattern when you need navigation that survives a loud first screen.
Motion & interaction
Pointer states, nothing more
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. Press states are specified as well as hover, so a tap gives the same confirmation as a click. Do not animate layout on hover.
Ambient motion without a scroll library
One 7.2s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The loop is cropped to cover, which means the composition does not depend on a particular frame size.
The numbers behind the hero section
Committing to 20px spacing steps trades flexibility for repeatability. That is the point of the reference: the same page in a different brand, without a new set of guesses. Nothing in this hero section depends on a default.
The order behind the hero section
A strict order costs you flexibility later. Add a section above the fold and 20px spacing steps have to be re-cut, because the sequence is load-bearing rather than decorative. A SaaS reader gets the offer before the options.
What this hero section gets right
Suppose your media is louder than your copy. That is the case this composition is built for. The media is a 7.2s 1930x1400 loop. The frame stays quiet and 20px spacing steps keep the reader on the text. Zyphor states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
How long is the prompt behind Zyphor?
It is a build brief rather than a mood description: it names the composition at 1930x1400, 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?
Zyphor 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 Zyphor 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 1930x1400.
