Guide: Landing pages

• Make one Landing component. Place it in a 1440 px frame and in a 390 px frame. Container variants change the layout between them.
• Keep the content in a column of 1120 to 1200 px: mx-auto w-full max-w-6xl px-6.
• Use this order of sections: nav, hero, logos or social proof, three to six features, a deeper "how it works" section, pricing, questions, a last call to action, footer.
• In the hero, put a headline, one line under it, a main and a second call to action, and a product visual.
• Change the layout from section to section: a wide hero, two columns with the image on alternate sides, a grid of three, one centred statement. Do not repeat the same grid of cards.
• Make the hero headline 48 px on mobile and 56 to 72 px on desktop: text-5xl @3xl:text-7xl. Make the line under it 18 to 20 px. Give the hero 96 to 160 px of vertical padding on desktop.
• Use one accent colour for the main actions. Keep the rest neutral.
• Use images from the user with UploadImage, or placeholders with a name, such as <div data-name="Product shot" className="aspect-video rounded-2xl bg-muted" />.
• Put columns of links, a legal line and muted text in the footer.

Steps:

1. Define the parts that repeat: Button, Feature, PriceCard.
2. AddScreen('Landing', …) with the root element.
3. Insert one section in each call, with a data-name. Take a screenshot of each section.
4. Place('Landing', { width: 390 }), then take a screenshot of the mobile frame and fix it with container variants.

See the complete recipe in layout.md.