125 lines
5.4 KiB
TypeScript
125 lines
5.4 KiB
TypeScript
import { motion } from 'framer-motion'
|
||
import { Building2, Mail, MapPin, Phone } from 'lucide-react'
|
||
import { Link, useLocation } from 'react-router-dom'
|
||
import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants'
|
||
import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'
|
||
|
||
export const Footer: React.FC = () => {
|
||
const location = useLocation()
|
||
const locale = getLocaleFromPathname(location.pathname)
|
||
const currentYear = new Date().getFullYear()
|
||
|
||
return (
|
||
<footer className="bg-primary-dark text-white" role="contentinfo">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||
<div className="space-y-5">
|
||
<Link
|
||
to={withLocalePath(locale, '/')}
|
||
className="inline-flex items-center gap-3"
|
||
aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
|
||
>
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent text-primary-dark">
|
||
<Building2 size={22} />
|
||
</div>
|
||
<div>
|
||
<div className="text-base font-semibold">{locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name}</div>
|
||
<div className="text-[11px] tracking-wider text-white/70">{COMPANY_INFO.nameEn.toUpperCase()}</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<p className="text-sm text-white/75 leading-relaxed max-w-sm">{COMPANY_INFO.description}</p>
|
||
|
||
<ul className="space-y-2 text-sm text-white/75">
|
||
<li className="flex items-start gap-2">
|
||
<MapPin size={16} className="mt-0.5 text-accent" />
|
||
<span>{COMPANY_INFO.headquarters}</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<Phone size={16} className="mt-0.5 text-accent" />
|
||
<span>{COMPANY_INFO.phone}</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<Mail size={16} className="mt-0.5 text-accent" />
|
||
<span>{COMPANY_INFO.email}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
|
||
{locale === 'en' ? 'Navigation' : '网站导航'}
|
||
</h2>
|
||
<ul className="mt-4 space-y-2 text-sm">
|
||
{NAVIGATION_MENU.filter((n) => n.id !== 'home').map((n) => (
|
||
<li key={n.id}>
|
||
<Link
|
||
to={withLocalePath(locale, n.path)}
|
||
className="text-white/75 hover:text-white transition-colors"
|
||
>
|
||
{locale === 'en'
|
||
? n.id === 'about'
|
||
? 'About'
|
||
: n.id === 'scope'
|
||
? 'Services'
|
||
: n.id === 'cases'
|
||
? 'Cases'
|
||
: n.id === 'news'
|
||
? 'News'
|
||
: n.id === 'learning'
|
||
? 'Learning'
|
||
: n.id === 'assistant'
|
||
? 'AI Assistant'
|
||
: n.id === 'contact'
|
||
? 'Contact'
|
||
: n.label
|
||
: n.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
|
||
{locale === 'en' ? 'Notes' : '说明'}
|
||
</h2>
|
||
<p className="mt-4 text-sm text-white/75 leading-relaxed">
|
||
{locale === 'en'
|
||
? 'This website is a placeholder version. Content and data will be updated after official materials are provided.'
|
||
: '本网站为占位版本，内容与数据后续将根据集团正式资料完善与更新。'}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
|
||
{locale === 'en' ? 'Contact' : '联系'}
|
||
</h2>
|
||
<div className="mt-4 space-y-3 text-sm text-white/75">
|
||
<div>
|
||
<div className="text-white/60">{locale === 'en' ? 'Email' : '邮箱'}</div>
|
||
<div className="text-white/85">{COMPANY_INFO.email}</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-white/60">{locale === 'en' ? 'Phone' : '电话'}</div>
|
||
<div className="text-white/85">{COMPANY_INFO.phone}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-white/10">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
|
||
<motion.p className="text-xs text-white/60" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}>
|
||
© {currentYear} {COMPANY_INFO.fullName}. {locale === 'en' ? 'All rights reserved.' : '版权所有。'}
|
||
</motion.p>
|
||
<p className="text-xs text-white/50">{locale === 'en' ? 'ICP filing: TBD' : 'ICP备案：待补充'}</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)
|
||
}
|
||
|
||
export default Footer
|