# ITCAN reimagined

Redesign prototype for ITCAN Pte Ltd (itcan.biz), Singapore IT services and staffing.

**Live prototype:** https://itcan-reimagined.higgsfield.app
**Cover page on Pages:** https://manishkrsg-cloud.github.io/prototypes/website-design/itcan/

Built 4 September 2026 with the Higgsfield website builder (React 19 + TanStack Start on a Cloudflare Worker). This folder holds the custom parts; the platform scaffold (scroll-scrub engine, build config) lives in the Higgsfield repo, website id `ad31d0fc-6ba9-44da-9283-48bb57265f66`.

## Versions

| Version | Link | Notes |
|---|---|---|
| v3 (current) | https://itcan-reimagined.higgsfield.app | Light, two doors, Team Builder, operations globe, modern logo, Space Grotesk + Manrope |
| v2 | https://itcan-v2-globe.higgsfield.app | Light, glass globe film, operations globe, full old-site content, Outfit type, original logo |
| v1 | https://itcan-v1-dark.higgsfield.app | Dark navy, obsidian lattice film, wireframe lattice layer, original logo |

## What it does

- Two doors in the hero: **I need people** (employers) and **I need a job** (candidates). The globe and the page respond to the choice.
- 3D hero: a 15 second generated film of a frosted-glass globe with a circuit lattice, red office nodes, blue light arcs and orbiting glass panels. The visitor's scroll plays it.
- Operations globe (canvas, no dependencies): five offices, client markets, arcs that carry ITCAN's four service lines with travelling packets, an operations panel that follows the chapter, hover cards with real addresses, drag to spin.
- Team Builder: pick roles, count, location, engagement and start; glass figures assemble on a 3D platform; the brief writes itself and sends to sales@itcan.biz.
- Full old-site content, modernised: 4 services, 9 industrial solutions, vision, mission, 8 values, culture, 3 testimonials, 28 awards, 11 press links, 3 corporate videos, 4 office addresses, employee login menu.

## Brand

- Colours sampled from the original logo: red `#E80000`, blue `#0000C8`. Ground `#F7F8FC`, ink `#0B1233`.
- Type: Space Grotesk (display), Manrope (body), IBM Plex Mono (labels).
- Modern mark: "iTCAN" with the i as a blue bar and a red signal dot, red underline. Original logo and the alternative swoosh mark are kept on the live site under `/assets/brand/`.

## Files

- `docs/01-PAIN-POINT-DOSSIER.md` audit of itcan.biz, 12 pain points, pricing
- `docs/02-DESIGN-BRIEF.md` concept, palette, journey and section plan
- `docs/03-PROTOTYPE-LINKS.md` handover: what the client sees, known gaps
- `source/` the custom React components and stylesheet
- `brand/BRAND.md` tokens and logo notes

## How to demo

1. Open the live link on desktop Chrome or Safari.
2. Scroll slowly through the first four screens. Drag the globe.
3. Click **I need people**, add three roles, watch them assemble, press **Send brief to ITCAN**.
4. Click **I need a job**, pick a city, press **Apply via Talent Suite**.

## Known gaps

- Employee login links point to itcan.biz until ITCAN shares portal URLs.
- Technology practice descriptions name typical stacks; ITCAN to confirm.
- Videos open on YouTube; embedding needs a CSP change on the final build.
- Team Builder sends by email; a form endpoint or calendar booking is phase 2.