119 lines
5.5 KiB
Markdown
119 lines
5.5 KiB
Markdown
# 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
|