Overview
Alinement is the full source of a production-ready marketing and commerce site for an AI startup. It handles everything around your product (pages, sign-in, checkout, translations, analytics, SEO, deployment and testing) so you can spend your time on the AI itself.
It's built from plain parts on purpose: Eleventy renders Nunjucks and Markdown into static HTML, Sass and Tailwind handle styling, and a small amount of vanilla JavaScript bundled by Bun adds the interactive pieces. There's no framework runtime to upgrade and no vendor lock-in.
What's included
- Pages: home, pricing, blog, guides, sign-in, sign-up, email verification, checkout, order confirmation and a 404, all in English and French.
- Checkout: email verification before payment, coupons, card, PayPal and Flutterwave inline checkout, and GA4 ecommerce events.
- Accounts: passwordless sign-in with 6-digit codes and a resend countdown.
- SEO: canonical and
hreflanglinks, Open Graph cards, structured data and a sitemap. - Theming: light, dark and system modes, plus a black-and-white palette defined as
design tokens in
src/scss/_tokens.scss. - Quality gates: formatting, lint, dead-code detection, i18n parity, Playwright tests, screenshot comparisons, link checks, a coverage floor and Lighthouse.
How the project is laid out
src/
_data/ site config, plans, navigation and translations
_includes/ layouts and partials (Nunjucks)
content/ pages, blog posts and guides, per language
js/ app.js, the data service and the API client
scss/ design tokens and component styles
scripts/ build, screenshots, Lighthouse, deploy and checks
tests/ Playwright browser tests
What you build
Your product. The template stops at the API boundary: everything the browser needs
from a server goes through src/js/dataservice.js. In demo mode it returns fake data,
and in live mode it calls your backend, which is where your models, prompts and data
live. Connecting your API explains that boundary.