web/src/app/(home)/footer.tsx

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: `/product?type=short`},
              {name: `长效代理`, href: `/product?type=long`},
              {name: `固定IP代理`, href: `/product?type=fixed`},
            ]}
          />
          <SiteNavList
            title="全球代理"
            items={[
              {name: `动态代理`, href: `#`},
              {name: `静态代理`, href: `#`},
            ]}
          />
          <SiteNavList
            title="使用案例"
            items={[
              {name: `数据抓取`, href: `/data-capture`},
              {name: `媒体矩阵`, href: `#`},
              {name: `广告验证`, href: `#`},
              {name: `价格监控`, href: `#`},
              {name: `市场调研`, href: `#`},
              {name: `金融数据`, href: `#`},
              {name: `SEO优化`, href: `#`},
              {name: `网站测试`, href: `#`},
            ]}
          />
          <SiteNavList
            title="获取代理"
            items={[
              {name: `API提取`, href: `/collect`},
              {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>
  )
}