Solva AI support copilot landing page

# Pastel-photo AI SaaS landing page: build prompt

Build a long, light-mode marketing page for a B2B AI product. The page is warm off-white and quiet. Headlines use a serif display face, body text uses a grotesk, and all buttons are near-black. The only colour comes from soft-focus pastel nature photographs: wildflowers and tall grass against a pale blue-teal sky. Crisp white product-UI cards float on top of those photos. Everything else is ink, grey and hairline borders. The page is about 13,000px tall at 1440px wide.

## Structure

- **Canvas:** 1440px wide. Page background is #FAF9F6. No section changes the background colour.
- **Container:** max-width 1360px, 40px side padding, centred. Content runs almost edge to edge, and the side margins are narrow on purpose.
- **Grid:** 12 columns, 24px gutter.

Sections, top to bottom:

1. **Nav bar.** The logo mark and wordmark sit on the left. 4 text links sit in the centre. A "Log in" text link and a small dark button sit on the right.
2. **Hero.** Two columns.
   - Left, cols 1–5: a pill badge, a 2-line headline, a 3-line paragraph and a dark button.
   - Right, cols 6–12: a near-square pastel photo card with an inbox-style app UI mockup floating over it.
3. **Logo wall.** One row of 6 grey customer logos (small icon plus wordmark) spread evenly across the container.
4. **"Three ways" cards.** An eyebrow and a 2-line H2, left-aligned. Below them, 3 equal cards. Each card is a 3:2 pastel photo with a small white UI snippet inset, followed by a title and a 2-line description under the photo.
5. **Feature callouts.** An eyebrow and a 2-line H2, then 3 large alternating-content rows. Every row has the image on the left and the text on the right.
   - Image: cols 1–7, a pastel photo with a floating UI card. Row A's card is a metric card with two large numbers. Row B's is a chat/reply card. Row C's is a bar-chart card with one big number.
   - Text: cols 9–12, vertically centred against the image. It holds a 2–3 line H3, a 3–4 line paragraph and a small dark button.
6. **Platform tabs.** An eyebrow and a 2-line H2, then one large bordered panel.
   - The panel starts with a full-width row of 4 equal tabs. The first tab is active.
   - Below the tabs, on the left (about 30%), sit an H3 of 2–3 lines, 3 checklist items (icon, bold title, 1–2 line description) and a dark button.
   - On the right (about 65%) is a wide pastel photo with a large dashboard/table UI mockup inset.
7. **Security.** Centred block: an eyebrow, a 2-line H2 and a 2-line paragraph. Below it, a 4-column row of small items. Each item has an icon in a 32px bordered square, a title and a 2-line description. The columns are separated by 1px vertical rules.
8. **Pricing.** Centred content, top to bottom:
   - an eyebrow, a 2-line H2, and a Monthly/Yearly toggle with a small "save" pill;
   - 3 equal cards: Free tier, Pro tier (highlighted) and Custom tier;
   - a centred 1-line trust caption;
   - one row of 6 grey logos.
9. **Case-study testimonial.**
   - A left-aligned eyebrow and a 2-line H2.
   - Below them, a portrait photo on the left (cols 1–4, about 2:3) showing a person holding a phone in soft light, with a round play button.
   - On the right (cols 6–12), from top to bottom:
     - a large serif pull quote of 5–6 lines;
     - the name and role, with a company logo aligned top-right;
     - a row of 3 big stats with labels, separated by 1px rules.
10. **Testimonial wall.** An eyebrow and a 2-line H2, then a 4-column masonry of about 12 bordered quote cards. The bottom row fades into the background under a gradient.
11. **FAQ.** A left-aligned eyebrow and a 2-line H2, then a 2-column accordion with 3 rows per column. Each row is a question with a plus icon on the right and a 1px bottom rule.
12. **CTA band.** A full-container-width rounded card, about 520px tall, filled with a pastel photo. On the left sit a 2-line H2, a 2-line paragraph and a dark button, all in ink.
13. **Footer.** Top area:
   - Left (about 30%): the logo and a 2–3 line description.
   - Right: 4 link columns, each with a heading and 4–5 links.

   Below that, a bottom bar with a 1px top rule: copyright on the left, a credit line on the right.

## Scroll map

No motion report was provided. Heights are estimated from the page composite at a 1440×900 viewport. Every section scrolls normally, with no pinning.

