首页页面及手机端适配

public/logo.svg

@@ -0,0 +1,16 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background Circle -->
+  <circle cx="50" cy="50" r="45" fill="#2563eb" />
+
+  <!-- Inner Circle -->
+  <circle cx="50" cy="50" r="35" fill="#1d4ed8" />
+
+  <!-- Abstract "A" shape -->
+  <path d="M50 20 L30 70 L40 70 L45 55 L55 55 L60 70 L70 70 L50 20Z" fill="white" />
+  <path d="M45 45 L55 45 L50 30 L45 45Z" fill="#1d4ed8" />
+
+  <!-- Small Decorative Elements -->
+  <circle cx="50" cy="80" r="5" fill="white" />
+  <circle cx="30" cy="30" r="3" fill="#93c5fd" opacity="0.7" />
+  <circle cx="70" cy="30" r="3" fill="#93c5fd" opacity="0.7" />
+</svg>

src/app/(home)/footer.tsx

@@ -4,86 +4,78 @@ 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>
-
+    <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 font-light">关注我们查看更多资讯</span>
           </div>
 
-          <div className={`flex flex-col gap-4`}>
+          <div className={`flex flex-col gap-2 lg:gap-4 max-lg:w-1/2`}>
             <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>
+            <h3 className={`hidden sm:block`}>服务保障</h3>
+            <p className={`text-sm text-gray-400 font-light hidden sm:block`}>售前服务</p>
+            <p className={`text-sm text-gray-400 font-light hidden sm:block`}>技术支持</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>
+          <SiteNavList
+            title={`站点导航`}
+            items={[
+              {name: `产品订购`, href: `#`},
+              {name: `获取代理`, href: `#`},
+              {name: `帮助中心`, href: `#`},
+              {name: `企业服务`, href: `#`},
+              {name: `推广返利`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`国内代理`}
+            items={[
+              {name: `短效代理`, href: `#`},
+              {name: `长效代理`, href: `#`},
+              {name: `固定IP代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`全球代理`}
+            items={[
+              {name: `动态代理`, href: `#`},
+              {name: `静态代理`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`使用案例`}
+            items={[
+              {name: `数据抓取`, href: `#`},
+              {name: `媒体矩阵`, href: `#`},
+              {name: `广告验证`, href: `#`},
+              {name: `价格监控`, href: `#`},
+              {name: `市场调研`, href: `#`},
+              {name: `金融数据`, href: `#`},
+              {name: `SEO优化`, href: `#`},
+              {name: `网站测试`, href: `#`},
+            ]}
+          />
+          <SiteNavList
+            title={`获取代理`}
+            items={[
+              {name: `API提取`, href: `#`},
+              {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`}>
@@ -104,3 +96,28 @@ export default function Footer(props: FooterProps) {
     </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 font-light`,
+          `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-400`}>{item.name}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/app/(home)/header.tsx

@@ -6,10 +6,10 @@ import Wrap from '@/components/wrap'
 export type HeaderProps = {}
 
 export default function Header(props: HeaderProps) {
-  const [isScrolled, setIsScrolled] = useState(window.scrollY > 0)
+  const [isScrolled, setIsScrolled] = useState(window.scrollY > 48)
 
   const handleScroll = () => {
-    setIsScrolled(window.scrollY > 0)
+    setIsScrolled(window.scrollY > 48)
   }
 
   useEffect(() => {
@@ -22,20 +22,20 @@ export default function Header(props: HeaderProps) {
   return (
     <header
       className={[
-        `w-full h-24 fixed top-0 shadow-lg`,
-        `transition-shadow duration-200 ${isScrolled ? 'bg-white' : 'bg-transparent shadow-transparent'}`,
+        `w-full h-24 max-md:h-16 overflow-hidden fixed top-0 shadow-lg`,
+        `transition-shadow duration-200 ${isScrolled ? 'bg-[rgba(255,255,255,0.9)] backdrop-blur-sm' : 'bg-transparent shadow-transparent'}`,
       ].join(' ')}>
-      <Wrap className="flex items-center justify-between">
-        {/* 菜单 */}
+      <Wrap className="flex h-full 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`}/>
+            <img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
           </Link>
 
           {/* 菜单 */}
-          <nav className={`flex items-center`}>
-            <ul className="flex items-center gap-4 text-xl">
+          <nav className={`flex items-center max-lg:hidden`}>
+            <ul className="flex items-center text-xl">
               <NavItemTop>
                 <Link href={`/`}>首页</Link>
               </NavItemTop>
@@ -64,12 +64,12 @@ export default function Header(props: HeaderProps) {
         <div className={`flex items-center`}>
           <a
             href="#"
-            className={`w-24 h-12 flex items-center justify-center text-xl font-medium`}>
+            className={`w-24 h-12 flex items-center justify-center lg:text-lg 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`}>
+            className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}>
             <span>注册</span>
           </a>
         </div>
@@ -84,7 +84,7 @@ type NavItemTopProps = {
 
 function NavItemTop(props: NavItemTopProps) {
   return (
-    <li className={`flex items-center text-xl px-2`}>
+    <li className={`px-4 h-10 flex items-center text-xl`}>
       {props.children}
     </li>
   )

src/app/(home)/page.tsx

@@ -12,225 +12,151 @@ export default function Home() {
       <Header/>
 
       {/* 正文 */}
-      <main>
+      <main className={`flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32`}>
 
         {/* 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>
+        <section className={`w-full bg-[url('/banner.webp')] bg-cover bg-[center_right_40%]`}>
+          <Wrap className={`pt-64 pb-48 max-md:pt-32 max-md:pb-24`}>
+            <h1 className={`text-4xl font-medium`}>安全，稳定，快速，合规的代理服务器</h1>
             <p className={`mt-10 text-gray-400`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
 
-            <div className={`mt-24 flex gap-8`}>
+            <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.svg`} alt={`checkbox`} width={24} height={24}/>
-                <span className={`text-xl font-light`}>全国200+城市节点</span>
+                <span className={`lg:text-lg 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>
+                <span className={`lg:text-lg 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>
+                <span className={`lg:text-lg 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
+              className={[
+                `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
+                `bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl font-medium`,
+              ].join(' ')}>
               免费试用
             </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>
+        <Section title={`覆盖全国的IP资源及超大的带宽线路`}>
+          <ul className={`shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col`}>
+            <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+              <p className={`text-xl`}>全国城市线路数量</p>
+              <p className={`mt-9 max-lg:mt-2 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>
+              <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+            </li>
+            <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+              <p className={`text-xl`}>每日更新IP数量</p>
+              <p className={`mt-9 max-lg:mt-2 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>
+              <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+            </li>
+            <li className={`flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200`}>
+              <p className={`text-xl`}>用户量</p>
+              <p className={`mt-9 max-lg:mt-2 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>
+              <div className={`lg:hidden w-24 border-b mt-4 border-gray-200`}></div>
+            </li>
+            <li className={`flex-1 flex flex-col items-center justify-center`}>
+              <p className={`text-xl`}>IP可用率</p>
+              <p className={`mt-9 max-lg:mt-2 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]"/>
+        </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>
+        <Section title={`HTTP安全合规的代理IP资源池`}>
+          <ul
+            className={[
+              `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
+            ].join(' ')}>
+            <Sec3Item
+              icon={`s1-1`} title={`短期动态IP池`} terms={[
+              {icon: `s1-check`, text: `IP时效3-30分钟(可定制)`},
+              {icon: `s1-check`, text: `支持高并发提取`},
+            ]}/>
+            <Sec3Item
+              icon={`s1-2`} title={`长期静态IP池`} terms={[
+              {icon: `s1-check`, text: `IP覆盖全国各地`},
+              {icon: `s1-check`, text: `平均响应时长：0.03s`},
+            ]}/>
+            <Sec3Item
+              icon={`s1-3`} title={`固定IP池`} terms={[
+              {icon: `s1-check`, text: `稳定长输不掉线`},
+              {icon: `s1-check`, text: `全国热门静态IP线路`},
+            ]}/>
+            <Sec3Item
+              icon={`s1-4`} title={`企业级定制池`} terms={[
+              {icon: `s1-check`, text: `可视化监控设计`},
+              {icon: `s1-check`, text: `技术团队现场支持`},
+            ]}/>
+          </ul>
+        </Section>
 
         {/* 优势 2 */}
-        <section className={`mt-28 flex flex-col gap-24`}>
-          <Wrap>
-            <h2 className={`text-3xl text-center font-medium`}>HTTP 产品优势</h2>
+        <Section title={`HTTP 产品优势`}>
+          <div className={`flex gap-36`}>
+            <ul className={`flex-1 flex flex-col gap-6`}>
+              <Sec4Item icon={`s4-1-1`} title={`安全合规`} description={`国内三大运营商支持`}/>
+              <Sec4Item icon={`s4-1-2`} title={`稳定链接`} description={`IP纯净度高达99.9%`}/>
+              <Sec4Item icon={`s4-1-3`} title={`超匿名性`} description={`稳定传输，保护隐私安全`}/>
+            </ul>
+            <img src={`/s4-1-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
+          </div>
 
-            <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>
+          <div className={`flex gap-36`}>
+            <img src={`/s4-2-main.webp`} alt={`s2-1-main`} className={`w-0 flex-1 object-contain max-lg:hidden`}/>
+            <ul className={`flex-1 flex flex-col gap-6`}>
+              <Sec4Item icon={`s4-2-1`} title={`API接口文档`} description={`与第三方软件轻松集成`}/>
+              <Sec4Item icon={`s4-2-2`} title={`多种编程语言代码`} description={`C语言、GO语言、Python...`}/>
+              <Sec4Item icon={`s4-2-3`} title={`双重认证方式`} description={`API提取+账密认证`}/>
+            </ul>
+          </div>
+        </Section>
 
         {/* 行业资讯 */}
-        <section className={`mt-44 mb-32 flex flex-col`}>
-          <Wrap>
+        <Section title={`行业资讯`}>
+          <div className={`flex gap-8 max-md:gap-4`}>
+            <button className={`px-4 max-md:-mx-4`}>
+              <img src={`/next.svg`} alt={`prev`} className={`rotate-180`}/>
+            </button>
 
-            <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
+              className={[
+                `shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`,
+                `flex p-14 md:gap-14 max-md:flex-col max-md:p-4`,
+              ].join(' ')}>
+              <img src="/s3-main.webp" alt="tumb" className={`w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center`}/>
+              <div className={`flex-2 flex flex-col justify-between gap-4`}>
+                <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 md:leading-12`}>
+                  我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
+                </p>
+                <div className={`flex justify-end`}>
+                  <a href="#" className={`text-sm text-gray-400 flex items-center gap-4`}>
+                    更多详情
+                    <img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
+                  </a>
                 </div>
               </div>
-
-              <button className={`px-4`}>
-                <img src={`/next.svg`} alt={`prev`} />
-              </button>
             </div>
 
-
-          </Wrap>
-        </section>
+            <button className={`px-4 max-md:-mx-4`}>
+              <img src={`/next.svg`} alt={`prev`}/>
+            </button>
+          </div>
+        </Section>
       </main>
 
       {/* 页脚 */}
@@ -238,3 +164,64 @@ export default function Home() {
     </div>
   )
 }
+
+function Section(props: {
+  title: string
+  children: ReactNode
+}) {
+
+  return (
+    <section>
+      <div className={`max-w-[1232px] mx-auto px-4 flex flex-col items-stretch`}>
+        <h2 className={`text-center text-3xl font-medium mb-8 lg:mb-24`}>{props.title}</h2>
+        {props.children}
+      </div>
+    </section>
+  )
+}
+
+function Sec3Item(props: {
+  icon: string,
+  title: string,
+  terms: {
+    icon: string,
+    text: string,
+  }[]
+}) {
+  return (
+    <li
+      className={[
+        `p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`,
+        `max-md:items-center`,
+      ].join(' ')}>
+      <img src={`/${props.icon}.webp`} alt={`s1-1`} aria-hidden className="w-44 h-44 object-cover"/>
+      <h3 className={`text-xl font-medium`}>{props.title}</h3>
+      <div className={`flex flex-col gap-3`}>
+        {props.terms.map((item, index) => {
+          return (
+            <p key={index} className={`text-sm text-gray-400 flex gap-3 items-center`}>
+              <img src={`/${item.icon}.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
+              <span>{item.text}</span>
+            </p>
+          )
+        })}
+      </div>
+    </li>
+  )
+}
+
+function Sec4Item(props: {
+  icon: string
+  title: string
+  description: string
+}) {
+  return (
+    <li className={`flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`}>
+      <img src={`/${props.icon}.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`}>{props.title}</h3>
+        <p>{props.description}</p>
+      </div>
+    </li>
+  )
+}

src/components/wrap.tsx

@@ -7,7 +7,7 @@ export type WrapProps = {
 
 export default function Wrap(props: WrapProps) {
   return (
-    <div className={`w-[1200px] h-full mx-auto ${props.className}`}>
+    <div className={`max-w-[1232px] px-4 mx-auto ${props.className}`}>
       {props.children}
     </div>
   )