260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
'use client'
|
||
import BreadCrumb from '@/components/bread-crumb'
|
||
import Wrap from '@/components/wrap'
|
||
import {Form, FormField} from '@/components/ui/form'
|
||
import {Input} from '@/components/ui/input'
|
||
import {Button} from '@/components/ui/button'
|
||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
|
||
import {useForm} from 'react-hook-form'
|
||
import {z} from 'zod'
|
||
import {zodResolver} from '@hookform/resolvers/zod'
|
||
import Image from 'next/image'
|
||
import check from '@/assets/check-accent.svg'
|
||
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个字符'),
|
||
contactName: z.string().min(2, '联系人姓名至少2个字符'),
|
||
phone: z.string().min(11, '请输入11位手机号码').max(11, '手机号码长度不正确'),
|
||
monthlyUsage: z.string().min(1, '请选择您需要的用量'),
|
||
purpose: z.string().min(1, '输入用途'),
|
||
})
|
||
|
||
type FormValues = z.infer<typeof formSchema>
|
||
|
||
export default function CollectPage() {
|
||
const form = useForm<FormValues>({
|
||
resolver: zodResolver(formSchema),
|
||
defaultValues: {
|
||
companyName: '',
|
||
contactName: '',
|
||
phone: '',
|
||
monthlyUsage: '',
|
||
purpose: '',
|
||
},
|
||
})
|
||
|
||
return (
|
||
// <main className="mt-20 flex flex-col gap-4">
|
||
// <Wrap className="flex flex-col py-8 gap-8">
|
||
// <BreadCrumb items={[
|
||
// {label: '产品订购/定制套餐', href: '/customized'},
|
||
// ]}/>
|
||
|
||
// </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 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="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>
|
||
</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>
|
||
</HomePage>
|
||
)
|
||
}
|