When the user wants to create,…

# SaaS 集成页面（Next.js 实现）

一、页面结构（参照 Notion 集成页）

• 顶部 Hero 区：大标题 + 副标题 + 搜索框（支持实时过滤集成）
• 分类导航/侧边栏：按用途分组（沟通协作、CRM、开发工具、数据分析等）
• 集成卡片网格：响应式 Grid，桌面 3-4 列，移动 1-2 列
• 底部 CTA：引导用户注册或联系销售

二、20 个集成及分类建议

• 沟通协作：Slack、Microsoft Teams、Zoom、Google Meet
• CRM/销售：Salesforce、HubSpot、Pipedrive、Zendesk Sell
• 生产力：Google Calendar、Google Drive、Dropbox、Notion
• 开发工具：GitHub、GitLab、Jira、Figma
• 数据/自动化：Zapier、Segment、Snowflake、Webhook（自定义）

三、核心代码骨架

```tsx

// app/integrations/page.tsx

const integrations = [

{ name: 'Slack', category: '沟通', desc: '接收通知与提醒', logo: '/logos/slack.svg' },

{ name: 'Salesforce', category: 'CRM', desc: '同步客户数据', logo: '/logos/salesforce.svg' },

// ...共 20 个

];

export default function IntegrationsPage() {

return (

<main className="max-w-6xl mx-auto px-6 py-16">

<h1 className="text-4xl font-bold text-center">集成中心</h1>

<SearchBar /> {/* 客户端组件，含分类 Tab + 关键词过滤 */}

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">

{integrations.map(item => (

<IntegrationCard key={item.name} {...item} />

))}

</div>

</main>

);

}

```

IntegrationCard 组件要点：

• Logo（居中）+ 名称 + 一句话描述
• 悬停效果：hover:shadow-md transition
• 右上角「连接」按钮或状态标签

SearchBar（客户端组件）：

• useState 存关键词 + 当前分类
• 用 useMemo 过滤列表，配合 next/navigation 无需刷新

四、落地建议

• Logo 走官方品牌资源下载，统一 48×48 SVG，存 public/logos/
• 使用 Tailwind CSS 快速还原 Notion 风格（大量留白、无边框卡片、浅灰 hover）
• SEO：为每个集成生成独立详情页（integrations/[slug]），提升「XX + 你的产品」搜索流量
• 后续可加「请求新集成」入口收集用户需求

需要我补全完整的 SearchBar、卡片组件或某个集成详情页代码，告诉