Professional marketing website for the PISTON engine simulation software. Built with Next.js, TypeScript, and Tailwind CSS.
This website showcases PISTON's professional-grade engine simulation capabilities with a modern, bold design inspired by contemporary tech companies like Nous Research, Nothing, and MSCHF.
- Modern Design: Bold typography, high-contrast colors, smooth animations
- Responsive: Mobile-first design that works on all devices
- Static Export: Optimized for Cloudflare Pages deployment
- Performance: Fast loading with optimized assets
- SEO Ready: Proper meta tags and semantic HTML
- Framework: Next.js 15+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: React Icons
- Hosting: Cloudflare Pages (via GitHub)
pistonsim.com/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Landing page
│ ├── features/ # Features page
│ ├── docs/ # Documentation hub
│ ├── download/ # Download page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Site footer
│ ├── Button.tsx # CTA buttons
│ ├── Card.tsx # Content cards
│ ├── FeatureCard.tsx # Feature showcase
│ └── Metric.tsx # Statistics display
├── public/ # Static assets
├── DESIGN_SYSTEM.md # Brand identity & design tokens
└── next.config.ts # Next.js configuration
- Node.js 18+
- npm or yarn
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to view the site.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production server (after build)npm run lint- Run ESLint
- GitHub repository containing this code
- Cloudflare account
# Initialize git repository (if not already done)
git init
# Add all files
git add .
# Commit
git commit -m "Initial commit: PISTON marketing website"
# Add remote repository
git remote add origin https://github.com/YOUR_USERNAME/pistonsim-website.git
# Push to GitHub
git push -u origin main- Log in to your Cloudflare Dashboard
- Navigate to Pages in the sidebar
- Click Create a project
- Click Connect to Git
- Authorize Cloudflare to access your GitHub account
- Select your repository:
pistonsim-website
In the Cloudflare Pages setup wizard, use these settings:
Production branch: main
Build command: npm run build
Build output directory: out
Root directory: /
Environment Variables (if needed):
- None required for basic deployment
- Add
NODE_VERSION=18if you need a specific Node.js version
- Click Save and Deploy
- Cloudflare will build and deploy your site
- Your site will be available at:
https://YOUR_PROJECT.pages.dev
To use a custom domain like pistonsim.com:
- In Cloudflare Pages, go to your project
- Click Custom domains
- Click Set up a custom domain
- Enter your domain:
pistonsim.com - Follow the DNS configuration instructions
- Add both
pistonsim.comandwww.pistonsim.comif desired
Once connected, Cloudflare Pages will automatically:
- Deploy on every push to
mainbranch - Create preview deployments for pull requests
- Provide unique URLs for each deployment
The site is configured for static export in next.config.ts:
const nextConfig: NextConfig = {
output: 'export', // Static export for Cloudflare Pages
images: {
unoptimized: true, // Required for static export
},
trailingSlash: true, // Better compatibility
}See DESIGN_SYSTEM.md for complete brand identity guidelines including:
- Color palette
- Typography (Space Grotesk, Inter, JetBrains Mono)
- Spacing system
- Border radius
- Shadows and effects
- Animation timing
--accent-primary: #ff3b30 /* Performance red */
--accent-secondary: #0a84ff /* Technical blue */
--accent-tertiary: #ff9500 /* Warning orange */
--bg-primary: #0a0a0a /* Deep black */- Hero section with bold headline
- Key metrics showcase
- Feature grid (Dyno, Database, Physics, Value)
- Technical highlights
- Value proposition
- CTA sections
- Detailed feature descriptions
- Virtual Dyno System details
- Parts Database showcase
- Physics modeling explanation
- Development roadmap
- Documentation categories
- Quick start guide
- Links to GitHub documentation
- Community resources
- System requirements
- Installation instructions
- Build from source guide
- Pre-built binaries (coming soon)
- Alpha release information
- Static site generation for fast loading
- Optimized fonts with Google Fonts
- CSS utility classes for minimal bundle size
- Framer Motion for performant animations
- Responsive images (when added)
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Android)
To update the website:
- Create a new branch:
git checkout -b feature/your-feature - Make your changes
- Test locally:
npm run dev - Build and verify:
npm run build - Commit and push:
git push origin feature/your-feature - Create a pull request on GitHub
Cloudflare Pages will automatically create a preview deployment for your PR.
- Check build logs in Cloudflare Pages dashboard
- Verify
next.config.tshasoutput: 'export' - Ensure all dependencies are in
package.json - Try building locally first:
npm run build
- Fonts are loaded from Google Fonts CDN
- Check
app/globals.cssfor @import statements - Verify font-family variables in
tailwind.config.ts
- Ensure images are in
/publicdirectory - Use relative paths:
/image.png - Remember
images: { unoptimized: true }in config
- GitHub Repository: https://github.com/YOUR_USERNAME/pistonsim-website
- Cloudflare Pages: https://YOUR_PROJECT.pages.dev
- PISTON Simulator: /home/stripcheese/PISTON-Path2/
[Your License Here]
For questions about the website, contact [your email].
Built with Next.js • Tailwind CSS • Framer Motion • Deployed on Cloudflare Pages