/* * Stepkit 0.4.1 * Copyright (c) 2026 Vladislav Stepanov * * Original Stepkit portions in this release are licensed under the MIT License. Adapted portions identify their upstream licence and attribution in the copied source and in the entry-specific upstream notice files. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * */ "use client"; import { useEffect, useId, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from "react"; import { Badge } from "../../components/Badge"; import { Button } from "../../components/Button"; import { Dialog } from "../../components/Dialog"; import { FAQ } from "../../components/FAQ"; import { Footer } from "../../components/Footer"; import { Switch } from "../../components/Switch"; import { Toast } from "../../components/Toast"; import "./vellum-landing.css"; type SignalKind = "risk" | "decision" | "win"; interface SheetSignal { id: string; day: string; kind: SignalKind; title: string; owner: string; } interface Plan { id: string; name: string; monthly: number; yearly: number; description: string; features: string[]; cta: string; recommended?: boolean; } const WEEK = [ { id: "mon", label: "Mon", date: "16" }, { id: "tue", label: "Tue", date: "17" }, { id: "wed", label: "Wed", date: "18" }, { id: "thu", label: "Thu", date: "19" }, { id: "fri", label: "Fri", date: "20" } ] as const; const DEMO_SIGNALS: SheetSignal[] = [ { id: "s1", day: "mon", kind: "risk", title: "Checkout retry storm after the card-network blip", owner: "Maya Chen" }, { id: "s2", day: "mon", kind: "decision", title: "Maya owns the Monday sheet through April", owner: "Maya Chen" }, { id: "s3", day: "tue", kind: "decision", title: "Freeze pricing copy until the studio review", owner: "Jonah Adeyemi" }, { id: "s4", day: "tue", kind: "win", title: "Activation mail recovered without a vendor ticket", owner: "Priya Shah" }, { id: "s5", day: "wed", kind: "risk", title: "EU data map still missing the digest store", owner: "Maya Chen" }, { id: "s6", day: "thu", kind: "decision", title: "Cut the unused weekly digest, keep the sheet", owner: "Jonah Adeyemi" }, { id: "s7", day: "fri", kind: "win", title: "Design ran Monday from the sheet, not Slack", owner: "Priya Shah" }, { id: "s8", day: "fri", kind: "risk", title: "Vendor token rotation is still on a calendar reminder", owner: "Sam Okada" } ]; const PLANS: Plan[] = [ { id: "sheet", name: "Single sheet", monthly: 0, yearly: 0, description: "One team, one Monday picture, source included.", features: ["Local demo workspace", "Up to 40 signals", "CSV export of the sheet"], cta: "Use the free sheet" }, { id: "studio", name: "Studio", monthly: 29, yearly: 24, description: "The weekly rhythm for a product trio.", features: ["Shared studio board", "Brief history", "Theme tokens that travel"], cta: "Choose Studio", recommended: true }, { id: "floor", name: "Floor", monthly: 79, yearly: 64, description: "Several sheets, one operating floor.", features: ["Multiple briefs", "Role permissions", "SSO when you wire identity"], cta: "Choose Floor" } ]; const FAQ_ITEMS = [ { id: "who", question: "Who is the Monday sheet for?", answer: "Product trios who currently reconstruct the week from chat. Vellum is the picture you open before stand-up — not another channel to check." }, { id: "signals", question: "What counts as a signal?", answer: "A risk, a decision, or a win, with an owner and a day. If it would otherwise live in Slack until Friday, it belongs on the sheet." }, { id: "brief", question: "How does a signal become the brief?", answer: "Days cluster the sheet. Open risks stay loud. Closed wins stay visible so Monday is a record, not a transcript of who talked the longest." }, { id: "demo", question: "Can I start a real studio from this page?", answer: "You can run the sheet in the browser and choose a sample plan. Billing, accounts, and a waitlist need your own backend before this is a live product." } ]; const NAV = [ { href: "#product", label: "Product" }, { href: "#workflow", label: "How it works" }, { href: "#pricing", label: "Pricing" }, { href: "#faq", label: "FAQ" } ]; function countFor(day: string) { return DEMO_SIGNALS.filter((signal) => signal.day === day).length; } function priceLabel(plan: Plan, yearly: boolean) { const value = yearly ? plan.yearly : plan.monthly; if (value === 0) return "$0"; return `$${value}`; } function kindTone(kind: SignalKind) { if (kind === "risk") return "danger" as const; if (kind === "win") return "success" as const; return "accent" as const; } export function VellumLanding() { const menuId = useId(); const planTitleId = useId(); const [menuOpen, setMenuOpen] = useState(false); const [yearly, setYearly] = useState(true); const [activeDay, setActiveDay] = useState<(typeof WEEK)[number]["id"]>("wed"); const [requestOpen, setRequestOpen] = useState(false); const [selectedPlan, setSelectedPlan] = useState(null); const [toast, setToast] = useState(""); const [requestError, setRequestError] = useState(""); const menuButtonRef = useRef(null); const menuRef = useRef(null); const planDialogRef = useRef(null); const daySignals = DEMO_SIGNALS.filter((signal) => signal.day === activeDay); useEffect(() => { if (!menuOpen) return; const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { setMenuOpen(false); menuButtonRef.current?.focus(); } }; document.addEventListener("keydown", onKey); const first = menuRef.current?.querySelector("a, button"); first?.focus(); return () => document.removeEventListener("keydown", onKey); }, [menuOpen]); useEffect(() => { const node = planDialogRef.current; if (!node) return; if (selectedPlan && !node.open) node.showModal(); if (!selectedPlan && node.open) node.close(); }, [selectedPlan]); const closeMenu = () => { setMenuOpen(false); menuButtonRef.current?.focus(); }; const submitRequest = (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); const team = String(data.get("team") || "").trim(); const email = String(data.get("email") || "").trim(); if (!team || !email.includes("@")) { setRequestError("Add a team name and a real email so the demo can validate the form."); return; } setRequestError(""); setRequestOpen(false); setToast("Demo only — connect this form to your waitlist or CRM before you ship it."); }; return (

Skip to product

{menuOpen ? ( ) : null}

Weekly operating picture

The week, on one sheet of vellum.

Vellum is a Monday brief for product teams who are tired of reconstructing the week from chat. Log the risk, the decision, the win. The sheet is the product.

Demo · changes reset on refresh

A sheet you can actually run Monday from.

Sample week of 16 March. Choose a day to read the signals that landed.

Capture. Cluster. Brief.

Three moves, one page. Not a feature grid.

01
Write the signal while it is still true

A risk, a decision, or a win. Owner and day are enough. Capture it before the week turns it into folklore.
02
Let the week arrange itself

The sheet clusters by day. Open risks stay loud. Closed wins stay on the page so the team can see what actually moved.
03
Read the brief, then leave

Monday is a picture, not a stand-up transcript. Open items stay on the sheet so the room does not relitigate them.

Sample prices, real toggle.

Figures are demonstration amounts. Checkout needs your billing provider; choosing a plan only records the selection here.

{PLANS.map((plan) => (

{plan.recommended ? Usual studio choice : Sample plan}

{plan.name}

{plan.description}

{priceLabel(plan, yearly)} {plan.monthly === 0 ? "to evaluate the sheet" : yearly ? "per month, billed annually" : "per month"}

{feature}

))}

{selectedPlan ? `Selected in this demo: ${selectedPlan.name}.` : "No plan selected yet."}

Licence

Original Vellum page source is MIT, same as Stepkit. Keep NOTICE.md with the copied files. Adapted Stepkit components in a mixed project keep their upstream notices.

{toast ? { if (!open) setToast(""); }} /> : null}

); } function WeekSheet({ activeDay, onSelectDay, signals, compact = false }: { activeDay: string; onSelectDay: (day: (typeof WEEK)[number]["id"]) => void; signals: SheetSignal[]; compact?: boolean; }) { return (

Week of 16 March Demo data · {DEMO_SIGNALS.length} signals

) => { const ids = WEEK.map((day) => day.id); const index = ids.indexOf(activeDay as (typeof WEEK)[number]["id"]); let next = index; if (event.key === "ArrowRight") next = (index + 1) % ids.length; else if (event.key === "ArrowLeft") next = (index - 1 + ids.length) % ids.length; else if (event.key === "Home") next = 0; else if (event.key === "End") next = ids.length - 1; else return; event.preventDefault(); onSelectDay(ids[next]); event.currentTarget.querySelectorAll("button")[next]?.focus(); }} > {WEEK.map((day) => ( ))}

{signal.kind}
{signal.title} {signal.owner}

); } export default VellumLanding;

The week, on one sheet of vellum.

A sheet you can actually run Monday from.

Capture. Cluster. Brief.

Write the signal while it is still true

Let the week arrange itself

Read the brief, then leave

Sample prices, real toggle.

{plan.name}

Licence