LexAI/packages/website/src/pages/HomePage.tsx

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) {
  navigate('/docs');
  window.setTimeout(() => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, 60);
}

const FEATURES = [
  {
    title: 'Your key. Your provider.',
    body: 'OpenAI, Anthropic, Groq, or OpenRouter. No LexAI account or servers.',
  },
  {
    title: 'Writing help, like Grammarly',
    body: 'Select text on any page → Fix, Rephrase, Shorten, Expand, Explain, or Make Prompt.',
  },
  {
    title: 'Coding assist, like Copilot',
    body: 'VS Code and Cursor: select code, give an instruction, apply a suggestion with file context.',
  },
  {
    title: 'Prompt Builder',
    body: (
      <>
        Turn a rough idea into a paste-ready prompt — in the app or via <code>lexai prompt</code>.
      </>
    ),
  },
  {
    title: 'Private by design',
    body: 'Keys stay on your device. Text goes only to the provider you choose.',
  },
  {
    title: 'Open source (MIT)',
    body: 'Chrome, VS Code, and CLI share one core. Audit it, fork it, ship your own build.',
  },
];

export function HomePage() {
  const navigate = useNavigate();

  return (
    <>
      <section className="hero">
        <div className="wrap">
          <div className="hero-lockup">
            <LogoMark size={48} />
            <p className="hero-wordmark">
              Lex<span>AI</span>
            </p>
          </div>
          <p className="hero-kicker">Bring your own LLM</p>
          <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. 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">
              Chrome Web Store
            </a>
            <a className="btn btn-ghost" href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
              VS Code Marketplace
            </a>
            <a className="btn btn-ghost" href={REPO} target="_blank" rel="noreferrer">
              Repository
            </a>
            <Link className="btn btn-ghost" to="/docs">
              Docs
            </Link>
          </div>
        </div>
      </section>

      <section className="section" id="why">
        <div className="wrap">
          <p className="section-kicker">Why try it</p>
          <h2>The jobs you already pay for — without a second subscription</h2>
          <p className="section-lead">
            Same idea as the tools you know. You pay your LLM provider, not LexAI.
          </p>
          <div className="compare-grid">
            <div className="package-card">
              <strong>Instead of Grammarly</strong>
              <p>
                Fix grammar, rephrase, shorten, expand, or explain on any webpage. Your key stays on
                your device.
              </p>
              <span className="more">Chrome extension</span>
            </div>
            <div className="package-card">
              <strong>Instead of GitHub Copilot</strong>
              <p>
                Select code, type what you want, and apply a suggestion with context from other
                files. Not tab-complete — instruct and review.
              </p>
              <span className="more">VS Code / Cursor</span>
            </div>
          </div>
        </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>
          <h2>What LexAI does</h2>
          <p className="section-lead">
            One family across browser, editor, and CLI. Same providers. No LexAI backend.
          </p>
          <ul className="feature-list">
            {FEATURES.map((f) => (
              <li key={f.title}>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="section" id="start">
        <div className="wrap">
          <p className="section-kicker">Getting started</p>
          <h2>Install in minutes</h2>
          <p className="section-lead">Published builds, or clone the repo if you want to develop.</p>
          <div className="package-grid">
            <a className="package-card" href={CHROME_STORE} target="_blank" rel="noreferrer">
              <strong>Chrome</strong>
              <p>Install from the Chrome Web Store. Set provider and API key in Options.</p>
              <span className="more">Chrome Web Store</span>
            </a>
            <a className="package-card" href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
              <strong>VS Code</strong>
              <p>
                Install <code>JuanKibin.lexai-vscode</code>. Open Settings, add your key, select
                code.
              </p>
              <span className="more">Marketplace</span>
            </a>
            <button
              type="button"
              className="package-card"
              onClick={() => openDocsSection(navigate, 'cli')}
            >
              <strong>CLI</strong>
              <p>
                Build <code>lexai prompt</code>, set <code>LEXAI_API_KEY</code> and optional{' '}
                <code>LEXAI_PROVIDER</code> / <code>LEXAI_MODEL</code>.
              </p>
              <span className="more">CLI docs</span>
            </button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap privacy">
          <p className="section-kicker">Privacy</p>
          <h2>No LexAI cloud</h2>
          <ul>
            <li>Your API key never leaves your device except to the provider you configure.</li>
            <li>No LexAI telemetry and no LexAI servers in the path.</li>
            <li>
              Open source — inspect the shared core in <code>src/lib</code>.
            </li>
          </ul>
        </div>
      </section>
    </>
  );
}