gethumanai-landing/sessions/2026-06-02.md

# Session 2026-06-02

## What was built

Full MVP of the humanAI landing page — repo creation through live deploy on VPS.

---

## Commits (chronological)

| Hash | Summary |
|---|---|
| `fc57413` | feat: initial humanAI landing page |
| `7b24a7f` | fix: use npm_default network (actual NPM network name on VPS) |
| `50cc253` | fix: deploy.sh uses ~/gethumanai-landing (no sudo needed on VPS) |
| `6e63461` | feat: add smoke tests to deploy.sh (curl container IP after up) |
| `9e591d9` | feat: expose port 8080 on host, add host-port smoke test in deploy.sh |
| `3f5dd53` | fix: smoke tests use localhost:8080 (port mapping creates ambiguous container IPs) |
| `b7b1336` | feat: visual redesign — gradient mesh, per-pillar accents, manifest slogans |

---

## Session 1 — Initial build

**Brief:** `~/gethumanai-landing-brief.md`  
**Scope:** MVP sections 1–5, 7–8 (hero, problem, how, offers, process, contact, footer).

**Stack decisions:**
- Astro 6 static, built-in i18n routing (`prefixDefaultLocale: false` → PL at `/`, EN at `/en/`)
- All copy in `src/i18n/pl.json` and `src/i18n/en.json` — zero hardcoded strings in components
- Contact form via `mailto:` prefill (name/email/message → subject+body); `// TODO: backend` left in place
- Security section code-complete but hidden behind `SHOW_SECURITY = false` flag

**Infrastructure discoveries:**
- NPM (Nginx Proxy Manager) uses `npm_default` network, not `npm_proxy`
- VPS user has no passwordless sudo → deploy dir is `~/gethumanai-landing`, not `/opt/`
- Port mapping (`8080:80`) adds a second Docker network to the container, making `{{range .NetworkSettings.Networks}}{{.IPAddress}}` return concatenated IPs → smoke tests must use `localhost:8080`, not the container IP
- Forgejo repo created via `docker exec -u git forgejo forgejo admin user generate-access-token` with scopes `write:repository,write:user`

**Smoke test checks (deploy.sh):**
1. `GET /` contains `Ludzka strona AI`
2. `GET /en/` contains `The human side of AI`
3. `GET /` contains `hreflang`
4. `GET /` contains `mailto:oskar@gethumanai.com`
5. `GET /en/` contains `human review` (Industry/Med conservative tone)
6. `curl -fsS -I http://localhost:8080` returns 200

---

## Session 2 — Visual redesign + slogans

**Brief:** warm↔cool gradient palette, gradient mesh hero, per-pillar accents, two slogans.

**Palette:**
- Warm: coral `#e05c40`, amber `#f0924a`
- Cool: indigo `#3d35c0`, violet `#7b39eb`, teal `#0b9688`
- Pillar accents: Home=coral, Business=indigo, Industry=teal, Med=violet

**Changes per file:**

`Layout.astro`
- Added `--c-coral/amber/indigo/violet/teal`, `--c-home/business/industry/med`
- `--grad-main` (coral→violet→teal), `--grad-cta` (coral→violet), `--grad-sep`
- `.btn-primary` → gradient fill; `.btn-outline` → gradient border via `padding-box/border-box`
- `section + section::before` → automatic gradient hairline separator
- `.grad-text` utility class (background-clip: text)

`Hero.astro`
- 4 radial blob divs (CSS-only, `filter: blur(72px)`) for mesh background
- Inline SVG geometric line-art (concentric rings + node graph) positioned top-right
- CSS dot-grid pattern bottom-left
- `h1_base` + `h1_highlight` split → gradient applied only to "AI" word
- Pillar tiles: `border-top: 2.5px solid var(--pa)` per-accent via CSS custom property `--pa`
- Manifest strip: full-width gradient bg strip with `--grad-main` text
- `btn-outline` uses `background: linear-gradient(#fff,#fff) padding-box, var(--grad-cta) border-box`

`HowWeWork.astro`
- Per-card accent `--fa` variable (teal/indigo/violet)
- Icon wrapped in 48×48 pill with `color-mix(in srgb, var(--fa) 10%, transparent)` bg
- Human card gets `how.human.tagline` as a footnote with violet color

`Offers.astro`
- `--oa` per-card accent variable
- `offer-topbar`: 3px gradient bar at card top (`var(--oa)` → violet blend)
- Icon wrapper pill with accent bg tint
- `conservative-note` styled in card's own accent color
- Abstract geometric SVG icons (waveform for Industry, pulse+doc for Med, node graph for Business, home+nodes for Home)

`Process.astro`
- Step circles: individual `linear-gradient` backgrounds (coral→amber / violet→indigo / teal→indigo)
- Connector: `linear-gradient(to bottom, coral, violet, teal)` at 30% opacity

`Contact.astro`
- `human-note` badge: pill shape, gradient bg tint, `contact.human_note` string, person SVG icon
- Email link: `--grad-cta` background-clip gradient text
- Input focus: violet border + `rgba(123,57,235,.1)` box-shadow

**New translation keys added:**
- `hero.h1_base` + `hero.h1_highlight` (split for gradient word)
- `manifest.slogan` — "AI dla ludzi, przez ludzi" / "AI for people, by people"
- `how.human.tagline` — "U nas zawsze rozmawiasz z człowiekiem" / "You always talk to a real person"
- `contact.human_note` — same strings, used in contact section badge

**WCAG AA notes:**
- Gradient text on H1 (`font-size: clamp(2.4rem,7.5vw,4.2rem)`) — large text threshold, all gradient stops ≥ 3:1 on white ✓
- Body/muted text stays `#6b6b65` on white (~4.5:1) ✓
- White text on gradient CTA buttons — all gradient stops dark enough for white ✓

---

## Open items / next steps

- [ ] Configure NPM proxy host: `gethumanai.com` → `http://humanai-landing:80`
- [ ] Add SSL via Let's Encrypt in NPM
- [ ] Replace `// TODO: podłączyć backend` in `Contact.astro` with real form endpoint
- [ ] Set `SHOW_SECURITY = true` in `Security.astro` when ready to publish that section
- [ ] Swap placeholder logo (`.logo-icon` in `Nav.astro`) for final brand asset
- [ ] Consider adding `og:image` (1200×630 static PNG) for social previews