重构文件结构，调整 Header 和 Footer 组件的导入路径

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

@@ -0,0 +1,123 @@
+import Wrap from '@/components/wrap'
+
+export type FooterProps = {}
+
+export default function Footer(props: FooterProps) {
+  return (
+    <footer className="bg-gray-900 text-white overflow-hidden">
+      <Wrap className="flex flex-col px-4 py-8 lg:p-12">
+        <div className={`flex-auto overflow-hidden flex flex-wrap justify-between`}>
+          <div className="flex flex-col lg:items-center gap-2 lg:gap-6 max-lg:w-1/2">
+            <img src="/qrcode.svg" alt="logo" className="flex-none w-20 h-20 sm:w-44 sm:h-44 bg-gray-100"/>
+            <span className="text-sm ">关注我们查看更多资讯</span>
+          </div>
+
+          <div className={`flex flex-col gap-2 lg:gap-4 max-lg:w-1/2`}>
+            <h3>商务合作</h3>
+            <p className={`text-sm text-gray-500 `}>大客户经理:张经理</p>
+            <p className={`text-sm text-gray-500 `}>电话/微信:18751847847</p>
+            <p className={`text-sm text-gray-500 `}>QQ号:800180559</p>
+            <h3 className={`hidden sm:block`}>服务保障</h3>
+            <p className={`text-sm text-gray-500  hidden sm:block`}>售前服务</p>
+            <p className={`text-sm text-gray-500  hidden sm:block`}>技术支持</p>
+          </div>
+
+          <SiteNavList
+            title={`站点导航`}
+            items={[
+              {name: `产品订购`, href: `#`},
+              {name: `获取代理`, href: `#`},
+              {name: `帮助中心`, href: `#`},
+              {name: `企业服务`, href: `#`},
+              {name: `推广返利`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`国内代理`}
+            items={[
+              {name: `短效代理`, href: `#`},
+              {name: `长效代理`, href: `#`},
+              {name: `固定IP代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`全球代理`}
+            items={[
+              {name: `动态代理`, href: `#`},
+              {name: `静态代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`使用案例`}
+            items={[
+              {name: `数据抓取`, href: `#`},
+              {name: `媒体矩阵`, href: `#`},
+              {name: `广告验证`, href: `#`},
+              {name: `价格监控`, href: `#`},
+              {name: `市场调研`, href: `#`},
+              {name: `金融数据`, href: `#`},
+              {name: `SEO优化`, href: `#`},
+              {name: `网站测试`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`获取代理`}
+            items={[
+              {name: `API提取`, href: `#`},
+              {name: `代码示例`, href: `#`},
+              {name: `热门地区`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`代理资讯`}
+            items={[
+              {name: `产品功能`, href: `#`},
+              {name: `使用教程`, href: `#`},
+              {name: `行业资讯`, href: `#`},
+            ]}
+          />
+        </div>
+
+        <div className={`flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center`}>
+          <p className={`text-sm `}>
+            声明：啊啊HTTP仅提供代理IP服务；严禁用户使用啊啊HTTP从事任何违法犯罪行为，产生的相关责任用户自负，对此啊啊HTTP不承担任何法律责任。
+            <a href="#">自律公约</a>
+          </p>
+          <p className={`text-sm mt-3 `}>
+            南京啊啊啊啊科技有限公司 版权所有网站地图
+            地址：啊啊啊啊啊啊啊啊啊大街57号楚翘城7幢404-405室</p>
+          <p className={`text-sm mt-3 `}>
+            电信业务经营许可证：B1-11111111
+            苏ICP备111111111号-1
+            苏公网安备11111111111111号
+          </p>
+        </div>
+      </Wrap>
+    </footer>
+  )
+}
+
+function SiteNavList(props: {
+  title: string
+  items: {
+    name: string
+    href: string
+  }[]
+}) {
+  return (
+    <div className={`max-lg:mt-4 w-full lg:w-auto`}>
+      <h3>{props.title}</h3>
+      <ul
+        className={[
+          `mt-1 flex flex-wrap gap-2 `,
+          `lg:mt-4 lg:h-[184px] lg:flex-col lg:gap-4 lg:gap-x-6`,
+        ].join(' ')}>
+        {props.items.map((item, index) => (
+          <li key={index}>
+            <a href={item.href} className={`text-sm text-gray-500`}>{item.name}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/app/(home)/@header/_client/help.tsx

@@ -0,0 +1,67 @@
+import Link from "next/link"
+import Image, {StaticImageData} from 'next/image'
+import Wrap from "@/components/wrap"
+import h01 from '@/assets/header/help/01.svg'
+import h02 from '@/assets/header/help/02.svg'
+import h03 from '@/assets/header/help/03.svg'
+import banner from '@/assets/header/help/banner.webp'
+
+export default function HelpMenu() {
+
+
+
+  return (
+    <Wrap className="w-full grid grid-cols-4 gap-4 justify-items-center">
+      <Column
+        icon={h01}
+        title="提取IP"
+        items={[
+          { lead: '短效动态IP提取', href: '#' },
+          { lead: '长效静态IP提取', href: '#' },
+        ]}
+      />
+      <Column
+        icon={h02}
+        title="使用教程"
+        items={[
+          { lead: '快速入手', href: '#' },
+          { lead: '代码下载', href: '#' },
+          { lead: 'API文档', href: '#' },
+        ]}
+      />
+      <Column
+        icon={h03}
+        title="产品功能"
+        items={[
+          { lead: '常见问题', href: '#' },
+          { lead: '产品介绍', href: '#' },
+          { lead: '行业资讯', href: '#' },
+        ]}
+      />
+      <Image src={banner} alt={`banner`} className={``} />
+    </Wrap>
+  )
+}
+
+function Column(props: {
+  icon: StaticImageData
+  title: string
+  items: {
+    lead: string
+    href: string
+  }[]
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h3 className="font-bold flex gap-3 items-center">
+        <Image src={props.icon} alt={props.title} className="w-10 h-10" />
+        <span>{props.title}</span>
+      </h3>
+      <ul className=" text-gray-500 text-sm flex flex-col items-end gap-2">
+        {props.items.map((item, index) => (
+          <li key={index}><Link href={item.href}>{item.lead}</Link></li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/app/(home)/@header/_client/navs.tsx

@@ -0,0 +1,72 @@
+import Image from "next/image"
+import Link from "next/link"
+import down from "@/assets/header/down.svg"
+
+export function LinkItem(props: {
+  text: string
+  href: string
+}) {
+  return (
+    <li className={`group relative`}>
+      <Link
+        href={props.href}
+        className={[
+          `h-full px-4 flex items-center text-lg`,
+          `transition-colors duration-200 ease-in-out`,
+          `hover:text-blue-500`,
+        ].join(' ')}
+      >
+        {props.text}
+      </Link>
+      <div className={[
+        `absolute bottom-0 w-full h-0.5 bg-transparent `,
+        `transition-colors duration-200`,
+        `group-hover:bg-blue-500`,
+      ].join(' ')}>
+      </div>
+    </li>
+  )
+}
+
+export function MenuItem(props: {
+  text: string
+  active: boolean
+  onEnter: () => void
+  onLeave: () => void
+}) {
+  return (
+    <li className={`group relative`}>
+      <button
+        onPointerEnter={props.onEnter}
+        onPointerLeave={props.onLeave}
+        className={[
+          `h-full px-4 flex gap-3 items-center cursor-pointer text-lg`,
+          `transition-colors duration-200 ease-in-out`,
+          props.active
+            ? `text-blue-500`
+            : ``,
+        ].join(' ')}
+      >
+        <span>{props.text}</span>
+        <Image
+          src={down}
+          alt={`drop_menu`}
+          className={[
+            `transition-transform duration-200 ease-in-out`,
+            props.active
+              ? `rotate-180`
+              : ``,
+          ].join(' ')}
+        />
+      </button>
+      <div
+        className={[
+          `absolute bottom-0 w-full h-0.5 pointer-events-none`,
+          `transition-colors duration-200`,
+          props.active
+            ? `bg-blue-500`
+            : 'bg-transparent',
+        ].join(' ')} />
+    </li>
+  )
+}

src/app/(home)/@header/_client/product.tsx

@@ -0,0 +1,158 @@
+import {ReactNode, useContext, useState} from 'react'
+import Wrap from '@/components/wrap'
+import Image from 'next/image'
+import anno from '@/assets/header/product/anno.svg'
+import Link from 'next/link'
+import {merge} from '@/lib/utils'
+import prod from '@/assets/header/product/prod.svg'
+import custom from '@/assets/header/product/custom.svg'
+import {HeaderContext} from '@/app/(home)/@header/_client/provider'
+
+type TabType = 'domestic' | 'oversea'
+
+export function Tab(props: {
+  selected: boolean
+  onSelect: () => void
+  children: ReactNode
+}) {
+  return (
+    <li role="tab">
+      <button
+        className={[
+          `p-8 text-lg cursor-pointer border-r`,
+          props.selected ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
+        ].join(' ')}
+        onClick={props.onSelect}
+      >
+        {props.children}
+      </button>
+    </li>
+  )
+}
+
+export function Domestic(props: {}) {
+  return (
+    <section role="tabpanel" className="flex gap-16 mr-16">
+      <div className="w-64 flex flex-col">
+        <h3 className="mb-6 font-bold flex items-center gap-3">
+          <Image src={prod} alt={`产品`} className={`w-10 h-=10`}/>
+          <span>代理产品</span>
+        </h3>
+
+        <DomesticLink
+          label={`动态IP`}
+          desc={`全国300+城市级定位节点`}
+          href={`/product?type=dynamic`}
+          discount={45}
+        />
+        <DomesticLink
+          label={`长效静态IP`}
+          desc={`IP 资源覆盖全国`}
+          href={`/product?type=dynamic`}
+          discount={45}
+        />
+        <DomesticLink
+          label={`固定IP`}
+          desc={`全国300+城市级定位节点`}
+          href={`/product?type=static`}
+          discount={45}
+        />
+      </div>
+      <div className="w-64 flex flex-col gap-4">
+        <h3 className="font-bold mb-2 flex items-center gap-3">
+          <Image src={custom} alt="定制" className="w-10 h-10"/>
+          <span>业务定制</span>
+        </h3>
+        <div className="flex flex-col gap-2">
+          <p>优质/企业/精选IP</p>
+          <p className="text-gray-400 text-sm">
+            超 1000 家企业共同信赖之选！大客户经理全
+            程 1 对 1 沟通，随时为您排忧解难，提供 24
+            小时不间断支持
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function Oversea(props: {}) {
+  return (
+    <section role="tabpanel">
+
+    </section>
+  )
+}
+
+export default function ProductMenu() {
+
+  const [type, setType] = useState<TabType>('domestic')
+
+  return (
+    <Wrap className="flex">
+      <ul role="tablist" className="w-48">
+        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
+        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
+      </ul>
+      <div className="flex-1">
+        {type === 'domestic'
+          ? (
+            <Domestic/>
+          ) : (
+            <Oversea/>
+          )
+        }
+      </div>
+      <aside className="w-64">
+        <h3 className="flex gap-3 items-center mb-4">
+          <Image src={anno} alt={`公告`} className={`w-10 h-10`}/>
+          <span>网站公告</span>
+        </h3>
+        <div className="flex flex-col gap-2">
+          <p>官网最新上线，体验再升级！</p>
+          <p className="text-gray-400 text-sm">
+            1.新增多样使用功能，新增多样使用
+            新增多样使用功能
+          </p>
+          <p className="text-gray-400 text-sm">
+            2.新增多样使用功能，新增多样使用
+            新增多样使用功能
+          </p>
+        </div>
+      </aside>
+    </Wrap>
+  )
+}
+
+export function DomesticLink(props: {
+  label: string
+  desc: string
+  href: string
+  discount: number
+}) {
+  const ctx = useContext(HeaderContext)
+  if (!ctx) {
+    throw new Error(`HeaderContext not found`)
+  }
+
+  const onClick = () => {
+    ctx.setMenu(false)
+  }
+
+  return (
+    <Link href={props.href} className={merge(
+      `transition-colors duration-150 ease-in-out`,
+      `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
+    )} onClick={onClick}>
+      <p className="flex gap-2">
+        <span>{props.label}</span>
+        <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
+          折扣{props.discount}%
+        </span>
+      </p>
+      <p className="text-gray-400 text-sm">
+        {props.desc}
+      </p>
+    </Link>
+  )
+}

src/app/(home)/@header/_client/provider.tsx

@@ -0,0 +1,178 @@
+'use client'
+import {createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import {LinkItem, MenuItem} from './navs'
+import SolutionMenu from './solution'
+import ProductMenu from './product'
+import HelpMenu from './help'
+import Wrap from '@/components/wrap'
+import logo from '@/assets/logo.webp'
+import {Button} from '@/components/ui/button'
+import {useProfileStore} from '@/components/providers/StoreProvider'
+
+export const HeaderContext = createContext<{
+  setMenu: (value: boolean) => void
+} | null>(null)
+
+export type ProviderProps = {}
+
+export default function Provider(props: ProviderProps) {
+
+  // ======================
+  // 滚动条状态
+  // ======================
+
+  const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering
+
+  const handleScroll = useCallback(() => {
+    setScroll(window.scrollY > 48)
+  }, [])
+
+  useEffect(() => {
+    // Initialize scroll state on client
+    setScroll(window.scrollY > 48)
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
+  // ======================
+  // 菜单状态
+  // ======================
+
+  const [menu, setMenu] = useState(false)
+  const [page, setPage] = useState(0)
+  const pages = useMemo(() => [
+    <ProductMenu key={`product`}/>,
+    <SolutionMenu key={`solution`}/>,
+    <HelpMenu key={`help`}/>,
+  ], [])
+
+  // ======================
+  // 用户信息
+  // ======================
+
+  const profile = useProfileStore(store=>store.profile)
+
+  // ======================
+  // render
+  // ======================
+
+  return (
+    <HeaderContext.Provider value={{setMenu}}>
+      <div className={[
+        `transition-[background, shadow] duration-200 ease-in-out`,
+        menu
+          ? `bg-[#fffe] backdrop-blur-sm`
+          : scroll
+            ? `bg-[#fffe] backdrop-blur-sm shadow-lg`
+            : `bg-transparent shadow-none`,
+      ].join(' ')}>
+        <Wrap className="h-20 max-md:h-16 flex justify-between">
+          <div className="flex justify-between gap-8">
+            {/* logo */}
+            <Link href="/public" className={`flex items-center`}>
+              <Image src={logo} alt={`logo`} height={48}/>
+            </Link>
+
+            {/* 菜单 */}
+            <nav>
+              <ul className="h-full flex items-stretch max-lg:hidden">
+                <LinkItem text={`首页`} href={`/`}/>
+                <MenuItem
+                  text={`产品订购`}
+                  active={menu && page === 0}
+                  onEnter={() => {
+                    setMenu(true)
+                    setPage(0)
+                  }}
+                  onLeave={() => {
+                    return setMenu(false)
+                  }}
+                />
+                <MenuItem
+                  text={`业务场景`}
+                  active={menu && page === 1}
+                  onEnter={() => {
+                    setMenu(true)
+                    setPage(1)
+                  }}
+                  onLeave={() => {
+                    return setMenu(false)
+                  }}
+                />
+                <MenuItem
+                  text={`帮助中心`}
+                  active={menu && page === 2}
+                  onEnter={() => {
+                    setMenu(true)
+                    setPage(2)
+                  }}
+                  onLeave={() => {
+                    return setMenu(false)
+                  }}
+                />
+                <LinkItem
+                  text={`企业服务`} href={`#`}/>
+                <LinkItem
+                  text={`推广返利`} href={`#`}/>
+              </ul>
+            </nav>
+          </div>
+          {/* 登录 */}
+          <div className={`flex items-center`}>
+            {profile == undefined
+              ? <>
+                <Link
+                  href="/login"
+                  className={`w-24 h-12 flex items-center justify-center lg:text-lg`}
+                >
+                  <span>登录</span>
+                </Link>
+                <Link
+                  href="/login"
+                  className={[
+                    `w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r  rounded-sm flex items-center justify-center lg:text-lg text-white`,
+                    `transition-colors duration-200 ease-in-out`,
+                    `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
+                  ].join(' ')}
+                >
+                  <span>注册</span>
+                </Link>
+              </>
+              : (
+                <Link href={`/admin`}>
+                  <Button theme={`gradient`}>
+                    进入控制台
+                  </Button>
+                </Link>
+              )
+            }
+          </div>
+        </Wrap>
+      </div>
+
+      {/* 下拉菜单 */}
+      <div
+        className={[
+          `shadow-lg`,
+          `overflow-hidden bg-[#fffe] backdrop-blur-sm`,
+          `transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`,
+          menu
+            ? `delay-[0s,0s,0s] opacity-100 py-8 h-auto`
+            : `delay-[0s,0s,0.2s] opacity-0 py-0 h-0`,
+        ].join(' ')}
+        onPointerEnter={() => setMenu(true)}
+        onPointerLeave={() => setMenu(false)}
+      >
+        {pages[page]}
+      </div>
+    </HeaderContext.Provider>
+  )
+}
+
+
+
+

src/app/(home)/@header/_client/solution.tsx

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

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

@@ -0,0 +1,11 @@
+import Provider from '@/app/(home)/@header/_client/provider'
+
+export type HeaderProps = {}
+
+export default async function Header(props: HeaderProps) {
+  return (
+    <header className={`fixed top-0 w-full z-10`}>
+      <Provider/>
+    </header>
+  )
+}

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

@@ -0,0 +1,18 @@
+import BreadCrumb from '@/components/bread-crumb'
+import Wrap from '@/components/wrap'
+import Extract from '@/components/composites/extract'
+
+export type CollectPageProps = {}
+
+export default function CollectPage(props: CollectPageProps) {
+  return (
+    <main className={`mt-20 flex flex-col gap-4`}>
+      <Wrap className="flex flex-col py-8 gap-8">
+        <BreadCrumb items={[
+          {label: 'IP 提取', href: '/collect'},
+        ]}/>
+        <Extract/>
+      </Wrap>
+    </main>
+  )
+}

src/app/(home)/layout.tsx

@@ -0,0 +1,22 @@
+import Header from '@/app/(home)/@header/page'
+import Footer from '@/app/(home)/@footer/page'
+import {ReactNode} from 'react'
+
+export type HomeLayoutProps = {
+  children: ReactNode
+}
+
+export default function HomeLayout(props: HomeLayoutProps) {
+  return (
+    <div className={`overflow-auto bg-blue-50 flex flex-col items-stretch relative`}>
+      {/* 页头 */}
+      <Header/>
+
+      {/* 正文 */}
+      {props.children}
+
+      {/* 页脚 */}
+      <Footer/>
+    </div>
+  )
+}

src/app/(home)/page.tsx

@@ -0,0 +1,215 @@
+import {ReactNode} from 'react'
+import Wrap from '@/components/wrap'
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className={`flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32`}>
+
+      {/* banner */}
+      <section className={`w-full bg-[url('/banner.webp')] bg-cover bg-[center_right_40%]`}>
+        <Wrap className={`pt-64 pb-48 max-md:pt-32 max-md:pb-24`}>
+          <h1 className={`text-4xl`}>安全，稳定，快速，合规的代理服务器</h1>
+          <p className={`mt-10 text-gray-500`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</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-lg `}>全国200+城市节点</span>
+            </p>
+            <p className={`flex gap-4 items-center`}>
+              <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+              <span className={`lg:text-lg `}>300+城市级精准定位</span>
+            </p>
+            <p className={`flex gap-4 items-center`}>
+              <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+              <span className={`lg:text-lg `}>低延迟&高并发提取</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(' ')}>
+            免费试用
+          </button>
+        </Wrap>
+      </section>
+
+      {/* 数据展示 */}
+      <Section title={`覆盖全国的IP资源及超大的带宽线路`}>
+        <ul className={`shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col`}>
+          <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+            <p className={`text-xl`}>全国城市线路数量</p>
+            <p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>350+</p>
+            <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+          </li>
+          <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+            <p className={`text-xl`}>每日更新IP数量</p>
+            <p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>1,350,129</p>
+            <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+          </li>
+          <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+            <p className={`text-xl`}>用户量</p>
+            <p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>26,578</p>
+            <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+          </li>
+          <li className={`flex-1 flex flex-col items-center justify-center`}>
+            <p className={`text-xl`}>IP可用率</p>
+            <p className={`mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2`}>99%</p>
+          </li>
+        </ul>
+        <img src={`/map.webp`} alt={`map`} className="w-[1200px]"/>
+      </Section>
+
+
+      {/* 优势 1 */}
+      <Section title={`HTTP安全合规的代理IP资源池`}>
+        <ul
+          className={[
+            `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
+          ].join(' ')}>
+          <Sec3Item
+            icon={`s1-1`} title={`短期动态IP池`} terms={[
+            {icon: `s1-check`, text: `IP时效3-30分钟(可定制)`},
+            {icon: `s1-check`, text: `支持高并发提取`},
+          ]}/>
+          <Sec3Item
+            icon={`s1-2`} title={`长期静态IP池`} terms={[
+            {icon: `s1-check`, text: `IP覆盖全国各地`},
+            {icon: `s1-check`, text: `平均响应时长：0.03s`},
+          ]}/>
+          <Sec3Item
+            icon={`s1-3`} title={`固定IP池`} terms={[
+            {icon: `s1-check`, text: `稳定长输不掉线`},
+            {icon: `s1-check`, text: `全国热门静态IP线路`},
+          ]}/>
+          <Sec3Item
+            icon={`s1-4`} title={`企业级定制池`} terms={[
+            {icon: `s1-check`, text: `可视化监控设计`},
+            {icon: `s1-check`, text: `技术团队现场支持`},
+          ]}/>
+        </ul>
+      </Section>
+
+      {/* 优势 2 */}
+      <Section title={`HTTP 产品优势`}>
+        <div className={`flex gap-36`}>
+          <ul className={`flex-1 flex flex-col gap-6`}>
+            <Sec4Item icon={`s4-1-1`} title={`安全合规`} description={`国内三大运营商支持`}/>
+            <Sec4Item icon={`s4-1-2`} title={`稳定链接`} description={`IP纯净度高达99.9%`}/>
+            <Sec4Item icon={`s4-1-3`} title={`超匿名性`} description={`稳定传输，保护隐私安全`}/>
+          </ul>
+          <img src={`/s4-1-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
+        </div>
+
+        <div className={`flex gap-36`}>
+          <img src={`/s4-2-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
+          <ul className={`flex-1 flex flex-col gap-6`}>
+            <Sec4Item icon={`s4-2-1`} title={`API接口文档`} description={`与第三方软件轻松集成`}/>
+            <Sec4Item icon={`s4-2-2`} title={`多种编程语言代码`} description={`C语言、GO语言、Python...`}/>
+            <Sec4Item icon={`s4-2-3`} title={`双重认证方式`} description={`API提取+账密认证`}/>
+          </ul>
+        </div>
+      </Section>
+
+      {/* 行业资讯 */}
+      <Section title={`行业资讯`}>
+        <div className={`flex gap-8 max-md:gap-4`}>
+          <button className={`px-4 max-md:-mx-4`}>
+            <img src={`/next.svg`} alt={`prev`} className={`rotate-180`}/>
+          </button>
+
+          <div
+            className={[
+              `shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`,
+              `flex p-14 md:gap-14 max-md:flex-col max-md:p-4`,
+            ].join(' ')}>
+            <img src="/s3-main.webp" alt="tumb" className={`w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center`}/>
+            <div className={`flex-2 flex flex-col justify-between gap-4`}>
+              <h3 className={`flex justify-between`}>
+                <span className={`text-xl`}>我是标题</span>
+                <sub className={`text-sm text-gray-500`}>2025-03-04</sub>
+              </h3>
+              <p className={`text-gray-400 md:leading-12`}>
+                我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
+              </p>
+              <div className={`flex justify-end`}>
+                <a href="#" className={`text-sm text-gray-500 flex items-center gap-4`}>
+                  更多详情
+                  <img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <button className={`px-4 max-md:-mx-4`}>
+            <img src={`/next.svg`} alt={`prev`}/>
+          </button>
+        </div>
+      </Section>
+    </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>
+  )
+}
+
+function Sec3Item(props: {
+  icon: string
+  title: string
+  terms: {
+    icon: string
+    text: string
+  }[]
+}) {
+  return (
+    <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`,
+      ].join(' ')}>
+      <img src={`/${props.icon}.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+      <h3 className={`text-xl`}>{props.title}</h3>
+      <div className={`flex flex-col gap-3`}>
+        {props.terms.map((item, index) => {
+          return (
+            <p key={index} className={`text-sm text-gray-500 flex gap-3 items-center`}>
+              <img src={`/${item.icon}.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+              <span>{item.text}</span>
+            </p>
+          )
+        })}
+      </div>
+    </li>
+  )
+}
+
+function Sec4Item(props: {
+  icon: string
+  title: string
+  description: string
+}) {
+  return (
+    <li className={`flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+      <img src={`/${props.icon}.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-contain"/>
+      <div className={`flex flex-col gap-3`}>
+        <h3 className={`text-xl`}>{props.title}</h3>
+        <p>{props.description}</p>
+      </div>
+    </li>
+  )
+}

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

@@ -0,0 +1,19 @@
+import BreadCrumb from '@/components/bread-crumb'
+import Wrap from '@/components/wrap'
+import Purchase from '@/components/composites/purchase'
+
+export type ProductPageProps = {}
+
+export default function ProductPage(props: ProductPageProps) {
+  return (
+    <main className={`mt-20`}>
+      <Wrap className="flex flex-col py-8 gap-4">
+        <BreadCrumb items={[
+          {label: '产品中心', href: '/product'},
+        ]}/>
+        <Purchase/>
+      </Wrap>
+    </main>
+  )
+}
+