227 lines
11 KiB
TypeScript
227 lines
11 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import { Footer } from '@/components/layout/Footer'
|
|
import { notFound } from 'next/navigation'
|
|
|
|
const useCases: Record<string, {
|
|
title: string
|
|
metaDescription: string
|
|
intro: string
|
|
benefits: string[]
|
|
howItWorks: { step: string; description: string }[]
|
|
whoIsItFor: string[]
|
|
}> = {
|
|
'ecommerce-price-monitoring': {
|
|
title: 'E-Commerce Price Monitoring',
|
|
metaDescription: 'Monitor competitor prices on Shopify, Amazon, and any e-commerce site. SiteChangeMonitor tracks price changes and inventory status with AI-powered noise filtering.',
|
|
intro: 'SiteChangeMonitor tracks competitor product prices and inventory status across Shopify, Amazon, WooCommerce, and any e-commerce site — filtering out false alerts from rotating ads and dynamic page elements.',
|
|
benefits: [
|
|
'Lock onto specific price elements automatically — no CSS selectors needed',
|
|
'Filter out false positives from ads, banners, and session-specific content',
|
|
'Get instant email alerts (or Slack/webhook on Pro+) when a competitor changes pricing',
|
|
'Track inventory status changes (in stock → sold out)',
|
|
'Historical price snapshots with visual proof',
|
|
],
|
|
howItWorks: [
|
|
{ step: 'Paste the product URL', description: 'Our system auto-detects the page type and locks onto the price element.' },
|
|
{ step: 'Set your alert preferences', description: 'Choose email (all plans) or Slack/webhook (Pro+). Set thresholds for price changes.' },
|
|
{ step: 'Get notified on real changes', description: 'AI filters out noise. You only hear about actual price or inventory changes.' },
|
|
],
|
|
whoIsItFor: [
|
|
'E-commerce managers tracking competitor pricing',
|
|
'Marketplace sellers monitoring Buy Box prices',
|
|
'Procurement teams watching supplier pricing',
|
|
'Deal hunters tracking product price drops',
|
|
],
|
|
},
|
|
'seo-serp-tracking': {
|
|
title: 'SEO & SERP Change Tracking',
|
|
metaDescription: 'Monitor SERP changes, featured snippet updates, and competitor ranking movements. SiteChangeMonitor alerts SEO teams to meaningful search result changes.',
|
|
intro: 'SiteChangeMonitor helps SEO teams track changes to search engine results pages, including ranking shifts, featured snippet appearances, and competitor movements — without noise from personalized or localized results.',
|
|
benefits: [
|
|
'Track SERP changes for your target keywords',
|
|
'Monitor featured snippet ownership changes',
|
|
'Detect when competitors appear or disappear from page 1',
|
|
'Filter out localized and personalized result variations',
|
|
'Get visual diff proof of every SERP change',
|
|
],
|
|
howItWorks: [
|
|
{ step: 'Enter the Google search URL for your keyword', description: 'We capture the SERP as it appears to a clean, non-personalized browser session.' },
|
|
{ step: 'Configure keyword triggers', description: 'Set alerts for when your brand or competitor names appear or disappear.' },
|
|
{ step: 'Review changes with visual diffs', description: 'See exactly what changed with side-by-side screenshot comparisons.' },
|
|
],
|
|
whoIsItFor: [
|
|
'SEO managers tracking keyword rankings',
|
|
'Content teams monitoring featured snippets',
|
|
'Agencies reporting SERP changes to clients',
|
|
'Growth teams tracking competitive search landscape',
|
|
],
|
|
},
|
|
'compliance-policy-monitoring': {
|
|
title: 'Compliance & Policy Change Monitoring',
|
|
metaDescription: 'Track changes to terms of service, privacy policies, and regulatory pages. SiteChangeMonitor provides audit-proof snapshots for compliance teams.',
|
|
intro: 'SiteChangeMonitor provides compliance and legal teams with automated tracking of terms of service, privacy policies, and regulatory pages — with audit-proof snapshots and instant change alerts.',
|
|
benefits: [
|
|
'Automatically monitor ToS, privacy policies, and regulatory pages',
|
|
'Audit-proof timestamped snapshots of every version',
|
|
'AI filtering removes irrelevant changes (dates, formatting, ads)',
|
|
'Instant alerts when material policy changes occur',
|
|
'Full version history with diff comparison',
|
|
],
|
|
howItWorks: [
|
|
{ step: 'Add the policy or regulatory page URL', description: 'SiteChangeMonitor begins tracking the page content immediately.' },
|
|
{ step: 'AI filters noise automatically', description: 'Copyright year changes, formatting tweaks, and boilerplate updates are ignored.' },
|
|
{ step: 'Get alerted on material changes', description: 'Only substantive policy changes trigger notifications to your team.' },
|
|
],
|
|
whoIsItFor: [
|
|
'Legal teams monitoring vendor terms of service',
|
|
'Compliance officers tracking regulatory changes',
|
|
'Privacy teams monitoring third-party data policies',
|
|
'Risk managers tracking contractual obligations',
|
|
],
|
|
},
|
|
'competitor-intelligence': {
|
|
title: 'Competitor Intelligence Monitoring',
|
|
metaDescription: 'Monitor competitor websites for product launches, pricing changes, hiring signals, and strategic shifts. SiteChangeMonitor automates competitive intelligence.',
|
|
intro: 'SiteChangeMonitor automates competitive intelligence by monitoring competitor websites for product launches, pricing changes, team growth signals, and strategic messaging shifts — delivering only meaningful changes to your team.',
|
|
benefits: [
|
|
'Monitor competitor homepages, pricing pages, and product pages',
|
|
'Detect new product launches and feature announcements',
|
|
'Track hiring page changes as growth signals',
|
|
'Keyword alerts for strategic terms (e.g., "enterprise", "AI")',
|
|
'Weekly digest emails for competitive intelligence summaries (coming soon)',
|
|
],
|
|
howItWorks: [
|
|
{ step: 'Add competitor page URLs', description: 'Monitor pricing pages, about pages, careers pages, and product pages.' },
|
|
{ step: 'Set keyword triggers', description: 'Get alerted when competitors mention specific terms or remove them.' },
|
|
{ step: 'Review changes in context', description: 'Visual diffs show exactly what changed, so your team can act fast.' },
|
|
],
|
|
whoIsItFor: [
|
|
'Product managers tracking competitor features',
|
|
'Marketing teams monitoring competitor messaging',
|
|
'Sales teams tracking competitor pricing changes',
|
|
'Strategy teams monitoring industry shifts',
|
|
],
|
|
},
|
|
}
|
|
|
|
export function generateStaticParams() {
|
|
return Object.keys(useCases).map((slug) => ({ slug }))
|
|
}
|
|
|
|
export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
|
|
const data = useCases[params.slug]
|
|
if (!data) return {}
|
|
return {
|
|
title: data.title,
|
|
description: data.metaDescription,
|
|
alternates: { canonical: `/use-cases/${params.slug}` },
|
|
openGraph: { title: data.title, description: data.metaDescription, url: `/use-cases/${params.slug}` },
|
|
}
|
|
}
|
|
|
|
export default function UseCasePage({ params }: { params: { slug: string } }) {
|
|
const data = useCases[params.slug]
|
|
if (!data) notFound()
|
|
|
|
const howToJsonLd = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'HowTo',
|
|
name: `How to use SiteChangeMonitor for ${data.title}`,
|
|
step: data.howItWorks.map((s, i) => ({
|
|
'@type': 'HowToStep',
|
|
position: i + 1,
|
|
name: s.step,
|
|
text: s.description,
|
|
})),
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(howToJsonLd) }}
|
|
/>
|
|
<div className="flex-1 py-24 px-6">
|
|
<div className="mx-auto max-w-4xl space-y-12">
|
|
<div className="space-y-4">
|
|
<Link href="/use-cases" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
All Use Cases
|
|
</Link>
|
|
<h1 className="text-4xl md:text-5xl font-bold font-display text-foreground">
|
|
{data.title}
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground max-w-3xl">{data.intro}</p>
|
|
</div>
|
|
|
|
{/* Benefits */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-foreground mb-4">Key Benefits</h2>
|
|
<ul className="space-y-3 text-muted-foreground">
|
|
{data.benefits.map((b, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className="mt-1 h-2 w-2 rounded-full bg-primary shrink-0" />
|
|
{b}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{/* How It Works */}
|
|
<section className="rounded-2xl border border-border bg-card p-8">
|
|
<h2 className="text-2xl font-bold text-foreground mb-6">How It Works</h2>
|
|
<dl className="space-y-6">
|
|
{data.howItWorks.map((step, i) => (
|
|
<div key={i} className="flex gap-4">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
|
|
{i + 1}
|
|
</div>
|
|
<div>
|
|
<dt className="font-medium text-foreground">{step.step}</dt>
|
|
<dd className="mt-1 text-muted-foreground">{step.description}</dd>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Who Is It For */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-foreground mb-4">Who Is This For?</h2>
|
|
<ul className="grid md:grid-cols-2 gap-3 text-muted-foreground">
|
|
{data.whoIsItFor.map((who, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className="mt-1 h-2 w-2 rounded-full bg-primary shrink-0" />
|
|
{who}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="text-center py-12">
|
|
<h2 className="text-2xl font-bold text-foreground mb-4">Start monitoring today</h2>
|
|
<p className="text-muted-foreground mb-6">Join the waitlist for early access and a permanent Pro discount.</p>
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center rounded-full bg-primary px-8 py-3 font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
|
|
>
|
|
Join the Waitlist
|
|
</Link>
|
|
</section>
|
|
|
|
{/* Internal Links */}
|
|
<nav className="flex flex-wrap gap-3 text-sm">
|
|
<Link href="/features" className="text-primary hover:underline">Explore Features</Link>
|
|
<span className="text-muted-foreground">•</span>
|
|
<Link href="/use-cases" className="text-primary hover:underline">More Use Cases</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|