153 lines
8.1 KiB
TypeScript
153 lines
8.1 KiB
TypeScript
|
import Link from 'next/link';
|
|||
|
|
import { Locale } from '@/lib/i18n';
|
|||
|
|
|
|||
|
|
interface FooterProps {
|
|||
|
|
locale: Locale;
|
|||
|
|
navigation: Array<{ name: string; href: string }>;
|
|||
|
|
common: {
|
|||
|
|
companyName: string;
|
|||
|
|
footer: {
|
|||
|
|
quickLinks: string;
|
|||
|
|
contactInfo: string;
|
|||
|
|
followUs: string;
|
|||
|
|
copyright: string;
|
|||
|
|
email: string;
|
|||
|
|
phone: string;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Footer({ locale, navigation, common }: FooterProps) {
|
|||
|
|
const getCompanyDescription = () => {
|
|||
|
|
switch (locale) {
|
|||
|
|
case 'zh-CN':
|
|||
|
|
return '我们致力于为客户提供专业的AWS云服务解决方案，助力企业数字化转型';
|
|||
|
|
case 'zh-TW':
|
|||
|
|
return '我們致力於為客戶提供專業的AWS雲端服務解決方案，助力企業數位化轉型';
|
|||
|
|
case 'en':
|
|||
|
|
return 'We are committed to providing professional AWS cloud services solutions to help enterprises with digital transformation';
|
|||
|
|
default:
|
|||
|
|
return '我们致力于为客户提供专业的AWS云服务解决方案，助力企业数字化转型';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<footer className="py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
|
|||
|
|
<div className="max-w-6xl mx-auto">
|
|||
|
|
<div className="grid md:grid-cols-4 gap-8 mb-8">
|
|||
|
|
{/* Company Info */}
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-light text-lg mb-4 text-gray-900">
|
|||
|
|
{common.companyName}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-600 font-light text-sm leading-relaxed">
|
|||
|
|
{getCompanyDescription()}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Quick Links */}
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-light mb-4 text-gray-900">
|
|||
|
|
{common.footer.quickLinks}
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{navigation.slice(1).map((item) => (
|
|||
|
|
<li key={item.name}>
|
|||
|
|
<Link
|
|||
|
|
href={item.href}
|
|||
|
|
className="text-gray-600 hover:text-gray-900 font-light text-sm transition-colors"
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</Link>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Contact Info */}
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-light mb-4 text-gray-900">
|
|||
|
|
{common.footer.contactInfo}
|
|||
|
|
</h4>
|
|||
|
|
<div className="space-y-2 text-sm font-light text-gray-600">
|
|||
|
|
<p>
|
|||
|
|
<a href={`mailto:${common.footer.email}`} className="hover:text-gray-900 transition-colors">
|
|||
|
|
{common.footer.email}
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<a href="https://wa.me/19174029875" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900 transition-colors">
|
|||
|
|
WhatsApp: +1 917-402-9875
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Social Links */}
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-light mb-4 text-gray-900">
|
|||
|
|
{common.footer.followUs}
|
|||
|
|
</h4>
|
|||
|
|
<div className="flex space-x-4">
|
|||
|
|
{/* Telegram */}
|
|||
|
|
<a
|
|||
|
|
href="https://t.me/haoaws_official"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="text-gray-600 hover:text-blue-500 transition-colors"
|
|||
|
|
title="Telegram"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16l-1.642 7.702c-.123.559-.45.696-.913.433l-2.523-1.858-1.217 1.17c-.135.135-.249.249-.51.249l.182-2.576 4.71-4.253c.205-.182-.045-.283-.318-.1l-5.825 3.668-2.515-.785c-.547-.171-.558-.547.114-.81l9.826-3.784c.456-.171.856.1.706.81z"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
{/* WhatsApp (as social link) */}
|
|||
|
|
<a
|
|||
|
|
href="https://wa.me/19174029875"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="text-gray-600 hover:text-green-500 transition-colors"
|
|||
|
|
title="WhatsApp"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
{/* Placeholder for future social icons */}
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="text-gray-300 hover:text-green-500 transition-colors opacity-50 cursor-not-allowed"
|
|||
|
|
title="WeChat (Coming Soon)"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.152 4.203 2.943 5.539-.192.64-.576 1.627-.576 1.627s.96-.32 2.304-.8c.48.128.992.256 1.536.256 4.8 0 8.691-3.264 8.691-7.296 0-4.032-3.891-7.296-8.691-7.296z"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Copyright */}
|
|||
|
|
<div className="pt-8 border-t border-gray-100">
|
|||
|
|
<p className="text-center text-gray-500 text-sm font-light">
|
|||
|
|
{common.footer.copyright}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
);
|
|||
|
|
}
|