Configuration

Site settings

Defaults live in src/_data/site.defaults.json:

{
  "name": "Your Startup",
  "url": "https://yourstartup.ai",
  "defaultCurrency": "usd",
  "supportEmail": "hello@yourstartup.ai",
  "dataMode": "demo",
  "apiBaseUrl": ""
}

Environment variables override them at build time, so one codebase can serve preview and production. Copy .env.example to .env for local work, or to .env.prod for deploys. The supported variables are SITE_NAME, SUPPORT_EMAIL, SITE_URL, DATA_MODE, API_BASE_URL, RECAPTCHA_SITE_KEY, GA4_MEASUREMENT_ID, FLUTTERWAVE_PUBLIC_KEY and PAYSTACK_PUBLIC_KEY. Everything here ends up in the browser, so never put a secret key in these files.

Plans and prices

The pricing page, the home page cards and the checkout all read one catalogue, src/_data/plans.json:

{
  "taxRate": 0,
  "plans": [
    { "key": "developer", "prices": { "usd": 499, "cad": 689 }, "featureCount": 6 },
    { "key": "business", "prices": { "usd": 999, "cad": 1379 }, "featureCount": 8, "featured": true }
  ]
}

Plan names, taglines and feature lists are translation keys such as plan.developer.feature.1. To add a plan, add an entry here and its strings to i18n.js. Pricing buttons link to /checkout/?plan=<key>, which puts that plan in the cart.

Payments and coupons

• Flutterwave: set FLUTTERWAVE_PUBLIC_KEY and the inline checkout opens with the order total and currency.
• Card and PayPal: these tabs are demo fields. Connect your provider in placeOrder() in src/js/app.js.
• Coupons: demo codes (SAVE10, LAUNCH20) live in src/js/dataservice.js. In live mode, GET /v1/coupons/{code} on your API should return { "pct": 20 } for a valid code and a 404 (or 400, 410, 422) for a bad one. Anything else is shown as "try again".

Analytics and bot protection

Set GA4_MEASUREMENT_ID to turn on GA4. The funnel sends view_item_list, add_to_cart, begin_checkout and purchase, plus app_error for failures. With GA4_API_SECRET set (development only), the dev server checks every event against GA4's validator.

Set RECAPTCHA_SITE_KEY to protect sign-in, verification and coupons with reCAPTCHA v3. Tokens are fetched per action and sent with each API request.

Announcement bar

announcement in the site config shows a message between startTime and endTime. The check runs at build time, so rebuild when the window opens or closes.

Theme

Colours are tokens in src/scss/_tokens.scss, with a light set and a dark set. --brand is the ink colour and --on-brand is the text that sits on it. Change those two and their grey ramp to re-theme the whole site.