Arayüz & Tasarım

Structure the landing page with this section order:

1. sticky nav
2. hero
3. logo strip
4. feature grid
5. testimonials
6. closing CTA
7. footer

CTA placement: Primary action appears twice: in the hero and at the page end.
Best fit: SaaS, general product

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. video/media block
3. hero
4. feature grid
5. closing CTA
6. footer

CTA placement: CTA appears when the video ends; it must be dismissible.
Best fit: Complex product, demo

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. pricing table
4. FAQ
5. closing CTA
6. footer

CTA placement: A separate button per plan, with the recommended plan highlighted.
Best fit: Self-serve subscription

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. bento grid
4. stat row
5. closing CTA
6. footer

CTA placement: One action directly below the grid.
Best fit: Feature-rich product

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. feature grid
4. signup form
5. footer

CTA placement: The form sits in the right column, no scrolling required.
Best fit: Signup, demo request

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. video/media block
4. feature grid
5. testimonials
6. FAQ
7. closing CTA
8. footer

CTA placement: A soft call repeated at the end of each section.
Best fit: Enterprise sales

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. bento grid
4. feature grid
5. footer

CTA placement: The copyable install line is the primary action.
Best fit: Developer tool, library

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. logo strip
4. stat row
5. testimonials
6. closing CTA
7. footer

CTA placement: Right after the testimonials.
Best fit: New brand, B2B

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. signup form
4. feature grid
5. footer

CTA placement: One field, one button, no other link on the page.
Best fit: Pre-launch

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. bento grid
4. pricing table
5. FAQ
6. closing CTA
7. footer

CTA placement: Below the table, emphasizing how easy switching is.
Best fit: Competitive market

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. video/media block
4. feature grid
5. testimonials
6. closing CTA
7. footer

CTA placement: Two store badges side by side in the hero.
Best fit: Mobile app

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.

Structure the landing page with this section order:

1. sticky nav
2. hero
3. stat row
4. feature grid
5. signup form
6. FAQ
7. footer

CTA placement: A persistent Register button in the sticky top bar.
Best fit: Conference, webinar

Rules:
- Each section states one idea; if a section needs two headlines, split it.
- The primary action must be reachable without scrolling on a 720px-tall viewport.
- Sections alternate background tone so the eye can tell them apart while scrolling.