Secondary actions are visually subordinate to the primary CTA

Two equally-weighted filled buttons side-by-side force the visitor to compare them and decide which is the "right" path, and that micro-hesitation is enough to drive many visitors away entirely. Visual hierarchy — a solid primary button paired with an outline or ghost secondary — communicates the intended default action without words and eliminates choice paralysis at the hero, where attention is most fragile.

Give the primary action visual dominance and demote the secondary action to an outline or ghost variant so the hierarchy reads instantly. Update the hero actions block in components/hero.tsx:

<div className="flex gap-3">
  <Button variant="default" size="lg">Start Free Trial</Button>
  <Button variant="outline" size="lg">See How It Works</Button>
</div>

The outline variant says "this is optional"; the filled variant says "this is the thing to do."

• ID: marketing-conversion.cta-effectiveness.secondary-cta-differentiation

• Severity: low

• What to look for: Examine marketing pages for pages that present multiple actions (e.g., "Get Started" and "Learn More", or "Sign Up" and "Sign In"). Check whether the primary and secondary actions are visually differentiated — typically via filled vs. outline/ghost button styles, or large vs. small sizing. Flag cases where two equally-weighted filled buttons appear side by side with the same visual prominence.

• Pass criteria: Count all CTA buttons on the page and classify each as primary or secondary. When 2 or more actions are present, the primary CTA is visually dominant (filled/solid style, larger size, or prominent color) and secondary actions are visually subordinate (outline, ghost, text-link, or smaller size). No more than 1 visually dominant CTA per section. Report: "X primary and Y secondary CTAs found with clear visual hierarchy."

• Fail criteria: Two or more full-weight CTA buttons appear side-by-side with identical visual styling, creating choice paralysis.

• Skip (N/A) when: Only one action is present on the page, or no marketing pages found.

• Detail on fail: Describe the buttons found. Example: "Hero has 'Start Free Trial' (solid blue) and 'Schedule Demo' (also solid blue, same size) — no visual hierarchy between primary and secondary action".

• Remediation: When users see two equally prominent options, they hesitate. One action should clearly be the "main" path. Use visual hierarchy:

  <div className="flex gap-3">
    <Button variant="default" size="lg">Start Free Trial</Button>
    <Button variant="outline" size="lg">See How It Works</Button>
  </div>
  

  The outline or ghost variant signals "this is optional." The filled variant signals "this is the thing to do."