- Landing Page: Hero section, features showcase, provider logos, testimonials
- Documentation: Searchable docs with sidebar navigation and code blocks
- Download Page: Fetches latest release from GitHub API
- Providers Page: Grid of supported AI providers
- FAQ Page: Categorized accordion-style FAQs
- 404 Page: Custom not found page
- Framework: React 19 + TypeScript
- Build: Vite 7
- Styling: Tailwind CSS v4
- Components: shadcn/ui + Radix UI
- Animations: Framer Motion
- Icons: Lucide React
- Routing: React Router DOM
- Node.js 20+
- npm or pnpm
# Clone the repository
git clone https://github.com/LettuceAI/website.git
cd website
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser.
npm run buildThe output will be in the dist/ directory.
npm run previewsrc/
├── components/
│ ├── landing/ # Landing page sections (Hero, Features, etc.)
│ ├── diagrams/ # SVG diagram components
│ └── ui/ # Reusable UI components (Button, CodeBlock, etc.)
├── pages/
│ ├── docs/ # Documentation pages
│ ├── HomePage.tsx
│ ├── DownloadPage.tsx
│ ├── ProvidersPage.tsx
│ ├── FAQPage.tsx
│ └── NotFoundPage.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── App.tsx # Main app with routing
├── main.tsx # Entry point
└── index.css # Global styles
| Route | Description |
|---|---|
/ |
Landing page |
/download |
Download page with GitHub release info |
/providers |
List of supported AI providers |
/faq |
Frequently asked questions |
/docs |
Documentation index |
/docs/installation |
Installation guide |
/docs/quickstart |
Quick start tutorial |
/docs/api-keys |
API key configuration |
/docs/providers |
Provider setup guide |
/docs/characters |
Character creation guide |
/docs/memory |
Memory system documentation |
The site uses a dark theme with green accent colors matching LettuceAI's branding:
- Primary:
oklch(0.648 0.2 131.684)(Lettuce Green) - Background:
oklch(0.145 0 0)(Near Black) - Card:
oklch(0.205 0 0)(Dark Gray)
MIT License — see LICENSE for details.