feat: 添加连锁门店系统首页及核心UI组件

新增首页布局、导航栏、页脚及多个核心UI组件（按钮、卡片、表格等）
添加图片资源、工具函数和样式配置
实现响应式设计和主题支持
包含行业解决方案展示区块

components/sections/about-section.tsx

@@ -0,0 +1,76 @@
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Zap,
+  ShieldCheck,
+  Layers,
+  BarChart3,
+  Headset,
+  Cloud,
+} from "lucide-react"
+import homeData from "@/data/home.json"
+
+const iconMap: Record<string, React.ReactNode> = {
+  "zap":          <Zap className="w-5 h-5" />,
+  "shield-check": <ShieldCheck className="w-5 h-5" />,
+  "layers":       <Layers className="w-5 h-5" />,
+  "bar-chart-3":  <BarChart3 className="w-5 h-5" />,
+  "headset":      <Headset className="w-5 h-5" />,
+  "cloud":        <Cloud className="w-5 h-5" />,
+}
+
+export function AboutSection() {
+  const { advantages } = homeData
+
+  return (
+    <section id="advantages" className="py-20 lg:py-28 bg-neutral-50/80">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="flex flex-col items-center text-center gap-4 mb-14">
+          <Badge
+            variant="outline"
+            className="border-primary/30 text-primary bg-primary-light px-4 py-1 text-sm font-medium"
+          >
+            {advantages.sectionBadge}
+          </Badge>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
+            {advantages.title}
+          </h2>
+          <p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
+            {advantages.subtitle}
+          </p>
+        </div>
+
+        {/* 3x2 grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {advantages.items.map((item, index) => (
+            <Card
+              key={item.title}
+              className="group relative border border-border bg-background hover:border-primary/35 hover:shadow-lg hover:shadow-primary/8 transition-all duration-300 overflow-hidden"
+            >
+              {/* Top accent line */}
+              <div className="absolute top-0 left-0 right-0 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
+
+              <CardContent className="p-7 flex flex-col gap-4">
+                {/* Icon */}
+                <div className="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300 shadow-sm">
+                  {iconMap[item.icon]}
+                </div>
+
+                {/* Index number */}
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="text-base font-bold text-foreground leading-snug">{item.title}</h3>
+                  <span className="text-2xl font-black text-border group-hover:text-primary/20 transition-colors shrink-0 leading-none mt-0.5">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                </div>
+
+                <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}