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

feat: 优化全局样式与组件视觉升级

Browse Source 
- 更新 globals.css 全局样式
- 优化 not-found 404 页面
- 升级 footer, mega-dropdown, mobile-tab-bar 布局组件
- 改进 challenge, cta, hero 等核心 section 组件
- 优化 challenge-card, ink-glow-card, product-card 等 UI 组件
- 更新产品常量配置
This commit is contained in:
张翔
2026-05-19 16:35:10 +08:00
parent 7f6128a6ff
commit f7024b1cf4
17 changed files with 258 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+11 -7
View File
@@ -158,8 +158,8 @@
--color-text-primary: #E5E5E5;
--color-text-secondary: #B0B0B0;
--color-text-tertiary: #A0A0A0;
--color-text-muted: #8C8C8C;
--color-text-subtle: #666666;
--color-text-muted: #999999;
--color-text-subtle: #777777;
--color-text-placeholder: #737373;
--color-text-hint: #5C5C5C;
@@ -197,10 +197,10 @@
--color-footer-bg: #000000;
--color-cta-bg: #141414;
--color-hero-dark-end: #1A0A10;
--color-footer-text: #8C8C8C;
--color-footer-text-muted: #525252;
--color-footer-text-dim: #737373;
--color-footer-text-link: #B0B0B0;
--color-footer-text: #999999;
--color-footer-text-muted: #6B6B6B;
--color-footer-text-dim: #858585;
--color-footer-text-link: #C0C0C0;
--color-footer-border: #262626;
--color-challenge-isolation: rgba(196, 30, 58, 0.12);
@@ -536,7 +536,7 @@ body {
}
.ink-glow-border {
animation: rotateBorder 4s linear infinite;
animation: rotateBorder 4s linear infinite paused;
}
.ink-glow-border::before {
@@ -573,6 +573,10 @@ body {
opacity: 0.3;
}
.ink-glow-border:hover {
animation-play-state: running;
}
@media (min-width: 768px) and (max-width: 1023px) {
.container-wide,
.container-full {
src/app/not-found.tsx
+35 -58
View File
@@ -3,34 +3,30 @@
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { Home, ArrowLeft, Search } from 'lucide-react';
import { COMPANY_INFO } from '@/lib/constants';
export default function NotFound() {
return (
<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="max-w-xl mx-auto text-center">
<div className="mb-8">
<h1 className="text-[120px] font-bold text-[var(--color-brand-primary)] leading-none mb-4">
<h1 className="text-8xl sm:text-[120px] font-bold text-[var(--color-brand-primary)] leading-none mb-4 opacity-20">
404
</h1>
<div className="w-32 h-1 bg-[var(--color-brand-primary)] mx-auto mb-6" />
</div>
<h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
<h2 className="text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)] mb-4">
页面未找到
</h2>
<p className="text-lg text-[var(--color-text-placeholder)] mb-8 leading-relaxed">
很抱歉，您访问的页面不存在或已被移动。
请检查网址是否正确，或使用以下导航继续浏览。
<p className="text-base text-[var(--color-text-muted)] mb-8 leading-relaxed">
您访问的页面不存在或已被移动。请检查网址，或返回首页继续浏览。
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<Button
size="lg"
asChild
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,72 +44,53 @@ export default function NotFound() {
</Button>
</div>
<div className="bg-[var(--color-bg-section)] rounded-lg p-8">
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-6">
<div className="bg-[var(--color-bg-section)] rounded-xl p-6 sm:p-8">
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-5">
您可能在寻找
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<StaticLink
href="/about"
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-[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-[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-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<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-[var(--color-text-primary)]">服务</div>
<div className="text-sm text-[var(--color-text-placeholder)]">我们的服务</div>
</div>
</StaticLink>
<div className="grid grid-cols-2 gap-3">
<StaticLink
href="/products"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<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-[var(--color-text-primary)]">产品</div>
<div className="text-sm text-[var(--color-text-placeholder)]">企业级产品</div>
<div className="w-9 h-9 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-4 h-4 text-[var(--color-brand-primary)]" />
</div>
<span className="font-medium text-sm text-[var(--color-text-primary)]">产品</span>
</StaticLink>
<StaticLink
href="/solutions"
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<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 className="w-9 h-9 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-4 h-4 text-[var(--color-brand-primary)]" />
</div>
<div className="text-left">
<div className="font-semibold text-[var(--color-text-primary)]">解决方案</div>
<div className="text-sm text-[var(--color-text-placeholder)]">行业方案</div>
<span className="font-medium text-sm text-[var(--color-text-primary)]">解决方案</span>
</StaticLink>
<StaticLink
href="/about"
className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-9 h-9 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-4 h-4 text-[var(--color-brand-primary)]" />
</div>
<span className="font-medium text-sm text-[var(--color-text-primary)]">关于我们</span>
</StaticLink>
<StaticLink
href="/contact"
className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
>
<div className="w-9 h-9 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
<Search className="w-4 h-4 text-[var(--color-brand-primary)]" />
</div>
<span className="font-medium text-sm text-[var(--color-text-primary)]">联系我们</span>
</StaticLink>
</div>
</div>
<div className="mt-8 text-sm text-[var(--color-text-placeholder)]">
如果您认为这是一个错误，请{' '}
<StaticLink href="/contact" className="text-[var(--color-brand-primary)] hover:underline">
联系我们
</StaticLink>
</div>
</div>
</div>
</div>