119 lines
4 KiB
Markdown
119 lines
4 KiB
Markdown
# humanAI landing page
|
|
|
|
Static bilingual landing page for **humanAI** (gethumanai.com).
|
|
Stack: Astro 6, static output, i18n PL (default `/`) + EN (`/en/`), nginx in Docker.
|
|
|
|
---
|
|
|
|
## Local development
|
|
|
|
```sh
|
|
# Host: SATURN
|
|
npm install
|
|
npm run dev # dev server at http://localhost:4321
|
|
npm run build # build to ./dist/
|
|
npm run preview # preview built site at http://localhost:4321
|
|
```
|
|
|
|
## Docker local test
|
|
|
|
```sh
|
|
# Host: SATURN
|
|
# Create the network if it doesn't exist locally
|
|
docker network create npm_default 2>/dev/null || true
|
|
docker compose up --build
|
|
# site at http://localhost:8080
|
|
```
|
|
|
|
## Deploy to VPS
|
|
|
|
```sh
|
|
# Host: SATURN
|
|
./deploy.sh
|
|
```
|
|
|
|
The script:
|
|
1. Commits any pending changes and pushes to Forgejo (`oskar/gethumanai-landing`).
|
|
2. SSH-es to `ubuntu-4gb-hel1-1`, clones/pulls to `~/gethumanai-landing`, runs `docker compose up -d --build`.
|
|
3. Smoke-tests via `localhost:8080` — checks PL `/`, EN `/en/`, hreflang, mailto, EN conservative note, and HTTP headers. Exits non-zero with docker logs on any failure.
|
|
|
|
Container is on the `npm_default` external Docker network. In **Nginx Proxy Manager** add:
|
|
- Domain: `gethumanai.com` (+ `www`)
|
|
- Forward: `http://humanai-landing:80`
|
|
- SSL: Let's Encrypt
|
|
|
|
## Infrastructure
|
|
|
|
| Thing | Value |
|
|
|---|---|
|
|
| VPS host | `ubuntu-4gb-hel1-1` (Hetzner) |
|
|
| Container name | `humanai-landing` |
|
|
| Host port | `8080 → 80` |
|
|
| Docker network | `npm_default` (external, shared with NPM) |
|
|
| Git remote | `ssh://git@100.108.208.3:222/oskar/gethumanai-landing.git` |
|
|
| Deploy dir on VPS | `~/gethumanai-landing` |
|
|
|
|
## Project structure
|
|
|
|
```
|
|
src/
|
|
i18n/
|
|
pl.json # all Polish copy + slogans
|
|
en.json # all English copy + slogans
|
|
index.ts # t(locale) helper, getLangFromUrl, getAlternateUrl
|
|
layouts/
|
|
Layout.astro # HTML shell — meta, OG, hreflang, global CSS + gradient system
|
|
components/
|
|
Nav.astro # sticky nav, mobile hamburger, PL/EN switcher
|
|
Hero.astro # gradient mesh bg, geo SVG, gradient H1, manifest strip
|
|
Problem.astro # problem/contrast section
|
|
HowWeWork.astro # 3 differentiators with per-card accents
|
|
Offers.astro # 4 offer cards with per-pillar gradient accents
|
|
Process.astro # 3-step process with gradient step circles
|
|
Security.astro # hidden on MVP — toggle SHOW_SECURITY = true to enable
|
|
Contact.astro # mailto form, "zawsze rozmawiasz z człowiekiem" badge
|
|
Footer.astro # dark footer, nav links, copyright
|
|
pages/
|
|
index.astro # PL — /
|
|
en/
|
|
index.astro # EN — /en/
|
|
```
|
|
|
|
## Design system
|
|
|
|
CSS custom properties in `src/layouts/Layout.astro`:
|
|
|
|
| Token | Value | Use |
|
|
|---|---|---|
|
|
| `--c-coral` | `#e05c40` | warm accent 1 — Home pillar |
|
|
| `--c-amber` | `#f0924a` | warm accent 2 — blob decoration |
|
|
| `--c-indigo`| `#3d35c0` | cool accent 1 — Business pillar |
|
|
| `--c-violet`| `#7b39eb` | cool accent 2 — Med pillar |
|
|
| `--c-teal` | `#0b9688` | cool accent 3 — Industry pillar |
|
|
| `--grad-main` | coral→violet→teal 135° | gradient text, section accents |
|
|
| `--grad-cta` | coral→violet 135° | primary button, outline border |
|
|
| `--grad-sep` | transparent→coral→violet→transparent | section hairlines |
|
|
|
|
Global utilities: `.grad-text`, `.btn-primary` (gradient fill), `.btn-outline` (gradient border via `padding-box/border-box`).
|
|
|
|
Section hairlines: automatic `section + section::before` pseudo-element in Layout.astro.
|
|
|
|
## Editing copy
|
|
|
|
All visible text lives in `src/i18n/pl.json` and `src/i18n/en.json`. Key paths:
|
|
|
|
- `hero.h1_base` + `hero.h1_highlight` — split for gradient on the "AI" word
|
|
- `manifest.slogan` — the strip between hero and problem section
|
|
- `how.human.tagline` — note on the "human in the loop" card
|
|
- `contact.human_note` — badge in the contact section
|
|
|
|
## Feature flags
|
|
|
|
| Flag | File | Default | Effect |
|
|
|---|---|---|---|
|
|
| `SHOW_SECURITY` | `Security.astro:6` | `false` | Reveals the security section |
|
|
|
|
## Swapping the logo
|
|
|
|
Logo text + SVG half-circle icon: `src/components/Nav.astro` (`.logo` / `.logo-icon`).
|