1. Nav: 64px (0.07 vp). Scroll consumed: 64px. Kind: static (inferred).
2. Hero: 850px (0.94 vp). Scroll consumed: 850px. Kind: entrance.
3. Logo wall: 140px (0.16 vp). Scroll consumed: 140px. Kind: entrance.
4. Three-ways cards: 800px (0.89 vp). Scroll consumed: 800px. Kind: entrance.
5. Feature callouts: 3250px (3.6 vp), of which each row is about 900px. Scroll consumed: 3250px. Kind: entrance.
6. Platform tabs: 1400px (1.56 vp). Scroll consumed: 1400px. Kind: entrance.
7. Security: 750px (0.83 vp). Scroll consumed: 750px. Kind: entrance.
8. Pricing: 1450px (1.61 vp). Scroll consumed: 1450px. Kind: entrance.
9. Case-study testimonial: 1170px (1.3 vp). Scroll consumed: 1170px. Kind: entrance.
10. Testimonial wall: 1380px (1.53 vp). Scroll consumed: 1380px. Kind: entrance.
11. FAQ: 780px (0.87 vp). Scroll consumed: 780px. Kind: entrance.
12. CTA band: 530px (0.59 vp). Scroll consumed: 530px. Kind: entrance.
13. Footer: 440px (0.49 vp). Scroll consumed: 440px. Kind: static.

**Total page height:** about 13,000px (about 14.4 viewports).

## Spacing

- **Between sections:** 160–200px of padding (inferred). Use 96px top and bottom per section as the base. The tighter pairs are:
  - Hero → Logo wall: 64px.
  - Pricing cards → trust caption: 48px.
- **Header block:** eyebrow → H2 is 16px. H2 → content is 64px. Where there is a paragraph, H2 → paragraph is 20px.
- **Hero:**
  - Nav → hero top: 48px.
  - Badge → H1: 24px.
  - H1 → paragraph: 20px.
  - Paragraph → button: 32px.
  - The hero image is about 720×670px.
- **Section 4 cards:** 24px gap between cards. Image → title is 20px. Title → description is 8px.
- **Section 5 rows:** 160px between rows. The image column is about 800px wide and 780–900px tall.
  - Text column: H3 → paragraph is 16px, and paragraph → button is 28px.
- **Section 6 panel:**
  - The tab row is 56px tall.
  - The panel content has 40px padding.
  - Checklist items are 24px apart.
  - The column gap is 48px.
- **Security row:** 32px of padding on each side of every vertical rule.
- **Pricing cards:**
  - 24px gap between cards and 32px internal padding.
  - Price → description is 12px, and description → list is 24px.
  - List items are 10px apart.
  - The button is pinned to the card bottom.
- **Testimonial wall:** 20px gap in both directions. Cards have 24px padding.
- **FAQ:** 48px column gap. Rows are 64px tall.
- **CTA band:** 64px internal padding on the left.

## Type

Use two families:

- **Display:** a serif display face with sharp, moderate contrast, weight 400. Free stand-in: *Newsreader* (or *Instrument Serif*).
- **Everything else:** a neutral grotesk. Free stand-in: *Inter*.

The body anchor is **17px**.

| Level | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| H1 hero | serif | 3.5× → 60px | 1.05 | −0.02em | 400 |
| H2 section | serif | 3.1× → 52px | 1.08 | −0.02em | 400 |
| CTA H2 | serif | 3.3× → 56px | 1.05 | −0.02em | 400 |
| H3 feature row / panel | serif | 1.8× → 30px | 1.15 | −0.01em | 400 |
| Pull quote | serif | 1.75× → 30px | 1.3 | −0.01em | 400 |
| Stat / price number | serif | 2.4× → 40px | 1.0 | −0.02em | 400 |
| Card title | grotesk | 1.06× → 18px | 1.3 | −0.005em | 500 |
| Body | grotesk | 17px | 1.55 | 0 | 400 |
| Small body (card desc, FAQ question, list) | grotesk | 0.88× → 15px | 1.5 | 0 | 400 |
| Eyebrow / caption / meta | grotesk | 0.76× → 13px | 1.4 | 0 | 400 |
| Nav link / button | grotesk | 14px | 1 | 0 | 500 |
| Text inside UI mockups | grotesk | 12px | 1.4 | 0 | 400–500 |

- **Eyebrows:** a 6px dot followed by the label, sentence case, in grey. Never uppercase.
- **Headlines:** always two lines, sentence case. Each line is a short, complete clause of 2–4 words.
- **Max line lengths:**
  - Body: 44ch.
  - Hero paragraph: about 420px.
  - Section 5 text column: about 380px.
  - Pull quote: about 760px.
  - H2: about 640px.

## Colour

| Hex | Role |
|---|---|
| #FAF9F6 | Page background. Covers about 85% of the surface. |
| #FFFFFF | Card fills, UI mockups, active tab, pricing cards. |
| #D9D9D6 | Every border, rule and divider, plus the inactive toggle track. |
| #010101 | Headlines, primary text, filled buttons, the "New" chip in the badge, chart bars in the mockups. |
| #6B6B66 | Body paragraphs, eyebrows, captions, logos (inferred secondary grey). |
| #67A9B6 | The single accent: dusty teal. |

