feat(website): show how to run LexAI on free provider tiers

Point visitors at Groq and OpenRouter for ongoing  API access, with per-provider setup on the docs page.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/website/src/pages/HomePage.tsx

@@ -1,5 +1,6 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { LogoMark } from '../components/LogoMark';
+import { FREE_PROVIDERS, FREE_PROVIDER_BADGES, LEXAI_FREE_HIGHLIGHTS } from '../freeProviders';
 import { CHROME_STORE, REPO, VSCODE_MARKETPLACE } from '../links';
 
 function openDocsSection(navigate: ReturnType<typeof useNavigate>, id: string) {
@@ -57,7 +58,8 @@ export function HomePage() {
           <h1>Skip Grammarly and Copilot subscriptions</h1>
           <p className="hero-lead">
             Writing help on any webpage. Coding assist in VS Code or Cursor. You bring the API key —
-            LexAI has no account, no servers, and no fee.
+            LexAI has no account, no servers, and no fee. Use Groq or OpenRouter for ongoing free
+            API access.
           </p>
           <div className="cta-row">
             <a className="btn btn-primary" href={CHROME_STORE} target="_blank" rel="noreferrer">
@@ -104,6 +106,66 @@ export function HomePage() {
         </div>
       </section>
 
+      <section className="section" id="free">
+        <div className="wrap">
+          <p className="section-kicker">Use it free</p>
+          <h2>LexAI costs nothing — your provider can too</h2>
+          <p className="section-lead">
+            LexAI never charges a subscription. Connect a free-tier API key from a supported provider
+            and get Grammarly-style writing help and Copilot-style coding assist without paying
+            Grammarly or Copilot.
+          </p>
+          <ul className="free-highlights">
+            {LEXAI_FREE_HIGHLIGHTS.map((item) => (
+              <li key={item.title}>
+                <strong>{item.title}</strong>
+                <p>{item.body}</p>
+              </li>
+            ))}
+          </ul>
+          <div className="provider-grid">
+            {FREE_PROVIDERS.map((provider) => (
+              <article key={provider.id} className="provider-card">
+                <div className="provider-card-head">
+                  <strong>{provider.name}</strong>
+                  {provider.badge ? (
+                    <span className={`provider-badge provider-badge-${provider.badge}`}>
+                      {provider.badgeLabel ?? FREE_PROVIDER_BADGES[provider.badge]}
+                    </span>
+                  ) : null}
+                </div>
+                <p>{provider.summary}</p>
+                <dl className="provider-meta">
+                  <div>
+                    <dt>Credit card</dt>
+                    <dd>{provider.creditCard}</dd>
+                  </div>
+                  <div>
+                    <dt>LexAI model</dt>
+                    <dd>
+                      <code>{provider.lexaiModel}</code>
+                    </dd>
+                  </div>
+                </dl>
+                <a
+                  className="more"
+                  href={provider.signupUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Get API key →
+                </a>
+              </article>
+            ))}
+          </div>
+          <p className="free-footnote">
+            Rate limits and trial amounts change — verify on each provider&apos;s site. Full setup
+            steps are in{' '}
+            <Link to="/docs#free">Free LLM setup</Link>.
+          </p>
+        </div>
+      </section>
+
       <section className="section" id="features">
         <div className="wrap">
           <p className="section-kicker">Product</p>