☰ MenuMarketing — pages handoff

Claude Design handoff — / home page + /editors recruitment

Self-contained: paste this whole document into a Claude Design session. It supersedes the aesthetic notes in MARKETING-PAGES-BRIEF.md where they conflict; data bindings and page structure from that brief still apply and are restated here in full.

Creative direction (operator-set, 2026-07-08)

Modern and engaging. NOT sector-themed. The first tenant is a yachting brand, but the platform serves any vertical — design nothing nautical, no marine imagery, no luxury-yacht tropes. The tenant's personality arrives exclusively through runtime theme tokens (accent color, logo, font); your design must look right with ANY accent color dropped in.

These are marketing surfaces — they may be noticeably livelier than the app's restrained interior (which is built: editorial-minimal, hairlines, sharp corners, DM Sans + JetBrains Mono). Permission granted for: bold display type at hero scale, expressive layout rhythm, purposeful motion (scroll-triggered reveals, micro-interactions on cards/steps — 150–300ms, never decorative loops), and product-real illustration (stylized UI fragments: status chips, progress bars, a job card — never stock photos). Constraints that still bind: flat surfaces (no gradients-on-everything, no mesh/noise), WCAG AA, text never conveyed by color alone, and everything themeable — the accent is a CSS variable, used for primary actions, focus, and one or two moments of delight per page, not flood-fill.

Both pages ship as HTML/Tailwind mockups (they'll be ported 1:1 into a Next.js app that already has: design tokens as CSS vars — --accent, --primary, surface/ink scales; components: status chips, buttons, form fields, empty states).

Page 1 — / (the client-facing home)

Audience: a prospective client on a phone (sent the link by word of mouth; non-technical; often on poor Wi-Fi) — and returning clients who just want "My jobs". Job: sell the service and start an order.

What the service is: professional human-edited short-form video. Client books a package, sends raw footage any way they like, a vetted editor cuts it, a human QC checks it, the client reviews a preview and approves — only then are they charged, and the finished files arrive. Multi-day turnaround, premium quality.

Structure (in order)

  1. Hero. Outcome-first promise. Engine-default copy (tenant can override via config): headline "Raw footage in. Scroll-stopping video out." (alt: "Professional edits of your footage — in days, not weeks.") subline "Send us what you filmed — a real editor cuts it, a real human checks it, and you only pay when you love it." Primary CTA Start an order, secondary Sign in. If signed in: CTA becomes My jobs with a compact welcome-back variant.
  2. How it works — 3 steps. The centerpiece; give each step a product-real visual:
    • Brief & book — pick a package, describe what you want, pay securely. One quiet line directly under the payment CTA: "Your card is authorized now, charged only when you approve the final edit." (Research: the hold explained BEFORE commit, amount included, converts anxiety into trust.)
    • Send footage, any way you like — drag-and-drop multi-GB uploads, connect Dropbox/Drive/Photos, or paste a WeTransfer-style link — "if we can't fetch it automatically, our team will." Research note: present drag-drop as the visually primary path; pickers and paste-link as clearly available but secondary (three co-equal choices caused paralysis in testing of comparable products).
    • Review & approve — watch a preview, request changes within your package's included revisions, approve → charged → files delivered.
  3. Packages. Card row rendered from live data (name, description, price in tenant currency, "rush available" badge, "N revisions included"). Design the card; real values injected at runtime (the current seed data is placeholder pricing — never design copy that assumes specific prices).
  4. Trust strip. Factual, quiet, no badge-wall. Copy of record: "Payment held until you approve — not a penny sooner." · "Your footage stays private. Stored in the EU, GDPR-protected, never shared." · "Watermarked previews until approval. Your final files, only for you." · "Every edit passes a human quality check before you ever see it."
  5. Social-proof slot (one client quote, outcome-focused — content optional/config) between packages and the closing CTA.
  6. Closing CTA: "Your footage is ready. Let's make something with it." → Start an order. Optional collapsed FAQ block (What if I don't like the edit? / How do I send huge files? / When am I charged? / Who sees my footage?). Footer: quiet link "Editors — work with us" (→ /editors) plus Sign in.

States to design

anonymous · signed-in client (welcome-back) · zero-packages tenant (section hides gracefully) · 360px mobile AND ~1280 desktop for everything.

Voice

Calm, competent, zero jargon: "footage" not "assets", "approve" not "sign off deliverables". No exclamation marks. Buttons are verbs.

Page 2 — /editors (recruit professional video editors)

Audience: working freelance/staff editors, portfolio in hand, tired of client acquisition, scope creep, and chasing invoices. Skeptical of gig-platform vibes — vague pay and "exposure" talk repels them instantly. Job: convince them to apply within two minutes.

Branding: platform-neutral (this recruits for the platform, not the tenant) — no tenant accent, no tenant name. Use the engine's own restrained palette with dark-surface accents that echo the actual editor workspace (dark, warm-black, amber SLA accents — a subtle "this is the tool you'll work in" preview). May include one framed product-real glimpse of the job board (see below).

The pitch (structure, in order — every claim maps to a real mechanism)

  1. Hero. "Edit. We handle everything else." Subline: "Clients, briefs, uploads, revisions, invoicing, payouts — handled. You get footage and a clear brief; you send back a great edit." Research (adopt-now): earnings visibility above the fold — a payout line rendered as a config slot, e.g. "You keep {X}% of every package" — design the slot prominently; the number is operator-configured, NEVER invent one.
  2. How working here works:
    • Pick your work from an open board — "Every job shows the pay, the deadline, and the full brief up front. Take what fits. Pass on what doesn't. No bidding, no proposals, no racing to the bottom." (This exists: swipeable pay-first cards/list — a stylized glimpse of it is the strongest proof asset on the page.)
    • Everything arrives ready — "Footage collected, brief structured, one click to download. You never chase a client for files."
    • Work under a pseudonym — "Clients never contact you. Feedback arrives as written notes, bounded by the package — scope can't creep."
    • A workload you control — "Set your own concurrent-job cap. We never assign past it."
    • Paid per job, via Stripe — "No invoices. No net-30. No awkward emails."
  3. What we look for + the process, stated plainly. Portfolio-grade short-form work; reliability. The funnel with a timeline (research: the "application black hole" is the #1 dropout cause — cure it with explicitness). Copy of record: "Apply in two minutes → a short PAID test edit (we pay for your time, accepted or not) → you're in the pool. You'll hear from us either way within {N} days." ({N} is a config slot.)
  4. One social-proof slot (design it; content optional/config): a single pseudonymous editor quote — believable peer voice, not logos.
  5. Application form. Exactly five fields: name, email, portfolio/reel URL, primary editing tools, optional note. Designed success state: "We review every application and reply within a few days — either way."
  6. Signed-in editor variant: hero CTA becomes Your workspace →.

States

anonymous · signed-in editor · form idle/submitting/success/error · mobile + desktop.

Deliverables

  1. Both pages, mobile (360) + desktop (~1280), all states listed.
  2. New section patterns as reusable pieces: marketing hero, 3-step process, trust strip, package card row (marketing context), feature list, application form, social-proof slot.
  3. Engine-default microcopy for every slot (tenant/config overrides exist for: home hero headline+subline, payout %, reply-timeline days).
  4. HTML/Tailwind-level output. Assume the CSS variables --accent and --primary exist at runtime; demonstrate one section in a second accent color to prove theme-neutrality.