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/app/not-found.tsx
+30 -30
View File
@@ -7,21 +7,21 @@ import { COMPANY_INFO } from '@/lib/constants';
export default function NotFound() {
return (
<div className="min-h-screen bg-white flex items-center justify-center">
<div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
<div className="container-wide px-4 py-20">
<div className="max-w-2xl mx-auto text-center">
<div className="mb-8">
<h1 className="text-[120px] font-bold text-[#C41E3A] leading-none mb-4">
<h1 className="text-[120px] font-bold text-[var(--color-brand-primary)] leading-none mb-4">
404
</h1>
<div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6" />
<div className="w-32 h-1 bg-[var(--color-brand-primary)] mx-auto mb-6" />
</div>
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
<h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
页面未找到
</h2>
<p className="text-lg text-[#5C5C5C] mb-8 leading-relaxed">
<p className="text-lg text-[var(--color-text-placeholder)] mb-8 leading-relaxed">
很抱歉，您访问的页面不存在或已被移动。
请检查网址是否正确，或使用以下导航继续浏览。
</p>
@@ -30,7 +30,7 @@ export default function NotFound() {
<Button
size="lg"
asChild
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
>
<StaticLink href="/">
<Home className="w-5 h-5 mr-2" />
@@ -48,69 +48,69 @@ export default function NotFound() {
</Button>
</div>
<div className="bg-[#FAFAFA] rounded-lg p-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
<div className="bg-[var(--color-bg-section)] rounded-lg p-8">
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-6">
您可能在寻找
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<StaticLink
href="/about"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">关于我们</div>
<div className="text-sm text-[#5C5C5C]">了解{COMPANY_INFO.displayName}</div>
<div className="font-semibold text-[var(--color-text-primary)]">关于我们</div>
<div className="text-sm text-[var(--color-text-placeholder)]">了解{COMPANY_INFO.displayName}</div>
</div>
</StaticLink>
<StaticLink
href="/services"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">服务</div>
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
<div className="font-semibold text-[var(--color-text-primary)]">服务</div>
<div className="text-sm text-[var(--color-text-placeholder)]">我们的服务</div>
</div>
</StaticLink>
<StaticLink
href="/products"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">产品</div>
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
<div className="font-semibold text-[var(--color-text-primary)]">产品</div>
<div className="text-sm text-[var(--color-text-placeholder)]">企业级产品</div>
</div>
</StaticLink>
<StaticLink
href="/solutions"
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
<Search className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<div className="text-left">
<div className="font-semibold text-[#1C1C1C]">解决方案</div>
<div className="text-sm text-[#5C5C5C]">行业方案</div>
<div className="font-semibold text-[var(--color-text-primary)]">解决方案</div>
<div className="text-sm text-[var(--color-text-placeholder)]">行业方案</div>
</div>
</StaticLink>
</div>
</div>
<div className="mt-8 text-sm text-[#5C5C5C]">
<div className="mt-8 text-sm text-[var(--color-text-placeholder)]">
如果您认为这是一个错误，请{' '}
<StaticLink href="/contact" className="text-[#C41E3A] hover:underline">
<StaticLink href="/contact" className="text-[var(--color-brand-primary)] hover:underline">
联系我们
</StaticLink>
</div>