张翔
9451814ca4
refactor: 重构页面结构和导航逻辑 fix: 修复移动端菜单导航和滚动行为 perf: 优化图片加载性能和资源请求 test: 添加端到端测试和性能测试用例 docs: 更新.gitignore文件 chore: 更新依赖和配置 style: 优化代码格式和类型安全 ci: 调整Playwright测试超时时间 build: 更新Next.js配置和构建选项
121 lines
4.8 KiB
TypeScript
121 lines
4.8 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Home, ArrowLeft, Search } from 'lucide-react';
|
||
|
||
export default function NotFound() {
|
||
return (
|
||
<div className="min-h-screen bg-white 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">
|
||
404
|
||
</h1>
|
||
<div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6"></div>
|
||
</div>
|
||
|
||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
|
||
页面未找到
|
||
</h2>
|
||
|
||
<p className="text-lg text-[#5C5C5C] 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-[#C41E3A] hover:bg-[#A01830] text-white"
|
||
>
|
||
<Link href="/">
|
||
<Home className="w-5 h-5 mr-2" />
|
||
返回首页
|
||
</Link>
|
||
</Button>
|
||
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => window.history.back()}
|
||
>
|
||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||
返回上一页
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="bg-[#FAFAFA] rounded-lg p-8">
|
||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
|
||
您可能在寻找
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<Link
|
||
href="/about"
|
||
className="flex items-center p-4 bg-white 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>
|
||
<div className="text-left">
|
||
<div className="font-semibold text-[#1C1C1C]">关于我们</div>
|
||
<div className="text-sm text-[#5C5C5C]">了解睿新致远</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/services"
|
||
className="flex items-center p-4 bg-white 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>
|
||
<div className="text-left">
|
||
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
|
||
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/products"
|
||
className="flex items-center p-4 bg-white 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>
|
||
<div className="text-left">
|
||
<div className="font-semibold text-[#1C1C1C]">产品服务</div>
|
||
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/cases"
|
||
className="flex items-center p-4 bg-white 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>
|
||
<div className="text-left">
|
||
<div className="font-semibold text-[#1C1C1C]">成功案例</div>
|
||
<div className="text-sm text-[#5C5C5C]">客户故事</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 text-sm text-[#5C5C5C]">
|
||
如果您认为这是一个错误，请{' '}
|
||
<Link href="/contact" className="text-[#C41E3A] hover:underline">
|
||
联系我们
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|