业务定制页面与跳转完善

README.md

@@ -1,24 +1,28 @@
 ## TODO
 
-业务场景页面优化实现
+表单提交失效？
 
-业务定制页面优化实现
+长效动态统计
 
 页头
 - 产品订购 - 网站公告
 
 页尾
 - 服务保障跳转企业微信
-- 站点导航 - 企业服务，推广返利
+- 站点导航 - 企业服务（删除推广返利）
+- 可以缩短页尾，正好一列四个链接
+- 底边距太大，需要适当缩窄
 
 首页
 - 推荐文章
 
 购买页
-- 固定套餐与定制套餐
+- 固定套餐
 
 后台导航改进
 
+价格：原价和折扣价
+
 ### 禁止直接依赖 form
 
 `\[(.*,)?form(,.*)?\]`

src/actions/inquiry.ts

@@ -0,0 +1,16 @@
+'use server'
+import {callByDevice} from '@/actions/base'
+
+/**
+ * 提交业务定制申请
+ * TODO: 后端接口待实现，当前为占位函数
+ */
+export async function submitInquiry(data: {
+  company: string
+  name: string
+  phone: string
+  usage: string
+  purpose: string
+}) {
+  return await callByDevice('/api/customization/submit', data)
+}

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

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

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

@@ -0,0 +1,264 @@
+'use client'
+import {useState} from 'react'
+import Image from 'next/image'
+import {useRouter} from 'next/navigation'
+import {useForm} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {z} from 'zod'
+import {toast} from 'sonner'
+import HomePage from '@/components/home/page'
+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 {merge} from '@/lib/utils'
+import {submitInquiry} from '@/actions/inquiry'
+import group from './_assets/Group.webp'
+import SelfDesc from '@/components/features/self-desc'
+
+const formSchema = z.object({
+  company: z.string().min(2, '企业名称至少2个字符'),
+  name: z.string().min(2, '联系人姓名至少2个字符'),
+  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
+  usage: z.string().min(1, '请选择您需要的用量'),
+  purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export default function CustomPage() {
+  const router = useRouter()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      company: '',
+      name: '',
+      phone: '',
+      usage: '',
+      purpose: '',
+    },
+  })
+
+  const onSubmit = async (data: FormValues) => {
+    setIsSubmitting(true)
+    try {
+      const result = await submitInquiry(data)
+      if (result.success) {
+        toast.success('提交成功！我们的专属顾问会在24小时内联系您')
+        form.reset()
+      }
+      else {
+        toast.error(result.message || '提交失败，请稍后重试')
+      }
+    }
+    catch (error) {
+      toast.error('网络错误，请稍后重试')
+    }
+    finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const scrollToForm = () => {
+    const formElement = document.getElementById('inquery-form')
+    if (formElement) {
+      formElement.scrollIntoView({behavior: 'smooth', block: 'start'})
+    }
+  }
+
+  return (
+    <HomePage
+      path={[
+        {label: '业务定制', href: '/custom'},
+      ]}
+    >
+      <Wrap className="flex flex-col gap-16">
+        {/* 1. 顶部介绍区 */}
+        <SelfDesc onInquiry={() => {
+          document.getElementById('inquery-form')?.scrollIntoView({behavior: 'smooth', block: 'start'})
+        }}/>
+
+        {/* 2. 表单区 */}
+        <section id="inquery-form" className="bg-white rounded-lg p-6 lg:p-12">
+          <div className="text-center mb-8 lg:mb-12">
+            <h2 className="text-2xl lg:text-3xl font-semibold">业务定制</h2>
+            <p className="text-gray-500 mt-2 text-sm lg:text-base">
+              请填写您的企业信息，我们的专属顾问将在24小时内与您联系
+            </p>
+          </div>
+          <Form form={form} handler={form.handleSubmit(onSubmit)}>
+            <div className="mx-auto max-w-2xl space-y-6">
+              {/* 企业名称 */}
+              <FormField name="companyName">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>企业名称</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入企业名称"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 联系人姓名 */}
+              <FormField name="contactName">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>联系人姓名</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入联系人姓名"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 联系人手机号码 */}
+              <FormField name="phone">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>联系人手机号</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        type="tel"
+                        placeholder="请输入11位手机号码"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 每月需求用量 */}
+              <FormField name="monthlyUsage">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>每月需求用量</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        disabled={isSubmitting}
+                      >
+                        <SelectTrigger id={id} aria-required="true">
+                          <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>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 用途 */}
+              <FormField name="purpose">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>用途</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入用途，例如：数据采集、市场调研等"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              <div className="pt-4 flex justify-center">
+                <Button
+                  type="submit"
+                  className="bg-blue-600 hover:bg-blue-700 px-12 py-2.5"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? '提交中...' : '提交'}
+                </Button>
+              </div>
+            </div>
+          </Form>
+        </section>
+
+        {/* 3. 底部引导区 */}
+        <section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
+          <Image
+            src={group}
+            alt="免费试用背景"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-full max-w-4xl px-6 flex flex-col lg:flex-row items-center gap-4 lg:gap-10 justify-center lg:justify-between">
+              <div className="text-blue-600 font-bold text-xl lg:text-2xl text-center lg:text-left">
+                现在注册，免费领取5000IP
+              </div>
+              <Button
+                className={merge(
+                  'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
+                )}
+                onClick={() => router.push('/login')}
+              >
+                免费试用
+              </Button>
+            </div>
+          </div>
+        </section>
+      </Wrap>
+    </HomePage>
+  )
+}

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

