Redesign: control instead of drift #3

Merged

christianmanivong merged 2 commits from feature/redesign into main 2026-09-30 05:44:34 +00:00

Conversation 0 Commits 2 Files Changed 53

+1957 -3478

christianmanivong commented 2026-09-29 21:25:31 +00:00

Owner

Copy Link

Copy Source

The site felt old, unfocused and bloated. This is the redesign we planned: one message, one audience, one goal, fewer words, a lighter look, and only real screenshots.

What changes

• Message: control instead of drift. Audience: IT departments in small and mid-sized companies. Goal: buy a licence (netOrk is free; the licence adds vulnerability data and updates).
• Home under 400 words (was ~830, plus a 2,700-word features page):
  • the real drift comparison of an access point;
  • three steps (Define → Detect → Fix);
  • the hardware it runs on;
  • vulnerabilities with a licence;
  • what else is included;
  • a closing call to action.
• New: /pricing with Starter / Pro / Enterprise "on request", buttons to the licence portal.
• Other pages:
  • Persona pages use one template.
  • NIS2 and Plugins are cut to half or less.
  • Impressum and Datenschutz are placeholders.
  • Features, Drivers and Roadmap are gone; their URLs return 301 redirects.
• Look:
  • light paper and ink, with the dark product on a "stage";
  • Inter, self-hosted;
  • ruled lists instead of card grids.
• Screenshots: 4 real, cropped images from the anonymized demo copy. The drift screenshot shows the real state: 42 values match, and the syslog server isn't defined in the profile.
• Language: follows the browser until someone chooses; the German copy uses "ihr".
• Docs: CLAUDE.md, DESIGN.md, PAGES.md and PRODUCT.md describe the new rules.

Checked

• tsc, build
• scripts/check/site.py: 11 routes × DE/EN × 360/390/768/1440
  • no sideways scrolling, one h1 per page, all images loaded, no console errors
  • no requests to other origins, no dead links
  • redirects and language detection work
  • word budgets hold
• nginx 301s in the real container

Before netork.io

• Look at it on preview.netork.io
• Impressum and Datenschutz text (the pages show a yellow placeholder box)
• Make the licence portal (license.netork.io/portal) public
• Define the unit of the KB request limit before it goes on the pricing page

Pages

Home (EN, 1440)

Home (DE, 1440)

Pricing (EN)

Home on a phone (390)

🤖 Generated with Claude Code

The site felt old, unfocused and bloated. This is the redesign we planned: **one message, one audience, one goal**, fewer words, a lighter look, and only real screenshots. ## What changes - **Message:** control instead of drift. **Audience:** IT departments in small and mid-sized companies. **Goal:** buy a licence (netOrk is free; the licence adds vulnerability data and updates). - **Home under 400 words** (was ~830, plus a 2,700-word features page): - the real drift comparison of an access point; - three steps (Define → Detect → Fix); - the hardware it runs on; - vulnerabilities with a licence; - what else is included; - a closing call to action. - **New:** `/pricing` with Starter / Pro / Enterprise "on request", buttons to the licence portal. - **Other pages:** - Persona pages use one template. - NIS2 and Plugins are cut to half or less. - Impressum and Datenschutz are **placeholders**. - Features, Drivers and Roadmap are gone; their URLs return 301 redirects. - **Look:** - light paper and ink, with the dark product on a "stage"; - Inter, self-hosted; - ruled lists instead of card grids. - **Screenshots:** 4 real, cropped images from the anonymized demo copy. The drift screenshot shows the real state: 42 values match, and the syslog server isn't defined in the profile. - **Language:** follows the browser until someone chooses; the German copy uses "ihr". - **Docs:** `CLAUDE.md`, `DESIGN.md`, `PAGES.md` and `PRODUCT.md` describe the new rules. ## Checked - `tsc`, build - `scripts/check/site.py`: 11 routes × DE/EN × 360/390/768/1440 - no sideways scrolling, one h1 per page, all images loaded, no console errors - no requests to other origins, no dead links - redirects and language detection work - word budgets hold - nginx 301s in the real container ## Before netork.io - [ ] Look at it on preview.netork.io - [ ] Impressum and Datenschutz text (the pages show a yellow placeholder box) - [ ] Make the licence portal (`license.netork.io/portal`) public - [ ] Define the unit of the KB request limit before it goes on the pricing page ## Pages **Home (EN, 1440)**  **Home (DE, 1440)**  **Pricing (EN)**  **Home on a phone (390)**  🤖 Generated with [Claude Code](https://claude.com/claude-code)

home-en.png

557 KiB

home-de.png

571 KiB

pricing-en.png

144 KiB

home-en-390.png

291 KiB

christianmanivong added 2 commits 2026-09-29 21:25:31 +00:00

feat(screenshots): cropped shots, sizes for the site, a site check ... 369f66afdc

- shots.py crops to a region (clip) or to what one or more elements cover
  (element, pad), per-shot viewport; capture.py writes the published sizes to
  src/data/screenshots.json so the page reserves the right space.
- anonymize.py no longer empties secrets that netOrk compares with each other
  (Wi-Fi keys on an SSID against the key read from the access point). Emptying
  them invented passphrase "drift" that never existed; a keyed hash keeps equal
  equal, reverses nothing, and its key lives for one run.
- scripts/check/site.py checks the built site in both languages at four widths:
  sideways overflow, one h1, images with alt and size, console errors, requests
  to other origins, links to unknown routes, old-URL redirects, language
  detection, and word counts against the budgets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

feat: redesign — one message, one audience, light pages ... f70fec496a

The site felt old, unfocused and bloated: 11 pages, a features page of 171
bullets, a homepage of 830 words in card grids around seven mockup-style
screenshots, and no single thing it wanted a visitor to understand.

- Message: control instead of drift. Audience: IT departments in small and
  mid-sized companies. Goal: buy a licence — netOrk itself is free, the
  licence adds vulnerability data and image updates.
- Home is under 400 words: the drift comparison of a real access point, three
  steps, the hardware it runs on, vulnerabilities with a licence, what else is
  in the box, one closing band. Features, Drivers and Roadmap are gone; their
  URLs redirect (router and nginx 301).
- New Pricing page: the free core, Starter / Pro / Enterprise on request with
  the plan differences from the licence server, four questions; buttons go to
  the licence portal. The unit-less KB request limit is left out.
- Persona pages are one template; NIS2 and Plugins are cut to half or less.
  Impressum and Datenschutz exist as marked placeholders; the unsupported
  "MIT licence" claim is gone from the footer.
- Look: light paper and ink, the dark product on a stage, Inter self-hosted,
  split sections and ruled lists instead of cards. Four real, cropped
  screenshots replace eight full-window ones.
- Language follows the browser until someone chooses; <html lang> is set.
  Scroll-to-top on navigation, a catch-all route, no dead /docs/architecture.
- CLAUDE.md, DESIGN.md, PAGES.md and PRODUCT.md describe the new rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

christianmanivong merged commit 992df0e6b1 into main 2026-09-30 05:44:34 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

christianmanivong

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: NetOrk/website#3