How to build a creative studio landing page with v0

Rule of thumb: if the site is a formality (somewhere to send people who already know you, updated twice a year) rent one and spend the time on the work instead. If your site is how you get hired, if the reel is long or in more than one cut, or if you can already name the thing you want that a builder will not let you do, that is the case for owning it. The tell is whether you have ever described your own site as "fine".

* Two honest ways to make a contact form reach you, and both start free. A hosted form endpoint is the no-server route: Basin’s free tier covers one endpoint and 50 submissions a month with basic spam filtering, and its own page notes that filtered spam does not count against that allowance. Paid plans start at $12.50/mo billed yearly for 250 submissions. If you would rather own the whole path, one small function of your own plus an email service does it. Resend sends 3,000 emails a month free, capped at 100 a day. A studio fielding a few inquiries a week fits inside either free tier indefinitely.

Either way the page is yours, and nothing about it is metered: not the length of your reel, not the number of projects on it, not how many people are allowed to edit it. The difference is who does the work: pay someone up front, or describe what you want and build it yourself.

Prices and rates from usebasin.com, resend.com, developex.com, v0.app, v0.app and vercel.com, checked August 2026.

The database integration v0 offers is the one thing this build does not want. What replaces it is a destination for the contact form, and that is a URL you paste in at step 05.

1. 01

   Settle the palette on an empty page

   v0 will happily generate a finished-looking section in the first prompt, which is the problem: whatever colours it picks become the page. Spend the first prompt on the theme and nothing else.

   PromptSet up the projectCopy

   This is a single-page marketing site for a creative video studio. It has no backend and no data (no database integration, no authentication, nothing stored) so please do not add or suggest one. Start with the theme and nothing else: define the colours once, in a single place I can edit, as a near-black ground, a light foreground, one muted grey for secondary text, and two accents I will name later. Headings take a display face, body copy something ordinary. Then generate an empty page carrying only the fixed nav, so what I am approving is a palette rather than a section.

   An empty styled page is one prompt. Recolouring seven finished sections is seven.

2. 02

   The whole page, plain, in one prompt

   Get every section stacked and unstyled, then scroll it. v0 is fast enough at this that it is tempting to skip straight to the beautiful version, but reordering a plain page is a sentence and reordering a finished one is an afternoon.

   PromptLay out the pageCopy

   Build the page as full-width stacked sections in this order: hero, featured work, awards, about, services, team, contact, footer. Give each an id so the nav links scroll to it, and collapse the nav into a hamburger menu on small screens. Keep it deliberately plain: real headings, placeholder paragraphs, grey blocks where images and video go. I want to scroll the whole thing in the preview and settle the order before anything is styled.

   Ask for it plain and mean it. v0 defaults to finished-looking, which hides the ordering problem you are trying to see.

3. 03

   The hero, poster frame included

   The single most-viewed part of the page. Ask for the poster image and the reduced-motion path in this prompt rather than a later one, because both change how the markup is built.

   PromptBuild the heroCopy

   Build the hero, and start from the case people forget: if a visitor’s system asks for reduced motion, the video must not play at all. They get a still frame, and every other element stays exactly where it was. With that settled, the ordinary case is a full-screen background video, muted and looping and autoplaying, sitting under a dark overlay so text on top stays legible whatever frame is showing, with that same still displayed until playback can begin. Above it: a headline, a supporting line, one button. The fixed nav starts transparent and takes a solid background after about 50px of scroll. Use a placeholder video and tell me where mine goes.

   Once it exists, use Design mode for the type sizing rather than prompting for it. Nudging a heading is faster to do than to describe.

4. 04

   Four sections, one reveal animation

   Work, awards, services and team share a shape, so build them together and give them one shared motion component. Four separate animations is how a page starts feeling restless.

   PromptBuild the work and proof sectionsCopy

   Four more sections, in page order. Featured work carries one large video, with the project name, the client, and a short write-up set beside it. Structure it so swapping an embed for a file of my own is a one-line change rather than a rebuild. The awards wall is a responsive grid of laurels, and each award’s name and year has to be real text rather than pixels inside an image. Every service gets a card: a name, a sentence, room for a from-price. The team is a grid of photographs, each with a name, a role, and a single line. Then one reveal animation, written once as a shared component (a brief fade and rise as something enters the viewport, switched off completely under reduced motion) applied to all four rather than reinvented per section.

   Keep this in the same chat as everything above, so restoring an earlier version does not mean losing sections built after it.

