feat(web): Product, How it works, Trust, Pricing and Docs pages, with a marketing e2e check

Pricing shows no plans, prices or free trial until decided. Docs search and articles without pages are shown but not linked. Disables the agent file that next dev generates.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014SdXCbrN5PtGExkpvMaMHx

web/app/(marketing)/docs/page.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next';
+import { SearchField } from '../../../src/product/SearchField.tsx';
+import { ClosingCta } from '../../../src/marketing/home/ClosingCta.tsx';
+import { FeatureGrid } from '../../../src/marketing/pages/FeatureGrid.tsx';
+import { PageHero } from '../../../src/marketing/pages/PageHero.tsx';
+import { PopularArticles } from '../../../src/marketing/pages/PopularArticles.tsx';
+import { Shell } from '../../../src/marketing/Shell.tsx';
+
+export const metadata: Metadata = { title: 'Docs' };
+
+export default function DocsPage() {
+  return (
+    <Shell page>
+      <PageHero
+        eyebrow="Docs"
+        title="Find an answer fast."
+        subtitle="Guides for starting or connecting a site, moving between hosts, asking for changes and staying in control."
+      >
+        <div className="m-docs-search">
+          {/* Search is shown as in the design but not usable until the docs exist. */}
+          <SearchField label="Search the docs" shortcut="⌘K" disabled />
+        </div>
+      </PageHero>
+      <FeatureGrid
+        title="Browse by topic"
+        cards={[
+          { icon: 'rocket', title: 'Getting started', body: 'Start or connect your site and make your first change.' },
+          { icon: 'plug', title: 'Start or connect a site', body: 'Start on Wursor Cloud, link WordPress, move between hosts and manage access.' },
+          { icon: 'sparkles', title: 'Asking for changes', body: 'Write a request, point at the page and follow the work.' },
+          { icon: 'shield-check', title: 'Review and approve', body: 'Compare before and after, read the checks and publish.' },
+          { icon: 'credit-card', title: 'Team and billing', body: 'Invite people, set roles and manage your plan.' },
+          { icon: 'help', title: 'Troubleshooting', body: 'Fixes for the most common connection and preview problems.' },
+        ]}
+      />
+      <PopularArticles />
+      <ClosingCta />
+    </Shell>
+  );
+}

web/app/(marketing)/how-it-works/page.tsx

@@ -0,0 +1,77 @@
+import type { Metadata } from 'next';
+import { ActivityCard } from '../../../src/product/ActivityCard.tsx';
+import { ApprovalCard } from '../../../src/product/ApprovalCard.tsx';
+import { HarborConversation } from '../../../src/product/HarborConversation.tsx';
+import { SetupChecklist } from '../../../src/product/SetupChecklist.tsx';
+import { Zoom } from '../../../src/ui/Zoom.tsx';
+import { Button } from '../../../src/marketing/Button.tsx';
+import { ROUTES } from '../../../src/marketing/content.ts';
+import { ClosingCta } from '../../../src/marketing/home/ClosingCta.tsx';
+import { Faq } from '../../../src/marketing/home/Faq.tsx';
+import { FeatureRow } from '../../../src/marketing/pages/FeatureRow.tsx';
+import { PageHero } from '../../../src/marketing/pages/PageHero.tsx';
+import { ACTIVITY_ROWS, SETUP_STEPS } from '../../../src/marketing/pages/setup-steps.ts';
+import { Shell } from '../../../src/marketing/Shell.tsx';
+
+export const metadata: Metadata = { title: 'How it works' };
+
+export default function HowItWorksPage() {
+  return (
+    <Shell page>
+      <PageHero
+        eyebrow="How it works"
+        title="Four steps. You stay in charge."
+        subtitle="From “please change this” to a live, checked page, with your approval in the middle."
+      >
+        <Button href={ROUTES.signUp} size="lg">
+          Get started
+        </Button>
+      </PageHero>
+      <FeatureRow
+        eyebrow="Step 1"
+        title="Start or connect your site"
+        subtitle="Start on Wursor Cloud or connect your WordPress. Wursor works on a safe copy."
+        bullets={['Standard themes and plugins just work, on either host', 'Access you can revoke at any time']}
+      >
+        <SetupChecklist steps={SETUP_STEPS} />
+      </FeatureRow>
+      <FeatureRow
+        reverse
+        eyebrow="Step 2"
+        title="Ask for a change"
+        subtitle="Type what you want in plain words, or point at the page. Wursor explains each step as it goes."
+        bullets={['No jargon, no tickets', 'Watch at the level of detail you like']}
+        card={{ left: 76, top: 30, width: 448, height: 424 }}
+      >
+        <div className="m-convowindow">
+          <Zoom ratio={448 / 440}>
+            <div style={{ width: 440, height: 852 }}>
+              <HarborConversation />
+            </div>
+          </Zoom>
+        </div>
+      </FeatureRow>
+      <FeatureRow
+        eyebrow="Step 3"
+        title="Review the proof"
+        subtitle="Drag to compare before and after, read what Wursor checked, then approve or ask for changes."
+        bullets={['Nine plain-language checks', 'Looks right on a phone, tablet and laptop']}
+        card={{ left: 60, top: 20, width: 480 }}
+      >
+        <ApprovalCard />
+      </FeatureRow>
+      <FeatureRow
+        reverse
+        eyebrow="Step 4"
+        title="Publish, or undo"
+        subtitle="One click puts it live. Changed your mind? One click takes it back, and the record shows what happened."
+        bullets={['Nothing goes live without you', 'Every step is recorded']}
+        card={{ left: 70, top: 119, width: 460 }}
+      >
+        <ActivityCard rows={ACTIVITY_ROWS} />
+      </FeatureRow>
+      <Faq />
+      <ClosingCta />
+    </Shell>
+  );
+}

