# FairDraw Gateway - Architecture Overview

Updated: 2026-05-26

## 1. Project Type

Static investor website package (no build pipeline).

- Main page: `index.html`
- Supporting static pages: legal + technical documents
- Deployment target: static hosting (Cloudflare Pages style)

The website itself is presentation and simulation infrastructure.
It does not run the production backend.

## 2. Repository Layout (Current)

```text
FairDraw_investors_site-main/
├── index.html
├── technical-docs.html
├── TECHNICAL_OVERVIEW.md
├── ARCHITECTURE.md
├── README.md
├── privacy.html
├── terms.html
├── smart-contracts.html
├── _headers
├── robots.txt
└── sitemap.xml
```

## 3. Core Technical Stack

- Markup: HTML5
- Styling: CSS3 (variables, grid/flex layouts, transitions)
- Logic: Vanilla JavaScript (inline script)
- Browser APIs: Canvas API, IntersectionObserver, Web Crypto API
- Fonts: Google Fonts (`Inter`, `JetBrains Mono`)
- Hosting: static CDN/edge deployment

## 4. Information Architecture (`index.html`)

Section sequence:

1. Hero
2. Problem
3. Solution
4. Architecture
5. Product Surfaces
6. Proof Artifacts and Verification
7. Competitive Positioning
8. Planned Pricing Model
9. Risk and Regulatory Framework
10. Moat and Defensibility
11. Roadmap
12. Vision and CTA

Navigation anchors are aligned with current IDs:

- `#solution`
- `#architecture`
- `#proof`
- `#business`
- `#risk`
- `#future`

## 5. Product Architecture Model (Content Layer)

The landing narrative uses a 3-layer Gateway model:

- Application Layer (operator workflows)
  - Merchant dashboard
  - Embed widget
  - Campaign management surfaces
- Proof / Commitment Layer
  - Participant snapshot
  - Participants hash commit
  - Portable FD-PROOF artifacts
- Randomness Layer
  - Chainlink VRF v2.5 flow representation
  - Winner derivation path

Roadmap layers are explicitly marked as planned:

- Public explorer domain
- SDK/webhooks
- ERC-1155 ticket standard
- Compliance modules
- Governance/tokenized options

## 6. Frontend Runtime Modules

### 6.1 Hero Canvas

- Dot-grid canvas animation with pointer proximity effects.
- Pauses when hero leaves viewport for performance efficiency.

### 6.2 Scroll and Reveal

- Navigation style updates on scroll threshold.
- One-time reveal transitions via IntersectionObserver.

### 6.3 Metrics/Chart Effects

- Animated counters in lifecycle/status cards.
- Animated chart/visual blocks when entering viewport.

### 6.4 Draw Flow Sandbox

Simulation-only draw pipeline:

- Step 1: commitment generation
- Step 2: request ID generation
- Step 3: randomness fulfillment simulation
- Step 4: winner index derivation

Key technical details:

- Uses `crypto.subtle.digest` for deterministic hash generation.
- Renders an in-page verification panel.
- Supports local JSON export for proof demonstration.

## 7. Implementation Truth Map

Current status model reflected in content:

- Live
  - Merchant dashboard surface
  - Embed widget surface
  - VRF draw flow representation
  - FD-PROOF artifact packaging concept
- Beta
  - Campaign API facade
  - Allowed origins and keys facade
  - Payment mode surface claims
- Roadmap
  - Public proof explorer
  - SDK
  - ERC-1155 standard
  - Compliance/governance expansion

## 8. Deployment and Security Notes

- No build command required.
- Static headers are configured via `_headers`.
- SEO baseline uses `robots.txt` + `sitemap.xml`.
- Inline JS/CSS architecture is simple to deploy but limits strict CSP hardening.

## 9. Maintenance Guidance

To avoid documentation drift:

1. Update `index.html`, `TECHNICAL_OVERVIEW.md`, and `ARCHITECTURE.md` together.
2. Keep capability labels synchronized: Live/Beta/Roadmap.
3. Treat roadmap text as directional until implementation is verified.