381 lines
18 KiB
TypeScript
381 lines
18 KiB
TypeScript
import type { ReactNode } from "react"
|
||
import { useNavigate } from "react-router-dom"
|
||
import Wrap from "@/components/wrap"
|
||
import banner from "./_assets/banner.webp"
|
||
import s1 from "./_assets/s1.webp"
|
||
import s2 from "./_assets/s2.webp"
|
||
import s3 from "./_assets/s3.webp"
|
||
import s4 from "./_assets/s4.webp"
|
||
import s5 from "./_assets/s5.webp"
|
||
import s6 from "./_assets/s6.webp"
|
||
import s7 from "./_assets/s7.webp"
|
||
import s8 from "./_assets/s8.webp"
|
||
import s9 from "./_assets/s9.webp"
|
||
import s10 from "./_assets/s10.webp"
|
||
import s11 from "./_assets/s11.webp"
|
||
import s12 from "./_assets/s12.webp"
|
||
import Common from "./_components/header/common"
|
||
|
||
export default function HomePage() {
|
||
const navigate = useNavigate()
|
||
|
||
const handleFreeTrial = () => {
|
||
navigate("/login")
|
||
}
|
||
return (
|
||
<>
|
||
<Common />
|
||
<section className="w-full relative">
|
||
<div
|
||
className="absolute inset-0 z-0"
|
||
style={{
|
||
backgroundImage: `url(${banner})`,
|
||
backgroundSize: "cover",
|
||
backgroundPosition: "center",
|
||
backgroundRepeat: "no-repeat",
|
||
}}
|
||
/>
|
||
|
||
<Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-center md:text-left">
|
||
聚集优质IP产品，尽在聚IP
|
||
</h1>
|
||
<p className="mt-6 text-gray-600 text-center md:text-left">
|
||
<span className="lg:text-lg">
|
||
覆盖500+城市，超2000个服务器，亿量级IP
|
||
</span>
|
||
</p>
|
||
|
||
<div className="mt-8 max-w-3xl">
|
||
<p className="text-gray-600 text-center md:text-left">
|
||
<span className="lg:text-base">
|
||
旗下有极狐、极光、蘑菇、猎豹、麒麟、水滴、火狐、无极等优质动态独享，
|
||
静态独享，单窗口IP 产品
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div className="mt-12 flex justify-center md:justify-start">
|
||
<button
|
||
type="button"
|
||
onClick={handleFreeTrial}
|
||
className="w-36 h-14 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
|
||
>
|
||
免费试用
|
||
</button>
|
||
</div>
|
||
</Wrap>
|
||
</section>
|
||
<section className="w-full relative shadow-blue-50 bg-white">
|
||
<Wrap className="relative pt-32 pb-48 max-md:pt-32 max-md:pb-24">
|
||
<PageSection title="为什么我们是你的最佳选择">
|
||
<p className="text-gray-600 text-center text-sm">
|
||
国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
|
||
</p>
|
||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 pt-16">
|
||
<ProductTypeCard icon={s1} title="全网产品最多，IP库最大" />
|
||
<ProductTypeCard icon={s2} title="支持全设备及协议" />
|
||
<ProductTypeCard icon={s3} title="用户独享宽带" />
|
||
<ProductTypeCard icon={s4} title="价低质优，免费测试" />
|
||
<ProductTypeCard icon={s5} title="专属化产品定制" />
|
||
<ProductTypeCard icon={s6} title="专业的服务团队" />
|
||
</ul>
|
||
<div className="flex max-md:flex-col justify-between items-center gap-6 md:gap-10 mt-10 lg:mt-16 p-6 md:p-12 lg:p-20 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white">
|
||
<div className="flex flex-col">
|
||
<h3 className="text-xl lg:text-2xl font-bold mb-4">
|
||
全网产品最多，IP库最大
|
||
</h3>
|
||
<p className="text-gray-600 max-w-full lg:w-150 text-sm">
|
||
旗下有极狐、极光、蘑菇、猎豹、麒麟、水滴、火狐、无极等优质动态独享、静态独享、单窗口IP产品
|
||
</p>
|
||
</div>
|
||
<div className="flex">
|
||
<img src={s7} alt="产品" className="w-20 h-20 rounded-lg" />
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col pt-12 lg:pt-24 ">
|
||
<h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
|
||
海量地区，遍布全国的优质IP代理资源
|
||
</h2>
|
||
<p className="text-gray-600 text-center text-sm">
|
||
遍布全国的代理服务器节点为用户提供智能帮助
|
||
</p>
|
||
</div>
|
||
<div className="pt-10 lg:pt-20">
|
||
<ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
|
||
<li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4 ">
|
||
<p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
|
||
10万+
|
||
</p>
|
||
<p className="text-sm">全国节点覆盖</p>
|
||
</li>
|
||
<li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
|
||
<p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
|
||
100万+
|
||
</p>
|
||
<p className="text-sm">全国独享IP池</p>
|
||
</li>
|
||
<li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
|
||
<p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
|
||
10万+
|
||
</p>
|
||
<p className="text-sm">全国实时在线IP数</p>
|
||
</li>
|
||
<li className="flex-1 flex flex-col items-center justify-center">
|
||
<p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
|
||
99%
|
||
</p>
|
||
<p className="text-sm">IP可用率</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="flex flex-col pt-12 lg:pt-24 ">
|
||
<h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
|
||
满足您的多种业务需求
|
||
</h2>
|
||
<p className="text-gray-600 text-center text-sm">
|
||
更灵活自由的设计方式，适配多种业务需求
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col mt-10 lg:mt-20">
|
||
<div className="relative flex items-center justify-center">
|
||
<img src={s9} alt="图片" className="max-w-full h-auto" />
|
||
<div className="absolute left-0 top-0 w-[30%] h-full flex flex-col justify-between">
|
||
<div className="text-left pr-4 pt-0">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
爬虫抓取
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
3000W高匿名IP，可以轻松抓取企业信息、分类信息、房地产信息、电商信息
|
||
</p>
|
||
</div>
|
||
<div className="text-left pr-4">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
数据采集
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
用于大数据采集的多样化利用场景，快速采集SEO数据优化、金融理财、地域信息数据
|
||
</p>
|
||
</div>
|
||
<div className="text-left pr-4 pb-0">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
营销推广
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
论坛发帖、问答推广、网上购物、投票点赞等，根据渠道操作要求，定制IP完成营销推广
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="absolute right-0 top-0 w-[30%] h-full flex flex-col justify-between">
|
||
<div className="text-right pl-4 pt-0">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
电子商务
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
可帮助用户切换网络，模拟多个独立账号，有助于用户参与限时促销活动，避免购物效率低下的困扰
|
||
</p>
|
||
</div>
|
||
<div className="text-right pl-4">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
游戏工作室
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
保证IP稳定，不掉线，在有效时长内完成游戏试玩、升级、完成游戏工作室操作要求
|
||
</p>
|
||
</div>
|
||
<div className="text-right pl-4 pb-0">
|
||
<h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
|
||
自媒体运营
|
||
</h4>
|
||
<p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
|
||
可帮助自媒体运营者维护账号独立性，为每个账号赋予独立IP，避免IP地址关联带来的负面影响
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col pt-12 lg:pt-24 ">
|
||
<h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
|
||
为您提供质量保障
|
||
</h2>
|
||
<p className="text-gray-600 text-center text-sm">
|
||
国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 pt-20">
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
|
||
<div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
|
||
<img src={s10} alt="售前咨询" className="p-6" />
|
||
</div>
|
||
<h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
|
||
售前咨询
|
||
</h2>
|
||
<p className="text-xs text-gray-600">
|
||
注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关
|
||
答疑
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
|
||
<div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
|
||
<img src={s11} alt="售中服务" className="p-6" />
|
||
</div>
|
||
<h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
|
||
售中服务
|
||
</h2>
|
||
<p className="text-xs text-gray-600">
|
||
全国100万+动态IP代理资源免费测试，先测后买让您安心使用
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
|
||
<div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
|
||
<img src={s12} alt="售后保障" className="p-6" />
|
||
</div>
|
||
<h2 className="text-xl lg:text-3xl font-bold mb-4 lg:mb-8">
|
||
售后保障
|
||
</h2>
|
||
<p className="text-xs text-gray-600">
|
||
1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col pt-12 lg:pt-24 ">
|
||
<h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
|
||
为您推荐聚IP的产品
|
||
</h2>
|
||
<p className="text-gray-600 text-center text-sm">
|
||
更灵活自由的设计方式，适配多种业务需求
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 pt-12 lg:pt-30">
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
|
||
<div className="mb-3">
|
||
<h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
|
||
全国动态IP资源
|
||
</h4>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
覆盖全国100万+纯净动态代理IP资源，真实家庭在线代理IP
|
||
，高度匿名，保护隐私
|
||
</p>
|
||
</div>
|
||
<div className="mb-3">
|
||
<h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
|
||
精准城市定位
|
||
</h4>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
精准定位，高效稳定连接，助力轻松访问
|
||
</p>
|
||
</div>
|
||
<div className="mb-2">
|
||
<h4 className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors">
|
||
三大协议支持
|
||
</h4>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
分布式集群架构，同时支持 协议
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="w-full h-12 mt-12 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
|
||
>
|
||
查看IP线路表
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
|
||
<h4 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
|
||
极光IP
|
||
</h4>
|
||
<div className="flex justify-between">
|
||
<div>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
首单低至{" "}
|
||
<span className="text-green-500 text-xl font-bold">
|
||
￥0.1
|
||
</span>
|
||
</p>
|
||
<div className="bg-orange-100 text-orange-500 text-[10px] w-12 text-center mt-2">
|
||
计时收费
|
||
</div>
|
||
</div>
|
||
<img src={s8} alt="图片" className="w-20 h-20" />
|
||
</div>
|
||
<ul className="space-y-4 text-gray-600">
|
||
<li className="flex items-start gap-3">
|
||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
|
||
<span className="text-xs leading-relaxed">
|
||
全国240+城市，480+地区
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
|
||
<span className="text-xs leading-relaxed">
|
||
池子超大，高效稳定，三网混合真实IP
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mt-2.5 shrink-0"></span>
|
||
<span className="text-xs leading-relaxed">
|
||
多款套餐可选，满足多元业务需求
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<button
|
||
type="button"
|
||
className="w-full h-12 mt-14 rounded-full shadow-lg bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
|
||
>
|
||
立即查看
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8 items-start justify-center ">
|
||
<h4 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
|
||
极狐IP
|
||
</h4>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
网速超快，高效稳定，三网混合真实IP
|
||
</p>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
全国260+城市，500+地区
|
||
</p>
|
||
<p className="text-gray-500 text-xs leading-relaxed">
|
||
多款套餐可选，满足多元业务需求
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</PageSection>
|
||
</Wrap>
|
||
</section>
|
||
</>
|
||
)
|
||
}
|
||
|
||
function PageSection(props: { title: string; children: ReactNode }) {
|
||
return (
|
||
<section>
|
||
<div className="max-w-308 mx-auto px-4 flex flex-col items-stretch">
|
||
<h2 className="text-center text-2xl lg:text-3xl mb-6 lg:mb-16">
|
||
{props.title}
|
||
</h2>
|
||
{props.children}
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function ProductTypeCard(props: { icon: string; title: string }) {
|
||
return (
|
||
<li className="flex flex-col items-center gap-5 rounded-lg text-center gap-6">
|
||
<img
|
||
src={props.icon}
|
||
alt={props.title}
|
||
className="w-20 h-20 object-cover"
|
||
/>
|
||
<p className="text-sm">{props.title}</p>
|
||
</li>
|
||
)
|
||
}
|