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

'use client'
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import {ReactNode} from 'react'
import Image from 'next/image'
import React, {useState} from 'react'
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 from '../customized/_assets/check.svg'
import {Button} from '@/components/ui/button'
import {merge} from '@/lib/utils'
export type CollectPageProps = {}

export default function CollectPage(props: CollectPageProps) {
  const router = useRouter()
  return (
    <main className="mt-20 flex flex-col gap-4">
      <Wrap className="flex flex-col py-8 gap-8">
        <BreadCrumb items={[
          {label: '业务场景/数据抓取', href: '/data-capture'},
        ]}/>
        <main 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.svg" alt="checkbox" width={24} height={24}/>
                    <span className={`lg:text-md `}>广泛的数据样本</span>
                  </p>
                  <p className="flex gap-4 items-center">
                    <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
                    <span className={`lg:text-md `}>实现高频次抓取</span>
                  </p>
                  <p className="flex gap-4 items-center">
                    <Image src="/check.svg" 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} alt="特性" width={20} height={20}/>
                    <span>IP时效3-30分钟(可定制)</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Image src={check} alt="特性" width={20} height={20}/>
                    <span>IP覆盖全国各地</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Image src={check} alt="特性" width={20} height={20}/>
                    <span>稳定长输不掉线</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Image src={check} alt="特性" width={20} height={20}/>
                    <span>支持高并发提取</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Image src={check} alt="特性" width={20} height={20}/>
                    <span>平均响应时长：0.03s</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Image src={check} 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>
        </main>
      </Wrap>
    </main>
  )
}

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>
  )
}