Claude
0cff3902b2
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
78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|