张翔
99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
import Link from 'next/link';
|
|
import { Mail, Phone, MapPin } from 'lucide-react';
|
|
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-[#F5F7FA] border-t border-[#E2E8F0] py-12">
|
|
<div className="container-wide">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
|
<div className="lg:col-span-1">
|
|
<div className="flex items-center mb-6">
|
|
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
|
|
</div>
|
|
<p className="text-[#718096] text-sm leading-relaxed mb-6">
|
|
{COMPANY_INFO.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">快速链接</h3>
|
|
<ul className="space-y-3">
|
|
{NAVIGATION.map((item) => (
|
|
<li key={item.id}>
|
|
<a
|
|
href={item.href}
|
|
className="text-[#4A5568] hover:text-[#005EB8] transition-colors"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">服务项目</h3>
|
|
<ul className="space-y-3">
|
|
<li>
|
|
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
|
|
软件开发
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
|
|
云服务
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
|
|
数据分析
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
|
|
信息安全
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">联系方式</h3>
|
|
<ul className="space-y-4">
|
|
<li className="flex items-start gap-3">
|
|
<MapPin className="w-5 h-5 text-[#005EB8] mt-0.5" />
|
|
<span className="text-[#4A5568]">{COMPANY_INFO.address}</span>
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<Phone className="w-5 h-5 text-[#005EB8]" />
|
|
<span className="text-[#4A5568]">{COMPANY_INFO.phone}</span>
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<Mail className="w-5 h-5 text-[#005EB8]" />
|
|
<span className="text-[#4A5568]">{COMPANY_INFO.email}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-[#E2E8F0] mt-12 pt-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p className="text-[#718096] text-sm">
|
|
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
|
</p>
|
|
<div className="flex gap-6">
|
|
<Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
|
|
隐私政策
|
|
</Link>
|
|
<Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
|
|
服务条款
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|