feat(解决方案区块): 增强行业卡片视觉效果并添加标签和主题色

为解决方案区块的行业卡片添加视觉增强效果，包括：
- 为每个行业添加主题色映射和渐变背景
- 增加标签展示核心能力
- 优化卡片悬停动画和阴影效果
- 添加装饰性光晕元素
- 完善卡片内部布局和样式细节

components/sections/solutions-section.tsx

@@ -22,6 +22,51 @@ const iconMap: Record<string, React.ReactNode> = {
   store: <Store className="w-5 h-5" />,
 }
 
+// 业态主题色映射
+const industryThemeMap: Record<string, {
+  color: string
+  bgLight: string
+  glow: string
+  gradient: string
+}> = {
+  utensils: {
+    color: "oklch(0.65 0.16 35)",
+    bgLight: "oklch(0.96 0.03 35)",
+    glow: "oklch(0.65 0.16 35 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.96 0.03 35 / 0.5) 0%, transparent 60%)"
+  },
+  "shopping-bag": {
+    color: "oklch(0.55 0.14 165)",
+    bgLight: "oklch(0.95 0.03 165)",
+    glow: "oklch(0.55 0.14 165 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.95 0.03 165 / 0.5) 0%, transparent 60%)"
+  },
+  store: {
+    color: "oklch(0.46 0.18 264)",
+    bgLight: "oklch(0.94 0.04 264)",
+    glow: "oklch(0.46 0.18 264 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.94 0.04 264 / 0.5) 0%, transparent 60%)"
+  },
+  scissors: {
+    color: "oklch(0.58 0.14 295)",
+    bgLight: "oklch(0.95 0.03 295)",
+    glow: "oklch(0.58 0.14 295 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.95 0.03 295 / 0.5) 0%, transparent 60%)"
+  },
+  dumbbell: {
+    color: "oklch(0.55 0.18 20)",
+    bgLight: "oklch(0.95 0.04 20)",
+    glow: "oklch(0.55 0.18 20 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.95 0.04 20 / 0.5) 0%, transparent 60%)"
+  },
+  car: {
+    color: "oklch(0.60 0.12 75)",
+    bgLight: "oklch(0.96 0.03 75)",
+    glow: "oklch(0.60 0.12 75 / 0.18)",
+    gradient: "linear-gradient(135deg, oklch(0.96 0.03 75 / 0.5) 0%, transparent 60%)"
+  },
+}
+
 export function SolutionsSection() {
   const homeDataAny = homeData as any
   const solutions = homeDataAny.solutions ?? {
@@ -74,49 +119,131 @@ export function SolutionsSection() {
           </p>
         </div>
 
-        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-5">
+        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-6">
-          {solutions.items.map((item: any, index: number) => (
+          {solutions.items.map((item: any, index: number) => {
+            const theme = industryThemeMap[item.icon] ?? industryThemeMap.store
+            const itemTags = Array.isArray(item.tags) ? item.tags : []
+            return (
             <article
               key={item.name}
-              className="group relative overflow-hidden rounded-[1.75rem] border border-border/80 bg-white/96 p-5 shadow-sm transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1 hover:shadow-[0_18px_50px_-28px_rgba(34,84,186,0.35)]"
+              className="group relative overflow-hidden rounded-[1.75rem] border border-border/50 bg-white/96 backdrop-blur-sm p-6 lg:p-7
+                shadow-[0_1px_2px_rgba(0,0,0,0.02),0_4px_8px_rgba(0,0,0,0.02),0_16px_32px_rgba(27,92,230,0.04)]
+                transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]
+                hover:-translate-y-1.5
+                hover:shadow-[0_2px_4px_rgba(0,0,0,0.02),0_8px_16px_rgba(0,0,0,0.04),0_24px_48px_rgba(27,92,230,0.10)]"
             >
+              {/* 业态特色渐变背景 */}
               <div
-                className="absolute inset-x-0 top-0 h-24 opacity-70"
+                className="absolute inset-0 opacity-60 transition-opacity duration-500 group-hover:opacity-80"
                 aria-hidden="true"
-                style={{ background: "linear-gradient(180deg, oklch(0.95 0.035 248) 0%, transparent 100%)" }}
+                style={{ background: theme.gradient }}
+              />
+
+              {/* 角落光晕装饰 */}
+              <div
+                className="absolute -right-8 -top-8 w-24 h-24 rounded-full opacity-30 blur-2xl transition-all duration-700 group-hover:scale-150 group-hover:opacity-50"
+                aria-hidden="true"
+                style={{ background: theme.glow }}
+              />
+
+              {/* 底部装饰光晕 */}
+              <div
+                className="absolute -bottom-6 -left-6 w-20 h-20 rounded-full opacity-20 blur-2xl transition-all duration-700 group-hover:scale-125 group-hover:opacity-35"
+                aria-hidden="true"
+                style={{ background: theme.glow }}
               />
 
               <div className="relative flex h-full flex-col">
+                {/* 头部：图标 + 序号 */}
                 <div className="flex items-start justify-between gap-3 mb-4">
-                  <div className="w-11 h-11 rounded-2xl bg-primary/8 text-primary flex items-center justify-center shadow-inner shadow-primary/10">
+                  <div
+                    className="w-12 h-12 rounded-2xl flex items-center justify-center
+                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]
+                      transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]
+                      group-hover:scale-110 group-hover:rotate-6"
+                    style={{
+                      backgroundColor: theme.bgLight,
+                      color: theme.color,
+                    }}
+                  >
                     {iconMap[item.icon] ?? iconMap.store}
                   </div>
-                  <span className="text-[10px] font-semibold tracking-[0.24em] text-primary/45">
+                  <span
+                    className="text-[10px] font-semibold tracking-[0.24em] transition-colors duration-300"
+                    style={{ color: theme.color, opacity: 0.4 }}
+                  >
                     {String(index + 1).padStart(2, "0")}
                   </span>
                 </div>
 
+                {/* 标题 + 一句话价值主张 */}
                 <div className="mb-4">
-                  <h3 className="text-lg font-bold text-foreground mb-2">{item.name}</h3>
+                  <h3
-                  <p className="text-sm leading-6 text-muted-foreground min-h-[3rem]">
+                    className="text-xl font-bold mb-1.5 transition-colors duration-300"
+                    style={{ color: theme.color }}
+                  >
+                    {item.name}
+                  </h3>
+                  {item.tagline && (
+                    <p
+                      className="text-sm font-medium leading-snug mb-3"
+                      style={{ color: theme.color, opacity: 0.85 }}
+                    >
+                      {item.tagline}
+                    </p>
+                  )}
+                  <p className="text-[13px] leading-relaxed text-muted-foreground">
                     {item.desc}
                   </p>
                 </div>
 
-                <div className="mt-auto rounded-[1.25rem] border border-primary/10 bg-primary/6 px-4 py-4">
+                {/* 核心能力标签 */}
-                  <div className="flex items-center justify-between gap-3 mb-2.5">
+                {itemTags.length > 0 && (
-                    <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary/80">
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    {itemTags.map((tag: string, tagIndex: number) => (
+                      <span
+                        key={tagIndex}
+                        className="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-medium
+                          transition-all duration-300 group-hover:translate-y-[-2px]"
+                        style={{
+                          backgroundColor: `${theme.color}15`,
+                          color: theme.color,
+                        }}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                {/* 重点场景区块 - 虚线边框风格 */}
+                <div
+                  className="mt-auto rounded-xl px-4 py-3 transition-all duration-500
+                    border-2 border-dashed group-hover:border-solid"
+                  style={{
+                    backgroundColor: `${theme.color}08`,
+                    borderColor: `${theme.color}30`,
+                  }}
+                >
+                  <div className="flex items-center justify-between gap-3 mb-1.5">
+                    <p
+                      className="text-[10px] font-semibold uppercase tracking-[0.14em]"
+                      style={{ color: theme.color, opacity: 0.7 }}
+                    >
                       重点场景
                     </p>
-                    <ArrowRight className="w-3.5 h-3.5 text-primary/40 transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] group-hover:translate-x-1 group-hover:text-primary" />
+                    <ArrowRight
+                      className="w-3 h-3 transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] group-hover:translate-x-1"
+                      style={{ color: theme.color, opacity: 0.5 }}
+                    />
                   </div>
-                  <p className="text-sm leading-6 text-foreground/85 min-h-[4.5rem]">
+                  <p className="text-[13px] leading-relaxed text-foreground/75">
                     {item.focus}
                   </p>
                 </div>
               </div>
             </article>
-          ))}
+          )})}
         </div>
       </SectionReveal>
     </section>

data/home.json

@@ -141,38 +141,50 @@
     "items": [
       {
         "name": "连锁餐饮",
+        "tagline": "高峰收银不卡顿，外卖单据自动同步",
         "desc": "高峰收银、外卖同步、门店盘点与总部监管要同时跑稳。",
         "icon": "utensils",
+        "tags": ["高峰稳定", "外卖同步", "日结自动"],
         "focus": "重点解决高峰时段卡顿、外卖单据分散、日结耗时长的问题。"
       },
       {
         "name": "零售品牌",
+        "tagline": "库存促销一盘棋，会员数据全打通",
         "desc": "会员、促销、库存、导购数据需要打通到同一套经营视图。",
         "icon": "shopping-bag",
+        "tags": ["库存实时", "促销灵活", "会员统一"],
         "focus": "重点解决促销规则复杂、门店库存波动快、总部巡店响应慢的问题。"
       },
       {
         "name": "加盟连锁",
+        "tagline": "分账规则自动化，每笔账清清楚楚",
         "desc": "多加盟商、多结算主体、多抽成模式下，账要分得清、查得到。",
         "icon": "store",
+        "tags": ["自动分账", "结算透明", "纠纷可溯"],
         "focus": "重点解决分账口径不一致、结算滞后、加盟纠纷留痕不足的问题。"
       },
       {
         "name": "生活服务",
+        "tagline": "预约核销一条龙，员工提成自动算",
         "desc": "预约、核销、会员、员工提成和门店绩效往往分散在多个系统。",
         "icon": "scissors",
+        "tags": ["预约管理", "提成自动", "绩效可视"],
         "focus": "重点解决预约履约链路断裂、员工提成复杂、门店绩效核算慢的问题。"
       },
       {
         "name": "健身与教培",
+        "tagline": "课消续费自动流转，教练分成精准核算",
         "desc": "课消、续费、门店收入与教练分成需要按规则自动流转。",
         "icon": "dumbbell",
+        "tags": ["课消自动", "分成精准", "续费提醒"],
         "focus": "重点解决课消口径不统一、收入确认滞后、分成计算依赖人工的问题。"
       },
       {
         "name": "商业综合体",
+        "tagline": "多业态统一监管，数据底座一座通",
         "desc": "多商户、多业态并行，统一监管和统一数据底座是核心。",
         "icon": "car",
+        "tags": ["统一监管", "数据底座", "经营分析"],
         "focus": "重点解决商户数据孤岛、经营分析延迟、跨业态监管口径不一致的问题。"
       }
     ]