HaoAws/components/Footer.tsx
2025-09-16 16:37:48 +08:00

153 lines
8.1 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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>
);
}