mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-10 22:32:16 +02:00
fb5b0da816
- 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>
68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Reveal } from "@/components/connectors-marketing/reveal";
|
|
import { MarketingSection } from "@/components/marketing/section";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { getAllConnectors } from "@/lib/connectors-marketing";
|
|
|
|
/** Registry-driven connector grid with a live count badge (brief: never list connectors in copy). */
|
|
export function ConnectorGrid() {
|
|
const connectors = getAllConnectors();
|
|
|
|
return (
|
|
<MarketingSection>
|
|
<Reveal>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
|
Connectors for every platform your market uses
|
|
</h2>
|
|
<Badge variant="outline" className="py-1">
|
|
{connectors.length} connectors and growing
|
|
</Badge>
|
|
</div>
|
|
<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
|
|
Each connector is a platform-native REST API. Call it from your own app with your
|
|
SurfSense API key, or hand it to your agents through the SurfSense MCP server. Live data
|
|
in, structured intelligence out.
|
|
</p>
|
|
</Reveal>
|
|
<Reveal>
|
|
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{connectors.map((connector) => {
|
|
const Icon = connector.icon;
|
|
return (
|
|
<Link
|
|
key={connector.slug}
|
|
href={`/${connector.slug}`}
|
|
className="group flex flex-col rounded-xl border bg-card p-5 transition-colors hover:border-brand/40"
|
|
>
|
|
<span className="flex size-10 items-center justify-center rounded-lg border bg-muted/40 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
|
|
<Icon className="size-5 text-foreground" />
|
|
</span>
|
|
<h3 className="mt-3 font-semibold">
|
|
{connector.cardTitle ?? `${connector.name} API`}
|
|
</h3>
|
|
<p className="mt-1.5 flex-1 text-sm leading-relaxed text-muted-foreground line-clamp-2">
|
|
{connector.heroLede}
|
|
</p>
|
|
<span className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-foreground">
|
|
Explore
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button asChild variant="outline">
|
|
<Link href="/connectors">
|
|
View all connectors
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Reveal>
|
|
</MarketingSection>
|
|
);
|
|
}
|