feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
90
components/sections/cases-section.tsx
Normal file
90
components/sections/cases-section.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { SectionReveal } from "@/components/ui/section-reveal"
|
||||
import { TrendingUp, Quote } from "lucide-react"
|
||||
import homeData from "@/data/home.json"
|
||||
|
||||
export function CasesSection() {
|
||||
const { cases } = homeData
|
||||
const sectionBadge = (cases as any).sectionBadge ?? (cases as any).sectionTag
|
||||
const caseItems = (Array.isArray((cases as any).items) ? (cases as any).items : []).map((item: any) => ({
|
||||
...item,
|
||||
result: item.result ?? item.solution ?? "",
|
||||
metrics: Array.isArray(item.metrics)
|
||||
? item.metrics
|
||||
: (Array.isArray(item.results) ? item.results.map((m: any) => ({ l: m.metric, v: m.value })) : []),
|
||||
}))
|
||||
|
||||
return (
|
||||
<section id="cases" className="section-panel bg-background">
|
||||
<SectionReveal className="w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8" delay={120}>
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<Badge variant="secondary" className="mb-4 text-primary border-primary/20 bg-primary/8 px-3 py-1">
|
||||
{sectionBadge}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-foreground text-balance tracking-tight mb-4">
|
||||
{cases.title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg leading-relaxed text-pretty">
|
||||
{cases.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Case cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
|
||||
{caseItems.map((c) => (
|
||||
<article
|
||||
key={c.brand}
|
||||
className="group relative flex h-full flex-col lg:col-span-4 bg-white border border-border rounded-[2rem] p-8 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div className="flex flex-col gap-6 flex-1">
|
||||
{/* Brand & scale */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-primary/8 px-3 py-1 text-xs font-semibold text-primary mb-3">
|
||||
{c.industry}
|
||||
</span>
|
||||
<h3 className="font-bold text-foreground text-xl leading-tight mb-2">{c.brand}</h3>
|
||||
<span className="inline-flex text-xs text-muted-foreground bg-muted rounded-full px-3 py-1">
|
||||
{c.scale}
|
||||
</span>
|
||||
</div>
|
||||
<TrendingUp className="w-5 h-5 text-primary shrink-0 mt-0.5" />
|
||||
</div>
|
||||
|
||||
{/* Challenge */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-1.5">遇到的挑战</p>
|
||||
<p className="text-sm text-foreground leading-relaxed">{c.challenge}</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border" />
|
||||
|
||||
{/* Result */}
|
||||
<div className="flex gap-2">
|
||||
<Quote className="w-4 h-4 text-primary shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-muted-foreground leading-relaxed italic">{c.result}</p>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-3 gap-4 mt-auto pt-2">
|
||||
{c.metrics.map((m) => (
|
||||
<div key={m.l} className="flex flex-col items-center text-center bg-primary/6 rounded-2xl py-4 px-3">
|
||||
<span className="text-xl font-black text-primary leading-none mb-1">{m.v}</span>
|
||||
<span className="text-[10px] text-muted-foreground leading-tight">{m.l}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</SectionReveal>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user