feat: 添加连锁门店系统首页及核心UI组件
新增首页布局、导航栏、页脚及多个核心UI组件(按钮、卡片、表格等) 添加图片资源、工具函数和样式配置 实现响应式设计和主题支持 包含行业解决方案展示区块
This commit is contained in:
71
components/sections/partners-section.tsx
Normal file
71
components/sections/partners-section.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ArrowRight } from "lucide-react"
|
||||
import homeData from "@/data/home.json"
|
||||
|
||||
export function PartnersSection() {
|
||||
const { process } = homeData
|
||||
|
||||
return (
|
||||
<section id="process" className="py-20 lg:py-24 bg-primary relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 pointer-events-none" aria-hidden="true">
|
||||
<div
|
||||
className="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full opacity-10"
|
||||
style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-32 -left-32 w-[400px] h-[400px] rounded-full opacity-8"
|
||||
style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
|
||||
/>
|
||||
{/* Grid lines */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)`,
|
||||
backgroundSize: "60px 60px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative 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-white/30 text-white bg-white/10 px-4 py-1 text-sm font-medium"
|
||||
>
|
||||
{process.sectionBadge}
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white text-balance">
|
||||
{process.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 relative">
|
||||
{/* Connector line (desktop only) */}
|
||||
<div className="hidden md:block absolute top-10 left-[calc(16.67%+2rem)] right-[calc(16.67%+2rem)] h-0.5 bg-white/20" aria-hidden="true" />
|
||||
|
||||
{process.steps.map((step, i) => (
|
||||
<div key={step.num} className="relative flex flex-col items-center text-center gap-5">
|
||||
{/* Step number circle */}
|
||||
<div className="relative w-20 h-20 rounded-full bg-white/12 border-2 border-white/25 flex items-center justify-center shrink-0 shadow-lg">
|
||||
<span className="text-2xl font-black text-white">{step.num}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xl font-bold text-white">{step.title}</h3>
|
||||
<p className="text-white/65 text-sm leading-relaxed max-w-xs">{step.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Arrow between steps */}
|
||||
{i < process.steps.length - 1 && (
|
||||
<ArrowRight className="hidden md:block absolute top-8 -right-6 w-5 h-5 text-white/30" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user