112 lines
4.0 KiB
TypeScript
112 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { SectionReveal } from "@/components/ui/section-reveal"
|
|
import { ArrowRight } from "lucide-react"
|
|
import { useParallax } from "@/hooks/use-parallax"
|
|
import homeData from "@/data/home.json"
|
|
import Link from "next/link"
|
|
|
|
export function ProcessSection() {
|
|
const homeDataAny = homeData as any
|
|
const process = homeDataAny.process ?? homeDataAny.howItWorks
|
|
const sectionBadge = process?.sectionBadge ?? process?.sectionTag
|
|
const steps = (Array.isArray(process?.steps) ? process.steps : []).map((step: any) => ({
|
|
...step,
|
|
num: step.num ?? step.number,
|
|
}))
|
|
const { ref: bgRef, translateY: bgY } = useParallax(0.2)
|
|
|
|
if (!process) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="process"
|
|
className="section-panel overflow-hidden"
|
|
>
|
|
{/* Parallax dark background */}
|
|
<div
|
|
ref={bgRef}
|
|
className="absolute inset-[-15%] will-change-transform"
|
|
style={{ transform: `translateY(${bgY})` }}
|
|
aria-hidden="true"
|
|
>
|
|
<div className="absolute inset-0 bg-surface-dark" />
|
|
{/* Dot grid */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.07]"
|
|
style={{
|
|
backgroundImage: "radial-gradient(circle, oklch(1 0 0 / 1) 1px, transparent 1px)",
|
|
backgroundSize: "32px 32px",
|
|
}}
|
|
/>
|
|
{/* Blue glow */}
|
|
<div
|
|
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] opacity-20"
|
|
style={{
|
|
background: "radial-gradient(ellipse at center bottom, oklch(0.46 0.22 264) 0%, transparent 70%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<SectionReveal className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" delay={100}>
|
|
|
|
{/* Header */}
|
|
<div className="text-center max-w-xl mx-auto mb-16">
|
|
<Badge className="mb-4 bg-primary/20 text-primary border-primary/30 px-3 py-1">
|
|
{sectionBadge}
|
|
</Badge>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white text-balance tracking-tight">
|
|
{process.title}
|
|
</h2>
|
|
<p className="text-white/65 leading-relaxed text-pretty mt-4">
|
|
{process.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Steps */}
|
|
<div className="relative grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Connector line (desktop) */}
|
|
<div
|
|
className="hidden md:block absolute top-10 left-[calc(16.7%+1rem)] right-[calc(16.7%+1rem)] h-px border-t border-dashed border-white/20"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{steps.map((step) => (
|
|
<article key={step.num} className="relative flex flex-col items-center text-center gap-5">
|
|
{/* Number circle */}
|
|
<div className="relative z-10 w-20 h-20 rounded-full border-2 border-primary bg-surface-dark flex items-center justify-center shadow-lg shadow-primary/20">
|
|
<span className="text-2xl font-black text-primary">{step.num}</span>
|
|
</div>
|
|
|
|
{/* Content card */}
|
|
<div className="bg-white/6 backdrop-blur-sm border border-white/10 rounded-2xl p-6 w-full">
|
|
<h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
|
|
<p className="text-white/60 text-sm leading-relaxed">{step.description}</p>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="mt-14 flex justify-center">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-primary hover:bg-primary-dark text-white shadow-xl shadow-primary/30 px-8 h-12 text-base font-semibold group"
|
|
>
|
|
<Link href="#contact" className="flex items-center gap-2">
|
|
预约方案诊断
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
</SectionReveal>
|
|
</section>
|
|
)
|
|
}
|