294 lines
14 KiB
TypeScript
294 lines
14 KiB
TypeScript
'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>
|
||
)
|
||
}
|