feat: polish remaining storefront sections

frontend/src/components/Categories.jsx

@@ -1,67 +1,163 @@
-import { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Card, Button } from 'antd';
-import { RightOutlined } from '@ant-design/icons';
-import './Categories.css';
-
-const Categories = () => {
-  const scrollRef = useRef(null);
-  const navigate = useNavigate();
-
-  const categories = [
-    { name: '活动', count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
-    { name: '中式', count: '105545', gradient: 'linear-gradient(135deg, #c94b4b 0%, #4b134f 100%)' },
-    { name: '直播', count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
-    { name: '旅游', count: '97826', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
-    { name: '周年庆', count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
-    { name: '长图', count: '130856', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
-    { name: '价值点', count: '214448', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
-    { name: '酒吧', count: '36397', gradient: 'linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%)' },
-  ];
-
-  const scroll = (direction) => {
-    if (scrollRef.current) {
-      const scrollAmount = direction === 'left' ? -300 : 300;
-      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
-    }
-  };
-
-  const handleCategoryClick = (categoryName) => {
-    navigate(`/category/${categoryName}`);
-  };
-
-  return (
-    <section className="categories">
-      <div className="categories-container">
-        <div className="categories-scroll" ref={scrollRef}>
-          {categories.map((cat, index) => (
-            <div 
-              key={cat.name} 
-              className="category-card" 
-              style={{ '--delay': `${index * 0.1}s` }}
-              onClick={() => handleCategoryClick(cat.name)}
-            >
-              <div className="category-image" style={{ background: cat.gradient }}>
-                <div className="category-overlay">
-                  <span className="category-icon">{cat.name.charAt(0)}</span>
-                </div>
-              </div>
-              <div className="category-info">
-                <span className="category-name">{cat.name}</span>
-                <span className="category-count">{cat.count} 张</span>
-              </div>
-            </div>
-          ))}
-        </div>
-        <Button 
-          className="scroll-btn scroll-btn-right" 
-          shape="circle" 
-          icon={<RightOutlined />}
-          onClick={() => scroll('right')}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default Categories;
+import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  RightOutlined,
+  LeftOutlined,
+  AppstoreOutlined,
+  NotificationOutlined,
+  PlayCircleOutlined,
+  CompassOutlined,
+  GiftOutlined,
+  FileTextOutlined,
+  RiseOutlined,
+  CoffeeOutlined,
+} from '@ant-design/icons';
+import { Button } from 'antd';
+import './Categories.css';
+
+const categories = [
+  {
+    name: '活动',
+    count: '408131',
+    description: '促销、开业、发布会等高频营销场景素材。',
+    tag: '热点',
+    gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)',
+    icon: <NotificationOutlined />,
+  },
+  {
+    name: '中式',
+    count: '105545',
+    description: '国风、红金、传统节令与典雅视觉方向。',
+    tag: '质感',
+    gradient: 'linear-gradient(135deg, #7d2f2f 0%, #d98f5f 100%)',
+    icon: <AppstoreOutlined />,
+  },
+  {
+    name: '直播',
+    count: '35429',
+    description: '口播封面、预告海报和直播场景包装。',
+    tag: '转化',
+    gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
+    icon: <PlayCircleOutlined />,
+  },
+  {
+    name: '旅游',
+    count: '97826',
+    description: '景区、民宿、出行路线和旅行氛围图。',
+    tag: '场景',
+    gradient: 'linear-gradient(135deg, #2f8f73 0%, #7bdcb5 100%)',
+    icon: <CompassOutlined />,
+  },
+  {
+    name: '周年庆',
+    count: '15868',
+    description: '品牌纪念日、店庆和阶段性节点专题。',
+    tag: '品牌',
+    gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
+    icon: <GiftOutlined />,
+  },
+  {
+    name: '长图',
+    count: '130856',
+    description: '卖点拆解、流程展示和信息编排型视觉。',
+    tag: '信息流',
+    gradient: 'linear-gradient(135deg, #5767c8 0%, #8c77dc 100%)',
+    icon: <FileTextOutlined />,
+  },
+  {
+    name: '价值点',
+    count: '214448',
+    description: '优势提炼、卖点表达和产品力沟通模板。',
+    tag: '卖点',
+    gradient: 'linear-gradient(135deg, #2b5775 0%, #6da4c9 100%)',
+    icon: <RiseOutlined />,
+  },
+  {
+    name: '酒吧',
+    count: '36397',
+    description: '夜场、派对、餐酒主题和情绪化海报。',
+    tag: '氛围',
+    gradient: 'linear-gradient(135deg, #8c4b2e 0%, #d78c52 100%)',
+    icon: <CoffeeOutlined />,
+  },
+];
+
+const Categories = () => {
+  const scrollRef = useRef(null);
+  const navigate = useNavigate();
+
+  const scroll = (direction) => {
+    if (scrollRef.current) {
+      const scrollAmount = direction === 'left' ? -320 : 320;
+      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <section className="categories">
+      <div className="categories-panel">
+        <div className="categories-header">
+          <div className="categories-copy">
+            <span className="categories-kicker">快速浏览</span>
+            <h2>把高频需求先整理好，用户会更容易继续点下去</h2>
+            <p>
+              分类区不只是导航，更是首页的第二层承接。让用户在首屏之后，立刻看到更清楚的行业和场景入口。
+            </p>
+          </div>
+
+          <div className="categories-actions">
+            <span className="categories-summary">{categories.length} 个主分类</span>
+            <div className="categories-controls">
+              <Button
+                className="scroll-btn"
+                shape="circle"
+                icon={<LeftOutlined />}
+                onClick={() => scroll('left')}
+              />
+              <Button
+                className="scroll-btn"
+                shape="circle"
+                icon={<RightOutlined />}
+                onClick={() => scroll('right')}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="categories-scroll" ref={scrollRef}>
+          {categories.map((cat, index) => (
+            <button
+              key={cat.name}
+              type="button"
+              className="category-card"
+              style={{ '--delay': `${index * 0.06}s` }}
+              onClick={() => navigate(`/category/${cat.name}`)}
+            >
+              <div className="category-card-top" style={{ background: cat.gradient }}>
+                <div className="category-icon-wrap">{cat.icon}</div>
+                <span className="category-pill">{cat.tag}</span>
+              </div>
+
+              <div className="category-body">
+                <div>
+                  <h3 className="category-name">{cat.name}</h3>
+                  <p className="category-description">{cat.description}</p>
+                </div>
+
+                <div className="category-footer">
+                  <span className="category-count">{cat.count} 张</span>
+                  <span className="category-link">
+                    查看分类
+                    <RightOutlined />
+                  </span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Categories;