zhangxiangand阿睿
495f6d4eca
- 151 scripted + 1 manual duration fixes across 46 files - framer entrance 0.5/0.6s -> 0.3s - Tailwind hover -> duration-150, entrance -> duration-300 - preserve flip-clock/page-transition per semantic decision - design-system.ts dead-code deferred - P1 violations 156 -> 5; P0 remains 0; OK class 249 -> 400 - verified: tsc clean, eslint 0 errors - verified: 130/130 jest suites, 1573 passed - verified: visual regression 46/46 zero-pixel diff Co-Authored-By: 阿睿 <workbuddy@tencent.com>
90 lines
4.3 KiB
TypeScript
90 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useInView } from 'framer-motion';
|
|
import { useRef } from 'react';
|
|
import { METHODOLOGY } from '@/lib/constants/methodology';
|
|
import { CheckCircle2 } from 'lucide-react';
|
|
import { Card } from '@/components/ui/card';
|
|
|
|
const phaseBgOpacities = [0.1, 0.08, 0.12, 0.06];
|
|
|
|
export function MethodologySection() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
|
|
|
return (
|
|
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[var(--color-bg-section)]" ref={ref}>
|
|
<div className="container-wide">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
|
className="text-center max-w-3xl mx-auto mb-14"
|
|
>
|
|
<h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
|
实施<span className="text-[var(--color-brand)]">方法论</span>
|
|
</h2>
|
|
<p className="text-base text-[var(--color-text-muted)]">
|
|
经过核心团队实践打磨的四阶段模型，确保每个项目都能科学推进、高效落地
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
<div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
|
|
<div className="hidden md:block lg:hidden absolute left-[calc(50%+0.375rem)] top-0 bottom-0 w-px bg-[var(--color-border-primary)]" />
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
|
{METHODOLOGY.map((phase, idx) => {
|
|
const bgOpacity = phaseBgOpacities[idx % phaseBgOpacities.length];
|
|
return (
|
|
<Card
|
|
key={phase.id}
|
|
className="relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
|
>
|
|
<div className="p-6 md:p-8">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center mb-5 text-sm font-bold"
|
|
style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${bgOpacity})`, color: 'var(--color-brand)' }}
|
|
>
|
|
{phase.number}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{phase.title}</h3>
|
|
<p className="text-xs text-[var(--color-brand)] font-medium mb-3">{phase.subtitle}</p>
|
|
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5">{phase.description}</p>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-xs font-semibold text-[var(--color-text-primary)] mb-2 tracking-wide">核心活动</p>
|
|
<ul className="space-y-1.5">
|
|
{phase.activities.map((activity, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-muted)]">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand)] mt-0.5 shrink-0" />
|
|
{activity}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold text-[var(--color-text-primary)] mb-2 tracking-wide">交付物</p>
|
|
<ul className="space-y-1.5">
|
|
{phase.deliverables.map((deliverable, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-subtle)]">
|
|
<span className="w-1.5 h-1.5 bg-[var(--color-brand)]/40 rounded-full mt-1.5 shrink-0" />
|
|
{deliverable}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|