feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
65
components/sections/team-section.tsx
Normal file
65
components/sections/team-section.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Utensils,
|
||||
ShoppingBag,
|
||||
Scissors,
|
||||
Dumbbell,
|
||||
Car,
|
||||
Store,
|
||||
ArrowRight,
|
||||
} from "lucide-react"
|
||||
import homeData from "@/data/home.json"
|
||||
|
||||
const iconMap: Record<string, React.ReactNode> = {
|
||||
"utensils": <Utensils className="w-6 h-6" />,
|
||||
"shopping-bag": <ShoppingBag className="w-6 h-6" />,
|
||||
"scissors": <Scissors className="w-6 h-6" />,
|
||||
"dumbbell": <Dumbbell className="w-6 h-6" />,
|
||||
"car": <Car className="w-6 h-6" />,
|
||||
"store": <Store className="w-6 h-6" />,
|
||||
}
|
||||
|
||||
export function TeamSection() {
|
||||
const { solutions } = homeData
|
||||
|
||||
return (
|
||||
<section id="solutions" className="py-20 lg:py-28 bg-background">
|
||||
<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"
|
||||
>
|
||||
{solutions.sectionBadge}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
|
||||
{solutions.title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
|
||||
{solutions.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Solutions grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{solutions.items.map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="group flex flex-col items-center text-center gap-3 bg-background border border-border rounded-2xl p-6 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/8 hover:-translate-y-1 transition-all duration-300 cursor-pointer"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/8 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
||||
{iconMap[item.icon]}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-foreground">{item.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">{item.desc}</p>
|
||||
</div>
|
||||
<ArrowRight className="w-3.5 h-3.5 text-muted-foreground/40 group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user