@@ -1,259 +0,0 @@
-'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>
-  )
-}

src/app/(home)/header.tsx

@@ -131,7 +131,7 @@ export default function Header(props: HeaderProps) {
                 />
                 <LinkItem
                   text="业务定制"
-                  href="/customized"/>
+                  href="/custom"/>
               </ul>
 
               {/* 移动端菜单 */}

src/components/composites/purchase/index.tsx

@@ -5,6 +5,7 @@ import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
 import ShortForm from '@/components/composites/purchase/short/form'
 import {usePathname, useRouter, useSearchParams} from 'next/navigation'
+import SelfDesc from '@/components/features/self-desc'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
 export default function Purchase() {
@@ -35,6 +36,13 @@ export default function Purchase() {
         <TabsContent value="long">
           <LongForm/>
         </TabsContent>
+        <TabsContent value="fixed">
+        </TabsContent>
+        <TabsContent value="custom">
+          <SelfDesc onInquiry={() => {
+            router.push('/custom')
+          }}/>
+        </TabsContent>
       </Tabs>
     </div>
   )

src/components/features/self-desc/index.tsx

@@ -0,0 +1,81 @@
+import Image from 'next/image'
+import {Button} from '@/components/ui/button'
+import banner from './Mask-group.webp'
+import check from '@/assets/check-accent.svg'
+
+const FEATURES = [
+  'IP时效3-30分钟(可定制)',
+  'IP覆盖全国各地',
+  '稳定长输不掉线',
+  '支持高并发提取',
+  '平均响应时长：0.03s',
+  '专属技术支持',
+]
+
+export default function SelfDesc(props: {
+  onInquiry: () => void
+}) {
+  return (
+    <section className="bg-white rounded-lg overflow-hidden p-6 lg:p-12">
+      <div className="text-center mb-6 lg:mb-8">
+        <h1 className="text-2xl lg:text-3xl font-bold">优质代理IP服务商</h1>
+        <p className="text-gray-600 font-medium mt-2 lg:mt-3">
+          以技术升级为核心，提供优质的IP代理使用体验
+        </p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row lg:gap-8">
+        <div className="w-full lg:w-1/3 mb-6 lg:mb-0">
+          <div className="relative h-full w-full min-h-60 lg:min-h-[360px] rounded-xl overflow-hidden">
+            <Image
+              src={banner}
+              alt="蓝狐代理业务定制服务展示"
+              fill
+              className="object-cover"
+              priority
+              sizes="(max-width: 1024px) 100vw, 33vw"
+            />
+          </div>
+        </div>
+
+        <div className="w-full lg:w-2/3 flex flex-col gap-4 lg:gap-6">
+          <div className="space-y-3 lg:space-y-4">
+            <p className="text-sm lg:text-base text-gray-600 leading-relaxed">
+              华连科技公司专注代理IP领域，多年来凭借专业技术与不懈努力，在行业内树立起良好口碑，为众多客户解决网络访问难题。
+            </p>
+            <p className="text-sm lg:text-base text-gray-600 leading-relaxed">
+              公司拥有海量优质IP资源，覆盖全球多地，能精准匹配不同客户需求。凭借智能分配系统与严密安全防护，确保代理IP稳定、高效、安全运行。
+            </p>
+            <p className="text-sm lg:text-base text-gray-600 leading-relaxed">
+              秉持以客户为中心理念，配备专业客服与技术团队，提供7×24小时服务，助力企业与个人在网络世界畅行无阻。
+            </p>
+          </div>
+
+          <div className="mt-2 lg:mt-4">
+            <Button
+              className="w-full lg:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 lg:px-8 py-2 lg:py-3 rounded-md"
+              onClick={props.onInquiry}
+            >
+              立即咨询
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-4 mt-2 lg:mt-6">
+            {FEATURES.map((feature, index) => (
+              <div key={index} className="flex gap-2 items-center text-xs lg:text-sm">
+                <Image
+                  src={check}
+                  alt="特性"
+                  width={20}
+                  height={20}
+                  className="w-4 h-4 lg:w-5 lg:h-5 shrink-0"
+                />
+                <span>{feature}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/scene-page.tsx

@@ -273,7 +273,7 @@ export default function ScenePage(props: ScenePageConfig) {
               </div>
               <Button
                 className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md w-fit"
-                onClick={() => router.push('/customized')}
+                onClick={() => router.push('/custom')}
               >
                 定制咨询
               </Button>

src/mdx-components.tsx

@@ -5,7 +5,6 @@ export function useMDXComponents(): MDXComponents {
   return {
     wrapper: props => (
       <article
-        {...props}
         className={merge(
           `prose max-w-none`,
           props.className,