Primary CTA is visible above the fold

Visitors make stay-or-leave decisions within the first few seconds of landing on a page, and a primary CTA that requires scrolling to find loses that window entirely. When the hero section presents a headline and subheadline but no button, interested visitors have no immediate path to convert and bounce before they ever see the offer, directly suppressing top-of-funnel signup rates.

Add a prominent, visually distinct CTA button inside the hero section of your landing page so it renders within the first viewport height on a standard laptop. Update the hero component (typically components/hero.tsx or app/(marketing)/page.tsx) to include a button with clear contrast against the hero background:

<section className="hero">
  <h1>Your compelling headline</h1>
  <Button size="lg" asChild>
    <Link href="/signup">Start Free Trial</Link>
  </Button>
</section>

• ID: marketing-conversion.cta-effectiveness.primary-cta-above-fold

• Severity: critical

• What to look for: Examine the landing page / homepage component (the route served at /). Look for the primary CTA button — typically the highest-priority action on the page (e.g., "Get Started", "Start Free Trial", "Sign Up", "Request Demo"). Check whether this CTA element appears within the hero section or above the primary page fold, meaning it is visible without scrolling on a standard viewport. A hero section that fills the viewport with a CTA is a pass. A CTA that appears only after a lengthy above-fold hero with no CTA is a fail. In Next.js App Router with route groups, ensure you are checking the actual served page per the route group shadowing note above.

• Pass criteria: Count all CTA buttons on the landing page. The primary CTA button (or link styled as a button) appears within the first full viewport height of the landing page component — at least 1 CTA must be inside the hero section or equivalent above-fold area. Report even on pass: "X CTA buttons found, Y above the fold."

• Fail criteria: No CTA button exists in the landing page component, or the first CTA appears below the hero/banner section such that it would require scrolling to reach on a standard-height viewport. Do NOT pass when a CTA exists above fold but is visually insignificant (e.g., a plain text link with no button styling).

• Cross-reference: For CTA visual contrast requirements, see the cta-visual-contrast check in this audit.

• Skip (N/A) when: The project has no marketing landing page (API-only project, or purely internal web app with no public-facing marketing page). Signal: no route at / that renders marketing content, or project_type is api.

• Detail on fail: Name the landing page file and describe what is above the fold. Example: "Hero section in app/(marketing)/page.tsx contains headline and subheadline but no CTA button. First CTA ('Start Free Trial') appears in the features section below the fold."

• Remediation: Your most important conversion action should never require scrolling to find. Visitors decide within seconds whether to stay or leave — a CTA that is not immediately visible misses that window entirely.

  Add a prominent CTA button to your hero section:

  // components/hero.tsx
  <section className="hero">
    <h1>Your compelling headline</h1>
    <p>Supporting subheadline that reinforces value</p>
    <Button size="lg" asChild>
      <Link href="/signup">Start Free Trial</Link>
    </Button>
  </section>
  

  The button should be visually prominent — large enough to see without squinting, with a color that contrasts against the hero background.