Where the teal may appear:

- It comes mostly from the photographs' skies.
- As a UI colour it is limited to the 6px eyebrow dots, the checklist icons, the "save" pill text, and one highlighted series or status dot inside mockups.
- It is never used on buttons, headlines or large fills.

The Pro pricing card has a pale teal-to-white wash across its top third, taken from the photo palette.

## Surface

- **Borders:** 1px solid #D9D9D6 everywhere. There are no heavier borders.
- **Radii:**
  - Photo cards, the tab panel and the CTA band: 16px.
  - Pricing cards and testimonial cards: 12px.
  - UI mockup cards: 10px.
  - Buttons: 8px.
  - Icon squares: 8px.
  - Badge and toggle: fully rounded (pill).
- **Shadows:** only on UI mockups floating over photos: `0 8px 24px rgba(1,1,1,0.08)`. Page-level cards are flat, with a border and no shadow.
- **Buttons:**
  - Primary: #010101 fill, white 14px/500 text, 40px tall, 16px horizontal padding.
  - Secondary (pricing only): white fill with the 1px border.

## Imagery

- **Photo style.** All photos share one treatment: soft-focus meadow flowers (daisies, wildflowers, feathery grass seed heads) seen from low down against a hazy pale blue-teal sky. Colours are washed pastels, contrast is low, and there is lots of bright negative space. Treat them as one series, as if taken from one shoot.
- **Hero (section 2).** About 1.07:1. Tall grasses fill the lower half and sky fills the top. A white inbox mockup covers the right-centre about 70% of the photo: a sidebar, a list of 6–8 ticket rows and a detail pane.
- **Section 4.** Three 3:2 photos. Each has one small white card (about 55% of the photo width) with 2–4 lines of fake UI: a status list, a document snippet, a handoff note.
- **Section 5.** Three photos, each about 800 wide by 780–900 tall (roughly 1:1 to 4:5). Each has a centred white card:
  - Row A: two KPI numbers.
  - Row B: a chat bubble with reply chips.
  - Row C: a big number above a 7-bar chart.
- **Section 6.** One wide photo (about 16:10) with a large table/dashboard mockup covering about 85% of it.
- **Section 9.** A portrait (about 2:3) of a person looking at a phone. Muted, warm, natural light. A 56px white circular play button sits in the centre.
- **Section 12.** A full-bleed meadow photo inside the band. Keep the left 45% brightest so ink text reads.
- **Logos.** Monochrome grey placeholder marks with wordmarks, all the same optical height (about 20px).

## Motion

No motion report exists, so every value below is inferred from the stills. The page uses restrained motion only.

**1. Nav**
- kind — static
- what moves — nothing
- from → to — n/a
- range — n/a
- reduced motion — same

**2. Hero**
- kind — entrance (on load)
- what moves — badge, H1, paragraph and button; then the photo card
- from → to — text goes from opacity 0, translateY 16px to opacity 1, translateY 0. The photo goes from opacity 0, scale 1.02 to opacity 1, scale 1.
- range — once, on page load. Duration not measured (use 500–700ms), ease-out. Text stagger 60–100ms. The photo starts after the button.
- reduced motion — everything visible immediately, with no transform

**3. Logo wall**
- kind — entrance
- what moves — the logo row as one unit
- from → to — opacity 0 → 1
- range — once, when the row's top reaches 85% of the viewport. Duration not measured (400–600ms), ease-out.
- reduced motion — visible immediately

**4. Three-ways cards**
- kind — entrance
- what moves — header block, then the 3 cards
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, when each element's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. The cards stagger 80–120ms.
- reduced motion — visible immediately

**5. Feature callouts**
- kind — entrance
- what moves — for each row, the photo card, then its text column
- from → to — the photo goes from opacity 0, translateY 24px to opacity 1, translateY 0. The text goes from opacity 0, translateY 16px to opacity 1, translateY 0.
- range — once per row, when the row's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. The text follows the photo by 100–150ms.
- reduced motion — visible immediately

**6. Platform tabs**
- kind — entrance
- what moves — header block, then the panel as one unit
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms).
- reduced motion — visible immediately

**7. Security**
- kind — entrance
- what moves — centred header, then the 4 items
- from → to — opacity 0, translateY 16px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (400–600ms). The items stagger 60–80ms.
- reduced motion — visible immediately

**8. Pricing**
- kind — entrance
- what moves — header, then the 3 cards, then the trust row
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms). The cards stagger 80–100ms.
- reduced motion — visible immediately

**9. Case-study testimonial**
- kind — entrance
- what moves — portrait, quote, stats
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms). Stagger 100ms.
- reduced motion — visible immediately

