纯 CSS 文档页：Tabs 与 FAQ 手风琴

生成一个落地页，作为加入我们蜂巢思维的营销页面。我们蜂巢思维的独特之处在于你仍然保有自己的个人身份，只是基本上可以访问其他所有人的思想。你确实也会有一些目标，但每周只需为蜂巢思维工作一天，时间是 9 点到 5 点。你还需要缴纳收入的 5%。作为交换，你可以接触到广泛的专业人士网络和各种机会。名字由你来起。

生成一个完整的单文件 HTML 定价页。 品牌名：乔木 LLM 擂台 三档： - Free：0 元，3 个内置 Case，本地 API Key - Pro：29 元/月，无限 Case，贡献徽章 - Team：99 元/月，共享题库，协作标注 视觉要求： 1. 浅色背景，青绿 accent，无紫色渐变； 2. 三列定价卡片，中间 Pro 轻微突出； 3. 响应式：窄屏改为单列； 4. 含页头导航与页脚一行「Powered by 向阳乔木」； 5. 不要外部字体 CDN 以外的依赖（可用 system font）。

制作一个干净、极简的产品落地页，使用单色配色方案 标题使用粗体无衬线字体（24-36px），正文使用易读的无衬线字体（16-18px） 实现一个首屏区域，放入高质量产品图片或视频，并在滚动时产生动画 设计一个粘性页头，包含标志、导航和 CTA 按钮 撰写简洁、以利益点为中心的标题（60-80 个字符）和副标题（120-160 个字符） 放上一个醒目的 CTA 按钮，使用对比色，并带有悬停效果 加入社会证明元素：客户评价、信任徽章和评分 做一个可交互的产品展示，包含 360 度查看或增强现实功能 实现一张对比表，突出关键功能与利益点 设计一个 FAQ 区域，答案可以展开，用来回应常见异议 使用微交互和细微动画来提高用户参与 把页面加载速度优化到 3 秒以内，并对图片实现懒加载 做移动端响应式设计，按钮易于点按（最小 44x44px） 实现 schema 标记，以便在搜索结果中显示富媒体摘要 加入实时聊天小组件，提供即时客户支持 做一个退出意图弹窗，附带特别优惠，以降低跳出率 实现一个随滚动出现的粘性 「加入购物车」 按钮 有效利用留白，提高可读性并集中注意力 为限时优惠加上倒计时器，以制造紧迫感 实现一个进度条，显示购买步骤 制作自定义插画或图标，把产品利益点可视化 对背景元素使用视差滚动效果 实现一个粘性社交分享条，方便分享 增加一个区域，展示相关或互补产品 实现深色模式开关，改善使用体验 做一个邮箱收集表单，并配上相关的引流诱饵 使用 CSS 动画做细微的背景效果 实现一个粘性视频播放器，用于产品演示 为无障碍加入键盘导航支持 根据用户的选择，做一个动态价格计算器 实现一个随滚动出现的浮动 CTA 按钮 使用自定义光标效果来增强交互感 做一张动画信息图，用来解释复杂功能 实现一个聊天机器人，提供个性化产品推荐 增加一个区域，突出你的独特卖点 做一个动态评价轮播，带上客户照片 为关键产品功能实现由滚动触发的动画 使用自定义 SVG 动画来说明产品功能 做一个可交互的尺码指南或产品配置器 为多步骤结账流程实现粘性订单摘要

