SurfSense/surfsense_web/components/homepage/use-cases.tsx
DESKTOP-RTLN3BA\$punk fb5b0da816 feat(marketing): CI-first homepage, connector API pages, and hero chat demo
- Homepage rebuilt around competitive-intelligence positioning: connector grid,
  how-it-works, use-case art, compare table, FAQ, and a scripted new-chat hero
  demo (typewriter prompt, agent timeline, streamed answer, /login on send)
- Marketing pages for the Reddit/YouTube/Maps/SERP/Web Crawl scrape APIs at
  /<slug>, a /connectors hub, and a bespoke /mcp-connector page
- Remove stale app/dashboard/[search_space_id] tree that broke the build
  (canonical route is [workspace_id])

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-05 20:28:27 -07:00

79 lines
2.4 KiB
TypeScript

import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { Reveal } from "@/components/connectors-marketing/reveal";
import { UseCaseArt, type UseCaseArtVariant } from "@/components/homepage/use-case-art";
import { MarketingSection } from "@/components/marketing/section";
/** Buyer language from the high-CPC keyword clusters; each anchors to the connector that fulfills it. */
const USE_CASES: {
title: string;
description: string;
href: string;
anchor: string;
art: UseCaseArtVariant;
}[] = [
{
title: "Competitor price monitoring",
description:
"Crawl competitor pricing and product pages on a schedule and get an alert the day something changes, not the quarter after.",
href: "/web-crawl",
anchor: "Web Crawl API",
art: "price",
},
{
title: "Brand monitoring",
description:
"Track every mention of your brand, your competitors, and your category across the communities where buyers speak candidly.",
href: "/reddit",
anchor: "Reddit API",
art: "brand",
},
{
title: "B2B lead generation",
description:
"Turn a category and a territory into a clean lead list with phones, websites, and ratings, ready for your CRM.",
href: "/google-maps",
anchor: "Google Maps API",
art: "leads",
},
{
title: "Market research",
description:
"Watch the rankings, ads, and AI answers your market actually sees, and mine audience sentiment at scale.",
href: "/google-search",
anchor: "SERP API",
art: "serp",
},
];
export function UseCasesRow() {
return (
<MarketingSection>
<Reveal>
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
What teams use SurfSense for
</h2>
</Reveal>
<div className="mt-8 grid gap-6 sm:grid-cols-2">
{USE_CASES.map((useCase) => (
<Reveal key={useCase.title}>
<div className="flex h-full flex-col rounded-xl border bg-card p-6">
<UseCaseArt variant={useCase.art} />
<h3 className="text-lg font-semibold">{useCase.title}</h3>
<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">
{useCase.description}
</p>
<Link
href={useCase.href}
className="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-foreground"
>
{useCase.anchor}
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
</Link>
</div>
</Reveal>
))}
</div>
</MarketingSection>
);
}