web/app/(marketing)/page.tsx

@@ -1,4 +1,4 @@
-import { Footer } from '../../src/marketing/Footer.tsx';
+import { Shell } from '../../src/marketing/Shell.tsx';
 import { ApproveWithProof } from '../../src/marketing/home/ApproveWithProof.tsx';
 import { ClosingCta } from '../../src/marketing/home/ClosingCta.tsx';
 import { Examples } from '../../src/marketing/home/Examples.tsx';
@@ -10,33 +10,28 @@ import { SafeByDesign } from '../../src/marketing/home/SafeByDesign.tsx';
 import { SectionHeader } from '../../src/marketing/home/SectionHeader.tsx';
 import { SurfacesShowcase } from '../../src/marketing/home/SurfacesShowcase.tsx';
 import { WatchTheWork } from '../../src/marketing/home/WatchTheWork.tsx';
-import { Nav } from '../../src/marketing/Nav.tsx';
 
 export default function HomePage() {
   return (
-    <>
-      <Nav />
-      <main>
-        <Hero />
-        <ProofStrip />
-        <section className="m-section m-section-first">
-          <SectionHeader
-            eyebrow="One screen"
-            title="Talk. Watch. Decide."
-            subtitle="The workspace puts the conversation, your live site and the to-do board side by side, so you always know what Wursor is doing."
-            mobileSubtitle="The workspace puts the conversation, your live site and the board side by side."
-          />
-          <SurfacesShowcase />
-        </section>
-        <WatchTheWork />
-        <ApproveWithProof />
-        <SafeByDesign />
-        <Examples />
-        <PricingTeaser />
-        <Faq />
-        <ClosingCta />
-      </main>
-      <Footer />
-    </>
+    <Shell>
+      <Hero />
+      <ProofStrip />
+      <section className="m-section m-section-first">
+        <SectionHeader
+          eyebrow="One screen"
+          title="Talk. Watch. Decide."
+          subtitle="The workspace puts the conversation, your live site and the to-do board side by side, so you always know what Wursor is doing."
+          mobileSubtitle="The workspace puts the conversation, your live site and the board side by side."
+        />
+        <SurfacesShowcase />
+      </section>
+      <WatchTheWork />
+      <ApproveWithProof />
+      <SafeByDesign />
+      <Examples />
+      <PricingTeaser />
+      <Faq />
+      <ClosingCta />
+    </Shell>
   );
 }

web/app/(marketing)/pricing/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { PricingContent } from '../../../src/marketing/pages/PricingContent.tsx';
+import { Shell } from '../../../src/marketing/Shell.tsx';
+
+export const metadata: Metadata = { title: 'Pricing' };
+
+export default function PricingPage() {
+  return (
+    <Shell page>
+      <PricingContent />
+    </Shell>
+  );
+}

