// ---------- Marketing landing page — light, editorial ---------- const LandingPage = ({ onEnterApp, accent, onNav }) => { return (
); }; const LandingNav = ({ onEnterApp }) => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
); }; const Hero = ({ onEnterApp, accent }) => (
{/* subtle topographic background */} {Array.from({ length: 22 }).map((_, i) => { const y = 60 + i * 32; return ; })}
ITERATION 04 · LIVE WITH FOUNDING STUDIOS

Where creativity
meets clarity.

A premium client portal for studios that take the work — and the experience around it — seriously. Project, draft, comment, revision, approval — one calm, branded workspace.

); // Mini portal widget — an authentic miniature of the workspace dashboard const HeroPreview = ({ accent }) => { // Same data the real dashboard renders const metrics = HD.metrics.slice(0, 4); const projects = HD.projects.slice(0, 3); const review = HD.reviewQueue[0]; return (
{/* Surrounding chrome — like a window */}
{/* Window topbar */}
harbor.dk/dashboard
LIVE
{/* Two-column: mini sidebar + content */}
{/* Mini sidebar */}
{["Home", "Folder", "Upload", "Users", "Inbox", "Calendar"].map((ic, i) => { const I = window.Icon[ic]; const active = i === 0; return (
); })}
{/* Main content */}
{/* Top greeting strip */}
GOOD MORNING, ALEX
Here's what's moving today.
New
{/* Metric strip — 4 real metrics */}
{metrics.map((m, i) => { const tone = STATUS_TONES[m.tone]; const I = window.Icon[m.icon]; return (
{m.label.split(" ")[0].toUpperCase()}
{m.value}
); })}
{/* Active projects */}
ACTIVE PROJECTS
{projects.map(p => { const tone = STATUS_TONES[p.accent]; return (
{p.name}
{p.progress}%
); })}
{/* Review queue ping */}
{review.from} · {review.project}
{review.message}
{review.time}
{/* Floating "Open portal" indicator */}
Live from the portal
); }; const Marquee = () => { const studios = ["WINTERHILL MEDIA", "ATRIUM AUDIO", "GLASSWING", "NORTHFALL", "OPEN CIRCUIT", "BAY & ROW", "MEZZANINE STUDIO", "FERRY POINT"]; return (
TRUSTED BY STUDIOS
{[...studios, ...studios].map((n, i) => ( {n} ))}
); }; const ByTheNumbers = () => (
{[ { v: "184", l: "STUDIOS ONBOARDED" }, { v: "2.4×", l: "FASTER APPROVALS" }, { v: "96%", l: "CLIENT RETENTION" }, { v: "12.4M", l: "ASSETS UNDER REVIEW" }, ].map((s, i, arr) => (
{s.v}
{s.l}
))}
); const ProblemSolution = () => (
01 — THE PROBLEM

Creative work doesn't
live in twelve tabs.

Most studios still run the most important part of their business — the part the client actually sees — through a duct-taped chain of Drive folders, WeTransfer links, spreadsheet trackers, and "did you get my note?" text threads.

{[ "Versions tracked in filename suffixes nobody trusts.", "Comments scattered across email, Slack, and the phone.", "Final deliverables emailed at 2 AM the night they're due.", "Clients lost between four logins and a download cap.", ].map((t, i) => (
{t}
))}
02 — THE HARBORDOCK WAY

One portal.
One source of truth.

Project, draft, comment, revision, deliverable — every step of the client review lives in one calm, branded workspace. You move from kickoff to final delivery in a straight line, with a paper trail you'd be proud to show anyone.

{[ "Frame-accurate comments, locked to the timecode they were left on.", "Versioned drafts with full revision history and reviewer state.", "Client-facing portal that looks like it was built by your studio.", "Approval log a court reporter could read.", ].map((t, i) => (
{t}
))}
); const FeaturePreview = ({ accent }) => { const steps = [ { n: "01", t: "Create the project", body: "Kick off a portal with branding, deadlines, and your client's reviewers — in under a minute." }, { n: "02", t: "Receive client assets", body: "Reviewers drop interview selects, brand files, and brief docs into one structured intake." }, { n: "03", t: "Upload drafts", body: "Push versioned cuts with a single command. Every draft gets a frame-accurate review surface." }, { n: "04", t: "Frame-locked comments", body: "Clients leave timestamped notes against the exact moment they're talking about." }, { n: "05", t: "Track every revision", body: "Round 01 through final lock — see who owns what, when it's due, and what's been signed off." }, { n: "06", t: "Deliver and archive", body: "Hand off the final masters with a tap; archive the project as a permanent client record." }, ]; return (
03 — THE WORKFLOW

From kickoff to final delivery
in one straight line.

Six steps. No tabs. Every artifact archived against the project, every approval timestamped, every revision rounded up automatically.

{steps.map((s, i) => (
(e.currentTarget.style.background = "var(--white)")} onMouseLeave={(e) => (e.currentTarget.style.background = "var(--paper)")} >
{s.n}
{s.t}
{s.body}
))}
); }; const WhoItsFor = () => { const audiences = [ { t: "Videographers", body: "Cinematic listings, brand films, and event recap reels — with frame-accurate review.", icon: "Film" }, { t: "Photographers", body: "Gallery deliveries with selects, ratings, and approval state in a single shared link.", icon: "Image" }, { t: "Podcast teams", body: "Episode drops, transcript review, and per-segment commenting for hosts and producers.", icon: "Mic" }, { t: "Creative agencies", body: "Multi-client studios with per-project portals, branded for every account.", icon: "Layers" }, { t: "Production studios", body: "From boards to picture lock to final master — one calm operations layer.", icon: "Compass" }, { t: "Content creators", body: "Retainer cadences, sponsor cuts, and platform-ready exports without the spreadsheet.", icon: "Sparkle" }, ]; return (
04 — WHO IT'S FOR

Built for the studios
who care how it feels.

HarborDock is a tool for the people who already know that the experience around the work is part of the work.

{audiences.map((a, i) => { const IconComp = window.Icon[a.icon]; return (
{ e.currentTarget.style.borderColor = "rgba(8,12,16,0.18)"; e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 20px 40px -28px rgba(8,12,16,0.20)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(8,12,16,0.08)"; e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }} >
{a.t}
{a.body}
 ); })}
); }; const PricingPreview = ({ onEnterApp }) => { const tiers = [ { name: "Studio", price: "$48", cadence: "per editor / month", tag: null, body: "For small studios and freelance teams just moving off Drive.", bullets: ["Up to 5 active projects", "10 client reviewers", "100 GB storage", "Branded client portals"], cta: "Start a studio", featured: false, }, { name: "Atelier", price: "$96", cadence: "per editor / month", tag: "MOST POPULAR", body: "For agencies running multiple clients on parallel retainers.", bullets: ["Unlimited active projects", "Unlimited reviewers", "1 TB storage + cold archive", "Custom domains + white-label", "Approval audit log"], cta: "Open an atelier", featured: true, }, { name: "Production", price: "Talk", cadence: "annual contract", tag: null, body: "For full production houses with security and SLA needs.", bullets: ["SSO + SCIM", "Dedicated success engineer", "EU + US storage residency", "Custom retention policies", "99.99% SLA"], cta: "Speak with the team", featured: false, }, ]; return (
05 — PRICING

Priced like a tool.
Felt like a studio.

All plans include unlimited drafts, unlimited comments, and the entire client portal experience.

{tiers.map(t => (
{t.tag && (
{t.tag}
)}
{t.name}
{t.body}
{t.price} {t.price !== "Talk" && {t.cadence}}
{t.bullets.map((b, i) => (
{b}
))}
))}
); }; const FinalCTA = ({ onEnterApp }) => (
06 — BEGIN

All your projects.
All your feedback.
All in one place.

Open the demo portal. Click around. Bring your team in when you're ready. No card, no setup, no clutter.

); const LandingFooter = () => ( ); window.LandingPage = LandingPage;