101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
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'
|
||
import Link from 'next/link'
|
||
import {useRouter} from 'next/navigation'
|
||
import {useContext} from 'react'
|
||
import {FragmentTitle, HeaderContext} from './common'
|
||
|
||
export default function SolutionMenu() {
|
||
return (
|
||
<Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 pl=2 auto-rows-fr gap-4">
|
||
<SolutionItem
|
||
icon={s01}
|
||
title="数据抓取"
|
||
desc="高效采集和分析大量数据，助力企业获取大量情报"
|
||
href="/data-capture"
|
||
/>
|
||
<SolutionItem
|
||
icon={s02}
|
||
title="广告验证"
|
||
desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s03}
|
||
title="市场调查"
|
||
desc="收集全网行业数据，了解竞争对手动态"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s04}
|
||
title="SEO优化"
|
||
desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s05}
|
||
title="品牌保护"
|
||
desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s06}
|
||
title="价格监控"
|
||
desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s07}
|
||
title="金融数据"
|
||
desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
|
||
href="#"
|
||
/>
|
||
<SolutionItem
|
||
icon={s08}
|
||
title="网站测试"
|
||
desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
|
||
href="#"
|
||
/>
|
||
</Wrap>
|
||
)
|
||
}
|
||
|
||
function SolutionItem(props: {
|
||
icon: StaticImageData
|
||
title: string
|
||
desc: string
|
||
href: string
|
||
}) {
|
||
const router = useRouter()
|
||
const ctx = useContext(HeaderContext)
|
||
if (!ctx) {
|
||
throw new Error(`HeaderContext not found`)
|
||
}
|
||
|
||
const onClick = () => {
|
||
ctx.setMenu(false)
|
||
router.push(props.href)
|
||
}
|
||
return (
|
||
<Link
|
||
href={props.href}
|
||
className={[
|
||
`flex flex-col gap-2 items-start rounded-md cursor-pointer`,
|
||
`transition-colors duration-200 hover:bg-blue-50`,
|
||
].join(' ')}
|
||
onClick={onClick}
|
||
>
|
||
<FragmentTitle img={props.icon} text={props.title}/>
|
||
<p className="text-gray-400 text-sm">{props.desc}</p>
|
||
</Link>
|
||
)
|
||
}
|