web/app/(marketing)/product/page.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from 'next';
+import { SetupChecklist } from '../../../src/product/SetupChecklist.tsx';
+import { Button } from '../../../src/marketing/Button.tsx';
+import { ROUTES } from '../../../src/marketing/content.ts';
+import { ClosingCta } from '../../../src/marketing/home/ClosingCta.tsx';
+import { Faq } from '../../../src/marketing/home/Faq.tsx';
+import { SurfacesShowcase } from '../../../src/marketing/home/SurfacesShowcase.tsx';
+import { FeatureGrid } from '../../../src/marketing/pages/FeatureGrid.tsx';
+import { FeatureRow } from '../../../src/marketing/pages/FeatureRow.tsx';
+import { PageHero } from '../../../src/marketing/pages/PageHero.tsx';
+import { SETUP_STEPS } from '../../../src/marketing/pages/setup-steps.ts';
+import { Shell } from '../../../src/marketing/Shell.tsx';
+
+export const metadata: Metadata = { title: 'Product' };
+
+export default function ProductPage() {
+  return (
+    <Shell page>
+      <PageHero
+        eyebrow="Product"
+        title="One workspace for every change."
+        subtitle="Talk to Wursor, watch your site change on a safe copy, and approve what you like."
+      >
+        <Button href={ROUTES.signUp} size="lg">
+          Get started
+        </Button>
+        <Button href="/how-it-works" variant="ghost" size="lg" trailingIcon="arrow-right">
+          See how it works
+        </Button>
+      </PageHero>
+      <section className="m-grid-section m-grid-first">
+        <SurfacesShowcase />
+      </section>
+      <FeatureGrid
+        eyebrow="What you get"
+        title="Everything you need to hand off the work."
+        subtitle="Six things that make a change small, visible and reversible."
+        cards={[
+          { icon: 'sparkles', title: 'Ask in plain words', body: 'Describe the change the way you would tell a colleague. Wursor works out the steps.' },
+          { icon: 'monitor', title: 'Live preview on every device', body: 'See the real page on a phone, a tablet and a laptop before anything goes live.' },
+          { icon: 'board', title: 'A board for every change', body: 'Ideas, work in progress and finished changes in one place, with what needs you on top.' },
+          { icon: 'shield-check', title: 'Proof before you publish', body: 'Nine checks, a before-and-after slider and a plain summary of what changed.' },
+          { icon: 'undo', title: 'One-click undo', body: 'Every published change can be taken back in one click, any time.' },
+          { icon: 'user', title: 'Built for teams', body: 'Invite teammates, choose who can approve, and keep one shared record.' },
+        ]}
+      />
+      <FeatureRow
+        eyebrow="Start"
+        title="Choose where it lives. Keep your hands free."
+        subtitle="Start on Wursor Cloud, connect your WordPress, or build here and publish to yours. Wursor works on a safe copy and never changes your live site without you."
+        bullets={[
+          'Works with standard WordPress themes and plugins, hosted by us or by you',
+          'Access you can pause or revoke at any time',
+          'Nothing installed on your visitors’ side',
+        ]}
+      >
+        <SetupChecklist steps={SETUP_STEPS} />
+      </FeatureRow>
+      <Faq />
+      <ClosingCta />
+    </Shell>
+  );
+}

web/app/(marketing)/trust/page.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from 'next';
+import { ActivityCard } from '../../../src/product/ActivityCard.tsx';
+import { Button } from '../../../src/marketing/Button.tsx';
+import { ROUTES } from '../../../src/marketing/content.ts';
+import { ClosingCta } from '../../../src/marketing/home/ClosingCta.tsx';
+import { Faq } from '../../../src/marketing/home/Faq.tsx';
+import { SafetyRules } from '../../../src/marketing/home/SafeByDesign.tsx';
+import { AlwaysNever } from '../../../src/marketing/pages/AlwaysNever.tsx';
+import { FeatureGrid } from '../../../src/marketing/pages/FeatureGrid.tsx';
+import { FeatureRow } from '../../../src/marketing/pages/FeatureRow.tsx';
+import { PageHero } from '../../../src/marketing/pages/PageHero.tsx';
+import { ACTIVITY_ROWS } from '../../../src/marketing/pages/setup-steps.ts';
+import { Shell } from '../../../src/marketing/Shell.tsx';
+
+export const metadata: Metadata = { title: 'Trust and safety' };
+
+export default function TrustPage() {
+  return (
+    <Shell page>
+      <PageHero eyebrow="Trust" title="Safe by design, not by promise." subtitle="Four rules Wursor can’t break, however you set it up.">
+        <Button href={ROUTES.signUp} size="lg">
+          Get started
+        </Button>
+      </PageHero>
+      <section className="m-grid-section m-grid-tight">
+        <SafetyRules />
+      </section>
+      <AlwaysNever />
+      <FeatureRow
+        eyebrow="Everything is recorded"
+        title="A record you can read."
+        subtitle="Every request, check and decision is written down in plain words, so you can see what happened and why."
+        bullets={['Who asked, who approved, and when', 'Checks and results, kept with each change']}
+        card={{ left: 70, top: 119, width: 460 }}
+      >
+        <ActivityCard rows={ACTIVITY_ROWS} />
+      </FeatureRow>
+      <FeatureGrid
+        eyebrow="Your control"
+        title="You decide who can do what."
+        cards={[
+          {
+            icon: 'key',
+            title: 'Access you control',
+            body: 'Pause or revoke Wursor’s access at any time. Choose Full access or Content only, and move your site in or out whenever you like.',
+          },
+          { icon: 'user', title: 'Roles for your team', body: 'Choose who can ask for changes, who can approve and who can publish.' },
+          { icon: 'lock', title: 'Sensitive changes need more', body: 'Higher-risk changes ask for an extra confirmation before they go live.' },
+        ]}
+      />
+      <Faq />
+      <ClosingCta />
+    </Shell>
+  );
+}