From 045ae62373b62230f2d16d236ec6167a49ae585b Mon Sep 17 00:00:00 2001
From: jimi <1847930177@qq.com>
Date: Sun, 8 Mar 2026 20:47:40 +0800
Subject: [PATCH] feat: polish remaining storefront sections

---
 frontend/src/components/Categories.css | 356 ++++++++++++++--------
 frontend/src/components/Categories.jsx | 230 +++++++++-----
 frontend/src/components/Designers.css  | 338 ++++++++++++---------
 frontend/src/components/Designers.jsx  | 160 +++++-----
 frontend/src/components/Festival.css   | 356 ++++++++++++++--------
 frontend/src/components/Festival.jsx   | 124 ++++----
 frontend/src/components/Footer.css     | 399 +++++++++++++++----------
 frontend/src/components/Footer.jsx     | 244 ++++++++-------
 frontend/src/pages/CategoryDetail.css  | 275 +++++++++--------
 frontend/src/pages/CategoryDetail.jsx  | 169 +++++++----
 10 files changed, 1623 insertions(+), 1028 deletions(-)

diff --git a/frontend/src/components/Categories.css b/frontend/src/components/Categories.css
index c06a5b0..b8cf98b 100644
--- a/frontend/src/components/Categories.css
+++ b/frontend/src/components/Categories.css
@@ -1,128 +1,228 @@
-.categories {
-  padding: 30px 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.categories-container {
-  position: relative;
-}
-
-.categories-scroll {
-  display: flex;
-  gap: 16px;
-  overflow-x: auto;
-  padding: 10px 0;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.categories-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.category-card {
-  flex-shrink: 0;
-  width: 170px;
-  border-radius: 12px;
-  overflow: hidden;
-  background: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  animation: fadeInUp 0.6s ease forwards;
-  animation-delay: var(--delay);
-  opacity: 0;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.category-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-}
-
-.category-image {
-  height: 170px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.category-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.category-icon {
-  font-size: 80px;
-  color: white;
-  font-weight: 700;
-  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-}
-
-.category-info {
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.category-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.category-count {
-  font-size: 12px;
-  color: #999;
-}
-
-.scroll-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  background: white;
-  border: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  width: 40px;
-  height: 40px;
-}
-
-.scroll-btn:hover {
-  background: #ff5a5a !important;
-  color: white !important;
-}
-
-.scroll-btn-right {
-  right: -10px;
-}
-
-@media (max-width: 768px) {
-  .category-card {
-    width: 160px;
-  }
-  
-  .category-image {
-    height: 100px;
-  }
-}
+.categories {
+  padding: 20px;
+}
+
+.categories-panel {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 30px;
+  border-radius: 32px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(233, 221, 212, 0.92);
+  box-shadow: 0 22px 48px rgba(66, 42, 26, 0.08);
+}
+
+.categories-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: flex-end;
+  margin-bottom: 24px;
+}
+
+.categories-copy {
+  max-width: 760px;
+}
+
+.categories-kicker {
+  display: inline-flex;
+  margin-bottom: 12px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(239, 106, 91, 0.1);
+  color: #d84e3f;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.categories-copy h2 {
+  margin: 0;
+  color: #221d18;
+  font-size: clamp(26px, 4vw, 36px);
+  line-height: 1.15;
+}
+
+.categories-copy p {
+  margin: 12px 0 0;
+  color: #766c61;
+  line-height: 1.85;
+}
+
+.categories-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.categories-summary {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: #fff8f2;
+  border: 1px solid rgba(236, 223, 213, 0.94);
+  color: #63574b;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.categories-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.scroll-btn.ant-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 16px;
+  border-color: rgba(224, 208, 197, 0.95);
+  background: #fffaf5;
+  color: #66594d;
+}
+
+.scroll-btn.ant-btn:hover {
+  color: #ef6a5b !important;
+  border-color: rgba(239, 106, 91, 0.4) !important;
+  background: #fff4ef !important;
+}
+
+.categories-scroll {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(250px, 1fr);
+  gap: 16px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  scrollbar-width: none;
+}
+
+.categories-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.category-card {
+  border: 1px solid rgba(233, 221, 212, 0.92);
+  border-radius: 24px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #fffdfb, #f8f2eb);
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
+  animation: fadeIn 0.6s ease-out;
+  animation-delay: var(--delay);
+  animation-fill-mode: both;
+}
+
+.category-card:hover {
+  transform: translateY(-6px);
+  border-color: rgba(239, 106, 91, 0.28);
+  box-shadow: 0 18px 36px rgba(66, 42, 26, 0.12);
+}
+
+.category-card-top {
+  min-height: 140px;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.category-icon-wrap {
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 24px;
+  backdrop-filter: blur(10px);
+}
+
+.category-pill {
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.category-body {
+  padding: 18px 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.category-name {
+  margin: 0 0 8px;
+  color: #281f18;
+  font-size: 20px;
+}
+
+.category-description {
+  margin: 0;
+  color: #7b6f63;
+  line-height: 1.7;
+  font-size: 14px;
+}
+
+.category-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(237, 227, 217, 0.95);
+}
+
+.category-count {
+  color: #67594d;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.category-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #ef6a5b;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+@media (max-width: 900px) {
+  .categories-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .categories-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .categories {
+    padding: 12px;
+  }
+
+  .categories-panel {
+    padding: 20px 18px;
+    border-radius: 26px;
+  }
+
+  .categories-scroll {
+    grid-auto-columns: minmax(220px, 1fr);
+  }
+
+  .category-card-top {
+    min-height: 120px;
+  }
+}
diff --git a/frontend/src/components/Categories.jsx b/frontend/src/components/Categories.jsx
index b65719d..09eaf22 100644
--- a/frontend/src/components/Categories.jsx
+++ b/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;
diff --git a/frontend/src/components/Designers.css b/frontend/src/components/Designers.css
index 9ea7c9a..97d2c13 100644
--- a/frontend/src/components/Designers.css
+++ b/frontend/src/components/Designers.css
@@ -1,144 +1,194 @@
-.designers-section {
-  padding: 30px 20px 50px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.designers-section .section-header {
-  margin-bottom: 20px;
-}
-
-.designers-section .section-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-  margin: 0;
-  position: relative;
-  padding-left: 12px;
-}
-
-.designers-section .section-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 20px;
-  background: #ff5a5a;
-  border-radius: 2px;
-}
-
-.designers-grid {
-  margin: 0 !important;
-}
-
-.designer-card {
-  text-align: center;
-  border-radius: 12px;
-  padding: 20px 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  animation: fadeInUp 0.5s ease forwards;
-  animation-delay: var(--delay);
-  opacity: 0;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.designer-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
-}
-
-.designer-card .ant-card-body {
-  padding: 0;
-}
-
-.designer-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  margin: 0 auto 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.avatar-emoji {
-  font-size: 36px;
-}
-
-.designer-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  margin: 0 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.designer-desc {
-  font-size: 12px;
-  color: #999;
-  margin: 0 0 8px;
-}
-
-.designer-works {
-  font-size: 24px;
-  font-weight: 700;
-  color: #ff5a5a;
-  line-height: 1.2;
-}
-
-.designer-fans {
-  font-size: 12px;
-  color: #999;
-  margin: 8px 0 12px;
-}
-
-.fans-count {
-  color: #333;
-  font-weight: 500;
-}
-
-.follow-btn {
-  border-radius: 20px;
-  border-color: #e8e8e8;
-  color: #666;
-  font-size: 12px;
-  height: 28px;
-  padding: 0 16px;
-}
-
-.follow-btn:hover {
-  color: #ff5a5a !important;
-  border-color: #ff5a5a !important;
-  background: #fff5f5 !important;
-}
-
-@media (max-width: 768px) {
-  .designer-avatar {
-    width: 60px;
-    height: 60px;
-  }
-  
-  .avatar-emoji {
-    font-size: 28px;
-  }
-  
-  .designer-works {
-    font-size: 20px;
-  }
-}
+.designers-section {
+  padding: 18px 20px 56px;
+}
+
+.designers-panel {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.designers-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: flex-end;
+  margin-bottom: 24px;
+}
+
+.designers-copy {
+  max-width: 760px;
+}
+
+.designers-kicker {
+  display: inline-flex;
+  margin-bottom: 12px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(239, 106, 91, 0.1);
+  color: #d84e3f;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.designers-copy h2 {
+  margin: 0;
+  color: #221d18;
+  font-size: clamp(26px, 4vw, 36px);
+  line-height: 1.15;
+}
+
+.designers-copy p {
+  margin: 12px 0 0;
+  color: #756b61;
+  line-height: 1.85;
+}
+
+.designers-summary {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(236, 223, 213, 0.94);
+  color: #63574b;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.designers-grid {
+  margin: 0 !important;
+}
+
+.designer-card.ant-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: 26px;
+  border: 1px solid rgba(233, 221, 212, 0.94);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 20px 42px rgba(66, 42, 26, 0.08);
+  animation: fadeIn 0.6s ease-out;
+  animation-delay: var(--delay);
+  animation-fill-mode: both;
+  transition: transform 0.24s ease, box-shadow 0.24s ease;
+}
+
+.designer-card.ant-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 26px 48px rgba(66, 42, 26, 0.12);
+}
+
+.designer-card .ant-card-body {
+  padding: 0;
+}
+
+.designer-card-top {
+  height: 92px;
+  position: relative;
+}
+
+.designer-badge {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  font-size: 18px;
+}
+
+.designer-avatar {
+  width: 82px;
+  height: 82px;
+  border-radius: 28px;
+  margin: -40px auto 0;
+  border: 5px solid rgba(255, 255, 255, 0.95);
+  display: grid;
+  place-items: center;
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  box-shadow: 0 14px 28px rgba(66, 42, 26, 0.18);
+}
+
+.avatar-text {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.designer-content {
+  padding: 18px 18px 20px;
+  text-align: center;
+}
+
+.designer-name {
+  margin: 10px 0 6px;
+  color: #261f19;
+  font-size: 18px;
+}
+
+.designer-specialty {
+  margin: 0;
+  color: #83776b;
+  font-size: 13px;
+}
+
+.designer-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 18px 0;
+}
+
+.designer-stat {
+  padding: 14px 10px;
+  border-radius: 18px;
+  background: #fff8f2;
+  border: 1px solid rgba(238, 226, 216, 0.94);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.designer-stat strong {
+  color: #2b241d;
+  font-size: 22px;
+}
+
+.designer-stat span {
+  color: #908377;
+  font-size: 12px;
+}
+
+.follow-btn.ant-btn {
+  width: 100%;
+  height: 44px;
+  border-radius: 16px;
+  border-color: rgba(224, 208, 197, 0.95);
+  color: #5f5449;
+  font-weight: 700;
+  background: #fffaf5;
+}
+
+.follow-btn.ant-btn:hover {
+  color: #ef6a5b !important;
+  border-color: rgba(239, 106, 91, 0.4) !important;
+  background: #fff4ef !important;
+}
+
+@media (max-width: 900px) {
+  .designers-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .designers-section {
+    padding: 12px 12px 40px;
+  }
+}
diff --git a/frontend/src/components/Designers.jsx b/frontend/src/components/Designers.jsx
index 5dff98b..d530abf 100644
--- a/frontend/src/components/Designers.jsx
+++ b/frontend/src/components/Designers.jsx
@@ -1,72 +1,88 @@
-import { Card, Button, Avatar, Row, Col } from 'antd';
-import { PlusOutlined, UserOutlined } from '@ant-design/icons';
-import './Designers.css';
-
-const Designers = () => {
-  const designers = [
-    { id: 1, name: '顾九思', works: 223, fans: 546, avatar: '🎨' },
-    { id: 2, name: '下辈子别做设计', works: 380, fans: 1099, avatar: '🖼️' },
-    { id: 3, name: 'h突然的', works: 537, fans: 574, avatar: '✨' },
-    { id: 4, name: '赤木流歌', works: 300, fans: 735, avatar: '🎭' },
-    { id: 5, name: '秃头选手', works: 311, fans: 538, avatar: '🎯' },
-    { id: 6, name: 'M.A', works: 553, fans: 567, avatar: '🌟' },
-    { id: 7, name: 'NIMINMIN', works: 305, fans: 1208, avatar: '💫' },
-    { id: 8, name: '星玥设计', works: 402, fans: 576, avatar: '⭐' },
-    { id: 9, name: '一十九', works: 1598, fans: 2457, avatar: '🔥' },
-    { id: 10, name: 'Jance', works: 341, fans: 3424, avatar: '💎' },
-  ];
-
-  const getGradient = (index) => {
-    const gradients = [
-      'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-      'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-      'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
-      'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
-      'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
-      'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
-      'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
-      'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)',
-      'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
-    ];
-    return gradients[index % gradients.length];
-  };
-
-  return (
-    <section className="designers-section">
-      <div className="section-header">
-        <h2 className="section-title">设计师</h2>
-      </div>
-      
-      <Row gutter={[16, 16]} className="designers-grid">
-        {designers.map((designer, index) => (
-          <Col xs={12} sm={8} md={6} lg={4} xl={4} key={designer.id}>
-            <Card 
-              className="designer-card"
-              style={{ '--delay': `${index * 0.05}s` }}
-            >
-              <div className="designer-avatar" style={{ background: getGradient(index) }}>
-                <span className="avatar-emoji">{designer.avatar}</span>
-              </div>
-              <h3 className="designer-name">{designer.name}</h3>
-              <p className="designer-desc">他/她已上传作品</p>
-              <div className="designer-works">{designer.works}</div>
-              <div className="designer-fans">
-                <span className="fans-count">{designer.fans}</span>
-                <span className="fans-text"> 粉丝</span>
-              </div>
-              <Button 
-                className="follow-btn"
-                icon={<PlusOutlined />}
-              >
-                关注
-              </Button>
-            </Card>
-          </Col>
-        ))}
-      </Row>
-    </section>
-  );
-};
-
-export default Designers;
+import { Card, Button, Row, Col } from 'antd';
+import { PlusOutlined, CrownOutlined, StarOutlined, FireOutlined } from '@ant-design/icons';
+import './Designers.css';
+
+const designers = [
+  { id: 1, name: '顾九思', works: 223, fans: 546, specialty: '活动 / 医美', badge: <CrownOutlined /> },
+  { id: 2, name: '下辈子别做设计', works: 380, fans: 1099, specialty: '电商 / 长图', badge: <FireOutlined /> },
+  { id: 3, name: 'h突然的', works: 537, fans: 574, specialty: '直播 / 海报', badge: <StarOutlined /> },
+  { id: 4, name: '赤木流歌', works: 300, fans: 735, specialty: '品牌 / 中式', badge: <CrownOutlined /> },
+  { id: 5, name: '秃头选手', works: 311, fans: 538, specialty: '活动 / 价值点', badge: <FireOutlined /> },
+  { id: 6, name: 'M.A', works: 553, fans: 567, specialty: '节日 / 场景图', badge: <StarOutlined /> },
+  { id: 7, name: 'NIMINMIN', works: 305, fans: 1208, specialty: '科技 / 电商', badge: <CrownOutlined /> },
+  { id: 8, name: '星玥设计', works: 402, fans: 576, specialty: '品牌 / 节庆', badge: <StarOutlined /> },
+  { id: 9, name: '一十九', works: 1598, fans: 2457, specialty: '热门 / 专题', badge: <FireOutlined /> },
+  { id: 10, name: 'Jance', works: 341, fans: 3424, specialty: '高端 / 质感', badge: <CrownOutlined /> },
+];
+
+const gradients = [
+  'linear-gradient(135deg, #ef6a5b 0%, #f4b254 100%)',
+  'linear-gradient(135deg, #4a8ee8 0%, #67d0df 100%)',
+  'linear-gradient(135deg, #7d60c9 0%, #bd8eff 100%)',
+  'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
+  'linear-gradient(135deg, #d96a44 0%, #f2b15d 100%)',
+];
+
+const getInitials = (name) => {
+  if (!name) {
+    return '设';
+  }
+  return name.length <= 2 ? name : name.slice(0, 2);
+};
+
+const Designers = () => {
+  return (
+    <section className="designers-section">
+      <div className="designers-panel">
+        <div className="designers-header">
+          <div className="designers-copy">
+            <span className="designers-kicker">活跃供稿人</span>
+            <h2>让站点不只是“有图”，还要看起来“有人在持续更新”</h2>
+            <p>
+              设计师区是站点信任感的一部分。把头像、擅长方向、作品量和粉丝量做得更完整，页面会更像一个真实的内容市场。
+            </p>
+          </div>
+          <span className="designers-summary">{designers.length} 位精选设计师</span>
+        </div>
+
+        <Row gutter={[18, 18]} className="designers-grid">
+          {designers.map((designer, index) => (
+            <Col xs={24} sm={12} md={8} lg={6} xl={6} key={designer.id}>
+              <Card className="designer-card" style={{ '--delay': `${index * 0.05}s` }}>
+                <div className="designer-card-top" style={{ background: gradients[index % gradients.length] }}>
+                  <span className="designer-badge">{designer.badge}</span>
+                </div>
+
+                <div className="designer-avatar" style={{ background: gradients[index % gradients.length] }}>
+                  <span className="avatar-text">{getInitials(designer.name)}</span>
+                </div>
+
+                <div className="designer-content">
+                  <h3 className="designer-name">{designer.name}</h3>
+                  <p className="designer-specialty">{designer.specialty}</p>
+
+                  <div className="designer-stats">
+                    <div className="designer-stat">
+                      <strong>{designer.works}</strong>
+                      <span>作品</span>
+                    </div>
+                    <div className="designer-stat">
+                      <strong>{designer.fans}</strong>
+                      <span>粉丝</span>
+                    </div>
+                  </div>
+
+                  <Button className="follow-btn" icon={<PlusOutlined />}>
+                    关注设计师
+                  </Button>
+                </div>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </div>
+    </section>
+  );
+};
+
+export default Designers;
diff --git a/frontend/src/components/Festival.css b/frontend/src/components/Festival.css
index a21e478..526732c 100644
--- a/frontend/src/components/Festival.css
+++ b/frontend/src/components/Festival.css
@@ -1,122 +1,234 @@
-.festival {
-  padding: 20px 20px 30px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.festival-container {
-  position: relative;
-}
-
-.festival-scroll {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-  padding: 10px 0;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.festival-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.festival-card {
-  flex-shrink: 0;
-  width: 150px;
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  animation: slideIn 0.5s ease forwards;
-  animation-delay: var(--delay);
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-@keyframes slideIn {
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.festival-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
-}
-
-.festival-emoji {
-  font-size: 32px;
-  line-height: 1;
-}
-
-.festival-content {
-  text-align: center;
-}
-
-.festival-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin: 0;
-}
-
-.festival-date {
-  font-size: 12px;
-  color: #999;
-  margin: 4px 0 0;
-}
-
-.festival-days {
-  display: flex;
-  align-items: baseline;
-  gap: 2px;
-  margin-top: 4px;
-}
-
-.days-number {
-  font-size: 20px;
-  font-weight: 700;
-  color: #ff5a5a;
-}
-
-.days-text {
-  font-size: 12px;
-  color: #999;
-}
-
-.festival-scroll-btn {
-  position: absolute;
-  right: -10px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  background: white;
-  border: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  width: 36px;
-  height: 36px;
-}
-
-.festival-scroll-btn:hover {
-  background: #ff5a5a !important;
-  color: white !important;
-}
-
-@media (max-width: 768px) {
-  .festival-card {
-    width: 130px;
-    padding: 12px;
-  }
-  
-  .festival-emoji {
-    font-size: 28px;
-  }
-}
+.festival {
+  padding: 12px 20px 24px;
+}
+
+.festival-panel {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 30px;
+  border-radius: 32px;
+  background: linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(255, 245, 236, 0.94));
+  border: 1px solid rgba(233, 221, 212, 0.92);
+  box-shadow: 0 22px 48px rgba(66, 42, 26, 0.08);
+}
+
+.festival-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  margin-bottom: 22px;
+}
+
+.festival-copy {
+  max-width: 760px;
+}
+
+.festival-kicker {
+  display: inline-flex;
+  margin-bottom: 12px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(239, 106, 91, 0.1);
+  color: #d84e3f;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.festival-copy h2 {
+  margin: 0;
+  color: #221d18;
+  font-size: clamp(24px, 4vw, 34px);
+  line-height: 1.15;
+}
+
+.festival-copy p {
+  margin: 12px 0 0;
+  color: #756b61;
+  line-height: 1.85;
+}
+
+.festival-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.festival-summary {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(236, 223, 213, 0.94);
+  color: #63574b;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.festival-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.festival-scroll-btn.ant-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 16px;
+  border-color: rgba(224, 208, 197, 0.95);
+  background: #fffaf5;
+  color: #66594d;
+}
+
+.festival-scroll-btn.ant-btn:hover {
+  color: #ef6a5b !important;
+  border-color: rgba(239, 106, 91, 0.4) !important;
+  background: #fff4ef !important;
+}
+
+.festival-scroll {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 1fr);
+  gap: 14px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.festival-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.festival-card {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  gap: 14px;
+  padding: 20px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(233, 221, 212, 0.95);
+  animation: fadeIn 0.6s ease-out;
+  animation-delay: var(--delay);
+  animation-fill-mode: both;
+  transition: transform 0.24s ease, box-shadow 0.24s ease;
+}
+
+.festival-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 18px 36px rgba(66, 42, 26, 0.1);
+}
+
+.festival-icon {
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+}
+
+.tone-orange .festival-icon {
+  background: linear-gradient(135deg, #ffe7d6 0%, #ffcfb4 100%);
+  color: #d96a44;
+}
+
+.tone-green .festival-icon {
+  background: linear-gradient(135deg, #e0f4e8 0%, #c3ead4 100%);
+  color: #2f8f73;
+}
+
+.tone-pink .festival-icon {
+  background: linear-gradient(135deg, #ffe7f0 0%, #ffd1e4 100%);
+  color: #cc5f8b;
+}
+
+.tone-purple .festival-icon {
+  background: linear-gradient(135deg, #efe7ff 0%, #dccfff 100%);
+  color: #7d60c9;
+}
+
+.tone-slate .festival-icon {
+  background: linear-gradient(135deg, #edf1f7 0%, #d8e0ec 100%);
+  color: #60708a;
+}
+
+.tone-red .festival-icon {
+  background: linear-gradient(135deg, #ffe2df 0%, #ffc4bc 100%);
+  color: #cf5347;
+}
+
+.festival-content {
+  min-width: 0;
+}
+
+.festival-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.festival-name {
+  margin: 0;
+  color: #241d17;
+  font-size: 18px;
+}
+
+.festival-days {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #fff3ea;
+  color: #d84e3f;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.festival-date {
+  margin: 8px 0 6px;
+  color: #7e7266;
+  font-size: 13px;
+}
+
+.festival-note {
+  color: #a29488;
+  font-size: 12px;
+}
+
+@media (max-width: 900px) {
+  .festival-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .festival-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .festival {
+    padding: 12px;
+  }
+
+  .festival-panel {
+    padding: 20px 18px;
+    border-radius: 26px;
+  }
+
+  .festival-scroll {
+    grid-auto-columns: minmax(220px, 1fr);
+  }
+
+  .festival-card {
+    grid-template-columns: 48px minmax(0, 1fr);
+    padding: 18px;
+  }
+
+  .festival-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+  }
+}
diff --git a/frontend/src/components/Festival.jsx b/frontend/src/components/Festival.jsx
index 8a649fb..0c78e1f 100644
--- a/frontend/src/components/Festival.jsx
+++ b/frontend/src/components/Festival.jsx
@@ -1,78 +1,98 @@
 import { useRef } from 'react';
 import { Button } from 'antd';
-import { RightOutlined } from '@ant-design/icons';
+import {
+  RightOutlined,
+  LeftOutlined,
+  ThunderboltOutlined,
+  EnvironmentOutlined,
+  GiftOutlined,
+  HeartOutlined,
+  FireOutlined,
+  FlagOutlined,
+  BookOutlined,
+  CloudOutlined,
+  StarOutlined,
+  CalendarOutlined,
+} from '@ant-design/icons';
 import './Festival.css';
 
+const festivals = [
+  { name: '惊蛰', date: '2026-03-05', weekday: '周四', daysLeft: 6, icon: <ThunderboltOutlined />, tone: 'orange' },
+  { name: '植树节', date: '2026-03-12', weekday: '周四', daysLeft: 13, icon: <EnvironmentOutlined />, tone: 'green' },
+  { name: '春分', date: '2026-03-20', weekday: '周五', daysLeft: 21, icon: <StarOutlined />, tone: 'pink' },
+  { name: '愚人节', date: '2026-04-01', weekday: '周三', daysLeft: 33, icon: <GiftOutlined />, tone: 'purple' },
+  { name: '清明节', date: '2026-04-05', weekday: '周日', daysLeft: 37, icon: <CloudOutlined />, tone: 'slate' },
+  { name: '谷雨', date: '2026-04-20', weekday: '周一', daysLeft: 52, icon: <EnvironmentOutlined />, tone: 'green' },
+  { name: '劳动节', date: '2026-05-01', weekday: '周五', daysLeft: 63, icon: <FlagOutlined />, tone: 'orange' },
+  { name: '青年节', date: '2026-05-04', weekday: '周一', daysLeft: 66, icon: <FireOutlined />, tone: 'orange' },
+  { name: '母亲节', date: '2026-05-10', weekday: '周日', daysLeft: 72, icon: <HeartOutlined />, tone: 'pink' },
+  { name: '端午节', date: '2026-06-19', weekday: '周五', daysLeft: 112, icon: <GiftOutlined />, tone: 'green' },
+  { name: '教师节', date: '2026-09-10', weekday: '周四', daysLeft: 195, icon: <BookOutlined />, tone: 'slate' },
+  { name: '国庆节', date: '2026-10-01', weekday: '周四', daysLeft: 216, icon: <CalendarOutlined />, tone: 'red' },
+];
+
 const Festival = () => {
   const scrollRef = useRef(null);
 
-  const festivals = [
-    { name: '惊蛰', date: '2026-03-05', weekday: '周四', daysLeft: 6, emoji: '⚡' },
-    { name: '植树节', date: '2026-03-12', weekday: '周四', daysLeft: 13, emoji: '🌳' },
-    { name: '春分', date: '2026-03-20', weekday: '周五', daysLeft: 21, emoji: '🌸' },
-    { name: '愚人节', date: '2026-04-01', weekday: '周三', daysLeft: 33, emoji: '🤡' },
-    { name: '清明节', date: '2026-04-05', weekday: '周日', daysLeft: 37, emoji: '🌿' },
-    { name: '谷雨', date: '2026-04-20', weekday: '周一', daysLeft: 52, emoji: '🌾' },
-    { name: '劳动节', date: '2026-05-01', weekday: '周五', daysLeft: 63, emoji: '🎉' },
-    { name: '青年节', date: '2026-05-04', weekday: '周一', daysLeft: 66, emoji: '🔥' },
-    { name: '立夏', date: '2026-05-05', weekday: '周二', daysLeft: 67, emoji: '☀️' },
-    { name: '母亲节', date: '2026-05-10', weekday: '周日', daysLeft: 72, emoji: '💐' },
-    { name: '小满', date: '2026-05-21', weekday: '周四', daysLeft: 83, emoji: '🌾' },
-    { name: '端午节', date: '2026-06-19', weekday: '周五', daysLeft: 112, emoji: '🛶' },
-    { name: '夏至', date: '2026-06-21', weekday: '周日', daysLeft: 114, emoji: '🌻' },
-    { name: '建党节', date: '2026-07-01', weekday: '周三', daysLeft: 124, emoji: '🚩' },
-    { name: '小暑', date: '2026-07-07', weekday: '周二', daysLeft: 130, emoji: '🔥' },
-    { name: '建军节', date: '2026-08-01', weekday: '周六', daysLeft: 155, emoji: '🎖️' },
-    { name: '立秋', date: '2026-08-07', weekday: '周五', daysLeft: 161, emoji: '🍂' },
-    { name: '七夕节', date: '2026-08-25', weekday: '周二', daysLeft: 179, emoji: '💕' },
-    { name: '白露', date: '2026-09-07', weekday: '周一', daysLeft: 192, emoji: '💧' },
-    { name: '教师节', date: '2026-09-10', weekday: '周四', daysLeft: 195, emoji: '📚' },
-    { name: '秋分', date: '2026-09-23', weekday: '周三', daysLeft: 208, emoji: '🍁' },
-    { name: '国庆节', date: '2026-10-01', weekday: '周四', daysLeft: 216, emoji: '🇨🇳' },
-    { name: '中秋节', date: '2026-10-03', weekday: '周六', daysLeft: 218, emoji: '🥮' },
-    { name: '重阳节', date: '2026-10-21', weekday: '周三', daysLeft: 236, emoji: '👴' },
-    { name: '立冬', date: '2026-11-07', weekday: '周六', daysLeft: 253, emoji: '❄️' },
-    { name: '感恩节', date: '2026-11-26', weekday: '周四', daysLeft: 272, emoji: '🦃' },
-    { name: '大雪', date: '2026-12-07', weekday: '周一', daysLeft: 283, emoji: '🌨️' },
-    { name: '冬至', date: '2026-12-22', weekday: '周二', daysLeft: 298, emoji: '🥟' },
-    { name: '圣诞节', date: '2026-12-25', weekday: '周五', daysLeft: 301, emoji: '🎄' },
-  ];
-
   const scroll = (direction) => {
     if (scrollRef.current) {
-      const scrollAmount = direction === 'left' ? -300 : 300;
+      const scrollAmount = direction === 'left' ? -320 : 320;
       scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
     }
   };
 
   return (
     <section className="festival">
-      <div className="festival-container">
+      <div className="festival-panel">
+        <div className="festival-header">
+          <div className="festival-copy">
+            <span className="festival-kicker">营销节点</span>
+            <h2>把时间感也做成页面的一部分</h2>
+            <p>
+              这些节点能帮助用户快速想到“最近该做什么图”。比起单纯展示日期，更像是一个素材站自己的选题提醒。
+            </p>
+          </div>
+
+          <div className="festival-actions">
+            <span className="festival-summary">按最近营销节奏排序</span>
+            <div className="festival-controls">
+              <Button
+                className="festival-scroll-btn"
+                shape="circle"
+                icon={<LeftOutlined />}
+                onClick={() => scroll('left')}
+              />
+              <Button
+                className="festival-scroll-btn"
+                shape="circle"
+                icon={<RightOutlined />}
+                onClick={() => scroll('right')}
+              />
+            </div>
+          </div>
+        </div>
+
         <div className="festival-scroll" ref={scrollRef}>
           {festivals.map((item, index) => (
-            <div 
-              key={item.name} 
-              className="festival-card"
-              style={{ '--delay': `${index * 0.08}s` }}
+            <div
+              key={item.name}
+              className={`festival-card tone-${item.tone}`}
+              style={{ '--delay': `${index * 0.05}s` }}
             >
-              <div className="festival-emoji">{item.emoji}</div>
+              <div className="festival-icon">{item.icon}</div>
               <div className="festival-content">
-                <h3 className="festival-name">{item.name}</h3>
-                <p className="festival-date">{item.date} {item.weekday}</p>
-              </div>
-              <div className="festival-days">
-                <span className="days-number">{item.daysLeft}</span>
-                <span className="days-text">天后</span>
+                <div className="festival-topline">
+                  <h3 className="festival-name">{item.name}</h3>
+                  <span className="festival-days">{item.daysLeft} 天后</span>
+                </div>
+                <p className="festival-date">
+                  {item.date} · {item.weekday}
+                </p>
+                <span className="festival-note">适合提前布局专题与节日视觉</span>
               </div>
             </div>
           ))}
         </div>
-        <Button 
-          className="festival-scroll-btn" 
-          shape="circle" 
-          icon={<RightOutlined />}
-          onClick={() => scroll('right')}
-        />
       </div>
     </section>
   );
diff --git a/frontend/src/components/Footer.css b/frontend/src/components/Footer.css
index 5d09aa5..de70930 100644
--- a/frontend/src/components/Footer.css
+++ b/frontend/src/components/Footer.css
@@ -1,159 +1,240 @@
-.footer {
-  margin-top: auto;
-}
-
-.footer-main {
-  background: #f5f5f5;
-  padding: 40px 0;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.footer-links-group {
-  display: flex;
-  gap: 24px;
-  margin-bottom: 12px;
-}
-
-.footer-link {
-  color: #666;
-  font-size: 14px;
-  transition: color 0.2s;
-}
-
-.footer-link:hover {
-  color: #ff5a5a;
-}
-
-.footer-contact {
-  margin-bottom: 20px;
-}
-
-.contact-title {
-  font-size: 14px;
-  color: #333;
-  margin: 0 0 12px;
-  font-weight: 500;
-}
-
-.email-input {
-  background: white;
-  border-radius: 8px;
-  max-width: 360px;
-}
-
-.email-input .ant-input {
-  color: #666;
-}
-
-.footer-qrcodes {
-  display: flex;
-  gap: 24px;
-}
-
-.qrcode-item {
-  text-align: center;
-}
-
-.qrcode-placeholder {
-  width: 100px;
-  height: 100px;
-  background: white;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 8px;
-  border: 1px solid #e8e8e8;
-}
-
-.qrcode-icon {
-  font-size: 48px;
-  color: #ccc;
-}
-
-.qrcode-text {
-  font-size: 12px;
-  color: #999;
-}
-
-.footer-partners {
-  margin-top: 30px;
-  padding-top: 20px;
-  border-top: 1px solid #e8e8e8;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px 20px;
-}
-
-.partner-link {
-  font-size: 12px;
-  color: #999;
-  transition: color 0.2s;
-}
-
-.partner-link:hover {
-  color: #ff5a5a;
-}
-
-.footer-bottom {
-  background: #3d3d3d;
-  padding: 20px 0;
-}
-
-.copyright-text {
-  color: #999;
-  font-size: 12px;
-  line-height: 1.8;
-  margin: 0 0 8px;
-}
-
-.email-link {
-  color: #ff5a5a;
-}
-
-.email-link:hover {
-  text-decoration: underline;
-}
-
-.copyright-links {
-  color: #999;
-  font-size: 12px;
-  margin: 0;
-}
-
-.copyright-links a {
-  color: #999;
-  transition: color 0.2s;
-}
-
-.copyright-links a:hover {
-  color: #ff5a5a;
-}
-
-@media (max-width: 768px) {
-  .footer-main {
-    padding: 30px 0;
-  }
-  
-  .footer-links-group {
-    justify-content: center;
-  }
-  
-  .footer-qrcodes {
-    justify-content: center;
-  }
-  
-  .footer-partners {
-    justify-content: center;
-  }
-  
-  .copyright-text,
-  .copyright-links {
-    text-align: center;
-  }
-}
+.footer {
+  padding: 0 20px 24px;
+}
+
+.footer-shell {
+  max-width: 1400px;
+  margin: 0 auto;
+  border-radius: 32px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top right, rgba(244, 178, 84, 0.14), transparent 26%),
+    linear-gradient(180deg, rgba(255, 251, 246, 0.96), rgba(250, 243, 236, 0.96));
+  border: 1px solid rgba(233, 221, 212, 0.92);
+  box-shadow: 0 22px 48px rgba(66, 42, 26, 0.08);
+}
+
+.footer-main {
+  display: grid;
+  grid-template-columns: 1.15fr 0.95fr 0.9fr;
+  gap: 28px;
+  padding: 34px 32px 28px;
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.footer-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  width: fit-content;
+  text-decoration: none;
+}
+
+.footer-logo-icon {
+  width: 46px;
+  height: 28px;
+}
+
+.footer-logo strong {
+  display: block;
+  color: #261f19;
+  font-size: 24px;
+}
+
+.footer-logo span {
+  color: #8b7f73;
+  font-size: 12px;
+}
+
+.footer-brand-text {
+  margin: 0;
+  color: #6f645a;
+  line-height: 1.9;
+}
+
+.footer-contact-card {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 14px;
+  padding: 16px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(236, 223, 213, 0.94);
+}
+
+.footer-contact-card .anticon {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  background: #fff1e9;
+  color: #ef6a5b;
+  font-size: 18px;
+}
+
+.footer-contact-card span {
+  display: block;
+  color: #8b7f73;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.footer-contact-card a {
+  color: #261f19;
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.footer-link-group h4 {
+  margin: 0 0 12px;
+  color: #261f19;
+  font-size: 16px;
+}
+
+.footer-link-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(236, 223, 213, 0.94);
+  background: rgba(255, 255, 255, 0.76);
+  color: #5f5449;
+  cursor: pointer;
+  transition: all 0.22s ease;
+  text-align: left;
+}
+
+.footer-link:hover {
+  border-color: rgba(239, 106, 91, 0.32);
+  color: #ef6a5b;
+  background: #fff4ef;
+}
+
+.footer-link .anticon {
+  font-size: 16px;
+}
+
+.footer-qr {
+  display: grid;
+  gap: 14px;
+}
+
+.footer-qr-card {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(236, 223, 213, 0.94);
+  background: rgba(255, 255, 255, 0.82);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-qr-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #fff1e9 0%, #ffe0d2 100%);
+  color: #ef6a5b;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+}
+
+.footer-qr-card strong {
+  color: #261f19;
+  font-size: 16px;
+}
+
+.footer-qr-card span {
+  color: #83776b;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 18px 32px 24px;
+  border-top: 1px solid rgba(233, 221, 212, 0.92);
+}
+
+.copyright-text,
+.copyright-links {
+  margin: 0;
+  color: #8a7d70;
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.email-link {
+  color: #ef6a5b;
+  margin-left: 4px;
+}
+
+.copyright-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+}
+
+.copyright-links a {
+  color: #7c6f63;
+}
+
+@media (max-width: 1100px) {
+  .footer-main {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-links {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .footer {
+    padding: 0 12px 16px;
+  }
+
+  .footer-shell {
+    border-radius: 26px;
+  }
+
+  .footer-main {
+    padding: 22px 18px 18px;
+  }
+
+  .footer-links {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-bottom {
+    padding: 16px 18px 20px;
+  }
+
+  .copyright-links {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index d3e03f5..6eafd28 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,107 +1,137 @@
-import { Row, Col, Input, Button, Divider } from 'antd';
-import { MailOutlined, QrcodeOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import './Footer.css';
-
-const Footer = () => {
-  const navigate = useNavigate();
-
-  const navLinks = [
-    { title: '网站协议', url: '/protocol' },
-    { title: '支付协议', url: '/pay-protocol' },
-    { title: '版权声明', url: '/copyright' },
-  ];
-
-  const navLinks2 = [
-    { title: '帮助中心', url: '/help' },
-    { title: '供稿必读', url: '/upload-guide' },
-  ];
-
-  const handleLinkClick = (url) => {
-    navigate(url);
-  };
-
-  return (
-    <footer className="footer">
-      <div className="footer-main">
-        <div className="footer-container">
-          <Row gutter={[48, 24]}>
-            <Col xs={24} sm={24} md={8} lg={6}>
-              <div className="footer-links-group">
-                {navLinks.map(link => (
-                  <a 
-                    key={link.title} 
-                    onClick={() => handleLinkClick(link.url)} 
-                    className="footer-link"
-                  >
-                    {link.title}
-                  </a>
-                ))}
-              </div>
-              <div className="footer-links-group">
-                {navLinks2.map(link => (
-                  <a 
-                    key={link.title} 
-                    onClick={() => handleLinkClick(link.url)} 
-                    className="footer-link"
-                  >
-                    {link.title}
-                  </a>
-                ))}
-              </div>
-            </Col>
-            
-            <Col xs={24} sm={24} md={8} lg={10}>
-              <div className="footer-contact">
-                <h4 className="contact-title">客服邮箱</h4>
-                <div className="contact-email">
-                  <Input 
-                    readOnly
-                    value="service@aishej.com （工作日9:00-18:00）"
-                    suffix={<MailOutlined />}
-                    className="email-input"
-                  />
-                </div>
-              </div>
-            </Col>
-            
-            <Col xs={24} sm={24} md={8} lg={8}>
-              <div className="footer-qrcodes">
-                <div className="qrcode-item">
-                  <div className="qrcode-placeholder">
-                    <QrcodeOutlined className="qrcode-icon" />
-                  </div>
-                  <span className="qrcode-text">移动端网站</span>
-                </div>
-                <div className="qrcode-item">
-                  <div className="qrcode-placeholder">
-                    <QrcodeOutlined className="qrcode-icon" />
-                  </div>
-                  <span className="qrcode-text">微信公众号</span>
-                </div>
-              </div>
-            </Col>
-          </Row>
-        </div>
-      </div>
-      
-      <div className="footer-bottom">
-        <div className="footer-container">
-          <p className="copyright-text">
-            图汇作为网络服务平台方，平台上的作品均由供稿设计师上传并发布，若您的权利被侵害，请联系客服邮箱：
-            <a href="mailto:service@aishej.com" className="email-link">service@aishej.com</a>
-            ，我们将及时为您处理 | 本站法律顾问：张明律师
-          </p>
-          <p className="copyright-links">
-            <a href="#">京ICP备2024068521号-1</a> | 
-            增值电信业务经营许可证：京B2-20240312 | 
-            <a href="#">京公网安备11010802045678号</a> | 
-            Copyright © 2024-2026 图汇 AiSheji.com
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
+import {
+  MailOutlined,
+  SafetyCertificateOutlined,
+  FileTextOutlined,
+  QuestionCircleOutlined,
+  UploadOutlined,
+  GlobalOutlined,
+  MessageOutlined,
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import './Footer.css';
+
+const Footer = () => {
+  const navigate = useNavigate();
+
+  const productLinks = [
+    { title: '网站协议', url: '/protocol', icon: <FileTextOutlined /> },
+    { title: '支付协议', url: '/pay-protocol', icon: <SafetyCertificateOutlined /> },
+    { title: '版权声明', url: '/copyright', icon: <FileTextOutlined /> },
+  ];
+
+  const helpLinks = [
+    { title: '帮助中心', url: '/help', icon: <QuestionCircleOutlined /> },
+    { title: '供稿必读', url: '/upload-guide', icon: <UploadOutlined /> },
+  ];
+
+  const handleLinkClick = (url) => {
+    navigate(url);
+  };
+
+  return (
+    <footer className="footer">
+      <div className="footer-shell">
+        <div className="footer-main">
+          <div className="footer-brand">
+            <a href="/" className="footer-logo">
+              <svg viewBox="0 0 40 24" className="footer-logo-icon" aria-hidden="true">
+                <path
+                  d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z"
+                  fill="#ef6a5b"
+                />
+                <path
+                  d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+                  fill="#ef6a5b"
+                />
+              </svg>
+              <div>
+                <strong>图汇</strong>
+                <span>AiSheji.com</span>
+              </div>
+            </a>
+
+            <p className="footer-brand-text">
+              图汇是一个更偏“可成交”的素材站，支持作品预览、支付、下载和详情页承接，让找图和交付链路更顺。
+            </p>
+
+            <div className="footer-contact-card">
+              <MailOutlined />
+              <div>
+                <span>客服邮箱</span>
+                <a href="mailto:service@aishej.com">service@aishej.com</a>
+              </div>
+            </div>
+          </div>
+
+          <div className="footer-links">
+            <div className="footer-link-group">
+              <h4>平台说明</h4>
+              {productLinks.map((link) => (
+                <button
+                  key={link.title}
+                  type="button"
+                  onClick={() => handleLinkClick(link.url)}
+                  className="footer-link"
+                >
+                  {link.icon}
+                  <span>{link.title}</span>
+                </button>
+              ))}
+            </div>
+
+            <div className="footer-link-group">
+              <h4>帮助与合作</h4>
+              {helpLinks.map((link) => (
+                <button
+                  key={link.title}
+                  type="button"
+                  onClick={() => handleLinkClick(link.url)}
+                  className="footer-link"
+                >
+                  {link.icon}
+                  <span>{link.title}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="footer-qr">
+            <div className="footer-qr-card">
+              <div className="footer-qr-icon">
+                <GlobalOutlined />
+              </div>
+              <strong>移动端网站</strong>
+              <span>适合手机端快速查找与预览作品</span>
+            </div>
+
+            <div className="footer-qr-card">
+              <div className="footer-qr-icon">
+                <MessageOutlined />
+              </div>
+              <strong>公众号 / 社群</strong>
+              <span>后续可替换成真实二维码或企微入口</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <p className="copyright-text">
+            图汇作为网络服务平台方，平台上的作品均由供稿设计师上传并发布。若您的权利被侵害，请联系
+            <a href="mailto:service@aishej.com" className="email-link">
+              service@aishej.com
+            </a>
+            ，我们将及时处理。
+          </p>
+          <p className="copyright-links">
+            <a href="#">京ICP备2024068521号-1</a>
+            <span>增值电信业务经营许可证：京B2-20240312</span>
+            <a href="#">京公网安备11010802045678号</a>
+            <span>Copyright © 2024-2026 图汇 AiSheji.com</span>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/pages/CategoryDetail.css b/frontend/src/pages/CategoryDetail.css
index 0ead4cb..a587896 100644
--- a/frontend/src/pages/CategoryDetail.css
+++ b/frontend/src/pages/CategoryDetail.css
@@ -1,121 +1,154 @@
-.category-detail-page {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.category-detail-hero {
-  height: 350px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.category-detail-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.back-btn {
-  position: absolute;
-  top: 90px;
-  left: 40px;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  color: #333;
-  font-weight: 500;
-  height: 40px;
-  padding: 0 20px;
-  transition: all 0.3s ease;
-}
-
-.back-btn:hover {
-  background: white !important;
-  color: #ff5a5a !important;
-  transform: translateX(-5px);
-}
-
-.category-detail-content {
-  text-align: center;
-  animation: fadeInUp 0.8s ease;
-}
-
-.category-detail-title {
-  font-size: 56px;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
-  animation: scaleIn 0.6s ease;
-}
-
-.category-detail-count {
-  font-size: 20px;
-  margin-top: 16px;
-  opacity: 0.95;
-  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
-}
-
-.category-detail-works {
-  flex: 1;
-  padding: 40px 0;
-  background: #f8f9fa;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@media (max-width: 768px) {
-  .category-detail-hero {
-    height: 250px;
-  }
-
-  .back-btn {
-    top: 70px;
-    left: 20px;
-    height: 36px;
-    padding: 0 16px;
-    font-size: 14px;
-  }
-
-  .category-detail-title {
-    font-size: 36px;
-  }
-
-  .category-detail-count {
-    font-size: 16px;
-  }
-
-  .category-detail-works {
-    padding: 30px 0;
-  }
-}
+.category-detail-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background:
+    radial-gradient(circle at top left, rgba(239, 106, 91, 0.08), transparent 24%),
+    linear-gradient(180deg, #fffdf9 0%, #f8f2eb 100%);
+}
+
+.category-detail-hero {
+  position: relative;
+  min-height: 360px;
+  margin: 88px 20px 0;
+  border-radius: 34px;
+  overflow: hidden;
+  box-shadow: 0 28px 64px rgba(66, 42, 26, 0.14);
+}
+
+.category-detail-overlay {
+  min-height: 360px;
+  padding: 28px 32px 34px;
+  background:
+    linear-gradient(120deg, rgba(16, 14, 12, 0.18), transparent 36%),
+    linear-gradient(180deg, rgba(32, 23, 17, 0.1), rgba(32, 23, 17, 0.24));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: #fff;
+}
+
+.back-btn.ant-btn {
+  position: absolute;
+  top: 24px;
+  left: 24px;
+  height: 42px;
+  padding: 0 18px;
+  border-radius: 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.18);
+  color: #fff;
+  backdrop-filter: blur(12px);
+}
+
+.back-btn.ant-btn:hover {
+  color: #fff !important;
+  background: rgba(255, 255, 255, 0.24) !important;
+}
+
+.category-detail-content {
+  max-width: 840px;
+}
+
+.category-detail-kicker {
+  display: inline-flex;
+  margin-bottom: 14px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.category-detail-title {
+  margin: 0;
+  font-size: clamp(40px, 6vw, 64px);
+  line-height: 1.05;
+}
+
+.category-detail-desc {
+  max-width: 680px;
+  margin: 14px 0 0;
+  font-size: 16px;
+  line-height: 1.85;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.category-detail-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 24px;
+}
+
+.category-stat {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 12px;
+  padding: 16px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(10px);
+}
+
+.category-stat .anticon {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.18);
+  font-size: 18px;
+}
+
+.category-stat strong {
+  display: block;
+  font-size: 22px;
+}
+
+.category-stat span {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.category-detail-works {
+  flex: 1;
+  padding: 26px 0 18px;
+}
+
+@media (max-width: 900px) {
+  .category-detail-stats {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .category-detail-hero {
+    margin: 82px 12px 0;
+    min-height: 320px;
+    border-radius: 28px;
+  }
+
+  .category-detail-overlay {
+    min-height: 320px;
+    padding: 24px 18px 24px;
+  }
+
+  .back-btn.ant-btn {
+    top: 18px;
+    left: 18px;
+  }
+
+  .category-detail-title {
+    font-size: 38px;
+  }
+
+  .category-detail-desc {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/pages/CategoryDetail.jsx b/frontend/src/pages/CategoryDetail.jsx
index 03cf0f7..8a1c7a6 100644
--- a/frontend/src/pages/CategoryDetail.jsx
+++ b/frontend/src/pages/CategoryDetail.jsx
@@ -1,56 +1,113 @@
-import { useParams, useNavigate } from 'react-router-dom';
-import { Button } from 'antd';
-import { LeftOutlined } from '@ant-design/icons';
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import Works from '../components/Works';
-import './CategoryDetail.css';
-
-const CategoryDetail = () => {
-  const { name } = useParams();
-  const navigate = useNavigate();
-
-  // 分类数据映射
-  const categoryData = {
-    '文化墙': { count: '6572', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
-    '周年庆': { count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
-    '直播': { count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
-    '包装': { count: '9533', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
-    '科技': { count: '44921', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
-    '活动': { count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
-    '医美': { count: '223068', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
-    '邀请函': { count: '15361', gradient: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)' },
-  };
-
-  const category = categoryData[name];
-
-  return (
-    <div className="category-detail-page">
-      <Header />
-      
-      <div className="category-detail-hero" style={{ background: category?.gradient }}>
-        <div className="category-detail-overlay">
-          <Button 
-            icon={<LeftOutlined />} 
-            className="back-btn"
-            onClick={() => navigate('/')}
-          >
-            返回首页
-          </Button>
-          <div className="category-detail-content">
-            <h1 className="category-detail-title">{name}</h1>
-            <p className="category-detail-count">共 {category?.count} 张作品</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="category-detail-works">
-        <Works categoryFilter={name} />
-      </div>
-
-      <Footer />
-    </div>
-  );
-};
-
-export default CategoryDetail;
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button } from 'antd';
+import { LeftOutlined, AppstoreOutlined, FireOutlined, EyeOutlined } from '@ant-design/icons';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import Works from '../components/Works';
+import './CategoryDetail.css';
+
+const CategoryDetail = () => {
+  const { name } = useParams();
+  const navigate = useNavigate();
+
+  const categoryData = {
+    文化墙: {
+      count: '6572',
+      gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
+      description: '适合企业形象、品牌理念和空间场景布置的长图与信息展示素材。',
+    },
+    周年庆: {
+      count: '15868',
+      gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
+      description: '围绕纪念日、店庆、品牌里程碑等主题的高频视觉物料。',
+    },
+    直播: {
+      count: '35429',
+      gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
+      description: '直播预告、封面、流程页和互动氛围图的整套素材集合。',
+    },
+    包装: {
+      count: '9533',
+      gradient: 'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
+      description: '包装延展、产品展示和品牌包装视觉的常用内容。',
+    },
+    科技: {
+      count: '44921',
+      gradient: 'linear-gradient(135deg, #4356a8 0%, #7eb0da 100%)',
+      description: '偏未来感、信息感和产品感表达的科技类视觉素材。',
+    },
+    活动: {
+      count: '408131',
+      gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)',
+      description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
+    },
+    医美: {
+      count: '223068',
+      gradient: 'linear-gradient(135deg, #f0a6b4 0%, #f7d6df 100%)',
+      description: '轻医美、抗衰、项目卖点和机构宣传类视觉内容。',
+    },
+    邀请函: {
+      count: '15361',
+      gradient: 'linear-gradient(135deg, #a87ab8 0%, #ead9f3 100%)',
+      description: '会议、婚礼、活动和品牌邀约相关的正式视觉模板。',
+    },
+  };
+
+  const category = categoryData[name] || {
+    count: '0',
+    gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
+    description: '当前分类正在持续补充中，可以先浏览已上线的作品内容。',
+  };
+
+  return (
+    <div className="category-detail-page">
+      <Header />
+
+      <div className="category-detail-hero" style={{ background: category.gradient }}>
+        <div className="category-detail-overlay">
+          <Button icon={<LeftOutlined />} className="back-btn" onClick={() => navigate('/')}>
+            返回首页
+          </Button>
+
+          <div className="category-detail-content">
+            <span className="category-detail-kicker">分类精选</span>
+            <h1 className="category-detail-title">{name}</h1>
+            <p className="category-detail-desc">{category.description}</p>
+
+            <div className="category-detail-stats">
+              <div className="category-stat">
+                <AppstoreOutlined />
+                <div>
+                  <strong>{category.count}</strong>
+                  <span>作品总量</span>
+                </div>
+              </div>
+              <div className="category-stat">
+                <FireOutlined />
+                <div>
+                  <strong>高频</strong>
+                  <span>适合首页承接</span>
+                </div>
+              </div>
+              <div className="category-stat">
+                <EyeOutlined />
+                <div>
+                  <strong>详情页</strong>
+                  <span>支持预览与下载</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="category-detail-works">
+        <Works categoryFilter={name} title={`${name} 分类作品`} />
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default CategoryDetail;