5. 05

   One route, which is this build’s entire backend

   The moment v0 usually hands off to a database, and here it does not need to. One route that forwards the message on is the whole of it, the only server-side file this page will ever contain, and the reason the finished thing is still a folder of files plus one function.

   PromptBuild the form and connect itCopy

   Build the contact form (name, email, what they want made, a message) validated before it submits, with inline errors naming the actual problem. Then add exactly one server route that receives a submission and forwards it through an email service, reading the key from an environment variable. That route is the only server-side file this project should ever contain, so keep it to one and tell me if you are tempted to add a second. Treat a failed send as carefully as a successful one, and put a confirmation on the page that stays long enough to be read. Give the form a hidden honeypot field and drop anything that fills it. No database, and no key anywhere the browser can download it.

   One route is all this page needs. Keep it to one and the site stays a folder of files plus a single function, which is about the cheapest thing there is to host.

6. 06
   Destination

   Three passes, a pull request, and a domain

   The three passes that decide whether the page works away from your desk, then a pull request and a deploy.

   PromptTune itCopy

   Three passes before this goes anywhere, and I want to know what changed in each rather than a silent commit. First, contrast and keyboard: on a dark palette, check every text colour against whatever sits behind it, keep focus rings visible rather than styled away, walk the tab order, and confirm the reduced-motion version is missing nothing. Second, weight: report what each image and video actually costs in kilobytes, re-encode the stills to a modern format at the size they are displayed rather than the size they were exported, defer everything under the fold, leave the hero as the only thing loading eagerly, and tell me outright if the video is simply too big instead of engineering around it. Third, the link: title, description, and an Open Graph image, so a URL pasted into a chat renders as a card rather than a bare address.

   PromptPublish itCopy

   Take this live. Walk me through publishing to Vercel, or opening a pull request from this chat’s branch and merging it if I would rather review the diff first. Then tell me what to check on the deployed URL rather than in the preview, starting with opening it on a phone with wi-fi off and timing the hero. Finish with what to improve next, in priority order.

   Whether merging deploys depends on how the linked Vercel project is configured, so check that once rather than assuming it.

Read this project the way a stranger reading its published files would. List every value that ends up in the built bundle and should not be public: keys, tokens, private URLs, anything left in a comment. Then list every request the finished page makes to a third party, what each one sends, and any cookie it sets. Finally, tell me what the contact form does with a submission, where that submission ends up, and what currently stops a bot filling it in a thousand times.

The one rule that matters: a static site has no secrets: if a value is in the project, treat it as published. Anything that must stay private belongs behind a function on a server, not in the page.

Any of these will serve the page. Two things to check rather than assume: whether the free tier permits commercial use, and what its bandwidth allowance is. A hero video changes that arithmetic completely, and a page that goes mildly viral is exactly when you find out. Read the plan terms for the host you pick, not just the headline price.

Neither of the first two stores anything you would call a database. They move a message from your page to your inbox, and that is the whole of this build’s server side.

Add a single serverless function to this project (the smallest one my host supports) that reads an AI provider key from an environment variable, accepts a short JSON request, calls the model, and returns the text. Do not let the key reach the browser bundle, keep the function to one file, and show me how to set that environment variable on my host rather than in the repository.

When the contact form is submitted, send the message text through the ai function and have it return a short structured summary: the deliverable, the timeline, any budget mentioned, and any references named, with "not stated" where the message does not say. Include that summary above the original message in whatever reaches my inbox, and never in place of it.

Go through every image and video on the page and draft alt text for each one (what is actually in the frame, in a sentence, not the file name) plus a caption track for any video that has speech. Put them in a single list I can edit before you write any of it into the code, since I know what the work is and you are guessing.

Read the whole page, then write five alternative versions of the hero headline and its supporting line: same claim, different emphasis: one leading on the craft, one on the outcome for the client, one on the kind of work we want more of, one shorter than everything else, one that names our niche outright. Keep each under twelve words and match the voice already on the page.

v0 doesn’t ship its own model for these prompts, so you bring an API key for whichever provider you want, and v0 writes the route that calls it. Start with a cheap model while you’re still iterating on the prompt itself, then swap in a stronger one for the version that ships, and keep every AI feature behind that one route so there’s only one key to rotate.