feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
81
components/sections/news-section.tsx
Normal file
81
components/sections/news-section.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Building2, TrendingUp, Quote } from "lucide-react"
|
||||
import homeData from "@/data/home.json"
|
||||
|
||||
export function NewsSection() {
|
||||
const { cases } = homeData
|
||||
|
||||
return (
|
||||
<section id="cases" 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"
|
||||
>
|
||||
{cases.sectionBadge}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
|
||||
{cases.title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
|
||||
{cases.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cases grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{cases.items.map((item, index) => (
|
||||
<Card
|
||||
key={item.brand}
|
||||
className="group border border-border bg-background hover:border-primary/35 hover:shadow-xl hover:shadow-primary/8 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
{/* Top accent bar */}
|
||||
<div className="h-1.5 bg-primary" style={{ opacity: 0.6 + index * 0.2 }} />
|
||||
|
||||
<CardContent className="p-7 flex flex-col gap-5">
|
||||
{/* Brand header */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 text-primary">
|
||||
<Building2 className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-sm text-foreground leading-snug">{item.brand}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{item.scale}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Challenge */}
|
||||
<div className="bg-neutral-50 rounded-xl p-4 border border-border">
|
||||
<div className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wide">
|
||||
<Quote className="w-3 h-3" />
|
||||
挑战
|
||||
</div>
|
||||
<p className="text-sm text-foreground leading-relaxed">{item.challenge}</p>
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
<div className="flex items-start gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-primary mt-0.5 shrink-0" />
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{item.result}</p>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-3 gap-2 pt-2 border-t border-border">
|
||||
{item.metrics.map((m) => (
|
||||
<div key={m.l} className="flex flex-col items-center text-center gap-0.5">
|
||||
<span className="text-xl font-black text-primary leading-none">{m.v}</span>
|
||||
<span className="text-[11px] text-muted-foreground leading-tight">{m.l}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user