Dark, hexagonal, carbon-fiber inspired product landing page for JPEG Locker — the steganography tool that hides encrypted messages and files inside ordinary JPEG images.
- Static Site Generator: Zola
- Styling: SCSS (compiled by Zola)
- Form Handling: Web3Forms
- Hosting: GitHub Pages
jpeg-locker.com/
├── config.toml # Zola configuration
├── content/
│ └── _index.md # Homepage content
├── sass/
│ └── style.scss # All styles
├── static/
│ └── images/ # Static assets
├── templates/
│ ├── base.html # Base template
│ ├── index.html # Homepage template
│ └── macros.html # Reusable components
└── .github/
└── workflows/
└── deploy.yml # GitHub Pages deployment
Install Zola: https://www.getzola.org/documentation/getting-started/installation/
# macOS
brew install zola
# Windows
scoop install zola
# Linux (snap)
snap install zola --edge# Start dev server with live reload
zola serve
# Opens at http://127.0.0.1:1111# Build for production
zola build
# Output in ./public/The waitlist form uses Web3Forms — free, unlimited submissions, no backend required.
The access key is configured in config.toml:
[extra]
web3forms_key = "your-access-key"The form component is defined in templates/macros.html and used in templates/index.html.
The site deploys automatically to GitHub Pages on push to main via .github/workflows/deploy.yml.
- Go to repo Settings → Pages
- Set Source to "GitHub Actions"
- Push to
main— the workflow handles the rest
Edit CSS variables in sass/style.scss:
:root {
--bg-dark: #0a0a0b;
--accent: #22d3ee;
--accent-dim: rgba(34, 211, 238, 0.15);
}Edit text in templates/index.html. Reusable components live in templates/macros.html.
Update base_url in config.toml:
base_url = "https://yourdomain.com"MIT — Open source
Built with privacy in mind by the JPEG Locker team