# DualEntry Tasks landing page

Eleven sections matching the selected reference built with plain HTML, CSS, SVG, and native JavaScript modules. No browser runtime dependencies, framework, backend, or account connections. Product examples use illustrative financial data. Customer statistics are attributed separately.

Live: https://dualentry-landing.vercel.app/

## Open on another computer

Install Node.js 22.22 or newer, extract the ZIP, and open a terminal in `dualentry-landing`:

```sh
npm run preview
```

Open the printed local URL (default http://127.0.0.1:4174). This builds and serves the site using Node alone; no dependency installation, Python, Vercel account, or original computer is needed. Stop with Ctrl+C. Set `PORT` to use another port. Native modules require this local server rather than double-clicking HTML.

For editing, use `npm run dev`. It rebuilds when files in `src/` change; refresh your browser to see changes. Keep assets at their existing paths or update references with your replacement.

## Editing map

| Folder | What to edit |
| --- | --- |
| `src/page.html` | Navigation, footer, metadata, shared SVG icons |
| `src/sections/` | One HTML fragment per demonstration; copy and product UI |
| `src/styles/tokens.css` | DualEntry colors, fonts, semantic aliases |
| `src/styles/` | Readable shared and section styles; filenames match demonstrations |
| `src/scripts/` | One entry point, independent controllers, immutable state helpers |
| `src/scripts/section-order.mjs` | Page order and accepted capture section IDs |
| `assets/` | Local fonts, logo, and glass background WebPs |
| `scripts/` | Build, preview, tests, capture, recording, and packaging commands |
| `tests/` | State, interaction, lifecycle, and isolated build regression tests |
| `dist/` | Generated deployment output; do not edit |

The build uses an explicit ordered manifest in `scripts/manifest.mjs`. It joins source styles into one `app.css`, assembles section HTML into one page, and copies only named runtime modules and local assets. Builds never write into authored source. CSS asset paths are relative to the generated `dist/app.css`.

To reuse a section, take its HTML, corresponding stylesheet/controller, shared tokens/product styles, used SVG symbols, and referenced assets. Keep its `data-*` hooks if retaining interactions. Controllers return cleanup functions. `main.js` applies capture layout before initializing them; import controllers individually when embedding in another app.

## Optional development tools

```sh
npm ci
npx playwright install chromium
npm test
npm run test:e2e
npm run capture
npm run record
npm run package
```

Only tests that use a browser, recording, and formatting require installed dev dependencies. Linux may additionally need `npx playwright install --with-deps chromium`. `npm test` uses Node's built-in runner and enforces 80% production JavaScript coverage for lines, branches, and functions. Test builds use separate temporary directories.

Browser verification starts and stops its own local server, tests 14 viewport widths, interactions, mobile targets, replay, and animation pauses. Set `BASE_URL` to verify a deployed site. Capture/record commands write to `captures/current`; reports go to ignored `reports/`. `npm run format` formats authored code.

`npm run package` rebuilds and creates `../dualentry-landing.zip` with source, assets, production output, tests, docs, and current captures when present. It excludes dependencies, reports, old captures, and `.vercel` account linkage. Run capture/record first to refresh images after changing the design.

## Capture URLs

- Full page still: `/?capture=1`
- Single section: `/?capture=1&section=video`
- Agent phase: `/?capture=1&section=agent&phase=filling`
- Splash phase: `/?capture=1&section=hero&phase=moving`

Section IDs: hero, workflow, video, selector, agent, prepared, context, progression, stats, modules, closing.

Agent phases: queued, assigned, filling, review. Splash phases: queued, moving, review. Missing or unsupported phases settle at review. Reduced motion shows the completed presentation; capture mode suppresses motion and hides playback buttons without changing layout.

## Visual and motion contract

Preserve Lausanne regular typography, white product surfaces, DualEntry teal actions, and the existing Cosmos backgrounds. Main headings and essential product information remain visible; repeated caption strips and decorative explanation have been removed.

The splash continuously exchanges three cards between anchored slots, returning seamlessly after 36 seconds. Phones use three vertical queues. The loop pauses offscreen, in hidden tabs, on reduced-motion preference, and with its accessible pause button. The agent prepares grouped form fields over five seconds, stops before approval, and offers an icon Replay control in its form header.

See [asset credits](ASSETS.md), [motion details](MOTION.md), [captures](CAPTURES.md), and [deployment notes](DEPLOYMENT.md).

## Current page and public source

The reference sequence is hero → workflow → video placeholder → task selector → agent preparation → prepared entry → task context → progression → customer statistics → module index → closing CTA. The hero actions appear before its glass board. The video slot is an intentional placeholder, not a playable video.

Every build publishes `/source/`: readable code, individual raw text files, a SHA-256 manifest, and `/source/bundle.json` containing all authored text with paths. Assets are listed with URLs and hashes. Another agent can download the bundle, write each text file at its `path`, fetch each asset to its `path`, then run `npm run preview`. There are no private deployment credentials in this export. A source-only copy can package without generated captures; run capture/record first if those are wanted.

The statistics section uses attributed published customer results: [Slash](https://www.dualentry.com/customers/slash) reports 90% of manual tasks automated; [Graphite](https://www.dualentry.com/customers/graphite) reports close reduced from 20 days to one and $0 implementation costs. The displayed 95% is calculated as `(20 - 1) / 20 × 100`; it describes Graphite's close duration, not a universal time-saving promise.