feat: add website components and pages for LexAI
Some checks failed
CI — Chrome / Chrome — typecheck, test, build (pull_request) Has been cancelled
CI — CLI / CLI — typecheck, build, smoke (pull_request) Has been cancelled
CI — Website / Website — typecheck, build (pull_request) Has been cancelled
CI — VS Code / VS Code — typecheck, build (pull_request) Has been cancelled
Some checks failed
CI — Chrome / Chrome — typecheck, test, build (pull_request) Has been cancelled
CI — CLI / CLI — typecheck, build, smoke (pull_request) Has been cancelled
CI — Website / Website — typecheck, build (pull_request) Has been cancelled
CI — VS Code / VS Code — typecheck, build (pull_request) Has been cancelled
- Implemented SiteHeader and SiteFooter components for consistent navigation and footer across the website. - Created CommunityPage and ContributePage to provide information on community involvement and contribution guidelines. - Developed DocsPage to serve as the main documentation hub, detailing features and installation instructions. - Added HomePage to introduce LexAI and its functionalities, highlighting key features and privacy aspects. - Established links.ts for centralized management of external links used throughout the website. - Configured main.tsx for application entry point with React Router for navigation. - Introduced styles.css for consistent styling across the website. - Set up TypeScript configuration files for improved type checking and development experience. - Configured Vite for building and serving the website.
This commit is contained in:
john kevin asprec
175
packages/website/src/pages/HomePage.tsx
Normal file
175
packages/website/src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { LogoMark } from '../components/LogoMark';
|
||||
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.
|
||||
</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="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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user