添加解决方案页面，提取解决方案公用组件

README.md

@@ -1,9 +1,5 @@
 ## TODO
 
-### 禁止直接依赖 form
-
-`\[(.*,)?form(,.*)?\]`
-
 业务场景页面优化实现
 
 业务定制页面优化实现
@@ -23,6 +19,10 @@
 
 后台导航改进
 
+### 禁止直接依赖 form
+
+`\[(.*,)?form(,.*)?\]`
+
 ### 次要
 
 帮助中心文档优化
@@ -38,6 +38,8 @@
 
 全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）
 
+迁移到 tanstack form
+
 页尾链接完善跳转地址
 
 树组件优化

src/app/(home)/_components/header/menu-solution.tsx

@@ -19,51 +19,51 @@ export default function SolutionMenu() {
     <Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 pl=2 auto-rows-fr gap-4">
       <SolutionItem
         icon={s01}
-        title="数据抓取"
-        desc="高效采集和分析大量数据，助力企业获取大量情报"
+        title="数据采集"
+        desc="高效采集和分析海量数据，助力企业获取市场情报和行业洞察"
         href="/data-capture"
       />
       <SolutionItem
         icon={s02}
-        title="广告验证"
-        desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
-        href="#"
+        title="电商运营"
+        desc="商品价格监控、库存追踪、竞品分析，助力提升电商运营效率与竞争力"
+        href="/e-commerce"
       />
       <SolutionItem
         icon={s03}
-        title="市场调查"
-        desc="收集全网行业数据，了解竞争对手动态"
-        href="#"
+        title="市场调研"
+        desc="实时收集行业数据，深度分析竞品动态，洞察市场趋势与机遇"
+        href="/market-research"
       />
       <SolutionItem
         icon={s04}
         title="SEO优化"
-        desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
-        href="#"
+        desc="多地域搜索排名监控，关键词效果分析，提升网站自然流量"
+        href="/seo-optimization"
       />
       <SolutionItem
         icon={s05}
-        title="品牌保护"
-        desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
-        href="#"
+        title="社交媒体"
+        desc="多账号安全运营、内容智能分发、用户互动管理，扩大品牌影响力"
+        href="/social-media"
       />
       <SolutionItem
         icon={s06}
-        title="价格监控"
-        desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
-        href="#"
+        title="广告投放"
+        desc="广告效果实时监测、竞价策略优化、精准计算ROI，提升广告转化"
+        href="/advertising"
       />
       <SolutionItem
         icon={s07}
-        title="金融数据"
-        desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
-        href="#"
+        title="账号管理"
+        desc="批量注册、多平台账号管理、自动化运营，降低运营成本"
+        href="/account-management"
       />
       <SolutionItem
         icon={s08}
-        title="网站测试"
-        desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
-        href="#"
+        title="网络测试"
+        desc="多地域性能测试、兼容性验证、用户体验优化，确保服务质量"
+        href="/network-testing"
       />
     </Wrap>
   )

