About this template
AI Trip Planner solves the pricing section problem for a travel brand with a single captured brief. The headline reads “Where will you go next?”, and the rest of the pricing section is arranged around it. The colour scheme is white #FAFAFA underneath and black #0A0A0A for the type, and the page is set in Geist. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. The page keeps its motion to a looping video bed. Take it on when the pricing section needs a decided order before any new sections are added.
Designed for
- Take the 1470x1080 frame and type from 15px to 40px and 15px spacing steps from this pricing section before you take anything else.
- Made for studios that have to explain 760px behaviour to a client without building a prototype first.
- Studio leads who run several projects at once will use this pricing section as the pattern every other page copies.
What's included
- The nav is deliberately thin. A short run of links and a single action sit over the pricing section, held at type from 15px to 40px and 15px spacing steps so the bar never competes with the composition behind it. Below 760px the links collapse instead of wrapping onto a second line.
- The video is the background, not a panel. Video sits on the bottom layer of the 1470x1080 composition, with the type arranged above it and nothing in between. A poster frame at 1470x1080 holds the composition when autoplay is unavailable, so the layout never collapses. Export at 1470x1080 or wider to keep the crop honest.
- The announcement pill. One badge, one message: the pill sits above the headline in Geist at the smallest step, and nothing else competes for that slot. The pill sits at the smallest step in the brief, so it reads as a label rather than as a second title.
- The form is the whole first screen. There is one decision to make here: fill the form or leave. Everything else on the screen supports that decision. Error and focus states are specified rather than left to the browser. Specify the focus state.
Motion & interaction
Interaction is on the controls
The pointer work is small and specified: hover states on the buttons and links rather than on every card, applied to the elements that already look interactive. Nothing on the page opens a modal or hijacks the scroll; the interactions stay local to the element.
The loop does the ambient work
One 6s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The clip is short enough to loop without a visible seam, which matters more than its resolution.
How AI Trip Planner sequences the first read
If your page currently leads with features, this is the order to copy: navigation, the headline, the announcement badge, the stats row and the card grid in front, the supporting detail after, and type from 15px to 40px and 15px spacing steps setting the distance. A travel reader gets the offer before the options.
The argument this pricing section makes
A tint layer over the media would have been the easy fix. The brief leaves it off. The media is a 6s 1470x1080 loop. The copy still holds because type from 15px to 40px and 15px spacing steps keep the frame calm. It gives a travel reader the shortest honest route to the offer.
What to change first in AI Trip Planner
Re-skinning the palette first is the usual mistake. It changes the mood without touching the composition, and type from 15px to 40px and 15px spacing steps still carry the layout; do the copy and media first and the palette last. The composition is the reusable part, and it survives a different brand.
Frequently asked questions
What does the brief behind AI Trip Planner actually contain?
The captured brief runs 6,398 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.
What can I do with the AI Trip Planner brief once I have it?
Everything quoted on the page comes from the captured 6,398-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How much of AI Trip Planner depends on React and Tailwind CSS?
AI Trip Planner 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.
