Common components for marketing sites and landing pages

Marketing sites and landing pages are for strangers visiting for the first time, and they have just one goal: help them understand what the product does, then get them to click that main button.

Start with the overall layout

• Landing Page: walks through the selling points from top to bottom around one core goal (sign up, buy, book), with each screen saying just one thing.
• Top Navigation Layout: the usual overall structure for marketing sites. The Navbar holds the logo, no more than seven sections, and one eye-catching button.

Then the common components

• Hero Section: the first screen. Say what the product does for people in one sentence, with one main button and a product screenshot. Don't write empty buzzwords like "Supercharge your growth" in the headline. When text sits on top of an image, watch the Color Contrast, or it'll be hard to read.
• Button: use only one most-prominent primary button style on the whole page, and a secondary style for other actions, so visitors know what to click.
• Card Grid: use three or four columns of Card components for features and customer stories, each with an icon or image plus two or three lines of text.
• Carousel: only good for rotating through a few equally important promo banners. Don't hide content that all matters in a carousel. A card grid is better.
• Image: set a fixed aspect ratio so images don't push content down as they load. Use Lazy Loading for images below the first screen, and compress big images.
• Collapse: an FAQ with one question and answer each, where users only expand the few they care about.
• Footer: holds the copyright, the ICP license number (required for sites hosted in mainland China), the privacy policy, and secondary links. It should stick to the bottom of the page even when the content is shorter than one screen.
• Floating Action Button: a long page can have one for "Back to top" or customer support. Don't stack several in the bottom-right corner.

Overall, pay attention to Visual Hierarchy: the size and color of headings, body text, and buttons should make it obvious what matters most. Also handle Responsive Design: on phones, collapse the navigation into a hamburger menu and turn multi-column cards into a single column.

How to describe it to AI

Build a landing page for a budgeting app with a top navigation layout. Navbar: logo, Features, Pricing, FAQ, and a "Start free trial" primary button on the right. Hero section: the headline "Log every expense in 3 seconds," a one-line subheading, one primary button, and an app screenshot on the right. Below that, in order: a three-column card grid for the three core features, customer reviews, an FAQ built with a collapse, and the footer.

Keep only one primary button style, "Start free trial," on the whole page. Lazy-load images below the first screen. Below 768px wide, switch the cards to a single column.