Prompt LLM Bench - Website
Professional Next.js website for Prompt LLM Bench desktop downloads. Features a modern dark theme with teal accent colors and an intuitive download interface.
Features
- Enhanced Download Button: Professional dropdown selector for different platforms (.dmg, .exe, .AppImage)
- Auto Platform Detection: Automatically detects user's OS and recommends the appropriate installer
- Responsive Design: Fully responsive layout that works on all devices
- Dark Theme: Modern dark color scheme with teal accent colors
- Component Architecture: Well-organized React components for maintainability
- TypeScript: Full TypeScript support for type safety
Development
npm install
npm run dev
Open http://localhost:3000 in your browser.
Production
npm run build
npm run start
Project Structure
prompt-llm-benchmark/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Home page
│ ├── download/ # Download page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles and design tokens
├── components/ # React components
│ ├── download/ # Download-specific components
│ │ ├── download-button.tsx # Enhanced dropdown button
│ │ ├── download-panel.tsx # Download panel with metadata
│ │ └── download-section.tsx # Section wrapper
│ ├── layout/ # Layout components
│ │ ├── navbar.tsx # Navigation bar
│ │ └── footer.tsx # Footer
│ └── ui/ # Reusable UI components
│ ├── button.tsx
│ ├── badge.tsx
│ ├── card.tsx
│ ├── section.tsx
│ └── ...
├── lib/ # Utilities and data
│ ├── downloads.ts # Download metadata and OS detection
│ └── cn.ts # Class name utility
└── public/ # Static files
└── downloads/ # Installer files (served statically)
Design Tokens
The design system is defined in app/globals.css with CSS custom properties:
Colors
- Background: Pure black with subtle gradients
- Surface: Dark gray surfaces with transparency
- Teal Accent (
--teal-500, --teal-600, --teal-700): Primary action colors
- Border: Subtle borders with transparency
- Text: White foreground with muted gray for secondary text
Spacing & Layout
- Consistent spacing scale from
--space-xxs to --space-2xl
- Border radius scale for consistent roundness
- Shadow system for depth and hierarchy
To customize the theme, modify the CSS variables in app/globals.css under :root.
Download System
Download Metadata
Download information is managed in lib/downloads.ts:
export const downloads: Record<OSKey, DownloadOption> = {
mac: {
key: "mac",
label: "macOS",
fileName: "Prompt LLM Bench-0.1.0-arm64.dmg",
href: "/downloads/Prompt%20LLM%20Bench-0.1.0-arm64.dmg",
architecture: "Apple Silicon (ARM64)",
requirements: "Requires macOS 13+",
steps: [...]
},
// ... windows and linux
};
Platform Detection
The detectOS() function automatically identifies the user's operating system from the User-Agent string and pre-selects the appropriate installer.
Download Button Component
The enhanced download button (components/download/download-button.tsx) features:
- Split button design (download action + platform selector)
- Dropdown menu for switching platforms
- Keyboard navigation support
- Accessibility features (ARIA attributes)
- Teal color scheme matching the design
Publishing New Releases
-
Update version in lib/downloads.ts:
export const releaseInfo = {
version: "0.2.0", // Update version
...
};
-
Update download file paths and names:
mac: {
fileName: "Prompt LLM Bench-0.2.0-arm64.dmg",
href: "/downloads/Prompt%20LLM%20Bench-0.2.0-arm64.dmg",
...
}
-
Place installer files in public/downloads/
-
Update checksums and signatures:
public/downloads/checksums.txtpublic/downloads/signatures.txt
Browser Support
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
License
See parent project for license information.
