SEO overhaul: update copy, add feature pages, load testing waitlist, footer nav

- Update homepage H1, sub-headline, badges, meta title/description
- Update "How it works" section header and 4 step titles for API testing keywords
- Update comparison and roadmap section copy
- Update /flows/, /postman-alternative/, /cli/ page meta and copy
- Add "Why developers are switching from Postman" section
- Create /features/multi-step-api-testing/ with flow screenshot, FAQ schema
- Create /features/ci-cd-integration/ with pipeline examples, FAQ schema
- Create /load-testing/ waitlist page with demo request form
- Add images to generate-har-chrome guide (replace TODO placeholders)
- Reorganize footer into 4 columns: Product, Features, Compare, Company
- Add internal cross-links across feature pages, CLI, flows, comparison
- Enhance SoftwareApplication schema with downloadUrl and offers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: moosebay

app/cli/page.tsx

@@ -3,8 +3,8 @@ import CodeBlock from '@/components/ui/CodeBlock'
 import CommandCard from '@/components/cli/CommandCard'
 
 export const metadata = {
-  title: 'DevTools CLI – Run YAML API workflows in CI (JUnit/JSON, exit codes)',
-  description: 'Run exported YAML flows in parallel with a Go runner. Get JUnit/JSON reports and clean exit codes designed for pipelines.',
+  title: 'DevTools CLI – Run Multi-Step API Tests in CI/CD Pipelines',
+  description: 'Run multi-step API tests in CI with a Go-based CLI. Parallel execution, JUnit/JSON reports, clean exit codes. Works with GitHub Actions, GitLab CI, Jenkins, and any pipeline.',
 }
 
 export default function CLIPage() {
@@ -161,9 +161,9 @@ export default function CLIPage() {
       {/* CTA Section */}
       <section className="relative border-t border-white/5 bg-[linear-gradient(160deg,rgba(12,22,51,0.55),rgba(42,27,78,0.4))] py-16">
         <div className="mx-auto w-full max-w-4xl px-4 text-center sm:px-8">
-          <h2 className="text-3xl font-bold text-white sm:text-4xl">Ready to run flows in CI?</h2>
+          <h2 className="text-3xl font-bold text-white sm:text-4xl">Ready to run API tests in CI?</h2>
           <p className="mt-4 text-lg text-slate-300">
-            Install DevTools CLI and integrate with GitHub Actions, GitLab CI, Jenkins, or any pipeline.
+            Install DevTools CLI and run multi-step API tests in GitHub Actions, GitLab CI, Jenkins, or any pipeline.
           </p>
           <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
             <Link
@@ -179,6 +179,11 @@ export default function CLIPage() {
               View CI Templates
             </Link>
           </div>
+          <div className="mt-6 flex flex-wrap justify-center gap-x-4 gap-y-1 text-sm text-slate-400">
+            <Link href="/features/ci-cd-integration" className="underline decoration-dotted underline-offset-2 hover:text-neon">API testing in CI/CD →</Link>
+            <Link href="/features/multi-step-api-testing" className="underline decoration-dotted underline-offset-2 hover:text-neon">Multi-step API testing →</Link>
+            <Link href="/guides/api-testing-ci-cd" className="underline decoration-dotted underline-offset-2 hover:text-neon">CI/CD guide →</Link>
+          </div>
         </div>
       </section>
     </main>

app/features/ci-cd-integration/page.tsx

@@ -1,19 +1,19 @@
 import Flows from '@/components/home/Flows'
 
 export const metadata = {
-  title: 'DevTools Flows – Visual API Workflows from HAR to YAML',
+  title: 'Multi-Step API Testing Flows – Chain Requests, Map Variables, Export YAML',
   description:
-    'See how DevTools turns real traffic (HAR) into visual API flows with variable mapping and YAML export for CI.',
+    'Build multi-step API test flows that chain requests with auto-mapped variables. Import real traffic, add assertions, and export YAML for CI/CD pipelines.',
 }
 
 export default function FlowsPage() {
   return (
     <main className="relative">
       <div className="mx-auto max-w-6xl px-4 py-10 sm:px-8">
-        <h1 className="text-4xl font-extrabold text-white">Flows</h1>
+        <h1 className="text-4xl font-extrabold text-white">Multi-Step API Testing Flows</h1>
         <p className="mt-3 max-w-3xl text-slate-300">
-          DevTools generates deployable API workflows from your real browser traffic. Import a HAR, map variables, and export
-          YAML for review and CI runs.
+          Build multi-step API tests that chain requests with auto-mapped variables. Import real browser traffic, add assertions
+          between steps, and export YAML for Git review and CI/CD pipelines.
         </p>
       </div>
       <Flows />
@@ -22,6 +22,16 @@ export default function FlowsPage() {
         <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
           <h2 className="text-2xl font-semibold text-white">Learn more</h2>
           <ul className="mt-3 list-disc space-y-2 pl-5 text-slate-300">
+            <li>
+              <a className="underline decoration-dotted underline-offset-2" href="/features/multi-step-api-testing">
+                Multi-step API testing
+              </a>
+            </li>
+            <li>
+              <a className="underline decoration-dotted underline-offset-2" href="/features/ci-cd-integration">
+                API testing in CI/CD pipelines
+              </a>
+            </li>
             <li>
               <a className="underline decoration-dotted underline-offset-2" href="/docs/how-to/import-har">
                 How to import a HAR
@@ -37,6 +47,11 @@ export default function FlowsPage() {
                 DevTools CLI reference
               </a>
             </li>
+            <li>
+              <a className="underline decoration-dotted underline-offset-2" href="/guides/end-to-end-api-testing">
+                End-to-end API testing guide
+              </a>
+            </li>
           </ul>
         </div>
       </div>

app/features/multi-step-api-testing/page.tsx

@@ -75,8 +75,12 @@ export default function GuideGenerateHarChrome() {
                       <li>Right click → Inspect</li>
                       <li>Open the Network panel</li>
                     </ul>
-                    {/* TODO: screenshot → /public/media/chrome-network-tab.png
-                        Alt: Chrome DevTools Network tab open */}
+                    <img
+                      src="/docs/assets/chrome-devtools-open-settings-gear.webp"
+                      alt="Open DevTools settings from the Network panel toolbar"
+                      className="mt-4 rounded-lg border border-white/10"
+                      loading="lazy"
+                    />
                   </div>
                 </div>
               </div>
@@ -90,8 +94,12 @@ export default function GuideGenerateHarChrome() {
                       <li>Network toolbar → gear icon</li>
                       <li>Preferences → Network → Allow to generate HAR with sensitive data</li>
                     </ul>
-                    {/* TODO: screenshot → /public/media/chrome-allow-har-sensitive-data.png
-                        Alt: Chrome setting 'Allow to generate HAR with sensitive data' enabled */}
+                    <img
+                      src="/docs/assets/chrome-devtools-allow-har-with-sensitive-data.webp"
+                      alt="Enable 'Allow to generate HAR with sensitive data' in Chrome DevTools preferences"
+                      className="mt-4 rounded-lg border border-white/10"
+                      loading="lazy"
+                    />
                   </div>
                 </div>
               </div>
@@ -107,8 +115,6 @@ export default function GuideGenerateHarChrome() {
                       <li>Click the clear icon to start clean</li>
                       <li>Perform the workflow (login, click, submit, etc.)</li>
                     </ul>
-                    {/* TODO: GIF → /public/media/chrome-preserve-log-clear.gif
-                        Alt: Chrome Network: Preserve log and Clear, then capturing a user flow */}
                   </div>
                 </div>
               </div>
@@ -123,8 +129,12 @@ export default function GuideGenerateHarChrome() {
                       <li>Or right‑click request list → Save all as HAR with content</li>
                     </ul>
                     <p className="text-slate-400 text-sm mt-2">Suggested names: login-create-order.har, checkout-flow.har</p>
-                    {/* TODO: screenshot → /public/media/chrome-save-har-with-content.png
-                        Alt: Right-click menu 'Save all as HAR with content' in Chrome Network */}
+                    <img
+                      src="/docs/assets/chrome-devtools-export-har-button-menu.webp"
+                      alt="Export HAR from the Network tab toolbar — choose 'with sensitive data'"
+                      className="mt-4 rounded-lg border border-white/10"
+                      loading="lazy"
+                    />
                   </div>
                 </div>
               </div>
@@ -152,16 +162,23 @@ export default function GuideGenerateHarChrome() {
                   <li>Open DevTools Studio → Import → HAR File</li>
                   <li>Select your <code>.har</code></li>
                 </ol>
+                <img
+                  src="/docs/assets/import-dialog-select-har.webp"
+                  alt="Import dialog selecting HAR file in DevTools Studio"
+                  className="mt-4 rounded-lg border border-white/10"
+                  loading="lazy"
+                />
               </div>
 
               <div className="rounded-xl border border-white/10 bg-white/5 p-6">
                 <h3 className="text-lg font-semibold text-white mb-2">Filter and map domains</h3>
                 <p className="text-slate-300 text-sm">Remove analytics/fonts/CDNs; map domains to variables (e.g., BASE_URL).</p>
-                {/* TODO: screenshots
-                    1. /public/media/devtools-import-har-domain-filter.png
-                       Alt: DevTools import HAR: domain filter checklist
-                    2. /public/media/devtools-domain-to-variable.png
-                       Alt: Map domain to {{BASE_URL}} variable in DevTools */}
+                <img
+                  src="/docs/assets/import-map-domain-to-base-url.webp"
+                  alt="Map domain to {{BASE_URL}} variable in DevTools"
+                  className="mt-4 rounded-lg border border-white/10"
+                  loading="lazy"
+                />
               </div>
             </div>
           </section>
@@ -172,8 +189,12 @@ export default function GuideGenerateHarChrome() {
               <div className="rounded-xl border border-white/10 bg-white/5 p-6">
                 <h3 className="text-lg font-semibold text-white mb-2">Review flow + dependencies</h3>
                 <p className="text-slate-300 text-sm">Check the generated sequence and auto‑detected variable chaining.</p>
-                {/* TODO: screenshot → /public/media/devtools-flow-dependencies.png
-                    Alt: DevTools flow dependencies visual with token chaining */}
+                <img
+                  src="/docs/assets/flow-canvas-overview.webp"
+                  alt="Flow canvas overview showing request sequence and dependencies"
+                  className="mt-4 rounded-lg border border-white/10"
+                  loading="lazy"
+                />
               </div>
 
               <div className="rounded-xl border border-white/10 bg-white/5 p-6">
@@ -186,11 +207,6 @@ export default function GuideGenerateHarChrome() {
               <div className="rounded-xl border border-white/10 bg-white/5 p-6">
                 <h3 className="text-lg font-semibold text-white mb-2">Export YAML and commit</h3>
                 <p className="text-slate-300 text-sm">Run once locally, then export to YAML and commit to your repo.</p>
-                {/* TODO: screenshots
-                    1. /public/media/devtools-export-yaml.png
-                       Alt: Export flow to YAML in DevTools
-                    2. /public/media/git-diff-yaml-flow.png
-                       Alt: PR diff showing readable YAML flow changes */}
               </div>
             </div>
           </section>

app/flows/page.tsx

@@ -6,15 +6,15 @@ import CookieConsent from '@/components/ui/CookieConsent'
 
 export const metadata = {
   metadataBase: new URL('https://dev.tools'),
-  title: 'DevTools – Local-First API Testing & Flow Automation',
-  description: 'Free, open-source API client and flow runner. Record browser traffic, turn it into executable YAML flows with auto-mapped variables, and run at multithreaded Go speed locally or in CI.',
-  keywords: 'API testing, API client, flow automation, HAR import, YAML flows, API development, local-first, open source, CI/CD, REST API, HTTP client',
+  title: 'DevTools – Open Source API Testing Tool | Multi-Step API Tests in CI',
+  description: 'Open-source API testing tool that chains multi-step requests into reusable YAML workflows. Record real traffic, auto-map variables between steps, and run end-to-end API tests in CI with parallel execution and JUnit reports.',
+  keywords: 'API testing tool, multi-step API testing, end-to-end API testing, API test automation, YAML API tests, CI CD API testing, open source API testing, HAR import, REST API testing, HTTP client',
   authors: [{ name: 'DevTools' }],
   openGraph: {
     type: 'website',
     url: 'https://dev.tools',
-    title: 'DevTools – Local-First API Testing & Flow Automation',
-    description: 'Free, open-source API client and flow runner. Record browser traffic, turn it into executable YAML flows, and run at Go speed locally or in CI.',
+    title: 'DevTools – Open Source API Testing Tool | Multi-Step API Tests in CI',
+    description: 'Open-source API testing tool that chains multi-step requests into reusable YAML workflows. Record real traffic, auto-map variables, and run end-to-end API tests in CI.',
     siteName: 'DevTools',
     images: [
       {
@@ -26,8 +26,8 @@ export const metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'DevTools – Local-First API Testing & Flow Automation',
-    description: 'Free, open-source API client and flow runner. Record browser traffic, turn it into executable YAML flows, and run at Go speed locally or in CI.',
+    title: 'DevTools – Open Source API Testing Tool | Multi-Step API Tests in CI',
+    description: 'Open-source API testing tool that chains multi-step requests into reusable YAML workflows. Record real traffic, auto-map variables, and run end-to-end API tests in CI.',
     images: ['https://dev.tools/assets/devtools-main-ss-1400w.webp'],
   },
 }
@@ -53,9 +53,15 @@ export default function RootLayout({
               applicationCategory: 'DeveloperApplication',
               operatingSystem: 'Windows, macOS, Linux',
               description:
-                'Local-first API testing and flow automation tool. Record browser traffic, turn it into executable YAML flows with auto-mapped variables, and run at multithreaded Go speed.',
+                'Open-source API testing tool that chains multi-step requests into reusable YAML workflows. Record real traffic, auto-map variables between steps, and run end-to-end API tests in CI with parallel execution.',
               url: 'https://dev.tools',
+              downloadUrl: 'https://dev.tools/download',
               image: 'https://dev.tools/assets/devtools-main-ss-1400w.webp',
+              offers: {
+                '@type': 'Offer',
+                price: '0',
+                priceCurrency: 'USD',
+              },
               author: {
                 '@type': 'Organization',
                 name: 'DevTools',

app/guides/generate-har-chrome/page.jsx

@@ -0,0 +1,94 @@
+import Link from 'next/link'
+import LoadTestingWaitlistForm from '@/components/load-testing/LoadTestingWaitlistForm'
+
+export const metadata = {
+  title: 'API Load Testing – Coming Soon | DevTools',
+  description:
+    'Reuse your multi-step API test flows for load testing. Run from multiple regions with configurable concurrency. Coming soon to DevTools.',
+  alternates: { canonical: '/load-testing/' },
+}
+
+export default function LoadTestingPage() {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-16 sm:px-8">
+      <header className="text-center mb-16">
+        <span className="inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/5 px-4 py-1.5 text-xs uppercase tracking-wide text-neon mb-6">
+          Coming soon
+        </span>
+        <h1 className="text-4xl font-bold text-white sm:text-5xl md:text-6xl">
+          API Load Testing
+        </h1>
+        <p className="mt-6 text-lg text-slate-300 max-w-2xl mx-auto">
+          Reuse your existing multi-step API test flows for load testing. Configure concurrency, duration, and regions — no
+          rewrites, no separate tools, no new syntax.
+        </p>
+      </header>
+
+      <section className="grid gap-6 md:grid-cols-2 mb-16">
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+          <h2 className="text-xl font-semibold text-white mb-2">Same flows, load-tested</h2>
+          <p className="text-slate-300 text-sm">
+            Your multi-step YAML flows work for both functional testing and load testing. No need to rewrite tests
+            or learn a new DSL.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+          <h2 className="text-xl font-semibold text-white mb-2">Multi-region execution</h2>
+          <p className="text-slate-300 text-sm">
+            Run load tests from multiple geographic regions to understand latency and performance across your global infrastructure.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+          <h2 className="text-xl font-semibold text-white mb-2">Configurable concurrency</h2>
+          <p className="text-slate-300 text-sm">
+            Ramp up virtual users, set duration, and define thresholds. The Go-based runner handles high concurrency efficiently.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+          <h2 className="text-xl font-semibold text-white mb-2">CI/CD integrated</h2>
+          <p className="text-slate-300 text-sm">
+            Run load tests in CI with pass/fail gates based on p95 latency, error rate, and throughput thresholds.
+          </p>
+        </div>
+      </section>
+
+      <section id="waitlist" className="rounded-2xl border border-neon/30 bg-gradient-to-r from-white/5 to-neon/5 p-8 mb-16">
+        <div className="max-w-2xl mx-auto text-center">
+          <h2 className="text-2xl font-bold text-white mb-3">Join the load testing waitlist</h2>
+          <p className="text-slate-300 mb-8 max-w-lg mx-auto">
+            We're building API load testing into DevTools. Tell us about your team and we'll notify you when early access is available.
+          </p>
+          <LoadTestingWaitlistForm />
+        </div>
+      </section>
+
+      <section className="mb-16">
+        <h2 className="text-2xl font-semibold text-white mb-4">While you wait</h2>
+        <p className="text-slate-300 mb-6">Start with functional API testing today — your flows will be ready for load testing when it ships.</p>
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/features/multi-step-api-testing" className="rounded-2xl border border-white/10 bg-white/5 p-5 transition hover:bg-white/10">
+            <h3 className="text-lg font-semibold text-white mb-1">Multi-step API testing</h3>
+            <p className="text-slate-300 text-sm">Build test flows that chain requests with auto-mapped variables.</p>
+          </Link>
+          <Link href="/features/ci-cd-integration" className="rounded-2xl border border-white/10 bg-white/5 p-5 transition hover:bg-white/10">
+            <h3 className="text-lg font-semibold text-white mb-1">CI/CD integration</h3>
+            <p className="text-slate-300 text-sm">Run API tests in every pipeline with JUnit reports.</p>
+          </Link>
+          <Link href="/download" className="rounded-2xl border border-white/10 bg-white/5 p-5 transition hover:bg-white/10">
+            <h3 className="text-lg font-semibold text-white mb-1">Download Studio</h3>
+            <p className="text-slate-300 text-sm">Free, open-source desktop app for building API test flows.</p>
+          </Link>
+        </div>
+      </section>
+
+      <footer className="text-sm text-slate-400 text-center">
+        <p>
+          See also: <Link href="/flows" className="text-neon hover:underline">Flows</Link>
+          {' '}&middot;{' '}<Link href="/cli" className="text-neon hover:underline">CLI</Link>
+          {' '}&middot;{' '}<Link href="/guides" className="text-neon hover:underline">Guides</Link>
+          {' '}&middot;{' '}<Link href="/docs" className="text-neon hover:underline">Docs</Link>
+        </p>
+      </footer>
+    </main>
+  )
+}