novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): 三轮视觉改造与页面过渡动画

Browse Source 
改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
2026-05-10 08:20:27 +08:00
parent 747405dc96
commit 37296b5717
133 changed files with 2583 additions and 13487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/methodology-section.tsx
+20 -19
View File
@@ -8,10 +8,10 @@ import { CheckCircle2 } from 'lucide-react';
import { InkGlowCard } from '@/components/ui/ink-glow-card';
const phaseAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
{ rgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)' },
{ rgb: '217, 119, 6', glowStart: 'var(--color-warning)', glowEnd: 'var(--color-success)' },
{ rgb: '22, 163, 74', glowStart: 'var(--color-success)', glowEnd: 'var(--color-accent-cyan)' },
{ rgb: '37, 99, 235', glowStart: 'var(--color-accent-blue)', glowEnd: 'var(--color-accent-purple)' },
];
export function MethodologySection() {
@@ -19,7 +19,7 @@ export function MethodologySection() {
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-[#FAFAFA]" ref={ref}>
<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 }}
@@ -27,16 +27,17 @@ export function MethodologySection() {
transition={{ duration: 0.5, 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-[#1C1C1C] mb-4">
实施<span className="text-[#C41E3A] font-calligraphy">方法论</span>
<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-primary)]">方法论</span>
</h2>
<p className="text-base text-[#595959]">
<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-[#E5E5E5] to-transparent" />
<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) => {
@@ -52,21 +53,21 @@ export function MethodologySection() {
<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: accent.glowStart, color: '#FFFFFF' }}
style={{ backgroundColor: accent.glowStart, color: 'var(--color-bg-primary)' }}
>
{phase.number}
</div>
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-1">{phase.title}</h3>
<p className="text-xs text-[#C41E3A] font-medium mb-3">{phase.subtitle}</p>
<p className="text-sm text-[#595959] leading-relaxed mb-5">{phase.description}</p>
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{phase.title}</h3>
<p className="text-xs text-[var(--color-brand-primary)] 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-[#1C1C1C] mb-2 tracking-wide">核心活动</p>
<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-[#595959]">
<CheckCircle2 className="w-3.5 h-3.5 text-[#C41E3A] mt-0.5 shrink-0" />
<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-primary)] mt-0.5 shrink-0" />
{activity}
</li>
))}
@@ -74,11 +75,11 @@ export function MethodologySection() {
</div>
<div>
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">交付物</p>
<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-[#A3A3A3]">
<span className="w-1.5 h-1.5 bg-[#C41E3A]/40 rounded-full mt-1.5 shrink-0" />
<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-primary)]/40 rounded-full mt-1.5 shrink-0" />
{deliverable}
</li>
))}