web/src/app/(home)/(index)/hero-section.tsx

import Image from 'next/image'
import Wrap from '@/components/wrap'
import FreeTrial from '@/components/free-trial'
import banner from '../_assets/banner.webp'
import check_main from '@/assets/check-main.svg'

export function HeroSection() {
  return (
    <section className="w-full relative">
      <Image src={banner} alt="banner" className="absolute inset-0 h-full object-cover"/>
      <Wrap className="relative 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_main} alt="checkbox" width={24} height={24}/>
            <span className="lg:text-lg">全国200+城市节点</span>
          </p>
          <p className="flex gap-4 items-center">
            <Image src={check_main} alt="checkbox" width={24} height={24}/>
            <span className="lg:text-lg">300+城市级精准定位</span>
          </p>
          <p className="flex gap-4 items-center">
            <Image src={check_main} alt="checkbox" width={24} height={24}/>
            <span className="lg:text-lg">低延迟&高并发提取</span>
          </p>
        </div>

        <FreeTrial className={[
          `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg cursor-pointer`,
          `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
        ].join(' ')}/>
      </Wrap>
    </section>
  )
}