src/app/(home)/account-management/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '账号管理',
+    href: '/account-management',
+  },
+  banner: {
+    title: '账号管理',
+    description: '批量注册、多平台账号管理、自动化运营，降低运营成本。助力企业高效管理海量账号，提升运营效率和安全性',
+    backgroundImage: bannerImg,
+    features: ['批量账号注册', '多平台统一管理', '安全稳定运营'],
+  },
+  value: {
+    title: '高效管理海量账号',
+    cards: [
+      {
+        icon: value1Img,
+        title: '批量注册账号',
+        description: '通过代理IP实现多平台账号的批量注册，避免IP被限制或封禁，大幅提升注册成功率，节省人力和时间成本',
+      },
+      {
+        icon: value2Img,
+        title: '账号安全隔离',
+        description: '为每个账号分配独立IP，避免账号关联风险，保护账号安全。即使个别账号出现问题，也不会影响其他账号的正常使用',
+      },
+      {
+        icon: value3Img,
+        title: '自动化养号',
+        description: '模拟真实用户行为，通过代理IP进行账号养成和活跃度维护，提升账号权重和信任度，降低封号风险',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐账号管理解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '高效的账号管理是企业规模化运营的基础。我们的代理IP服务为账号管理提供强大支持，帮助企业实现批量注册、安全隔离、自动化养号。让您的多账号运营更加安全、高效、可控。',
+      '通过遍布全国的代理节点，您可以为每个账号分配独立的IP地址，模拟真实用户的地域分布和行为模式，有效规避平台的反作弊机制。我们的技术确保账号的安全性和稳定性，让您的账号运营更具规模化优势。无论是电商店铺、社交账号，还是推广账号，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function AccountManagementPage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/advertising/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '广告投放',
+    href: '/advertising',
+  },
+  banner: {
+    title: '广告投放',
+    description: '广告效果实时监测、竞价策略优化、精准计算ROI，提升广告转化。助力企业实现广告投放的精细化管理和效果最大化',
+    backgroundImage: bannerImg,
+    features: ['广告效果监测', '竞价数据分析', '多平台投放验证'],
+  },
+  value: {
+    title: '优化广告投放效果',
+    cards: [
+      {
+        icon: value1Img,
+        title: '广告效果验证',
+        description: '实时监测广告的展示位置、展示频次和点击效果，确保广告投放的真实性和有效性，避免无效消耗，提升广告ROI',
+      },
+      {
+        icon: value2Img,
+        title: '竞价策略分析',
+        description: '采集分析竞品的广告投放策略和竞价数据，了解市场行情，制定更具竞争力的出价策略，优化广告成本',
+      },
+      {
+        icon: value3Img,
+        title: '多地域投放测试',
+        description: '模拟不同地区用户查看广告效果，验证广告在各地的展示情况，优化地域定向策略，提升广告精准度和转化率',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐广告投放解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '精准的广告投放是提升营销效果的关键。我们的代理IP服务为广告投放提供强大支持，帮助企业实时监测广告效果、分析竞价策略、验证投放质量。让数据驱动您的广告决策，实现广告预算的最优配置和效果最大化。',
+      '通过遍布全国的代理节点，您可以从不同地区、不同设备验证广告展示效果，确保广告投放的真实性和有效性。我们的技术保障数据采集的准确性和实时性，让您的广告投放更加精准高效。无论是搜索广告、信息流广告，还是社交广告，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function AdvertisingPage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/data-capture/page.tsx

@@ -1,292 +1,51 @@
-'use client'
-import BreadCrumb from '@/components/bread-crumb'
-import Wrap from '@/components/wrap'
-import {ReactNode} from 'react'
-import Image from 'next/image'
-import {useRouter} from 'next/navigation'
-import s1 from './_assets/1.webp'
-import s2 from './_assets/2.webp'
-import s3 from './_assets/3.webp'
-import s4 from './_assets/4.webp'
-import s5 from './_assets/5.webp'
-import s6 from './_assets/6.webp'
-import s7 from './_assets/7.webp'
-import s8 from './_assets/8.webp'
-import s9 from './_assets/9.webp'
-import s10 from './_assets/10.webp'
-import s11 from './_assets/11.webp'
-import s12 from './_assets/12.webp'
-import check_main from '@/assets/check-main.svg'
-import check_accent from '@/assets/check-accent.svg'
-import {Button} from '@/components/ui/button'
-import {merge} from '@/lib/utils'
-import HomePage from '@/components/home/page'
-export type CollectPageProps = {}
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
 
-export default function CollectPage(props: CollectPageProps) {
-  const router = useRouter()
-  return (
-    <HomePage path={[
-      {label: '业务场景'},
-      {label: '数据抓取', href: '/data-capture'},
-    ]}>
-      <Wrap className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
-        {/* banner */}
-        <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
-          <Wrap className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
-            <Image src={s12} alt="背景图" className="absolute inset-0 w-full h-full object-cover"/>
-            <div className="relative pl-20 w-1/2 flex-1">
-              <h1 className="text-4xl">数据抓取</h1>
-              <p className="mt-10 text-gray-500">从多元网络源精准捕获数据，为洞察市场、优化策略筑牢根基借前沿技术 高效抓取海量信息，解锁数据价值、赋能业务增长新征程</p>
-              <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
-                <p className="flex gap-4 items-center">
-                  <Image src={check_main} alt="checkbox" width={24} height={24}/>
-                  <span className={`lg:text-md `}>广泛的数据样本</span>
-                </p>
-                <p className="flex gap-4 items-center">
-                  <Image src={check_main} alt="checkbox" width={24} height={24}/>
-                  <span className={`lg:text-md `}>实现高频次抓取</span>
-                </p>
-                <p className="flex gap-4 items-center">
-                  <Image src={check_main} alt="checkbox" width={24} height={24}/>
-                  <span className={`lg:text-md `}>保护隐私安全</span>
-                </p>
-              </div>
-
-              <button
-                className={[
-                  `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
-                  `bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
-                ].join(' ')}
-                onClick={() => router.push('/product?type=short')}
-              >
-                选择套餐
-              </button>
-            </div>
-          </Wrap>
-        </section>
-
-        {/* 数据展示 */}
-        <Section title="全方面增进数据分析的专业">
-          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <li className="p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center">
-              <Image
-                src={s5}
-                alt="全方位的数据样本"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h1 className="text-xl">全方位的数据样本</h1>
-              <p className="text-sm text-gray-500 flex gap-3 items-center">
-                通过在全国范围内进行多地域验证，品牌能 够覆盖更广泛的用户场景，从而实现产品与 目标受众的精准匹配，提升广告效果
-              </p>
-            </li>
-            <li className="p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center">
-              <Image
-                src={s3}
-                alt="达成提高抓取频次的目的"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h1 className="text-xl">达成提高抓取频次的目的</h1>
-              <p className="text-sm text-gray-500 flex gap-3 items-center">
-                我们提供实时监控广告所处网页环境的质 量，确保广告投放的透明性和合法性，有 效提升转化率与用户互动，为品牌建立良 好的信誉
-              </p>
-            </li>
-            <li className="p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center">
-              <Image
-                src={s4}
-                alt="维护隐私安全"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h1 className="text-xl">维护隐私安全</h1>
-              <p className="text-sm text-gray-500 flex gap-3 items-center">
-                通过详尽的报告和数据分析，品牌可以全 面评估广告投放效果，关注点击率、转化 率等关键指标，从而优化投放策略，实现 更高的广告回报
-              </p>
-            </li>
-          </ul>
-        </Section>
-
-        {/* 优势 1 */}
-        <Section title="">
-          <div className="flex gap-8">
-            <Image
-              src={s1}
-              alt="s1"
-              className="w-0 flex-1 object-cover"
-              priority
-            />
-            <ul className="flex-1 flex flex-col gap-6">
-              <li className="p-8 flex flex-col gap-5 rounded-lg max-md:items-center">
-                <h1 className="text-xl">蓝狐HTTP解决方案</h1>
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  广告效果验证是评估营销活动成功的关键。我们的代理IP技术提供准确的广告展示和点击 数据，帮助品牌优化广告策略，提升用户参与度。这项技术确保广告数据的真实性，推动 广告行业向更健康和创新的方向发展，实现广告资源的最大化利用。通过深入分析广告效 果，企业可以制定更具针对性的投放策略，显著提升广告效益。在竞争激烈的市场环境中 ，借助我们的技术支持，品牌能够更好地满足目标受众需求，提升整体营销回报
-                </p>
-              </li>
-            </ul>
-          </div>
-        </Section>
-
-        {/* 优势 2 */}
-        <Section title="产品核心优势 ">
-          <ul className={merge('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8')}>
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s6}
-                alt="s6"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">稳健可靠</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>国内三大运营商（电信/ 联通/移动）正规授权， 每个IP都经过技术团队 的严格筛选和验证</span>
-                </p>
-              </div>
-            </li>
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s7}
-                alt="s7"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">资源积累</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>拥有超3000万+的代理资 源储备，每日更新去重， 确保资源池的丰富性和多样性</span>
-                </p>
-              </div>
-            </li>
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s8}
-                alt="s8"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">稳定连接</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>通过定期检测和筛选， 确保代理IP的纯净度高 达99.8%，减少了无 效或低质量IP的影响</span>
-                </p>
-              </div>
-            </li>
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s9}
-                alt="s9"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">超匿名性</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>直观掌握IP使用情况，借助实时 监控，迅速识别异常，及时调整 策略并优化资源配置</span>
-                </p>
-              </div>
-            </li>
-          </ul>
-          <ul className="flex mt-8 gap-8">
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s10}
-                alt="s10"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">可视化性</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>直观掌握IP使用情况，借助实时 监控，迅速识别异常，及时调整 策略并优化资源配置</span>
-                </p>
-              </div>
-            </li>
-            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
-              <Image
-                src={s11}
-                alt="s11"
-                className="w-44 h-44 object-cover"
-                priority
-              />
-              <h3 className="text-xl">灵活定价</h3>
-              <div className="flex flex-col gap-3">
-                <p className="text-sm text-gray-500 flex gap-3 items-center">
-                  <span>提供多种代理产品选择，支持灵 活的计费方式，能够适配不同规 模企业的全栈式业务场景</span>
-                </p>
-              </div>
-            </li>
-          </ul>
-        </Section>
-
-        {/* 全栈式代理解决方案 */}
-        <Section title="">
-          <div className="flex gap-8 max-md:flex-col max-md:gap-4">
-            <div className={merge('shadow-[4px_4px_20px_4px] shadow-blue-50 flex-1 p-4 flex justify-center items-center bg-gray-50')}>
-              <Image
-                src={s2}
-                alt="代理解决方案示意图"
-                className="w-full h-auto object-contain max-h-64"
-              />
-            </div>
-
-            <div className="flex-1 flex flex-col gap-6">
-
-              <div>
-                <h3 className="text-2xl font-medium">全栈式代理解决方案</h3>
-                <p className="text-gray-500 mt-2">
-                  专业代理团队，提供深度市场洞察，为您量身打造代理解决方案
-                </p>
-              </div>
-
-              <div className="grid grid-cols-3 gap-4">
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>IP时效3-30分钟(可定制)</span>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>IP覆盖全国各地</span>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>稳定长输不掉线</span>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>支持高并发提取</span>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>平均响应时长：0.03s</span>
-                </div>
-                <div className="flex gap-2 items-center">
-                  <Image src={check_accent} alt="特性" width={20} height={20}/>
-                  <span>全国热门静态IP线路</span>
-                </div>
-              </div>
-              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap">
-                定制咨询
-              </Button>
-            </div>
-          </div>
-        </Section>
-      </Wrap>
-    </HomePage>
-  )
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '数据采集',
+    href: '/data-capture',
+  },
+  banner: {
+    title: '数据采集',
+    description: '从多元网络源精准捕获数据，为洞察市场、优化策略筑牢根基。借助前沿技术高效抓取海量信息，解锁数据价值、赋能业务增长新征程',
+    backgroundImage: bannerImg,
+    features: ['广泛的数据样本', '实现高频次抓取', '保护隐私安全'],
+  },
+  value: {
+    title: '全方位提升数据采集能力',
+    cards: [
+      {
+        icon: value1Img,
+        title: '全方位的数据样本',
+        description: '通过覆盖全国多地域的代理IP池，突破地域限制采集数据，获取更全面的数据样本，为深度分析和精准决策提供坚实基础',
+      },
+      {
+        icon: value2Img,
+        title: '实现高频次抓取',
+        description: '支持高并发IP切换和大规模数据采集，有效规避反爬虫限制，确保数据采集的连续性和高效性，满足企业对实时数据的需求',
+      },
+      {
+        icon: value3Img,
+        title: '保护隐私安全',
+        description: '通过代理IP隐藏真实身份，保护企业数据采集活动的隐私性和安全性，避免IP被封禁，确保业务稳定运行',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐数据采集解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '在大数据时代，高效的数据采集是企业洞察市场、制定战略的核心能力。我们的代理IP服务为数据采集提供强大支持，帮助企业突破地域限制、规避反爬虫机制、实现高频次数据抓取。',
+      '通过遍布全国的代理节点，您可以模拟不同地区的真实用户访问，获取更全面、更准确的数据样本。我们的技术确保IP的高可用性和纯净度，让您的数据采集工作更加稳定高效。无论是电商价格监控、舆情分析，还是竞品研究，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
 }
 
-function Section(props: {
-  title: string
-  children: ReactNode
-}) {
-  return (
-    <section>
-      <div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
-        <h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>
-        {props.children}
-      </div>
-    </section>
-  )
+export default function DataCapturePage() {
+  return <ScenePage {...config}/>
 }

src/app/(home)/e-commerce/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '电商运营',
+    href: '/e-commerce',
+  },
+  banner: {
+    title: '电商运营',
+    description: '全方位监控电商平台动态，实时追踪商品价格与库存变化。助力精准运营决策，提升市场竞争力与销售转化',
+    backgroundImage: bannerImg,
+    features: ['实时价格监控', '竞品数据分析', '多平台数据采集'],
+  },
+  value: {
+    title: '提升电商运营效率',
+    cards: [
+      {
+        icon: value1Img,
+        title: '价格情报监控',
+        description: '实时追踪竞争对手的价格变动，帮助您制定更具竞争力的定价策略，快速响应市场变化，提升市场占有率和利润空间',
+      },
+      {
+        icon: value2Img,
+        title: '商品数据采集',
+        description: '自动采集商品详情、销量、评价等关键数据，深度分析消费者偏好和市场趋势，为选品和库存管理提供数据支撑',
+      },
+      {
+        icon: value3Img,
+        title: '多平台覆盖',
+        description: '支持主流电商平台数据采集，突破平台反爬限制，确保数据采集的稳定性和连续性，全面掌握市场动态',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐电商运营解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '在竞争激烈的电商市场中，价格和库存数据是制胜关键。我们的代理IP服务为电商运营提供强大支持，帮助企业实时监控竞品价格、采集商品数据、分析市场趋势，从而制定更精准的运营策略。',
+      '通过遍布全国的代理节点，您可以突破电商平台的反爬虫限制，模拟不同地区的真实用户访问，获取全面准确的商品信息。我们的技术确保数据采集的高效性和稳定性，让您的电商运营更具竞争优势。无论是价格监控、选品分析，还是竞品研究，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function ECommercePage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/market-research/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '市场调研',
+    href: '/market-research',
+  },
+  banner: {
+    title: '市场调研',
+    description: '实时收集行业数据，深度分析竞品动态，洞察市场趋势与机遇。为企业战略决策提供可靠的数据支撑',
+    backgroundImage: bannerImg,
+    features: ['竞品动态追踪', '行业数据分析', '市场趋势洞察'],
+  },
+  value: {
+    title: '深度洞察市场动态',
+    cards: [
+      {
+        icon: value1Img,
+        title: '竞品情报采集',
+        description: '全面追踪竞争对手的产品动态、营销策略和用户反馈，深入了解竞品优劣势，为差异化竞争提供决策依据',
+      },
+      {
+        icon: value2Img,
+        title: '行业趋势分析',
+        description: '持续监测行业新闻、政策变化和技术发展，及时捕捉市场机遇，帮助企业把握行业发展方向，制定前瞻性战略',
+      },
+      {
+        icon: value3Img,
+        title: '用户行为研究',
+        description: '采集分析用户评价、社交媒体讨论和消费行为数据，深入理解目标用户需求和偏好，优化产品和服务',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐市场调研解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '深度的市场调研是企业制定战略、把握机遇的基础。我们的代理IP服务为市场调研提供强大的数据采集能力，帮助企业突破信息壁垒，获取全面准确的市场情报。无论是竞品分析、行业研究，还是用户洞察，都能高效完成。',
+      '通过遍布全国的代理节点，您可以从不同地区、不同视角采集市场数据，避免信息偏差。我们的技术确保数据采集的高效性和隐蔽性，让您的市场调研工作更加深入全面。从战略规划到产品优化，我们都能为您提供专业的数据支持和代理解决方案。',
+    ],
+  },
+}
+
+export default function MarketResearchPage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/network-testing/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '网络测试',
+    href: '/network-testing',
+  },
+  banner: {
+    title: '网络测试',
+    description: '多地域性能测试、兼容性验证、用户体验优化，确保服务质量。助力企业全面了解产品在不同网络环境下的表现',
+    backgroundImage: bannerImg,
+    features: ['多地域性能测试', '兼容性验证', '用户体验评估'],
+  },
+  value: {
+    title: '全面保障服务质量',
+    cards: [
+      {
+        icon: value1Img,
+        title: '多地域性能测试',
+        description: '模拟不同地区用户的访问环境，测试网站或应用在各地的加载速度、响应时间和稳定性，发现性能瓶颈，优化用户体验',
+      },
+      {
+        icon: value2Img,
+        title: '网络兼容性验证',
+        description: '在不同网络环境（电信、联通、移动）下测试产品的兼容性和可用性，确保所有用户都能获得良好的访问体验',
+      },
+      {
+        icon: value3Img,
+        title: '真实用户模拟',
+        description: '通过代理IP模拟真实用户的访问行为和网络环境，进行压力测试和功能验证，及早发现并解决潜在问题',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐网络测试解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '全面的网络测试是保障产品质量的关键。我们的代理IP服务为网络测试提供强大支持，帮助企业模拟不同地区、不同网络环境的真实用户访问，全面评估产品性能和用户体验。让测试更加真实、全面、高效。',
+      '通过遍布全国的代理节点，您可以从任意地区、任意运营商网络进行测试，真实还原用户的访问场景。我们的技术确保测试的准确性和稳定性，帮助您及早发现问题、优化性能。无论是网站测试、应用测试，还是API测试，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function NetworkTestingPage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/seo-optimization/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: 'SEO优化',
+    href: '/seo-optimization',
+  },
+  banner: {
+    title: 'SEO优化',
+    description: '多地域搜索排名监控，关键词效果分析，提升网站自然流量。助力企业在搜索引擎中获得更好的可见度和更高的转化率',
+    backgroundImage: bannerImg,
+    features: ['多地域排名监控', '关键词效果追踪', '竞品SEO分析'],
+  },
+  value: {
+    title: '全面提升搜索引擎表现',
+    cards: [
+      {
+        icon: value1Img,
+        title: '搜索排名监控',
+        description: '实时监控网站在不同地区、不同搜索引擎的关键词排名变化，及时发现排名波动，快速调整SEO策略，提升搜索可见度',
+      },
+      {
+        icon: value2Img,
+        title: '关键词研究',
+        description: '采集分析热门关键词、长尾关键词的搜索量和竞争度，挖掘高价值关键词机会，优化内容策略，提升流量质量',
+      },
+      {
+        icon: value3Img,
+        title: '竞品SEO洞察',
+        description: '深度分析竞争对手的SEO策略、关键词布局和外链建设，学习优秀案例，发现自身不足，制定差异化的SEO方案',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐SEO优化解决方案',
+    image: solutionImg,
+    paragraphs: [
+      'SEO是提升网站自然流量的关键途径。我们的代理IP服务为SEO优化提供强大支持，帮助企业突破地域限制，准确监控不同地区的搜索排名，深入分析关键词效果，全面了解竞品SEO策略。让数据驱动您的SEO决策，实现搜索引擎排名的持续提升。',
+      '通过遍布全国的代理节点，您可以模拟不同地区用户的搜索行为，获取真实的排名数据和搜索结果。我们的技术确保数据采集的准确性和时效性，让您的SEO工作更加精准高效。无论是本地SEO、全国性SEO，还是竞品分析，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function SeoOptimizationPage() {
+  return <ScenePage {...config}/>
+}

src/app/(home)/social-media/page.tsx

@@ -0,0 +1,51 @@
+import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import bannerImg from './_assets/banner.webp'
+import solutionImg from './_assets/solution-main.webp'
+import value1Img from './_assets/value-1.webp'
+import value2Img from './_assets/value-2.webp'
+import value3Img from './_assets/value-3.webp'
+
+const config: ScenePageConfig = {
+  breadcrumb: {
+    label: '社交媒体',
+    href: '/social-media',
+  },
+  banner: {
+    title: '社交媒体',
+    description: '多账号安全运营、内容智能分发、用户互动管理，扩大品牌影响力。助力企业在社交平台建立强大的品牌存在感',
+    backgroundImage: bannerImg,
+    features: ['多账号管理', '内容智能分发', '用户互动追踪'],
+  },
+  value: {
+    title: '提升社交媒体运营效率',
+    cards: [
+      {
+        icon: value1Img,
+        title: '多账号安全运营',
+        description: '支持多个社交媒体账号的批量管理和运营，通过代理IP避免账号关联，确保账号安全，提升运营效率和覆盖范围',
+      },
+      {
+        icon: value2Img,
+        title: '内容分发优化',
+        description: '智能分发营销内容到不同平台和地区，突破平台限制，扩大内容传播范围，提升品牌曝光度和用户触达率',
+      },
+      {
+        icon: value3Img,
+        title: '互动数据采集',
+        description: '实时采集用户评论、点赞、分享等互动数据，分析用户反馈和情感倾向，优化内容策略，提升用户参与度和品牌忠诚度',
+      },
+    ],
+  },
+  solution: {
+    title: '蓝狐社交媒体解决方案',
+    image: solutionImg,
+    paragraphs: [
+      '社交媒体营销是品牌建设的重要渠道。我们的代理IP服务为社交媒体运营提供强大支持，帮助企业实现多账号安全管理、内容高效分发、用户互动深度分析。让您的社交媒体运营更加安全、高效、精准。',
+      '通过遍布全国的代理节点，您可以模拟不同地区的真实用户，避免账号被封禁，确保运营活动的稳定性。我们的技术保障账号安全和数据隐私，让您的社交媒体营销更具竞争力。无论是品牌推广、粉丝运营，还是舆情监控，我们都能为您提供专业的代理解决方案。',
+    ],
+  },
+}
+
+export default function SocialMediaPage() {
+  return <ScenePage {...config}/>
+}

src/components/scene-page.tsx

@@ -0,0 +1,300 @@
+'use client'
+import {ReactNode} from 'react'
+import Image, {StaticImageData} from 'next/image'
+import {useRouter} from 'next/navigation'
+import {Button} from '@/components/ui/button'
+import {merge} from '@/lib/utils'
+import HomePage from '@/components/home/page'
+import Wrap from '@/components/wrap'
+import check_main from '@/assets/check-main.svg'
+import check_accent from '@/assets/check-accent.svg'
+
+// 后2个区块的固定图片
+import advantageImg1 from '@/assets/scene/advantage-1.webp'
+import advantageImg2 from '@/assets/scene/advantage-2.webp'
+import advantageImg3 from '@/assets/scene/advantage-3.webp'
+import advantageImg4 from '@/assets/scene/advantage-4.webp'
+import advantageImg5 from '@/assets/scene/advantage-5.webp'
+import advantageImg6 from '@/assets/scene/advantage-6.webp'
+import solutionDiagram from '@/assets/scene/solution-diagram.webp'
+
+// 类型定义
+export type ScenePageConfig = {
+  breadcrumb: {
+    label: string
+    href: string
+  }
+  banner: {
+    title: string
+    description: string
+    backgroundImage: StaticImageData
+    features: [string, string, string]
+  }
+  value: {
+    title: string
+    cards: [
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+    ]
+  }
+  solution: {
+    title: string
+    image: StaticImageData
+    paragraphs: string[]
+  }
+}
+
+export default function ScenePage(props: ScenePageConfig) {
+  const router = useRouter()
+
+  return (
+    <HomePage path={[
+      {label: '业务场景'},
+      props.breadcrumb,
+    ]}>
+      <Wrap className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
+        {/* 1. Banner 区 - 可定制 */}
+        <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
+          <Image
+            src={props.banner.backgroundImage}
+            alt="背景图"
+            className="absolute inset-0 w-full h-full object-cover rounded-lg"
+            priority
+          />
+          <div className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
+            <div className="relative max-lg:pl-8 lg:pl-20 lg:w-1/2 max-lg:w-full flex-1">
+              <h1 className="text-4xl max-md:text-3xl">{props.banner.title}</h1>
+              <p className="mt-10 text-gray-500 max-md:text-sm">
+                {props.banner.description}
+              </p>
+              <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
+                {props.banner.features.map((feature, i) => (
+                  <p key={i} className="flex gap-4 items-center">
+                    <Image src={check_main} alt="checkbox" width={24} height={24}/>
+                    <span className="lg:text-md">{feature}</span>
+                  </p>
+                ))}
+              </div>
+
+              <Button
+                className={[
+                  `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
+                  `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl hover:from-blue-600 hover:to-cyan-500`,
+                ].join(' ')}
+                onClick={() => router.push('/product?type=short')}
+              >
+                选择套餐
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* 2. 场景价值区 - 可定制 */}
+        <Section title={props.value.title}>
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {props.value.cards.map((card, i) => (
+              <li key={i} className="p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center">
+                <Image
+                  src={card.icon}
+                  alt={card.title}
+                  className="w-44 h-44 object-cover"
+                />
+                <h3 className="text-xl">{card.title}</h3>
+                <p className="text-sm text-gray-500">
+                  {card.description}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        {/* 3. 解决方案介绍区 - 可定制 */}
+        <Section>
+          <div className="flex gap-8 max-lg:flex-col">
+            <Image
+              src={props.solution.image}
+              alt={props.solution.title}
+              className="w-0 flex-1 lg:max-w-[50%] object-cover rounded-lg"
+            />
+            <div className="flex-1 flex flex-col gap-6 justify-center">
+              <h2 className="text-2xl font-medium">{props.solution.title}</h2>
+              {props.solution.paragraphs.map((paragraph, i) => (
+                <p key={i} className="text-gray-500 leading-relaxed">
+                  {paragraph}
+                </p>
+              ))}
+            </div>
+          </div>
+        </Section>
+
+        {/* 4. 产品核心优势区 - 固定内容 */}
+        <Section title="产品核心优势">
+          <ul className={merge('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8')}>
+            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg1}
+                alt="稳健可靠"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">稳健可靠</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  国内三大运营商（电信/联通/移动）正规授权，每个IP都经过技术团队的严格筛选和验证
+                </p>
+              </div>
+            </li>
+            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg2}
+                alt="资源积累"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">资源积累</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  拥有超3000万+的代理资源储备，每日更新去重，确保资源池的丰富性和多样性
+                </p>
+              </div>
+            </li>
+            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg3}
+                alt="稳定连接"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">稳定连接</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  通过定期检测和筛选，确保代理IP的纯净度高达99.8%，减少了无效或低质量IP的影响
+                </p>
+              </div>
+            </li>
+            <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg4}
+                alt="超匿名性"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">超匿名性</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  高匿名代理模式，完全隐藏真实IP地址，保护采集活动的隐私性和安全性
+                </p>
+              </div>
+            </li>
+          </ul>
+          <ul className="flex mt-8 gap-8 max-md:flex-col">
+            <li className={merge('flex-1 p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg5}
+                alt="可视化管理"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">可视化管理</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  直观掌握IP使用情况，借助实时监控，迅速识别异常，及时调整策略并优化资源配置
+                </p>
+              </div>
+            </li>
+            <li className={merge('flex-1 p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
+              <Image
+                src={advantageImg6}
+                alt="灵活定价"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">灵活定价</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  提供多种代理产品选择，支持灵活的计费方式，能够适配不同规模企业的全栈式业务场景
+                </p>
+              </div>
+            </li>
+          </ul>
+        </Section>
+
+        {/* 5. 定制方案区 - 固定内容 */}
+        <Section>
+          <div className="flex gap-8 max-md:flex-col max-md:gap-4">
+            <div className={merge('shadow-[4px_4px_20px_4px] shadow-blue-50 flex-1 p-4 flex justify-center items-center bg-gray-50 rounded-lg')}>
+              <Image
+                src={solutionDiagram}
+                alt="代理解决方案示意图"
+                className="w-full h-auto object-contain max-h-64"
+              />
+            </div>
+
+            <div className="flex-1 flex flex-col gap-6">
+              <div>
+                <h2 className="text-2xl font-medium">全栈式代理解决方案</h2>
+                <p className="text-gray-500 mt-2">
+                  专业代理团队，提供深度市场洞察，为您量身打造代理解决方案
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">IP时效3-30分钟(可定制)</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">IP覆盖全国各地</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">稳定长输不掉线</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">支持高并发提取</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">平均响应时长：0.03s</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">全国热门静态IP线路</span>
+                </div>
+              </div>
+              <Button
+                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md w-fit"
+                onClick={() => router.push('/customized')}
+              >
+                定制咨询
+              </Button>
+            </div>
+          </div>
+        </Section>
+      </Wrap>
+    </HomePage>
+  )
+}
+
+function Section(props: {
+  title?: string
+  children: ReactNode
+}) {
+  return (
+    <section>
+      <div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
+        {props.title && <h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>}
+        {props.children}
+      </div>
+    </section>
+  )
+}