新增业务定制和数据抓取页面&首页配置链接

src/app/(home)/@footer/page.tsx

@@ -63,7 +63,7 @@ export default function Footer(props: FooterProps) {
           <SiteNavList
             title="获取代理"
             items={[
-              {name: `API提取`, href: `#`},
+              {name: `API提取`, href: `/collect`},
               {name: `代码示例`, href: `#`},
               {name: `热门地区`, href: `#`},
             ]}

src/app/(home)/@header/menu-help.tsx

@@ -22,7 +22,7 @@ export default function HelpMenu() {
         icon={h02}
         title="使用教程"
         items={[
-          {lead: '快速入手', href: '#'},
+          {lead: '快速入手', href: '/help/tutorials/quick-start'},
           {lead: '代码下载', href: '#'},
           {lead: 'API文档', href: '#'},
         ]}

src/app/(home)/@header/menu-product.tsx

@@ -94,7 +94,7 @@ export function Domestic(props: {}) {
         <DomesticLink
           label="优质/企业/精选IP"
           desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
-          href="/"
+          href="/customized"
         />
       </div>
     </section>

src/app/(home)/@header/menu-solution.tsx

@@ -9,49 +9,58 @@ import s07 from '@/assets/header/solution/07.svg'
 import s08 from '@/assets/header/solution/08.svg'
 import {StaticImageData} from 'next/image'
 import {FragmentTitle} from '@/app/(home)/@header/common'
+import Link from 'next/link'
 
 export default function SolutionMenu() {
   return (
-    <Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 auto-rows-fr gap-4">
+    <Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 pl=2 auto-rows-fr gap-4">
       <SolutionItem
         icon={s01}
         title="数据抓取"
         desc="高效采集和分析大量数据，助力企业获取大量情报"
+        href="/data-capture"
       />
       <SolutionItem
         icon={s02}
         title="广告验证"
         desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
+        href="#"
       />
       <SolutionItem
         icon={s03}
         title="市场调查"
         desc="收集全网行业数据，了解竞争对手动态"
+        href="#"
       />
       <SolutionItem
         icon={s04}
         title="SEO优化"
         desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
+        href="#"
       />
       <SolutionItem
         icon={s05}
         title="品牌保护"
         desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
+        href="#"
       />
       <SolutionItem
         icon={s06}
         title="价格监控"
         desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
+        href="#"
       />
       <SolutionItem
         icon={s07}
         title="金融数据"
         desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
+        href="#"
       />
       <SolutionItem
         icon={s08}
         title="网站测试"
         desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
+        href="#"
       />
     </Wrap>
   )
@@ -61,9 +70,11 @@ function SolutionItem(props: {
   icon: StaticImageData
   title: string
   desc: string
+  href: string
 }) {
   return (
-    <div
+    <Link
+      href={props.href}
       className={[
         `flex flex-col gap-2 items-start rounded-md cursor-pointer`,
         `transition-colors duration-200 hover:bg-blue-50`,
@@ -71,6 +82,6 @@ function SolutionItem(props: {
     >
       <FragmentTitle img={props.icon} text={props.title}/>
       <p className="text-gray-400 text-sm">{props.desc}</p>
-    </div>
+    </Link>
   )
 }

src/app/(home)/customized/_assets/check.svg

@@ -0,0 +1,10 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#183;&#178;&#229;&#139;&#190;&#233;&#128;&#137;32 12" clip-path="url(#clip0_122_36)">
+<path id="Vector" d="M3.46154 0H14.5385C15.4565 0 16.337 0.364697 16.9861 1.01386C17.6353 1.66303 18 2.54348 18 3.46154V14.5385C18 15.4565 17.6353 16.337 16.9861 16.9861C16.337 17.6353 15.4565 18 14.5385 18H3.46154C2.54348 18 1.66303 17.6353 1.01386 16.9861C0.364697 16.337 0 15.4565 0 14.5385L0 3.46154C0 2.54348 0.364697 1.66303 1.01386 1.01386C1.66303 0.364697 2.54348 0 3.46154 0ZM3.46154 1.38462C2.9107 1.38462 2.38243 1.60343 1.99293 1.99293C1.60343 2.38243 1.38462 2.9107 1.38462 3.46154V14.5385C1.38462 14.8112 1.43834 15.0813 1.54271 15.3333C1.64709 15.5852 1.80007 15.8142 1.99293 16.0071C2.18579 16.1999 2.41475 16.3529 2.66673 16.4573C2.91872 16.5617 3.18879 16.6154 3.46154 16.6154H14.5385C14.8112 16.6154 15.0813 16.5617 15.3333 16.4573C15.5852 16.3529 15.8142 16.1999 16.0071 16.0071C16.1999 15.8142 16.3529 15.5852 16.4573 15.3333C16.5617 15.0813 16.6154 14.8112 16.6154 14.5385V3.46154C16.6154 3.18879 16.5617 2.91872 16.4573 2.66673C16.3529 2.41475 16.1999 2.18579 16.0071 1.99293C15.8142 1.80007 15.5852 1.64709 15.3333 1.54271C15.0813 1.43834 14.8112 1.38462 14.5385 1.38462H3.46154ZM13.743 5.92338C13.8041 5.98151 13.8531 6.0511 13.8873 6.12818C13.9214 6.20526 13.9401 6.28831 13.9421 6.3726C13.9442 6.45689 13.9296 6.54076 13.8993 6.61941C13.8689 6.69806 13.8233 6.76996 13.7652 6.831L8.50085 12.3348C8.49877 12.3376 8.49392 12.339 8.48977 12.3432L8.48285 12.3528C8.44477 12.3902 8.39977 12.4096 8.35615 12.4359C8.32846 12.4512 8.307 12.474 8.27862 12.4858C8.20213 12.5178 8.12007 12.5345 8.03714 12.5347C7.95421 12.5349 7.87205 12.5188 7.79538 12.4872C7.77323 12.4782 7.75523 12.4588 7.73308 12.447C7.68462 12.4214 7.63477 12.3972 7.59185 12.357C7.58838 12.3542 7.587 12.3494 7.58285 12.3452C7.57938 12.3432 7.57592 12.3418 7.57315 12.339L4.92162 9.58638C4.86293 9.5258 4.81679 9.45421 4.78585 9.37574C4.75491 9.29727 4.73978 9.21346 4.74132 9.12912C4.74287 9.04479 4.76106 8.96159 4.79485 8.8843C4.82864 8.80702 4.87737 8.73717 4.93823 8.67877C4.99877 8.62 5.07035 8.57379 5.14882 8.5428C5.2273 8.5118 5.31113 8.49664 5.3955 8.49819C5.47986 8.49973 5.56308 8.51795 5.64037 8.5518C5.71766 8.58564 5.78749 8.63444 5.84585 8.69538L8.03354 10.9648L12.834 5.94415C12.8923 5.88305 12.9621 5.83404 13.0393 5.79992C13.1166 5.7658 13.1998 5.74724 13.2842 5.74532C13.3686 5.74339 13.4526 5.75812 13.5313 5.78868C13.6101 5.81923 13.682 5.86501 13.743 5.92338Z" fill="#FF6B00"/>
+</g>
+<defs>
+<clipPath id="clip0_122_36">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/(home)/customized/page.tsx

@@ -0,0 +1,226 @@
+'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.svg'
+import banner from './_assets/Mask-group.webp'
+import group from './_assets/Group.svg'
+
+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'},
+        ]}/>
+
+        <div className="flex flex-col gap-8">
+          <div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
+            <div className="text-center mb-8">
+              <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 gap-8">
+              <div className="w-full md:w-1/3">
+                <div className="relative h-full w-full">
+                  <Image
+                    src={banner}
+                    alt="宣传图"
+                    fill
+                    className="object-cover rounded-lg"
+                    priority
+                  />
+                </div>
+              </div>
+              <div className="w-full md:w-2/3 flex flex-col gap-6">
+                <p className="text-gray-600">
+                  华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。公司拥有海量优质IP资源，涵盖全球多地，能精准匹配不同客户需求，无论是数据采集、网络营销还是突破地域限制，都能提供合适方案。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行，让用户使用过程顺畅无忧，数据安全有保障。秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻，不断开拓业务新边界。
+                </p>
+                <div className="mt-4">
+                  <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md">
+                    立即咨询
+                  </Button>
+                </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时效3-30分钟(可定制)</span>
+                  </div>
+                  <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>支持高并发提取</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>
+              </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="max-w-md mx-auto space-y-6">
+                <FormField name="companyName">
+                  {({id, field}) => (
+                    <div className="flex items-center justify-between gap-4">
+                      <label htmlFor={id} className="text-sm flex items-center gap-1">
+                        <span className="text-red-500">*</span>
+                        <span>企业名称</span>
+                      </label>
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入企业名称"
+                        className="flex-1 max-w-xs"
+                      />
+                    </div>
+                  )}
+                </FormField>
+                <FormField name="contactName">
+                  {({id, field}) => (
+                    <div className="flex items-center justify-between gap-4">
+                      <label htmlFor={id} className="text-sm flex items-center gap-1">
+                        <span className="text-red-500">*</span>
+                        <span>联系人姓名</span>
+                      </label>
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入联系人姓名"
+                        className="flex-1 max-w-xs"
+                      />
+                    </div>
+                  )}
+                </FormField>
+                <FormField name="phone">
+                  {({id, field}) => (
+                    <div className="flex items-center justify-between gap-4">
+                      <label htmlFor={id} className="text-sm flex items-center gap-1">
+                        <span className="text-red-500">*</span>
+                        <span>联系人手机号码</span>
+                      </label>
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入手机号码"
+                        className="flex-1 max-w-xs"
+                      />
+                    </div>
+                  )}
+                </FormField>
+                <FormField name="monthlyUsage">
+                  {({id, field}) => (
+                    <div className="flex items-center justify-between gap-4">
+                      <label htmlFor={id} className="text-sm flex items-center gap-1">
+                        <span className="text-red-500">*</span>
+                        <span>每日需求用量</span>
+                      </label>
+                      <Select onValueChange={field.onChange} value={field.value}>
+                        <SelectTrigger id={id} className="flex-1 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 items-center justify-between gap-4">
+                      <label htmlFor={id} className="text-sm flex items-center gap-1">
+                        <span className="text-red-500">*</span>
+                        <span>用途</span>
+                      </label>
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入用途，例如：爬虫"
+                        className="flex-1 max-w-xs"
+                      />
+                    </div>
+                  )}
+                </FormField>
+                <div className="pt-4 flex justify-center">
+                  <Button type="submit" className="bg-blue-600 hover:bg-blue-600 px-8">
+                    提交
+                  </Button>
+                </div>
+              </div>
+            </Form>
+          </div>
+          <div className="relative mt-8 rounded-lg overflow-hidden h-32 bg-gray-100">
+            <div className="absolute inset-0 z-0">
+              <Image
+                src={group}
+                alt="免费领取背景"
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+            <div className="relative z-10 h-full flex items-center justify-end">
+              <div className="flex items-center gap-8">
+                <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap">
+                  免费试用
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Wrap>
+    </main>
+  )
+}

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

@@ -0,0 +1,293 @@
+'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('/login')}
+                >
+                  选择套餐
+                </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>
+  )
+}

src/app/(home)/help/tutorials/quick-start/page.tsx

@@ -0,0 +1,41 @@
+import QuickStart from '@/components/docs/quickStart.mdx'
+import Markdown from '@/components/markdown'
+
+export default function QuickStartPage() {
+  return (
+    <div className="container mx-auto p-4">
+      <Markdown>
+        <QuickStart/>
+      </Markdown>
+    </div>
+  )
+}
+
+// app/
+// ├── help/
+// │   ├── tutorials/               # 使用教程
+// │   │   ├── quick-start/         # 快速入手
+// │   │   │   └── page.tsx
+// │   │   ├── code-download/       # 代码下载
+// │   │   │   └── page.tsx
+// │   │   └── api-docs/            # API文档
+// │   │       └── page.tsx
+// │   │
+// │   └── features/                # 产品功能
+// │       ├── faq/                 # 常见问题
+// │       │   └── page.tsx
+// │       ├── introduction/        # 产品介绍
+// │       │   └── page.tsx
+// │       └── industry-news/       # 行业资讯
+// │           └── page.tsx
+// │
+// components/
+// └── docs/
+//     ├── tutorials/
+//     │   ├── quickStart.mdx       # MDX内容文件
+//     │   ├── codeDownload.mdx
+//     │   └── apiDocs.mdx
+//     └── features/
+//         ├── faq.mdx
+//         ├── introduction.mdx
+//         └── industryNews.mdx

src/components/docs/quickStart.mdx

@@ -0,0 +1,144 @@
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+##
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+
+#
+#
+#
+#
+
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+#
+# #提取代理接口文档
+
+## 请求方式
+
+`GET https://lanhuip.com/api/extract`
+
+## 请求参数
+
+| 参数名 | 类型     | 必填 | 描述                                                                                                                       |
+|--------|----------|------|----------------------------------------------------------------------------------------------------------------------------|
+| i      | number   | 是   | 用于提取的套餐 ID                                                                                                          |
+| t      | number   | 是   | 认证类型：1 - 白名单，2 - 密码                                                                                             |
+| a      | string   | 否   | 归属地省份。默认全局随机                                                                                                   |
+| b      | string   | 否   | 归属地城市。默认全局随机                                                                                                   |
+| s      | string   | 否   | 归属地运营商。默认全局随机                                                                                                 |
+| d      | string   | 否   | 是否去重：1 - 是，0 -  否。默认为是                                                                                        |
+| rt     | string   | 否   | 返回类型：1 - TXT，2 - JSON。默认 TXT                                                                                      |
+| rs     | number[] | 否   | 返回时要使用的分隔符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 13,10，即回车 + 换行（\r\n） |
+| rb     | number[] | 否   | 返回时要使用的换行符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 124，即垂直线（ \| ）        |
+| n      | number   | 否   | 提取数量。默认为 1                                                                                                         |
+
+## 响应参数
+
+如果请求参数中返回类型为 TXT，则响应为纯文本格式，内容为提取的代理列表，每个代理信息占一行。
+
+如果请求参数中返回类型为 JSON，则响应为 JSON 格式，内容为提取的代理列表，每个代理信息为一个对象，包含以下字段：
+
+| 参数名   | 类型   | 描述                                         |
+|----------|--------|--------------------------------------------- |
+| host     | string | 代理服务器地址                               |
+| port     | number | 代理服务器端口                               |
+| username | string | 代理服务器用户名（仅在认证类型为密码时返回） |
+| password | string | 代理服务器密码（仅在认证类型为密码时返回）   |
+
+
+## 示例
+
+### 请求示例
+
+```http
+GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=广州市&s=移动&d=1&rt=2&n=3
+```
+
+### 响应示例
+
+```json
+[
+  {
+    "host": "fwd1.lanhuip.com",
+    "port": 20000,
+    "username": "user1",
+    "password": "pass1"
+  },
+  {
+    "host": "fwd1.lanhuip.com",
+    "port": 20001,
+    "username": "user2",
+    "password": "pass2"
+  },
+  {
+    "host": "fwd1.lanhuip.com",
+    "port": 20002,
+    "username": "user3",
+    "password": "pass3"
+  }
+]
+```
+