Trade Factor

The Decisive Edge in Every Transaction.

Marketing / community site for Trade Factor, a cross-industry trading community.

Table of contents

• About
• Tech stack
• Prerequisites
• Installation
• Usage
• Project structure
• Routes
• Design tokens
• Status

About

Trade Factor is a marketing and community site built around a cross-industry trading community. The design is exported from Claude Design (Trade Factor.dc.html), which is the source of truth for content, page scope, and brand tokens. See CLAUDE.md for full development guidance and conventions.

Tech stack

• Next.js 15 (App Router)
• React 19
• TypeScript (strict)
• Tailwind CSS 3.4
• Framer Motion 11

Prerequisites

• Node.js 18.18 or later
• npm

Installation

git clone <repo-url>
cd trade-factor
npm install

Usage

npm run dev     # start dev server at http://localhost:3000
npm run build   # production build
npm run start   # serve production build
npm run lint    # eslint (next/core-web-vitals + next/typescript)

Project structure

app/                     App Router routes + root layout + globals.css
components/
  layout/                Nav, Footer, AmbientBackground, ScrollProgressRing
  ui/                     Countdown, EventCard
  home/                   PositioningTabs, TelegramMockup
  tf1/                    Tf1Content (TF1 page body)
  events/                 EventsBrowser
  host/                   HostForm
  community/              IndustriesAccordion
  insights/               InsightsBrowser
  join/                   JoinForm
lib/
  routes.ts               Canonical route map + nav link groups
  data.ts                 Page copy and data (ported verbatim from the export)
public/assets/           Brand logos + ring artwork
tailwind.config.ts       Design tokens (colors, fonts, radii, keyframes)

Routes

Page	Route
Home	/
Who We Are	/who-we-are
Events Hub	/events
Host an Event	/host
Community	/community
Insights	/insights
Join	/join
Trade Factor 1.0	/trade-factor-1-0

Canonical route map lives in lib/routes.ts.

Design tokens

Built around the gold ring / torus logo: a dark ground, warm cream text, gold as the decisive accent, cyan as the "live" / action signal.

Token	Value	Use
ink	#0A0906	Page background
surface	#15120C	Raised cards / footer
surface-2	#0c0a07	Recessed surfaces
cream	#EFE7D8	Primary text
gold	#D89B3C	Decisive accent
gold-light	#F6C866	Accent highlight / focus ring
gold-dark	#7A4E1E	Accent shadow
cyan	#3FB6C9	"Live" / action signal

Fonts: Clash Display (display), Satoshi (body, via Fontshare), IBM Plex Mono (mono, labels/eyebrows). Full token reference in tailwind.config.ts.

Status

Phase 1 (scaffold) and Phase 2 (full page build-out) are complete — all 8 routes render their PRD sections and npm run build prerenders cleanly. See CLAUDE.md for conventions, accessibility notes, and the component map.