feat(website): add standalone TeamAI site and use-case contribution entry

[MertensMing]

Summary

Add a standalone static TeamAI site under website/, with a product overview, Git-to-tool sync diagram, getting-started links, and an entry for community use cases.

The site asks for real setups and workflows through #1131. No use cases are invented: website/use-cases/ stays empty until a real contribution arrives; the build creates the empty directory on fresh checkouts. English and Chinese instructions explain how to propose and contribute a page.

Type of Change

• New feature

Test Plan

• npm run build --prefix website and npm test --prefix website: 2 tests pass, checking public output isolation and homepage assets/anchors.
• Root npm run build, npx tsc --noEmit, and npm run lint passed with Node 20.19.5.
• Real CLI verification after building: node dist/index.js --version returned 0.22.0; --help completed.
• npx vitest run --config vitest.e2e.config.ts src/__tests__/e2e/init-unattended.test.ts --maxWorkers=2: 2 real-CLI E2E tests passed in isolated fixtures.
• Browser checks at 1280px desktop and 390px mobile; no page-level horizontal overflow at 320px or 390px.
• npm pack --dry-run --json: website files are excluded from the CLI package.
• Root full unit suite completed: 10,999 passed, 25 skipped, 2 failed (466 files passed, 1 skipped, 2 failed). Failures: hooks-reconcile-scope.test.ts (project-gate real-shell test) and project-hook-rules.test.ts (ZCode doctor test). The former also fails in isolation with ENOTDIR accessing .git/hooks/post-checkout in this worktree, where .git is a file. The latter is not yet diagnosed. No CLI/hooks source changes are included.

Related Issues

Related to #1131.

Notes for Reviewers

Draft for scope/design review while full-suite validation remains unresolved. Plain HTML/CSS and Node built-ins; no framework or added dependencies. A dedicated workflow checks the site.

Hosting, domain, and automatic publication remain to be agreed with maintainers. This PR does not deploy a site. Replace the empty case state only after a real community contribution.

[github-actions]

No confident findings in the specified PR diff.

The PR description meets the testing requirement: it records post-build real-CLI checks and two real-CLI E2E tests. The reported full-suite failures alone do not establish a defect introduced by this diff.

Review was read-only; I did not run, build, or install anything from the PR.

[SaulMoro]

📱 Visual preview & responsive layout walkthrough

Note

This visual walkthrough is provided purely for tracking and reference purposes to show how the proposed static site layout adapts across different viewports and devices. This is neither an acceptance nor a rejection of the proposed design, but rather a visual reference to facilitate discussion and review.

---

🎨 Theme & Appearance (Light / Dark Mode)

• Dark Theme (Default): The website sets color-scheme: dark; on :root with a dark palette (background #090a0d, card containers #0e1016 / #161923).
• Contrasted Light Section: The Community use cases section is intentionally styled with color-scheme: light; background: #eeeff2; for high visual contrast.
• Full Light Mode Support: Currently there is no dynamic light/dark switcher and no @media (prefers-color-scheme: light) rules to render the entire page in light mode.

---

📐 Responsive Breakdown by Screen Size

Viewport / Breakpoint	Layout Behavior	Visual Preview
Desktop 1280 × 900	• Full 3-column horizontal Git-to-tool sync flow diagram (assets ➔ repo ➔ tools). • 2-column side-by-side grid for Community use cases and Quickstart terminal.	View Desktop Screenshots Hero & Sync Diagram: Cases & Quickstart:
Tablet 768 × 1024 (iPad Mini)	• Fluid margins (calc(100% - 48px)). • Scaled down diagram connectors and padding while retaining horizontal diagram flow.	View Tablet Screenshots Hero & Header: Architecture & Principles:
Mobile 390 × 844 (iPhone 12 Pro)	• Stacked layout triggered by @media (max-width: 650px). • Header wraps gracefully, sync connectors hidden, 2-column tool grid, no horizontal overflow at 390px or 320px.	View Mobile Screenshots Mobile Hero: Stacked Sync Flow: Community Cases & Terminal:

[MertensMing]

Thanks @SaulMoro for the visual walkthrough and the screenshots across desktop, tablet, and mobile.

I've reviewed the theme observations against the implementation. The page currently uses a fixed dark palette with a light community section; it does not offer a full light theme or a theme switcher. I suggest keeping that scope for this initial version while the overall design is being discussed. A full light theme can be considered separately if maintainers would like one.

Since the walkthrough documents the current behavior and does not request a specific change, I'm leaving the implementation unchanged for now. This PR remains a draft pending confirmation of the scope in #1131 and design feedback.

[MertensMing]

Following up on my earlier comment: I took another pass through the responsive layouts and pushed c9521c1 with a few targeted improvements.

• Stack the overview, use-case, and getting-started sections at 800px and below, avoiding cramped columns just above the previous 650px breakpoint.
• Keep vertical flow arrows and the capabilities link visible on mobile; use a single tool column on the narrowest screens.
• Increase navigation hit areas to 44px and make the horizontally scrollable command block keyboard-focusable.

Validation: website build and both website tests passed; root build and the built CLI --version passed (0.22.0). Browser checks at 320, 390, 650, 651, 768, 800, 801, 1024, and 1280px showed no page-level horizontal overflow or clipped headings/buttons. Keyboard horizontal scrolling was checked at 320px. The full CLI test suite was not rerun for these HTML/CSS changes.

The theme remains unchanged, and this PR is still a draft pending scope/design confirmation.