**10. Testimonial wall**
- kind — entrance
- what moves — the cards, column by column
- from → to — opacity 0, translateY 16px → opacity 1, translateY 0
- range — once, when each card's top reaches 85% of the viewport. Duration not measured (400–600ms). Stagger 50–80ms per column.
- reduced motion — visible immediately

**11. FAQ**
- kind — entrance
- what moves — header, then the rows
- from → to — opacity 0, translateY 12px → opacity 1, translateY 0
- range — once, at 85% of the viewport. Duration not measured (400–500ms). Stagger 40–60ms.
- reduced motion — visible immediately

**12. CTA band**
- kind — entrance
- what moves — the band, then its text
- from → to — the band goes from opacity 0, scale 0.98 to opacity 1, scale 1. The text goes from opacity 0, translateY 12px to opacity 1, translateY 0.
- range — once, at 80% of the viewport. Duration not measured (600–800ms), ease-out.
- reduced motion — visible immediately

**13. Footer**
- kind — static
- what moves — nothing
- from → to — n/a
- range — n/a
- reduced motion — same

### Interaction transitions

These are separate from the scroll choreography. All durations are inferred.

- **Primary button hover:** background #010101 → #2A2A28 over 150–200ms. Press: scale 0.98.
- **Secondary button hover:** border colour → #010101 over 150ms.
- **Nav links and footer links hover:** colour grey → ink over 150ms.
- **Tabs (section 6):** clicking a tab moves the white active pill to it (200–300ms ease-out). The panel content and photo crossfade over 250–350ms with no slide.
- **Pricing toggle:** the knob slides between Monthly and Yearly over 200ms. The price numbers crossfade.
- **FAQ open/close:** the answer's height and opacity animate over 250–300ms ease-out. The plus rotates 45° to become ×.
- **Play button hover:** scale 1 → 1.05 over 200ms.
- **Testimonial cards and pricing cards:** no hover lift.

## Responsive (below 640px)

- **Container:** side padding drops to 20px. Section spacing drops to 96px.
- **Type:** H1 → 40px, H2 → 36px, H3 → 24px, pull quote → 22px. Body stays at 16–17px.
- **Nav:** the centre links and "Log in" collapse into a menu icon. The dark button stays.
- **Hero:** stacks as text, then photo. The photo is full-width at 4:5.
- **Logo walls:** switch to a 3×2 grid.
- **Section 4 cards, and section 5 rows:** stack to one column. In section 5 the image always comes before the text, and images go to 4:5.
- **Section 6 panel:**
  - The tabs become a horizontally scrollable row.
  - The text comes before the photo.
  - The dashboard mockup crops from the left rather than shrinking below legibility.
- **Security:** a 2×2 grid. The vertical rules become horizontal rules.
- **Pricing:** cards stack with Pro first.
- **Case study:** the portrait goes above the quote. The stats stay 3-up but drop to 28px.
- **Testimonial wall:** one column, showing only the first 6 cards before the fade.
- **FAQ:** a single column of 6 rows.
- **CTA band:** the photo stays, and the text sits over a lightened area at the top.
- **Footer:** the link columns become 2×2, and the bottom bar stacks.

## Don'ts

- Don't add gradients, glows, blobs or tinted section backgrounds. The page stays #FAF9F6 all the way down, and colour comes only from the photographs.
- Don't make the accent teal a button colour or a headline highlight. Buttons are always near-black, and there are no coloured words inside headlines.
- Don't use bold or semibold headlines, or a geometric sans for display. Headlines are regular-weight serif, tightly tracked, two short lines.
- Don't write uppercase, letter-spaced eyebrows. They are small sentence-case grey text with a dot.
- Don't use saturated, sharp or dark photography, or generic office stock. Keep it hazy meadow-and-sky pastels, consistent across every image.
- Don't render UI mockups as screenshots in browser chrome or device frames. They are clean white cards with a 10px radius and one soft shadow, floating on the photo.
- Don't put shadows on page-level cards (pricing, testimonials, FAQ). Use 1px #D9D9D6 borders only.
- Don't use large radii (24px+) or pill-shaped primary buttons. Buttons are 8px-radius rectangles.
- Don't centre everything. Only Security and Pricing are centred, and every other header is left-aligned to the container edge.
- Don't narrow the container to 1120–1200px. The layout runs nearly full-width with 40px gutters.
- Don't add parallax, pinned sections, marquee logo scrolling, counters that tick up, or bouncy/spring easing. Motion is limited to small, once-only fades.
- Don't alternate the feature-row image side in section 5. The image stays on the left in all three rows.
- Don't highlight the Pro card with a coloured border or a "Most popular" ribbon in the accent. Use the soft photo wash and the dark button.