feat(website): 三轮视觉改造与页面过渡动画
改造概要(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:
+24
-24
@@ -17,32 +17,32 @@ export default function Error({
|
||||
}, [error]);
|
||||
|
||||
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">
|
||||
<div className="w-24 h-24 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-12 h-12 text-[#C41E3A]" />
|
||||
<div className="w-24 h-24 bg-[var(--color-brand-primary-bg)] rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-12 h-12 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="w-32 h-1 bg-[#C41E3A] mx-auto" />
|
||||
<div className="w-32 h-1 bg-[var(--color-brand-primary)] mx-auto" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold text-[#1C1C1C] mb-4">
|
||||
<h1 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
|
||||
出现了一些问题
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-placeholder)] mb-6 leading-relaxed">
|
||||
很抱歉,我们遇到了一个意外错误。
|
||||
请尝试刷新页面,或返回首页继续浏览。
|
||||
</p>
|
||||
|
||||
{error.message && (
|
||||
<div className="bg-[#FAFAFA] border border-[#E5E5E5] rounded-lg p-4 mb-8 text-left">
|
||||
<p className="text-sm text-[#5C5C5C] font-mono">
|
||||
<div className="bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] rounded-lg p-4 mb-8 text-left">
|
||||
<p className="text-sm text-[var(--color-text-placeholder)] font-mono">
|
||||
错误信息: {error.message}
|
||||
</p>
|
||||
{error.digest && (
|
||||
<p className="text-xs text-[#5C5C5C] mt-2 font-mono">
|
||||
<p className="text-xs text-[var(--color-text-placeholder)] mt-2 font-mono">
|
||||
错误ID: {error.digest}
|
||||
</p>
|
||||
)}
|
||||
@@ -53,7 +53,7 @@ export default function Error({
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={reset}
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
|
||||
>
|
||||
<RefreshCw className="w-5 h-5 mr-2" />
|
||||
重试
|
||||
@@ -71,43 +71,43 @@ export default function Error({
|
||||
</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="/contact"
|
||||
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">
|
||||
<AlertTriangle 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">
|
||||
<AlertTriangle 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="/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">
|
||||
<RefreshCw 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">
|
||||
<RefreshCw 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>
|
||||
|
||||
Reference in New Issue
Block a user