feat: refresh storefront ui

frontend/src/components/Hero.jsx

@@ -1,76 +1,149 @@
-import { Input, Button, Tag } from 'antd';
-import { SearchOutlined, CameraOutlined } from '@ant-design/icons';
-import './Hero.css';
-
-const Hero = () => {
-  const recommendTags = ['地产', '医美', '旅游', '汽车', '价值点', '美陈', '电商', '画册', '大寒'];
-
-  return (
-    <section className="hero">
-      <div className="hero-background">
-        {/* Winter Scene Illustration */}
-        <div className="hero-scene">
-          <div className="snowflakes">
-            {[...Array(20)].map((_, i) => (
-              <div key={i} className="snowflake" style={{
-                left: `${Math.random() * 100}%`,
-                animationDelay: `${Math.random() * 5}s`,
-                animationDuration: `${3 + Math.random() * 4}s`
-              }}>❄</div>
-            ))}
-          </div>
-          
-          {/* Left Side - Title */}
-          <div className="hero-title-area">
-            <h1 className="hero-main-title">这个冬天</h1>
-            <h2 className="hero-sub-title">相约雪山</h2>
-            <p className="hero-english">APPOINTMENT AT SNOWMOUNTAIN</p>
-          </div>
-          
-          {/* Decorative Elements */}
-          <div className="hero-decorations">
-            <div className="mountain mountain-1"></div>
-            <div className="mountain mountain-2"></div>
-            <div className="tree tree-1">🌲</div>
-            <div className="tree tree-2">🌲</div>
-            <div className="tree tree-3">🎄</div>
-            <div className="snowman">⛄</div>
-            <div className="people people-1">🎿</div>
-            <div className="people people-2">🛷</div>
-          </div>
-        </div>
-      </div>
-
-      <div className="hero-content">
-        <h2 className="hero-slogan">有所想，不如有所享！</h2>
-        
-        <div className="hero-search-box">
-          <Input
-            size="large"
-            placeholder="搜索作品或编号"
-            className="hero-search-input"
-            suffix={
-              <div className="search-actions">
-                <CameraOutlined className="camera-icon" />
-                <Button type="primary" shape="circle" icon={<SearchOutlined />} className="search-btn" />
-              </div>
-            }
-          />
-        </div>
-
-        <div className="hero-tags">
-          <span className="tags-label">推荐搜索：</span>
-          {recommendTags.map(tag => (
-            <Tag key={tag} className="recommend-tag">{tag}</Tag>
-          ))}
-        </div>
-
-        <div className="hero-designer">
-          设计师：M.A
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Hero;
+import { Input, Button, Tag } from 'antd';
+import {
+  SearchOutlined,
+  CameraOutlined,
+  ArrowRightOutlined,
+  ThunderboltOutlined,
+  SafetyCertificateOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import './Hero.css';
+
+const recommendTags = ['活动', '医美', '科技', '包装', '直播', '邀请函'];
+const heroStats = [
+  { value: '24h', label: '持续更新' },
+  { value: '原图', label: '即时交付' },
+  { value: '在线', label: '支付下载' },
+];
+const stageHighlights = [
+  {
+    icon: <ThunderboltOutlined />,
+    title: '热门原图',
+    description: '按场景、风格和行业快速找图，减少反复沟通。',
+  },
+  {
+    icon: <SafetyCertificateOutlined />,
+    title: '支付后交付',
+    description: '下单、支付、下载一条链路走通，用户体验更顺。',
+  },
+  {
+    icon: <ClockCircleOutlined />,
+    title: '最新上传',
+    description: '设计师持续上新，支持详情页预览和作品编号追踪。',
+  },
+];
+
+const Hero = () => {
+  const navigate = useNavigate();
+
+  const scrollToHotWorks = () => {
+    document.getElementById('home-hot-works')?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  };
+
+  return (
+    <section className="hero">
+      <div className="hero-shell">
+        <div className="hero-copy">
+          <span className="hero-eyebrow">图汇精选素材库</span>
+          <h1 className="hero-title">
+            把灵感整理成
+            <span>可直接下载的设计资产</span>
+          </h1>
+          <p className="hero-description">
+            原图、背景、电商图、活动物料统一归档，预览、支付、下载三步走通，
+            让客户从找图到拿到成品更省心。
+          </p>
+
+          <div className="hero-search-panel">
+            <div className="hero-search-box">
+              <Input
+                size="large"
+                placeholder="搜索作品标题、作品编号或场景关键词"
+                className="hero-search-input"
+                prefix={<SearchOutlined className="hero-search-prefix" />}
+                suffix={<CameraOutlined className="hero-search-camera" />}
+              />
+            </div>
+            <div className="hero-action-row">
+              <Button
+                type="primary"
+                size="large"
+                className="hero-primary-btn"
+                icon={<ArrowRightOutlined />}
+                onClick={scrollToHotWorks}
+              >
+                浏览热门作品
+              </Button>
+              <Button
+                size="large"
+                className="hero-secondary-btn"
+                onClick={() => navigate('/upload-guide')}
+              >
+                上传指南
+              </Button>
+            </div>
+          </div>
+
+          <div className="hero-tags">
+            <span className="hero-tags-label">推荐分类</span>
+            {recommendTags.map((tag) => (
+              <Tag
+                key={tag}
+                className="hero-tag"
+                onClick={() => navigate(`/category/${tag}`)}
+              >
+                {tag}
+              </Tag>
+            ))}
+          </div>
+
+          <div className="hero-stats">
+            {heroStats.map((item) => (
+              <div key={item.label} className="hero-stat">
+                <strong>{item.value}</strong>
+                <span>{item.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="hero-stage">
+          <div className="hero-stage-card hero-stage-main">
+            <div className="hero-stage-topline">
+              <span className="hero-stage-label">本周趋势</span>
+              <span className="hero-stage-badge">精选专题</span>
+            </div>
+            <h2>更像一个能直接成交的素材站，而不是简单图库</h2>
+            <p>
+              首页负责承接搜索意图，详情页负责转化下载动作，让用户一眼知道
+              “这里能找、能买、能下”。
+            </p>
+            <div className="hero-stage-pills">
+              <span>高清原图</span>
+              <span>在线支付</span>
+              <span>作品详情页</span>
+            </div>
+          </div>
+
+          <div className="hero-stage-stack">
+            {stageHighlights.map((item) => (
+              <div key={item.title} className="hero-stage-card hero-stage-mini">
+                <div className="hero-stage-icon">{item.icon}</div>
+                <div>
+                  <h3>{item.title}</h3>
+                  <p>{item.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;