chore: remove narrating homepage comments

Author: richiemcilroy

apps/web/app/(site)/Navbar.tsx

@@ -9,11 +9,6 @@ interface NavbarProps {
 	stars?: string;
 }
 
-/**
- * Flat, full-bleed header: logo and links on the left, a text link plus an
- * outlined and a filled action on the right. It sits flush at the top of the
- * viewport so page content passes underneath it rather than around a pill.
- */
 export const Navbar = ({ stars }: NavbarProps) => {
 	return (
 		<NavbarFrame>

apps/web/components/pages/HomeTwo/Eyebrow.tsx

@@ -2,11 +2,6 @@ import { classNames } from "@cap/utils/helpers";
 import type { ReactNode } from "react";
 import { EYEBROW, INK } from "./theme";
 
-/**
- * 12px uppercase mono eyebrow with a small accent square, the way Intercom
- * marks its sections. `color` covers the dark band; `accent` picks up the
- * section's mode hue.
- */
 export const Eyebrow = ({
 	children,
 	accent = "#8DBCF0",

apps/web/components/pages/HomeTwo/Faq.tsx

@@ -2,11 +2,6 @@ import { homepageCopy } from "@/data/homepage-copy";
 import { Eyebrow } from "./Eyebrow";
 import { BODY_TEXT, H_SECTION, MODE_THEME } from "./theme";
 
-/**
- * The homepage FAQ, same questions and answers, rebuilt as hairline rows with
- * a plus that turns into a minus. Plain `details` elements, so it opens with
- * no JavaScript and stays keyboard native.
- */
 export const Faq = () => (
 	<section className="px-5 py-20 lg:py-28">
 		<div className="mx-auto grid max-w-[1100px] gap-12 lg:grid-cols-[minmax(0,340px)_minmax(0,1fr)] lg:gap-20">

apps/web/components/pages/HomeTwo/Features.tsx

@@ -22,12 +22,6 @@ import {
 	type ModeKey,
 } from "./theme";
 
-/**
- * The homepage's "built for how you actually work" grid, in the new type and
- * colour system. Same eight promises, one accent per card so the row reads in
- * the four mode hues rather than one flat block.
- */
-
 type Feature = {
 	title: string;
 	body: string;

apps/web/components/pages/HomeTwo/Hero.tsx

@@ -81,7 +81,6 @@ const WindowsGlyph = ({ className }: { className?: string }) => (
 	</svg>
 );
 
-/** Small muted link to /download for the platforms not shown on the button. */
 const AltIcon = ({
 	label,
 	children,
@@ -101,8 +100,7 @@ const AltIcon = ({
 
 export const Hero = () => {
 	const { platform, isIntel } = useDetectPlatform();
-	// Default the display to macOS while detection resolves (same pattern as
-	// the live homepage Header): majority platform, identical button size.
+
 	const displayPlatform = platform ?? "macos";
 	const isWindows = displayPlatform === "windows";
 	const isLinux = displayPlatform === "linux";
@@ -112,10 +110,6 @@ export const Hero = () => {
 		: getDownloadUrl(displayPlatform, isIntel);
 
 	return (
-		// On desktop the hero takes the fold minus the laptop's peek and centres
-		// itself in it, so the space above and below the block stays even instead
-		// of piling up under the buttons. Capped, because on a tall monitor a
-		// viewport-tall hero just reads as a hole.
 		<section className="relative px-5 pb-12 pt-12 sm:pt-14 md:pb-4 md:pt-[56px]">
 			<span
 				data-header-sentinel
@@ -162,8 +156,7 @@ export const Hero = () => {
 						)}
 						Download free for {platformName}
 					</Link>
-					{/* Scrolls to the demo AND starts the tour, so the click has an
-					    unmistakable payoff instead of landing on an idle laptop. */}
+
 					<button
 						type="button"
 						onClick={() => {

apps/web/components/pages/HomeTwo/HeroHeadline.tsx

@@ -10,31 +10,11 @@ import {
 import { MacCursor, WindowsCursor } from "./cursors";
 import { H_HERO, INK, MODE_THEME, type ModeKey } from "./theme";
 
-/**
- * The hero headline is a three-slot machine: capture verb, middle beat,
- * payoff. The slots keep their rhythm while the words are revised, so one
- * sentence re-reads as a different mode.
- *
- *   Record.       Edit.        Share.           (at rest)
- *   Record.       Stop.        Instant Share.   (Instant)
- *   Record.       Edit.        Export.          (Studio)
- *   Screenshot.   Beautify.    Paste.           (Screenshot)
- *
- * Nothing moves on its own: the mode bar sits above the line from the first
- * paint with a cursor leaning in beside it, and you click a mode to watch
- * the line get revised. The revision is staged like an edit on paper: a rule
- * strikes through the word in the incoming mode's colour, the struck word
- * lifts away, and the replacement rises into the gap while the slot width
- * glides so the line re-centres. Words that survive the change are never
- * struck, so you see exactly what the mode changes, which is why Studio only
- * crosses out the last word.
- */
-
 type SlideKey = ModeKey | "all";
 
 type Slide = {
 	key: SlideKey;
-	/** [capture, middle, payoff] */
+
 	words: [string, string, string];
 };
 
@@ -45,12 +25,11 @@ const SLIDES: Slide[] = [
 	{ key: "screenshot", words: ["Screenshot.", "Beautify.", "Paste."] },
 ];
 
-/** The cursor's one line: it invites the click, then retires once you take it. */
 const NUDGE = "Click me \u{1F440}";
 const NUDGE_TOUCH = "Tap me \u{1F440}";
 const TOUCH_QUERY = "(max-width: 767px)";
 const TYPE_MS = 26;
-/** The cursor leans in first, then starts talking. */
+
 const NUDGE_AT = 520;
 const TYPE_AT = NUDGE_AT + 260;
 
@@ -73,25 +52,20 @@ const PILL_ICON = {
 	screenshot: ScreenshotIcon,
 } as const;
 
-/* --------------------------------------------------------------- timing -- */
-
-/** Per-slot head start, so the revision runs left to right down the line. */
 const SLOT_DELAY = [0, 120, 240];
-/** Rule sweeps across the word. */
+
 const STRIKE_MS = 260;
-/** Beat where the struck word just sits there, crossed out. */
+
 const HOLD_MS = 110;
-/** Struck word (and its rule) lift away. */
+
 const LIFT_MS = 260;
-/** Replacement rises in, overlapping the lift so the two read as one move. */
+
 const RISE_MS = 520;
 
 const LIFT_AT = STRIKE_MS + HOLD_MS;
 const RISE_AT = LIFT_AT + 150;
 const WIDTH_AT = LIFT_AT + 60;
 
-/* ------------------------------------------------------------------ slot -- */
-
 type Departing = { text: string; color: string; id: number };
 
 type Swap = { text: string; gen: number; from: Departing | null };
@@ -104,9 +78,9 @@ const Slot = ({
 	animate,
 }: {
 	text: string;
-	/** Ink for most slots, the mode's colour for the payoff. */
+
 	color: string;
-	/** Colour of the cross-out rule: the incoming mode's. */
+
 	strike: string;
 	delay: number;
 	animate: boolean;
@@ -121,15 +95,14 @@ const Slot = ({
 		gen: 0,
 		from: null,
 	}));
-	// Holds the colour the slot was painted in for the word now leaving.
+
 	const paintedColor = useRef(color);
 
 	if (swap.text !== text) {
 		setSwap({
 			text,
 			gen: swap.gen + 1,
-			// A word that survives the mode change is never struck out: it just
-			// stays put while its neighbours are revised around it.
+
 			from: animate
 				? { text: swap.text, color: paintedColor.current, id: swap.gen + 1 }
 				: null,
@@ -183,7 +156,6 @@ const Slot = ({
 				transitionDelay: `${delay + WIDTH_AT}ms`,
 			}}
 		>
-			{/* Sets the slot's height and its natural (target) width. */}
 			<span ref={ghostRef} className="ht-slot-ghost" aria-hidden="true">
 				{text}
 			</span>
@@ -220,8 +192,6 @@ const Slot = ({
 	);
 };
 
-/* -------------------------------------------------------------- headline -- */
-
 export const HeroHeadline = () => {
 	const { platform } = useDetectPlatform();
 	const [index, setIndex] = useState(0);
@@ -231,8 +201,6 @@ export const HeroHeadline = () => {
 	const [asked, setAsked] = useState(true);
 	const [reduced, setReduced] = useState(false);
 
-	// Match the download button: assume macOS while detection resolves, so the
-	// arrow never swaps shape under the reader.
 	const Arrow = platform === "windows" ? WindowsCursor : MacCursor;
 
 	useEffect(() => {
@@ -243,8 +211,6 @@ export const HeroHeadline = () => {
 		return () => query.removeEventListener("change", sync);
 	}, []);
 
-	// The cursor leans in, then types its line. Reduced motion gets both at
-	// once, already finished.
 	useEffect(() => {
 		const text = window.matchMedia(TOUCH_QUERY).matches ? NUDGE_TOUCH : NUDGE;
 		setNudgeText(text);
@@ -275,11 +241,9 @@ export const HeroHeadline = () => {
 	const theme = slide.key === "all" ? null : MODE_THEME[slide.key];
 	const accent = theme ? theme.glyph : INK;
 
-	// Clicking the mode you're already on puts the plain line back, so you can
-	// always see what Cap changed.
 	const pick = (target: number) => {
 		setIndex((current) => (current === target ? 0 : target));
-		// The cursor and its bubble have done their job the moment you click.
+
 		setAsked(false);
 	};
 
@@ -318,9 +282,6 @@ export const HeroHeadline = () => {
 					})}
 				</div>
 
-				{/* Nothing cycles on its own, so the cursor is what says the line is
-				    yours to change. It retires as soon as you take it up on the
-				    offer. */}
 				<span
 					aria-hidden="true"
 					className={`ht-nudge ${nudge && asked ? "is-on" : ""}`}
@@ -392,8 +353,7 @@ const CSS = `
 }
 .ht-layer > span { position: relative; display: inline-block; }
 
-/* The cross-out rule, drawn through the x-height and running a hair past
-   the word at both ends the way a pen would. */
+
 .ht-strike {
 	position: absolute;
 	left: -0.04em;
@@ -417,7 +377,7 @@ const CSS = `
 .ht-out { animation: ht-out ${LIFT_MS}ms cubic-bezier(0.4, 0, 0.75, 0.2) both; }
 .ht-in { animation: ht-in ${RISE_MS}ms cubic-bezier(0.18, 0.9, 0.22, 1) both; }
 
-/* Caret for the nudge as it types itself out. */
+
 .ht-caret {
 	display: inline-block;
 	width: 1.5px;
@@ -429,8 +389,7 @@ const CSS = `
 }
 @keyframes ht-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
 
-/* The cursor leaning in beside the mode bar. Hidden on phones, where there
-   is no room beside a wrapped bar and no cursor to speak of on touch. */
+
 .ht-nudge {
 	display: block;
 	position: absolute;
@@ -449,8 +408,7 @@ const CSS = `
 	opacity: 1;
 	transform: translate3d(0, 0, 0) scale(1);
 }
-/* Bubble and cursor sit side by side, the tail on the bubble's right edge
-   reaching across the gap to the arrow. */
+
 .ht-nudge-float {
 	display: flex;
 	align-items: flex-start;
@@ -471,10 +429,7 @@ const CSS = `
 	height: auto;
 	filter: drop-shadow(0 2px 5px rgba(17, 17, 17, 0.28));
 }
-/* An iMessage bubble sitting to the left of the cursor with its tail aimed
-   back at it. The mode bar and the page behind it are all white, so the chip
-   needs its own colour to land, and it stays a size under the mode toggles
-   (13px) so it reads as an aside rather than a fourth control. */
+
 .ht-nudge-chip {
 	position: relative;
 	display: block;

apps/web/components/pages/HomeTwo/LoomBridge.tsx

@@ -11,11 +11,6 @@ import {
 	MODE_THEME,
 } from "./theme";
 
-/**
- * The Loom-switcher bridge. The comparison cluster is the best-converting
- * message on the site, so it earns a dedicated moment on the homepage:
- * one-click library import plus the standing MIGRATE20 offer.
- */
 export const LoomBridge = () => (
 	<section className="px-5 pb-4 pt-2">
 		<div

apps/web/components/pages/HomeTwo/ModeWalkthrough.tsx

@@ -50,10 +50,6 @@ type Step = {
 	Icon: ComponentType<{ className?: string }>;
 };
 
-/**
- * Static cards for the stacked fallback (mobile, and anyone who prefers
- * reduced motion). The pinned experience is the DesktopDemo.
- */
 const STEPS: Step[] = [
 	{
 		key: "instant",
@@ -161,8 +157,6 @@ const StackedSteps = ({ className }: { className?: string }) => (
 	</div>
 );
 
-/* -------------------------------------------------------------------------- */
-
 export const ModeWalkthrough = () => {
 	// `false` on the server and on the first client render, so the markup the
 	// server produced (CSS-driven responsive split) hydrates identically.

apps/web/components/pages/HomeTwo/Pricing.tsx

@@ -20,15 +20,8 @@ import {
 	type ModeTheme,
 } from "./theme";
 
-/**
- * The homepage's two plans in the new system. Prices come from the shared
- * pricing copy so the page can never drift from /pricing; the checkout itself
- * still lives there, so both actions link out rather than mounting Stripe.
- */
-
 const { commercial, pro, subtitle, lovedBy } = homepageCopy.pricing;
 
-/** Sentence case and plain punctuation, the house voice on this page. */
 const BLURB = {
 	commercial:
 		"A commercial licence for the Cap desktop app, with unlimited local recording and editing.",

apps/web/components/pages/HomeTwo/Testimonials.tsx

@@ -5,13 +5,6 @@ import { testimonials } from "@/data/testimonials";
 import { Eyebrow } from "./Eyebrow";
 import { BODY_TEXT, BTN_SECONDARY, H_SECTION, MODE_THEME } from "./theme";
 
-/**
- * The homepage's wall of quotes, straightened out: real cards in a masonry
- * column instead of a rotated scatter, so the type stays on the same grid as
- * the rest of the page. Steven Tey is deliberately absent, he leads the
- * ownership section above.
- */
-
 const PICKS = [
 	"Olivia",
 	"CJ",