feat(frontend): update portal layout and API environments

frontend/site/src/App.jsx

@@ -1,9 +1,34 @@
+import { useEffect, useState } from "react";
 import {
   ArrowRight,
   ArrowSquareOut,
   ShieldCheck,
 } from "@phosphor-icons/react";
 
+const slides = [
+  {
+    eyebrow: "平台协同",
+    title: "一屏统筹，安全连接每一程",
+    description: "连接智能瓶阀、气站运营与配送履约，让治理更清晰、协同更高效。",
+    image: "/assets/banner-platform.png",
+    position: "center center",
+  },
+  {
+    eyebrow: "智慧气站",
+    title: "让每一次供气更稳、更安心",
+    description: "以数字化能力贯通站点经营、安全服务与履约管理。",
+    image: "/assets/banner-gas-station.png",
+    position: "center center",
+  },
+  {
+    eyebrow: "高效配送",
+    title: "从调度到送达，全程清晰可追溯",
+    description: "智能连接配送资源与服务现场，让每一程都有迹可循。",
+    image: "/assets/banner-delivery.png",
+    position: "center center",
+  },
+];
+
 const portals = [
   {
     number: "01",
@@ -37,64 +62,104 @@ function PortalLink({ portal }) {
       rel="noreferrer"
       aria-label={`进入${portal.title}，将在新标签页打开`}
     >
-      <div className="portal__heading">
-        <span className="portal__number" aria-hidden="true">
-          {portal.number}
-        </span>
-        <span className="portal__divider" aria-hidden="true" />
-        <div>
-          <h2>{portal.title}</h2>
-          <p>{portal.description}</p>
-        </div>
-      </div>
+      <span className="portal__number" aria-hidden="true">
+        {portal.number}
+      </span>
+      <span className="portal__content">
+        <strong>{portal.title}</strong>
+        <small>{portal.description}</small>
+      </span>
       <span className="portal__action">
         进入系统
-        <ArrowRight size={22} weight="bold" aria-hidden="true" />
+        <ArrowRight size={20} weight="bold" aria-hidden="true" />
       </span>
     </a>
   );
 }
 
 export function App() {
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setActiveSlide((current) => (current + 1) % slides.length);
+    }, 5000);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
   return (
     <main className="site-shell">
-      <img
-        className="ecosystem-scene"
-        src="/assets/heqi-ecosystem-hero.jpg"
-        alt=""
-        aria-hidden="true"
-      />
-
       <header className="site-header">
         <a className="brand" href="/" aria-label="和气首页">
           <img src="/assets/heqi-logo.svg" alt="" />
-          <span>和气</span>
+          <span className="brand__name">和气</span>
         </a>
-        <div className="trust-line">
-          <ShieldCheck size={20} weight="regular" aria-hidden="true" />
+        <div className="brand-slogan">
+          <ShieldCheck size={21} weight="regular" aria-hidden="true" />
+          <strong>安全连接每一程</strong>
           <span>安全可靠 · 稳定高效 · 智能互联</span>
         </div>
       </header>
 
-      <section className="hero" aria-labelledby="hero-title">
-        <p className="hero__eyebrow">HEQI SMART GAS PLATFORM</p>
-        <h1 id="hero-title">安全连接每一程</h1>
-        <p className="hero__description">
-          <span>智能瓶阀、气站运营与配送履约</span>
-          <span>的一体化管理入口</span>
-        </p>
+      <section className="banner" aria-roledescription="轮播图" aria-label="和气平台服务介绍">
+        <div
+          className="banner__track"
+          style={{ transform: `translateX(-${activeSlide * 100}%)` }}
+        >
+          {slides.map((slide, index) => (
+            <article
+              className="banner__slide"
+              key={slide.title}
+              aria-hidden={index !== activeSlide}
+            >
+              <img
+                src={slide.image}
+                alt=""
+                style={{ objectPosition: slide.position }}
+              />
+              <div className="banner__shade" />
+              <div className="banner__copy">
+                <p>{slide.eyebrow}</p>
+                <h1>{slide.title}</h1>
+                <span>{slide.description}</span>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="banner__dots" aria-label="选择轮播内容">
+          {slides.map((slide, index) => (
+            <button
+              type="button"
+              key={slide.title}
+              className={index === activeSlide ? "is-active" : ""}
+              onClick={() => setActiveSlide(index)}
+              aria-label={`显示第 ${index + 1} 张：${slide.title}`}
+              aria-current={index === activeSlide ? "true" : undefined}
+            />
+          ))}
+        </div>
       </section>
 
-      <nav className="portal-grid" aria-label="管理系统入口">
-        {portals.map((portal) => (
-          <PortalLink key={portal.href} portal={portal} />
-        ))}
-      </nav>
+      <footer className="site-footer">
+        <div className="footer-heading">
+          <div>
+            <p>MANAGEMENT PORTALS</p>
+            <h2>选择管理系统</h2>
+          </div>
+          <span>
+            <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
+            系统将在新标签页中打开
+          </span>
+        </div>
 
-      <p className="external-note">
-        <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
-        系统将在新标签页中打开
-      </p>
+        <nav className="portal-grid" aria-label="管理系统入口">
+          {portals.map((portal) => (
+            <PortalLink key={portal.href} portal={portal} />
+          ))}
+        </nav>
+      </footer>
     </main>
   );
 }