SpotNote Landing Page Context

Quick reference for continuing work on the SpotNote landing page.

What is SpotNote?

A browser-based note-taking app for film/TV music composers to capture spotting session notes. Users write freeform notes during sessions with directors, and SpotNote automatically parses them into a structured cue list.

Core Features (for landing page content)

Real-time parsing - Type natural notes (timecodes, titles, descriptions mixed together) and watch a structured table build automatically. Bi-directional sync: edit notes or table, both stay in sync.
Fast timecode entry - Skip colons and type partial timecodes. 3422 + Enter becomes 01:34:22. Context-aware expansion based on previous timecodes.
Video sync - Load reference video, cursor position seeks to timecodes. Spacebar during playback pauses and inserts current timecode at cursor.
One-click export - Export to CSV, TSV, Google Sheets, or CueDB format. Auto-calculates durations.
Private & local - No account, no cloud, runs entirely in browser. Data saved to localStorage.

Landing Page Structure

Hero: Headline + subheadline + CTA button + hero video
Features: 5 feature sections alternating left/right layout
Bottom CTA: Final call to action

Key Files

src/src/pages/spotnote/index.tsx - Page component
src/src/pages/spotnote/index.module.css - Styles (dark theme)
src/static/spotnote-landing-assets/ - Videos and images

Design Notes

Dark theme (#0a0a0a background)
Accent color: #818cf8 (indigo/purple)
Text: white headlines, #a3a3a3 body text
Videos autoplay with autoPlay loop muted playsInline
Hero video has curved shadow effect at bottom (radial gradient)

Current State

Hero section: Complete with video
Feature 1 (real-time parsing): Placeholder image
Feature 2 (timecode entry): Has demo video
Feature 3 (video sync): Placeholder image
Feature 4 (export): Has icons + printout image
Feature 5 (privacy): Placeholder image

App URLs

Landing page: /spotnote
Editor app: /spotnote/app