# 作品集核心功能 ## 页头与导航 ### 固定页头 - 设计一个极简的固定页头，包含标志、导航菜单和联系按钮。 - 使用 `react-scroll` 平滑滚动到各个区块。 - 使用 Framer Motion 为移动端导航添加动画汉堡菜单。 ### 自定义光标 - 使用 `react-custom-cursor` 实现自定义光标。 - 使用 `react-mouse-particles` 添加鼠标拖尾效果。 ### 键盘导航 - 使用 `react-focus-lock` 实现可访问的键盘导航。 ## 首屏区域 ### 动画文字显现 - 使用 Framer Motion 做动画文字显现效果。 ### 粒子背景 - 添加 `particles.js` 背景，提供细微的交互视觉。 ## 关于区域 ### 职业头像与简介 - 放入一张职业头像和一段简洁的简介。 ### 基于滚动的叙事 - 使用 AOS 库做基于滚动的动画。 ## 技能区域 ### 动画进度条 - 使用 Chart.js 做动画进度条或雷达图。 ### 技能词云 - 使用 `react-wordcloud` 添加可交互的词云。 ### 自定义提示 - 使用 `react-tooltip` 为技能提供说明。 ## 项目展示 ### 瀑布流网格 - 使用 `react-masonry-css` 做响应式瀑布流网格。 ### 可筛选分类 - 为项目实现可筛选的分类。 ### 模态弹窗 - 添加模态弹窗，用于查看项目详情。 ### 懒加载 - 使用 `next/image` 对项目图片做懒加载。 ### WebGL 转场 - 使用 Three.js 做由 WebGL 驱动的项目间转场。 ## 评价 ### 轮播 - 使用 Swiper.js 做评价轮播，自动播放，并在悬停时暂停。 ## 经历时间线 ### 垂直滚动动画 - 使用 AOS 库为经历时间线做滚动动画。 ## 博客区域 ### 基于文件的路由 - 使用 Astro 的 `src/pages` 结构，便于导航。 ### Markdown 内容 - 使用 Markdown 撰写博客文章，并用 frontmatter 存放元数据。 ### 内容集合 - 实现 Astro 的内容集合，以便有条理地管理博客文章。 ### 动态博客文章页 - 创建 `[slug].astro` 页面，用于渲染单篇博客文章。 ### 静态站点生成 (SSG) - 使用 Astro 的 SSG，以获得最佳性能和 SEO。 ### 博客文章列表 - 使用 `Astro.glob()` 查询并在索引页和归档页上显示博客文章列表。 ### 语法高亮 - 使用 Astro 内置的代码块语法高亮支持。 ### RSS 源 - 使用 Astro 的 RSS 包实现 RSS 源。 ### 标签系统 - 建立标签系统，并为每个标签做单独页面，以便组织内容。 ### 阅读时间估算 - 为每篇博客文章实现阅读时间估算。 ### 目录 - 为长文设计一个目录组件。 ### 相关文章 - 在每篇博客文章末尾添加相关文章区域。 ### 社交分享按钮 - 为每篇博客文章实现社交分享按钮。 ### 新闻通讯订阅 - 设计一个新闻通讯订阅表单，使用 Astro 的表单处理。 ### 评论系统 - 使用 Disqus 或 Utterances 集成评论系统。 ### 精选文章轮播 - 为首页设计一个精选文章轮播。 ### 自定义视频播放器 - 为视频内容创建一个自定义视频播放器组件。 ### 阅读时间进度条 - 为博客文章实现一个 「阅读时长」 进度条。 ### 复制代码按钮 - 为代码块添加一个 「复制代码」 按钮。 ### 自定义引用块 - 设计一个自定义引用块组件，并提供样式选项。 ### 最后更新指示 - 为博客文章添加一个 「最后更新」 指示。 ## 联系区域 ### 联系表单 - 添加联系表单，带客户端校验和 reCAPTCHA 集成。 ### 拖放文件上传 - 使用 `react-dropzone` 做文件上传。 ## 社交媒体集成 ### 浮动操作按钮 - 添加一个浮动操作按钮，以便快速进入社交媒体资料。 ### 动画图标 - 使用 SVG 动画和 GSAP 做动画社交媒体图标。 ## 更多功能 ### 深色模式 - 使用自定义 Hook 和 `localStorage` 实现深色模式开关。 ### 音频播放器 - 添加自定义音频播放器，用于背景音乐，带播放/暂停开关。 ### 回到顶部按钮 - 添加一个向下滚动后出现的回到顶部按钮。 ### 微交互 - 使用 `react-spring` 做按钮和链接动画。 ### 自定义加载画面 - 使用 SVG 动画做带动画标志的加载画面。 ### 可交互简历 - 创建一条可交互的时间线，区块可以展开。 ### 自定义 404 页面 - 使用 Lottie 设计一个带动画插画的 404 页面。 ### 五彩纸屑效果 - 使用 `react-confetti` 用于成就或特别事件。 ### 实时聊天 - 使用 `react-chat-widget` 添加实时聊天小组件。 ### 可交互地球 - 使用 `react-globe.gl` 展示工作地点。 # SEO 检查清单（完整收录并增强） ## 页面 SEO ### 标题与 Meta 描述 - 使用清晰、简洁的 title 标签，以及包含主要关键词、有吸引力的 meta 描述。 ### 标题层级标签 - 使用单个 `<h1>` 标签，并用 `<h2>` 到 `<h6>` 标签组织内容，纳入相关关键词。 ### URL 优化 - 优化 URL，并在前 100 个词中包含主要关键词。 ### Schema 标记 - 使用 JSON-LD 实现 schema 标记，以获得富媒体摘要（FAQ、product、review、event）。 ### 图片优化 - 用描述性 ALT 标签和利于 SEO 的文件名优化图片。 ### 内部链接 - 添加带描述性锚文本的内部链接。 ### 面包屑导航 - 实现面包屑导航及其标记。 ### Canonical 标签 - 使用 canonical 标签，避免重复内容问题。 ### 分页 - 使用 `rel="prev/next"` 标签实现正确的分页。 ### AMP - 为新闻/博客内容实现 AMP。 ## 技术 SEO ### XML 站点地图 - 创建并提交 XML 站点地图。 ### Robots.txt - 实现 `robots.txt` 文件，以控制爬虫访问。 ### 移动友好 - 确保网站对移动端友好并且响应式。 ### HTTPS - 确保网站使用 HTTPS。 ### 页面速度 - 通过减少 HTTP 请求、使用 CDN 和懒加载来优化页面速度。 ### Core Web Vitals - 针对 LCP、FID 和 CLS 进行优化。 ### JavaScript 处理 - 确保对 JavaScript 的处理适合搜索引擎爬虫。 ### 动态渲染 - 如有必要，对重度依赖 JavaScript 的页面使用动态渲染。 ## 进阶 SEO ### 国际定向 - 使用 `hreflang` 标签支持多语言。 ### 语音搜索优化 - 通过自然语言和 FAQ schema 优化语音搜索。 ### Google Discover - 使用高质量图片和有吸引力的内容，针对 Google Discover 进行优化。 ### 本地 SEO - 为本地商家信息实现结构化数据。 ### 视频 SEO - 为视频内容使用 schema 标记。 ### 新闻 SEO - 使用 `news_keywords` meta 标签，针对 Google News 进行优化。 # 部署与维护 ### 部署 - 部署在 Vercel 或 Netlify 上，以获得最佳的 Next.js 性能。 ### 分析 - 集成 Google Analytics 或其他跟踪工具。 ### 备份与更新 - 定期备份项目并更新依赖。 # 测试与调试 ### 跨浏览器测试 - 在 Chrome、Firefox、Safari 和 Edge 上测试网站。 ### 性能测试 - 使用 Lighthouse、PageSpeed Insights 和 WebPageTest 等工具。 ### 调试 - 使用 React DevTools 和 Next.js 调试工具。