feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
90
components/sections/advantages-section.tsx
Normal file
90
components/sections/advantages-section.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Zap, ShieldCheck, Layers, BarChart3, Headset, Cloud, Settings2, CloudCog, Link2, TrendingUp,
|
||||
} from "lucide-react"
|
||||
import { SectionReveal } from "@/components/ui/section-reveal"
|
||||
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" />,
|
||||
"Zap": <Zap className="w-5 h-5" />,
|
||||
"Settings2": <Settings2 className="w-5 h-5" />,
|
||||
"CloudCog": <CloudCog className="w-5 h-5" />,
|
||||
"Headphones": <Headset className="w-5 h-5" />,
|
||||
"Link2": <Link2 className="w-5 h-5" />,
|
||||
"TrendingUp": <TrendingUp className="w-5 h-5" />,
|
||||
}
|
||||
|
||||
export function AdvantagesSection() {
|
||||
const { advantages } = homeData
|
||||
|
||||
return (
|
||||
<section
|
||||
id="advantages"
|
||||
className="section-panel overflow-hidden"
|
||||
style={{ background: "oklch(0.97 0.006 260)" }}
|
||||
>
|
||||
{/* Subtle background decoration */}
|
||||
<div
|
||||
className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[400px] opacity-[0.06] pointer-events-none"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
background: "radial-gradient(ellipse at center, oklch(0.46 0.22 264) 0%, transparent 70%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<SectionReveal className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative" delay={60}>
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<Badge variant="secondary" className="mb-4 text-primary border-primary/20 bg-primary/8 px-3 py-1">
|
||||
{advantages.sectionBadge ?? advantages.sectionTag}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-foreground text-balance mb-4 tracking-tight">
|
||||
{advantages.title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg leading-relaxed text-pretty">
|
||||
{advantages.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{advantages.items.map((item, i) => (
|
||||
<article
|
||||
key={item.title}
|
||||
className="group relative bg-white border border-border rounded-2xl p-7 hover:shadow-xl hover:shadow-primary/8 hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
{/* Number watermark */}
|
||||
<span
|
||||
className="absolute top-5 right-6 text-6xl font-black text-muted/20 leading-none select-none pointer-events-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="w-12 h-12 rounded-2xl bg-primary/8 text-primary flex items-center justify-center mb-5 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
|
||||
{iconMap[item.icon] ?? iconMap.zap}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-foreground mb-2">{item.title}</h3>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">{item.description}</p>
|
||||
|
||||
{/* Bottom accent line */}
|
||||
<div className="absolute bottom-0 left-6 right-6 h-px bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left rounded-full" />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</SectionReveal>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user