首页页面

2025-03-11 14:57:23 +08:00
parent 9b36ab40f2
commit 5e3ade9aba
38 changed files with 1092 additions and 182 deletions
--- a/src/app/(home)/footer.tsx
+++ b/src/app/(home)/footer.tsx
@@ -0,0 +1,106 @@
+import Wrap from '@/components/wrap'
+
+export type FooterProps = {}
+
+export default function Footer(props: FooterProps) {
+  return (
+    <footer className="h-[500px] bg-gray-900 p-12 text-white overflow-hidden">
+      <Wrap className="flex flex-col">
+        <div className={`flex-auto overflow-hidden flex justify-between`}>
+          <div className="flex">
+            <div className="flex flex-col items-center">
+              <img src="/logo.svg" alt="logo" className="w-44 h-44 bg-gray-100"/>
+              <span className="text-sm font-light mt-6">关注我们查看更多资讯</span>
+            </div>
+
+          </div>
+
+          <div className={`flex flex-col gap-4`}>
+            <h3>商务合作</h3>
+            <p className={`text-sm text-gray-400 font-light`}>大客户经理:张经理</p>
+            <p className={`text-sm text-gray-400 font-light`}>电话/微信:18751847847</p>
+            <p className={`text-sm text-gray-400 font-light`}>QQ号:800180559</p>
+            <h3>服务保障</h3>
+            <p className={`text-sm text-gray-400 font-light`}>售前服务</p>
+            <p className={`text-sm text-gray-400 font-light`}>技术支持</p>
+          </div>
+
+          <div>
+            <h3>站点导航</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>产品订购</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>获取代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>帮助中心</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>企业服务</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>推广返利</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>国内代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>短效代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>长效代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>固定IP代理</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>全球代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>动态代理</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>静态代理</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>使用案例</h3>
+            <ul className={`mt-4 h-[184px] flex flex-col flex-wrap gap-4 gap-x-6 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>数据抓取</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>媒体矩阵</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>广告验证</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>价格监控</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>市场调研</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>金融数据</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>SEO优化</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>网站测试</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>获取代理</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>API提取</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>代码示例</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>热门地区</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3>代理资讯</h3>
+            <ul className={`mt-4 flex flex-col gap-4 font-light`}>
+              <li><a href="#" className={`text-sm text-gray-400`}>产品功能</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>使用教程</a></li>
+              <li><a href="#" className={`text-sm text-gray-400`}>行业资讯</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className={`flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center`}>
+          <p className={`text-sm font-light`}>
+            声明：啊啊HTTP仅提供代理IP服务；严禁用户使用啊啊HTTP从事任何违法犯罪行为，产生的相关责任用户自负，对此啊啊HTTP不承担任何法律责任。
+            <a href="#">自律公约</a>
+          </p>
+          <p className={`text-sm mt-3 font-light`}>
+            南京啊啊啊啊科技有限公司 版权所有网站地图
+            地址：啊啊啊啊啊啊啊啊啊大街57号楚翘城7幢404-405室</p>
+          <p className={`text-sm mt-3 font-light`}>
+            电信业务经营许可证：B1-11111111
+            苏ICP备111111111号-1
+            苏公网安备11111111111111号
+          </p>
+        </div>
+      </Wrap>
+    </footer>
+  )
+}
--- a/src/app/(home)/header.tsx
+++ b/src/app/(home)/header.tsx
@@ -0,0 +1,101 @@
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
+import Link from 'next/link'
+import Wrap from '@/components/wrap'
+
+export type HeaderProps = {}
+
+export default function Header(props: HeaderProps) {
+  const [isScrolled, setIsScrolled] = useState(window.scrollY > 0)
+
+  const handleScroll = () => {
+    setIsScrolled(window.scrollY > 0)
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <header
+      className={[
+        `w-full h-24 fixed top-0 shadow-lg`,
+        `transition-shadow duration-200 ${isScrolled ? 'bg-white' : 'bg-transparent shadow-transparent'}`,
+      ].join(' ')}>
+      <Wrap className="flex items-center justify-between">
+        {/* 菜单 */}
+        <div className="flex items-center justify-between gap-8">
+          {/* logo */}
+          <Link href="/">
+            <img alt={`logo`} className={`w-16 h-16 rounded-full bg-gray-100`}/>
+          </Link>
+
+          {/* 菜单 */}
+          <nav className={`flex items-center`}>
+            <ul className="flex items-center gap-4 text-xl">
+              <NavItemTop>
+                <Link href={`/`}>首页</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <button>产品订购</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>业务场景</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <button>帮助中心</button>
+                <SvgDown/>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>企业服务</Link>
+              </NavItemTop>
+              <NavItemTop>
+                <Link href={`#`}>推广返利</Link>
+              </NavItemTop>
+            </ul>
+          </nav>
+        </div>
+        {/* 登录 */}
+        <div className={`flex items-center`}>
+          <a
+            href="#"
+            className={`w-24 h-12 flex items-center justify-center text-xl font-medium`}>
+            <span>登录</span>
+          </a>
+          <a
+            href="#"
+            className={`w-24 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center text-xl font-medium text-white`}>
+            <span>注册</span>
+          </a>
+        </div>
+      </Wrap>
+    </header>
+  )
+}
+
+type NavItemTopProps = {
+  children: ReactNode
+}
+
+function NavItemTop(props: NavItemTopProps) {
+  return (
+    <li className={`flex items-center text-xl px-2`}>
+      {props.children}
+    </li>
+  )
+}
+
+function SvgDown() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+        strokeLinejoin="round"/>
+    </svg>
+  )
+}
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -0,0 +1,240 @@
+import {ReactNode} from 'react'
+import Link from 'next/link'
+import Header from '@/app/(home)/header'
+import Wrap from '@/components/wrap'
+import Image from 'next/image'
+import Footer from './footer'
+
+export default function Home() {
+  return (
+    <div className={`overflow-auto flex flex-col items-stretch relative`}>
+      {/* 页头 */}
+      <Header/>
+
+      {/* 正文 */}
+      <main>
+
+        {/* banner */}
+        <section className={`w-full h-[800px] bg-[url('/banner.webp')] bg-cover`}>
+          <Wrap className={`overflow-hidden`}>
+            <h1 className={`mt-64 text-4xl font-medium`}>安全，稳定，快速，合规的代理服务器</h1>
+            <p className={`mt-10 text-gray-400`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
+
+            <div className={`mt-24 flex gap-8`}>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>全国200+城市节点</span>
+              </p>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>300+城市级精准定位</span>
+              </p>
+              <p className={`flex gap-4 items-center`}>
+                <Image src={`/check.svg`} alt={`checkbox`} width={24} height={24}/>
+                <span className={`text-xl font-light`}>低延迟&高并发提取</span>
+              </p>
+            </div>
+
+            <button className={`mt-32 w-96 h-24 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg shadow-lg text-white text-4xl font-medium`}>
+              免费试用
+            </button>
+          </Wrap>
+        </section>
+
+        {/* 数据展示 */}
+        <section className={`my-36`}>
+          <Wrap className={`flex flex-col items-center`}>
+            <h2 className={`text-3xl font-medium`}>覆盖全国的IP资源及超大的带宽线路</h2>
+            <ul className={`w-full h-48 shadow-[0_0_20px_4px] shadow-blue-50 mt-24 flex`}>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>全国城市线路数量</p>
+                <p className={`mt-9 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>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>每日更新IP数量</p>
+                <p className={`mt-9 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>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>用户量</p>
+                <p className={`mt-9 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>
+              </li>
+              <li className={`flex-1 flex flex-col items-center justify-center`}>
+                <p className={`text-xl`}>IP可用率</p>
+                <p className={`mt-9 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]"/>
+          </Wrap>
+        </section>
+
+        {/* 优势 1 */}
+        <section>
+          <Wrap>
+            <h2 className={`text-3xl font-medium text-center`}>HTTP安全合规的代理IP资源池</h2>
+            <ul className={`mt-28 pt-16 pb-16 flex justify-between bg-[url('/earth.webp')] bg-cover`}>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-1.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>短期动态IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>IP时效3-30分钟(可定制)</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>支持高并发提取</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-2.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>长期静态IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>IP覆盖全国各地</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>平均响应时长：0.03s</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-3.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>固定IP池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>稳定长输不掉线</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>全国热门静态IP线路</span>
+                  </p>
+                </div>
+              </li>
+              <li className={`p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`}>
+                <img src={`/s1-4.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+                <h3 className={`text-xl font-medium`}>企业级定制池</h3>
+                <div className={`flex flex-col gap-3`}>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>可视化监控设计</span>
+                  </p>
+                  <p className={`text-sm text-gray-400 flex gap-3 items-center`}>
+                    <img src={`/s1-check.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+                    <span>技术团队现场支持</span>
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </Wrap>
+        </section>
+
+        {/* 优势 2 */}
+        <section className={`mt-28 flex flex-col gap-24`}>
+          <Wrap>
+            <h2 className={`text-3xl text-center font-medium`}>HTTP 产品优势</h2>
+
+            <div className={`mt-24 flex gap-36`}>
+              <ul className={`flex-auto flex flex-col gap-6`}>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-1.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 font-medium`}>安全合规</h3>
+                    <p>国内三大运营商支持</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-2.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 font-medium`}>稳定链接</h3>
+                    <p>IP纯净度高达99.9%</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-1-3.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 font-medium`}>超匿名性</h3>
+                    <p>稳定传输，保护隐私安全</p>
+                  </div>
+                </li>
+              </ul>
+              <img src={`/s2-2-main.webp`} alt={`s2-1-main`} className={`w-[600px] h-[600px] object-contain flex-none`}/>
+            </div>
+
+            <div className={`flex gap-36 mt-24`}>
+              <img src={`/s2-2-main.webp`} alt={`s2-1-main`} className={`w-[600px] h-[600px] object-contain`}/>
+              <ul className={`flex-auto flex flex-col gap-6`}>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-1.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>API接口文档</h3>
+                    <p>与第三方软件轻松集成</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-2.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>多种编程语言代码</h3>
+                    <p>C语言、GO语言、Python...</p>
+                  </div>
+                </li>
+                <li className={`flex gap-14 items-center pl-20 h-48 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+                  <img src={`/s2-2-3.webp`} alt={`s2-1-1`} aria-hidden className="w-24 h-24 object-cover"/>
+                  <div className={`flex flex-col gap-3`}>
+                    <h3 className={`text-xl font-medium`}>双重认证方式</h3>
+                    <p>API提取+账密认证</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </Wrap>
+        </section>
+
+        {/* 行业资讯 */}
+        <section className={`mt-44 mb-32 flex flex-col`}>
+          <Wrap>
+
+            <h2 className={`text-center text-3xl font-medium`}>行业资讯</h2>
+
+            <div className={`mt-24 flex gap-20`}>
+              <button className={`px-4`}>
+                <img src={`/next.svg`} alt={`prev`} className={`rotate-180`}/>
+              </button>
+
+              <div className={`flex p-14 gap-14 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg]`}>
+                <img src="/s3-main.webp" alt="tumb" className={`flex-none w-[350px] h-[270px] object-cover`}/>
+                <div className={`flex flex-col justify-between`}>
+                  <h3 className={`flex justify-between`}>
+                    <span className={`text-xl font-medium`}>我是标题</span>
+                    <sub className={`text-sm text-gray-400`}>2025-03-04</sub>
+                  </h3>
+                  <p className={`text-gray-400 leading-12`}>
+                    我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
+                  </p>
+                  <div className={`flex justify-end`}>
+                    <a href="#" className={`text-sm text-gray-400 flex items-center gap-5`}>
+                      更多详情
+                      <img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <button className={`px-4`}>
+                <img src={`/next.svg`} alt={`prev`} />
+              </button>
+            </div>
+
+
+          </Wrap>
+        </section>
+      </main>
+
+      {/* 页脚 */}
+      <Footer/>
+    </div>
+  )
+}