feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
124
components/sections/solutions-section.tsx
Normal file
124
components/sections/solutions-section.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { SectionReveal } from "@/components/ui/section-reveal"
|
||||
import {
|
||||
ArrowRight,
|
||||
Car,
|
||||
Dumbbell,
|
||||
Scissors,
|
||||
ShoppingBag,
|
||||
Store,
|
||||
Utensils,
|
||||
} from "lucide-react"
|
||||
import homeData from "@/data/home.json"
|
||||
|
||||
const iconMap: Record<string, React.ReactNode> = {
|
||||
utensils: <Utensils className="w-5 h-5" />,
|
||||
"shopping-bag": <ShoppingBag className="w-5 h-5" />,
|
||||
scissors: <Scissors className="w-5 h-5" />,
|
||||
dumbbell: <Dumbbell className="w-5 h-5" />,
|
||||
car: <Car className="w-5 h-5" />,
|
||||
store: <Store className="w-5 h-5" />,
|
||||
}
|
||||
|
||||
export function SolutionsSection() {
|
||||
const homeDataAny = homeData as any
|
||||
const solutions = homeDataAny.solutions ?? {
|
||||
sectionBadge: "行业方案",
|
||||
title: "覆盖多业态门店场景",
|
||||
subtitle: "面向餐饮、零售与综合商业体提供可落地的一站式智能化方案。",
|
||||
featured: {
|
||||
eyebrow: "方案设计思路",
|
||||
title: "不是卖一套通用软件,而是把关键流程接顺",
|
||||
description: "先梳理门店现有收银、结算、监管链路,再按行业共性与品牌个性组合能力模块。",
|
||||
points: [],
|
||||
metrics: [],
|
||||
},
|
||||
items: (Array.isArray(homeDataAny.cases?.items) ? homeDataAny.cases.items : []).map((item: any) => ({
|
||||
name: item.industry,
|
||||
desc: item.brand,
|
||||
icon: "store",
|
||||
focus: item.challenge,
|
||||
})),
|
||||
}
|
||||
|
||||
const featuredPoints = Array.isArray(solutions.featured?.points) ? solutions.featured.points : []
|
||||
const featuredMetrics = Array.isArray(solutions.featured?.metrics) ? solutions.featured.metrics : []
|
||||
|
||||
return (
|
||||
<section
|
||||
id="solutions"
|
||||
className="section-panel overflow-hidden lg:[padding-block:4.75rem_2.2rem]"
|
||||
style={{ background: "linear-gradient(180deg, oklch(0.985 0.004 260) 0%, oklch(0.97 0.008 260) 100%)" }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-55"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at 10% 12%, oklch(0.78 0.08 240 / 0.16) 0%, transparent 24%), radial-gradient(circle at 88% 70%, oklch(0.62 0.14 270 / 0.10) 0%, transparent 22%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<SectionReveal className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" delay={80}>
|
||||
<div className="text-center max-w-4xl mx-auto mb-6 lg:mb-7">
|
||||
<Badge variant="secondary" className="mb-4 text-primary border-primary/20 bg-primary/8 px-3 py-1">
|
||||
{solutions.sectionBadge}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-[2.8rem] font-extrabold text-foreground text-balance tracking-tight mb-3">
|
||||
{solutions.title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-base lg:text-lg leading-relaxed text-pretty max-w-3xl mx-auto">
|
||||
{solutions.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-5">
|
||||
{solutions.items.map((item: any, index: number) => (
|
||||
<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)]"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-x-0 top-0 h-24 opacity-70"
|
||||
aria-hidden="true"
|
||||
style={{ background: "linear-gradient(180deg, oklch(0.95 0.035 248) 0%, transparent 100%)" }}
|
||||
/>
|
||||
|
||||
<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">
|
||||
{iconMap[item.icon] ?? iconMap.store}
|
||||
</div>
|
||||
<span className="text-[10px] font-semibold tracking-[0.24em] text-primary/45">
|
||||
{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>
|
||||
<p className="text-sm leading-6 text-muted-foreground min-h-[3rem]">
|
||||
{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">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary/80">
|
||||
重点场景
|
||||
</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" />
|
||||
</div>
|
||||
<p className="text-sm leading-6 text-foreground/85 min-h-[4.5rem]">
|
||||
{item.focus}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</SectionReveal>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user