添加解决方案页面，提取解决方案公用组件

src/components/scene-page.tsx

@@ -0,0 +1,300 @@
+'use client'
+import {ReactNode} from 'react'
+import Image, {StaticImageData} from 'next/image'
+import {useRouter} from 'next/navigation'
+import {Button} from '@/components/ui/button'
+import {merge} from '@/lib/utils'
+import HomePage from '@/components/home/page'
+import Wrap from '@/components/wrap'
+import check_main from '@/assets/check-main.svg'
+import check_accent from '@/assets/check-accent.svg'
+
+// 后2个区块的固定图片
+import advantageImg1 from '@/assets/scene/advantage-1.webp'
+import advantageImg2 from '@/assets/scene/advantage-2.webp'
+import advantageImg3 from '@/assets/scene/advantage-3.webp'
+import advantageImg4 from '@/assets/scene/advantage-4.webp'
+import advantageImg5 from '@/assets/scene/advantage-5.webp'
+import advantageImg6 from '@/assets/scene/advantage-6.webp'
+import solutionDiagram from '@/assets/scene/solution-diagram.webp'
+
+// 类型定义
+export type ScenePageConfig = {
+  breadcrumb: {
+    label: string
+    href: string
+  }
+  banner: {
+    title: string
+    description: string
+    backgroundImage: StaticImageData
+    features: [string, string, string]
+  }
+  value: {
+    title: string
+    cards: [
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+      {
+        icon: StaticImageData
+        title: string
+        description: string
+      },
+    ]
+  }
+  solution: {
+    title: string
+    image: StaticImageData
+    paragraphs: string[]
+  }
+}
+
+export default function ScenePage(props: ScenePageConfig) {
+  const router = useRouter()
+
+  return (
+    <HomePage path={[
+      {label: '业务场景'},
+      props.breadcrumb,
+    ]}>
+      <Wrap className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
+        {/* 1. Banner 区 - 可定制 */}
+        <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
+          <Image
+            src={props.banner.backgroundImage}
+            alt="背景图"
+            className="absolute inset-0 w-full h-full object-cover rounded-lg"
+            priority
+          />
+          <div className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
+            <div className="relative max-lg:pl-8 lg:pl-20 lg:w-1/2 max-lg:w-full flex-1">
+              <h1 className="text-4xl max-md:text-3xl">{props.banner.title}</h1>
+              <p className="mt-10 text-gray-500 max-md:text-sm">
+                {props.banner.description}
+              </p>
+              <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
+                {props.banner.features.map((feature, i) => (
+                  <p key={i} className="flex gap-4 items-center">
+                    <Image src={check_main} alt="checkbox" width={24} height={24}/>
+                    <span className="lg:text-md">{feature}</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-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl hover:from-blue-600 hover:to-cyan-500`,
+                ].join(' ')}
+                onClick={() => router.push('/product?type=short')}
+              >
+                选择套餐
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* 2. 场景价值区 - 可定制 */}
+        <Section title={props.value.title}>
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {props.value.cards.map((card, i) => (
+              <li key={i} 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={card.icon}
+                  alt={card.title}
+                  className="w-44 h-44 object-cover"
+                />
+                <h3 className="text-xl">{card.title}</h3>
+                <p className="text-sm text-gray-500">
+                  {card.description}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        {/* 3. 解决方案介绍区 - 可定制 */}
+        <Section>
+          <div className="flex gap-8 max-lg:flex-col">
+            <Image
+              src={props.solution.image}
+              alt={props.solution.title}
+              className="w-0 flex-1 lg:max-w-[50%] object-cover rounded-lg"
+            />
+            <div className="flex-1 flex flex-col gap-6 justify-center">
+              <h2 className="text-2xl font-medium">{props.solution.title}</h2>
+              {props.solution.paragraphs.map((paragraph, i) => (
+                <p key={i} className="text-gray-500 leading-relaxed">
+                  {paragraph}
+                </p>
+              ))}
+            </div>
+          </div>
+        </Section>
+
+        {/* 4. 产品核心优势区 - 固定内容 */}
+        <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={advantageImg1}
+                alt="稳健可靠"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">稳健可靠</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  国内三大运营商（电信/联通/移动）正规授权，每个IP都经过技术团队的严格筛选和验证
+                </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={advantageImg2}
+                alt="资源积累"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">资源积累</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  拥有超3000万+的代理资源储备，每日更新去重，确保资源池的丰富性和多样性
+                </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={advantageImg3}
+                alt="稳定连接"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">稳定连接</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  通过定期检测和筛选，确保代理IP的纯净度高达99.8%，减少了无效或低质量IP的影响
+                </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={advantageImg4}
+                alt="超匿名性"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">超匿名性</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  高匿名代理模式，完全隐藏真实IP地址，保护采集活动的隐私性和安全性
+                </p>
+              </div>
+            </li>
+          </ul>
+          <ul className="flex mt-8 gap-8 max-md:flex-col">
+            <li className={merge('flex-1 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={advantageImg5}
+                alt="可视化管理"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">可视化管理</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  直观掌握IP使用情况，借助实时监控，迅速识别异常，及时调整策略并优化资源配置
+                </p>
+              </div>
+            </li>
+            <li className={merge('flex-1 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={advantageImg6}
+                alt="灵活定价"
+                className="w-44 h-44 object-cover"
+              />
+              <h3 className="text-xl">灵活定价</h3>
+              <div className="flex flex-col gap-3">
+                <p className="text-sm text-gray-500">
+                  提供多种代理产品选择，支持灵活的计费方式，能够适配不同规模企业的全栈式业务场景
+                </p>
+              </div>
+            </li>
+          </ul>
+        </Section>
+
+        {/* 5. 定制方案区 - 固定内容 */}
+        <Section>
+          <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 rounded-lg')}>
+              <Image
+                src={solutionDiagram}
+                alt="代理解决方案示意图"
+                className="w-full h-auto object-contain max-h-64"
+              />
+            </div>
+
+            <div className="flex-1 flex flex-col gap-6">
+              <div>
+                <h2 className="text-2xl font-medium">全栈式代理解决方案</h2>
+                <p className="text-gray-500 mt-2">
+                  专业代理团队，提供深度市场洞察，为您量身打造代理解决方案
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">IP时效3-30分钟(可定制)</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">IP覆盖全国各地</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">稳定长输不掉线</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">支持高并发提取</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">平均响应时长：0.03s</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <Image src={check_accent} alt="特性" width={20} height={20}/>
+                  <span className="text-sm">全国热门静态IP线路</span>
+                </div>
+              </div>
+              <Button
+                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md w-fit"
+                onClick={() => router.push('/customized')}
+              >
+                定制咨询
+              </Button>
+            </div>
+          </div>
+        </Section>
+      </Wrap>
+    </HomePage>
+  )
+}
+
+function Section(props: {
+  title?: string
+  children: ReactNode
+}) {
+  return (
+    <section>
+      <div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
+        {props.title && <h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>}
+        {props.children}
+      </div>
+    </section>
+  )
+}