优化主页，提供通用页面模板组件
This commit is contained in:
@@ -17,26 +17,26 @@ export default function HelpMenu() {
|
||||
icon={h01}
|
||||
title="提取 IP"
|
||||
items={[
|
||||
{lead: '短效 IP 提取', href: '/collect'},
|
||||
{lead: '长效 IP 提取', href: '#'},
|
||||
{lead: '短效 IP 提取', href: '/collect?type=short'},
|
||||
{lead: '长效 IP 提取', href: '/collect?type=long'},
|
||||
]}
|
||||
/>
|
||||
<Column
|
||||
icon={h02}
|
||||
title="使用教程"
|
||||
title="平台教程"
|
||||
items={[
|
||||
{lead: '官方教程', href: '/help/tutorials/official-tutorial/browser-proxy'},
|
||||
{lead: '客户端教程', href: '/help/tutorials/client-tutorial/ios-proxy'},
|
||||
{lead: '操作指南', href: '/help/tutorials/operation-guide/windows7-proxy'},
|
||||
{lead: 'iOS 设置', href: '/docs/ios-proxy'},
|
||||
{lead: 'Android 设置', href: '/docs/android-proxy'},
|
||||
{lead: 'Windows 设置', href: '/docs/windows10-proxy'},
|
||||
]}
|
||||
/>
|
||||
<Column
|
||||
icon={h03}
|
||||
title="产品功能"
|
||||
title="高级功能"
|
||||
items={[
|
||||
{lead: '常见问题', href: '/help/features/faq/faq-general'},
|
||||
{lead: '产品介绍', href: '/help/features/product-intro/product-overview'},
|
||||
{lead: '新闻资讯', href: '/help/features/news/news-latest'},
|
||||
{lead: '套餐管理', href: '/docs/package-operations'},
|
||||
{lead: 'Socks5 教程', href: '/docs/socks5-usage'},
|
||||
{lead: '固定 IP 套餐', href: '/docs/fixed-package'},
|
||||
]}
|
||||
/>
|
||||
<Image src={banner} alt="banner" className="hidden lg:block"/>
|
||||
|
||||
@@ -1,18 +1,26 @@
|
||||
import BreadCrumb from '@/components/bread-crumb'
|
||||
import Wrap from '@/components/wrap'
|
||||
import Extract from '@/components/composites/extract'
|
||||
import HomePage from '@/components/home/page'
|
||||
|
||||
export type CollectPageProps = {}
|
||||
|
||||
export default function CollectPage(props: CollectPageProps) {
|
||||
return (
|
||||
<main className="mt-20 flex flex-col gap-4">
|
||||
<Wrap className="flex flex-col py-8 gap-4">
|
||||
<BreadCrumb items={[
|
||||
{label: '短效IP 提取', href: '/collect'},
|
||||
]}/>
|
||||
// <main className="mt-20 flex flex-col gap-4">
|
||||
// <Wrap className="flex flex-col py-8 gap-4">
|
||||
// <BreadCrumb items={[
|
||||
// {label: '短效IP 提取', href: '/collect'},
|
||||
// ]}/>
|
||||
// <Extract/>
|
||||
// </Wrap>
|
||||
// </main>
|
||||
<HomePage path={[
|
||||
{label: '短效IP 提取', href: '/collect'},
|
||||
]}>
|
||||
<Wrap>
|
||||
<Extract/>
|
||||
</Wrap>
|
||||
</main>
|
||||
</HomePage>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import banner from './_assets/Mask-group.webp'
|
||||
import group from './_assets/Group.webp'
|
||||
import {merge} from '@/lib/utils'
|
||||
import FreeTrial from '@/components/free-trial'
|
||||
import HomePage from '@/components/home/page'
|
||||
|
||||
const formSchema = z.object({
|
||||
companyName: z.string().min(2, '企业名称至少2个字符'),
|
||||
@@ -38,217 +39,221 @@ export default function CollectPage() {
|
||||
})
|
||||
|
||||
return (
|
||||
<main className="mt-20 flex flex-col gap-4">
|
||||
<Wrap className="flex flex-col py-8 gap-8">
|
||||
<BreadCrumb items={[
|
||||
{label: '产品订购/定制套餐', href: '/customized'},
|
||||
]}/>
|
||||
// <main className="mt-20 flex flex-col gap-4">
|
||||
// <Wrap className="flex flex-col py-8 gap-8">
|
||||
// <BreadCrumb items={[
|
||||
// {label: '产品订购/定制套餐', href: '/customized'},
|
||||
// ]}/>
|
||||
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
|
||||
<div className="text-center mb-4">
|
||||
<h1 className="text-2xl font-bold">优质代理IP服务商</h1>
|
||||
<p className="text-gray-600 font-medium mt-2">
|
||||
以技术升级为核心，提供优质的IP代理使用体验
|
||||
// </Wrap>
|
||||
// </main>
|
||||
<HomePage path={[
|
||||
{label: '业务定制', href: '/customized'},
|
||||
]}>
|
||||
<Wrap className='className="flex flex-col gap-8"'>
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
|
||||
<div className="text-center mb-4">
|
||||
<h1 className="text-2xl font-bold">优质代理IP服务商</h1>
|
||||
<p className="text-gray-600 font-medium mt-2">
|
||||
以技术升级为核心，提供优质的IP代理使用体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:gap-4">
|
||||
<div className="w-full md:w-1/3 mb-6 md:mb-0">
|
||||
<div className="relative h-full w-full min-h-[200px] md:min-h-[300px] rounded-xl overflow-hidden">
|
||||
<Image
|
||||
src={banner}
|
||||
alt="宣传图"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-2/3 flex flex-col gap-4">
|
||||
<p className="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:gap-4">
|
||||
<div className="w-full md:w-1/3 mb-6 md:mb-0">
|
||||
<div className="relative h-full w-full min-h-[200px] md:min-h-[300px] rounded-xl overflow-hidden">
|
||||
<Image
|
||||
src={banner}
|
||||
alt="宣传图"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 md:mt-4">
|
||||
<Button className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 md:px-6 py-2 md:py-3 rounded-md">
|
||||
立即咨询
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-2/3 flex flex-col gap-4">
|
||||
<p className="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
|
||||
</p>
|
||||
|
||||
<div className="mt-2 md:mt-4">
|
||||
<Button className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 md:px-6 py-2 md:py-3 rounded-md">
|
||||
立即咨询
|
||||
</Button>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-2 md:mt-6">
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-2 md:mt-6">
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold mb-6">企业基本信息</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<Form form={form}>
|
||||
<div className="mx-auto max-w-xl space-y-6">
|
||||
{/* 企业名称 */}
|
||||
<FormField name="companyName">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>企业名称</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入企业名称"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人姓名 */}
|
||||
<FormField name="contactName">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人姓名</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入联系人姓名"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人手机号码 */}
|
||||
<FormField name="phone">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人手机号码</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入手机号码"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 每月需求用量 */}
|
||||
<FormField name="monthlyUsage">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>每月需求用量</span>
|
||||
</label>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger
|
||||
id={id}
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs">
|
||||
<SelectValue placeholder="请选择您需要的用量"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="less20">小于20万</SelectItem>
|
||||
<SelectItem value="20-100">20万~100万</SelectItem>
|
||||
<SelectItem value="100-500">100万~500万</SelectItem>
|
||||
<SelectItem value="more500">大于500万</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 用途 */}
|
||||
<FormField name="purpose">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>用途</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入用途，例如：爬虫"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
<div className="pt-4 flex justify-center">
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 px-8">
|
||||
提交
|
||||
</Button>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>IP时效3-30分钟(可定制)</span>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-8 rounded-lg overflow-hidden">
|
||||
<div className="h-40 md:h-48 relative">
|
||||
<div
|
||||
className="absolute inset-0 bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url(${group.src})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-full max-w-4xl px-6 flex flex-col md:flex-row items-center gap-4 justify-between md:gap-10">
|
||||
<div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
|
||||
现在注册，免费领取5000IP
|
||||
</div>
|
||||
<FreeTrial className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}/>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
<div className="flex gap-1 md:gap-2 items-center text-xs md:text-sm">
|
||||
<Image src={check} alt="特性" width={16} height={16} className="w-4 h-4 md:w-5 md:h-5"/>
|
||||
<span>支持高并发提取</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold mb-6">企业基本信息</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<Form form={form}>
|
||||
<div className="mx-auto max-w-xl space-y-6">
|
||||
{/* 企业名称 */}
|
||||
<FormField name="companyName">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>企业名称</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入企业名称"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人姓名 */}
|
||||
<FormField name="contactName">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人姓名</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入联系人姓名"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人手机号码 */}
|
||||
<FormField name="phone">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人手机号码</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入手机号码"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 每月需求用量 */}
|
||||
<FormField name="monthlyUsage">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>每月需求用量</span>
|
||||
</label>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger
|
||||
id={id}
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs">
|
||||
<SelectValue placeholder="请选择您需要的用量"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="less20">小于20万</SelectItem>
|
||||
<SelectItem value="20-100">20万~100万</SelectItem>
|
||||
<SelectItem value="100-500">100万~500万</SelectItem>
|
||||
<SelectItem value="more500">大于500万</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 用途 */}
|
||||
<FormField name="purpose">
|
||||
{({id, field}) => (
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>用途</span>
|
||||
</label>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入用途，例如：爬虫"
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
<div className="pt-4 flex justify-center">
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 px-8">
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-8 rounded-lg overflow-hidden">
|
||||
<div className="h-40 md:h-48 relative">
|
||||
<div
|
||||
className="absolute inset-0 bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url(${group.src})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-full max-w-4xl px-6 flex flex-col md:flex-row items-center gap-4 justify-between md:gap-10">
|
||||
<div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
|
||||
现在注册，免费领取5000IP
|
||||
</div>
|
||||
<FreeTrial className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Wrap>
|
||||
</main>
|
||||
</HomePage>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -20,261 +20,260 @@ 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 = {}
|
||||
|
||||
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_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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
{/* 优势 1 */}
|
||||
<Section title="">
|
||||
<div className="flex gap-8">
|
||||
{/* 数据展示 */}
|
||||
<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={s1}
|
||||
alt="s1"
|
||||
className="w-0 flex-1 object-cover"
|
||||
src={s5}
|
||||
alt="全方位的数据样本"
|
||||
className="w-44 h-44 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>
|
||||
<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>
|
||||
|
||||
{/* 优势 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>
|
||||
{/* 优势 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>
|
||||
<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>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
{/* 优势 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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</HomePage>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,22 +1,19 @@
|
||||
import BreadCrumb from '@/components/bread-crumb'
|
||||
import Wrap from '@/components/wrap'
|
||||
import {Children} from '@/lib/utils'
|
||||
import Sidebar from './sidebar'
|
||||
import HomePage from '@/components/home/page'
|
||||
|
||||
export default function DocsLayout(props: Children) {
|
||||
return (
|
||||
<main className="mt-20 flex flex-col gap-4">
|
||||
<Wrap className="flex flex-col py-8 gap-8">
|
||||
<BreadCrumb items={[
|
||||
{label: '帮助中心', href: '/help'},
|
||||
]}/>
|
||||
<div className="flex gap-6">
|
||||
<Sidebar/>
|
||||
<div className="flex-1 bg-white rounded-lg p-6 min-h-[420px]">
|
||||
{props.children}
|
||||
</div>
|
||||
<HomePage path={[
|
||||
{label: '帮助中心', href: '/docs'},
|
||||
]}>
|
||||
<Wrap className="flex gap-3">
|
||||
<Sidebar/>
|
||||
<div className="flex-1 bg-white rounded-lg p-6 min-h-[420px]">
|
||||
{props.children}
|
||||
</div>
|
||||
</Wrap>
|
||||
</main>
|
||||
</HomePage>
|
||||
)
|
||||
}
|
||||
|
||||
9
src/app/(home)/docs/page.tsx
Normal file
9
src/app/(home)/docs/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import Link from 'next/link'
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
|
||||
import {BookOpen, Lightbulb, Smartphone, Zap, HelpCircle, FileText, Settings, TrendingUp} from 'lucide-react'
|
||||
|
||||
export default function DocsIndexPage() {
|
||||
return (
|
||||
<div></div>
|
||||
)
|
||||
}
|
||||
@@ -29,7 +29,7 @@ const MENU_ITEMS = [
|
||||
{
|
||||
group: '操作指南',
|
||||
items: [
|
||||
{key: 'windows7-proxy', label: 'Windows7电脑设置代理教程'},
|
||||
{key: 'win7-proxy', label: 'Windows7电脑设置代理教程'},
|
||||
{key: 'mac-proxy', label: 'MAC设置代理教程'},
|
||||
{key: 'firefox-proxy', label: '火狐浏览器设置代理'},
|
||||
{key: 'socks5-usage', label: 'Socks5代理使用教程'},
|
||||
@@ -110,7 +110,7 @@ export default function Sidebar({collapsed = false}: Props) {
|
||||
return (
|
||||
<aside
|
||||
className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${
|
||||
collapsed ? 'w-20' : 'w-72'
|
||||
collapsed ? 'w-20' : 'w-68'
|
||||
}`}
|
||||
>
|
||||
<nav className="space-y-2">
|
||||
@@ -129,7 +129,7 @@ export default function Sidebar({collapsed = false}: Props) {
|
||||
finalExpandedGroups[section.group] ? 'rotate-90' : ''
|
||||
}`}
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
<ChevronRight size={16}/>
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
@@ -141,7 +141,7 @@ export default function Sidebar({collapsed = false}: Props) {
|
||||
|
||||
{finalExpandedGroups[section.group] && (
|
||||
<ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
|
||||
{section.items.map(item => {
|
||||
{section.items.map((item) => {
|
||||
const isActive = currentKey === item.key
|
||||
const href = getItemHref(item.key)
|
||||
|
||||
|
||||
@@ -57,9 +57,9 @@ export default function Footer(props: FooterProps) {
|
||||
<SiteNavList
|
||||
title="帮助文档"
|
||||
items={[
|
||||
{name: `产品功能`, href: `#`},
|
||||
{name: `使用教程`, href: `#`},
|
||||
{name: `行业资讯`, href: `#`},
|
||||
{name: `产品功能`, href: `/docs/product-features`},
|
||||
{name: `使用教程`, href: `/docs/browser-proxy`},
|
||||
{name: `行业资讯`, href: `/docs/news-latest`},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@ import BreadCrumb from '@/components/bread-crumb'
|
||||
import Wrap from '@/components/wrap'
|
||||
import Purchase, {TabType} from '@/components/composites/purchase'
|
||||
import {Suspense} from 'react'
|
||||
import HomePage from '@/components/home/page'
|
||||
|
||||
export type ProductPageProps = {
|
||||
searchParams?: Promise<{
|
||||
@@ -11,15 +12,14 @@ export type ProductPageProps = {
|
||||
|
||||
export default function ProductPage(props: ProductPageProps) {
|
||||
return (
|
||||
<main className="mt-20">
|
||||
<Wrap className="flex flex-col py-8 gap-4">
|
||||
<BreadCrumb items={[
|
||||
{label: '产品中心', href: '/product'},
|
||||
]}/>
|
||||
<HomePage path={[
|
||||
{label: '产品中心', href: '/product'},
|
||||
]}>
|
||||
<Wrap>
|
||||
<Suspense>
|
||||
<Purchase/>
|
||||
</Suspense>
|
||||
</Wrap>
|
||||
</main>
|
||||
</HomePage>
|
||||
)
|
||||
}
|
||||
|
||||
16
src/components/home/page.tsx
Normal file
16
src/components/home/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import {Children} from '@/lib/utils'
|
||||
import Wrap from '../wrap'
|
||||
import BreadCrumb, {BreadCrumbItem} from '../bread-crumb'
|
||||
|
||||
export default function HomePage(props: Children & {
|
||||
path: BreadCrumbItem[]
|
||||
}) {
|
||||
return (
|
||||
<main className="mt-20 flex flex-col gap-3 py-6">
|
||||
<Wrap>
|
||||
<BreadCrumb items={props.path}/>
|
||||
</Wrap>
|
||||
{props.children}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user