业务定制页面与跳转完善

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>
+  )
+}