完善页头页尾

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

@@ -0,0 +1,67 @@
+import Link from "next/link"
+import Image 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: any
+  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>
+  )
+}