538 lines
22 KiB
TypeScript
538 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Mail,
|
|
Phone,
|
|
MapPin,
|
|
Globe,
|
|
Facebook,
|
|
Twitter,
|
|
Linkedin,
|
|
Youtube,
|
|
ArrowUp,
|
|
} from 'lucide-react';
|
|
import { useState, useEffect } from 'react';
|
|
|
|
interface FooterProps {
|
|
currentLang: string;
|
|
translations: any;
|
|
}
|
|
|
|
export function Footer({ currentLang, translations }: FooterProps) {
|
|
const [showScrollTop, setShowScrollTop] = useState(false);
|
|
|
|
const t = translations[currentLang];
|
|
|
|
// Show scroll to top button when user scrolls down
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setShowScrollTop(window.scrollY > 300);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
});
|
|
};
|
|
|
|
const footerLinks = {
|
|
products: {
|
|
title:
|
|
currentLang === 'zh'
|
|
? '产品服务'
|
|
: currentLang === 'zh-tw'
|
|
? '產品服務'
|
|
: 'Products & Services',
|
|
links: [
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '云服务器 ECS'
|
|
: currentLang === 'zh-tw'
|
|
? '雲伺服器 ECS'
|
|
: 'Cloud Server ECS',
|
|
href: '/products/ecs',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '云数据库 RDS'
|
|
: currentLang === 'zh-tw'
|
|
? '雲資料庫 RDS'
|
|
: 'Cloud Database RDS',
|
|
href: '/products/rds',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '负载均衡 SLB'
|
|
: currentLang === 'zh-tw'
|
|
? '負載平衡 SLB'
|
|
: 'Load Balancer SLB',
|
|
href: '/products/slb',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '对象存储 OSS'
|
|
: currentLang === 'zh-tw'
|
|
? '物件儲存 OSS'
|
|
: 'Object Storage OSS',
|
|
href: '/products/oss',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? 'CDN 加速'
|
|
: currentLang === 'zh-tw'
|
|
? 'CDN 加速'
|
|
: 'CDN Acceleration',
|
|
href: '/products/cdn',
|
|
},
|
|
],
|
|
},
|
|
solutions: {
|
|
title:
|
|
currentLang === 'zh'
|
|
? '解决方案'
|
|
: currentLang === 'zh-tw'
|
|
? '解決方案'
|
|
: 'Solutions',
|
|
links: [
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '企业上云'
|
|
: currentLang === 'zh-tw'
|
|
? '企業上雲'
|
|
: 'Enterprise Cloud',
|
|
href: '/solutions/enterprise',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '数据备份'
|
|
: currentLang === 'zh-tw'
|
|
? '資料備份'
|
|
: 'Data Backup',
|
|
href: '/solutions/backup',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '灾难恢复'
|
|
: currentLang === 'zh-tw'
|
|
? '災難恢復'
|
|
: 'Disaster Recovery',
|
|
href: '/solutions/recovery',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '混合云'
|
|
: currentLang === 'zh-tw'
|
|
? '混合雲'
|
|
: 'Hybrid Cloud',
|
|
href: '/solutions/hybrid',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '容器服务'
|
|
: currentLang === 'zh-tw'
|
|
? '容器服務'
|
|
: 'Container Service',
|
|
href: '/solutions/container',
|
|
},
|
|
],
|
|
},
|
|
support: {
|
|
title:
|
|
currentLang === 'zh'
|
|
? '支持与服务'
|
|
: currentLang === 'zh-tw'
|
|
? '支援與服務'
|
|
: 'Support & Service',
|
|
links: [
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '技术文档'
|
|
: currentLang === 'zh-tw'
|
|
? '技術文件'
|
|
: 'Documentation',
|
|
href: '/docs',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '帮助中心'
|
|
: currentLang === 'zh-tw'
|
|
? '幫助中心'
|
|
: 'Help Center',
|
|
href: '/help',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '服务状态'
|
|
: currentLang === 'zh-tw'
|
|
? '服務狀態'
|
|
: 'Service Status',
|
|
href: '/status',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '培训认证'
|
|
: currentLang === 'zh-tw'
|
|
? '培訓認證'
|
|
: 'Training & Certification',
|
|
href: '/training',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '社区论坛'
|
|
: currentLang === 'zh-tw'
|
|
? '社群論壇'
|
|
: 'Community Forum',
|
|
href: '/community',
|
|
},
|
|
],
|
|
},
|
|
company: {
|
|
title:
|
|
currentLang === 'zh'
|
|
? '关于我们'
|
|
: currentLang === 'zh-tw'
|
|
? '關於我們'
|
|
: 'About Us',
|
|
links: [
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '公司介绍'
|
|
: currentLang === 'zh-tw'
|
|
? '公司介紹'
|
|
: 'Company Profile',
|
|
href: '/about',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '新闻动态'
|
|
: currentLang === 'zh-tw'
|
|
? '新聞動態'
|
|
: 'News & Events',
|
|
href: '/news',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '招贤纳士'
|
|
: currentLang === 'zh-tw'
|
|
? '招賢納士'
|
|
: 'Careers',
|
|
href: '/careers',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '合作伙伴'
|
|
: currentLang === 'zh-tw'
|
|
? '合作夥伴'
|
|
: 'Partners',
|
|
href: '/partners',
|
|
},
|
|
{
|
|
name:
|
|
currentLang === 'zh'
|
|
? '联系我们'
|
|
: currentLang === 'zh-tw'
|
|
? '聯絡我們'
|
|
: 'Contact Us',
|
|
href: '/contact',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
const contactInfo = [
|
|
{
|
|
icon: <Phone className="w-5 h-5" />,
|
|
label:
|
|
currentLang === 'zh'
|
|
? '客服热线'
|
|
: currentLang === 'zh-tw'
|
|
? '客服熱線'
|
|
: 'Hotline',
|
|
value: '+86 400-123-4567',
|
|
href: 'tel:+864001234567',
|
|
},
|
|
{
|
|
icon: <Mail className="w-5 h-5" />,
|
|
label:
|
|
currentLang === 'zh' ? '邮箱地址' : currentLang === 'zh-tw' ? '郵箱地址' : 'Email',
|
|
value: 'support@cloudpro.com',
|
|
href: 'mailto:support@cloudpro.com',
|
|
},
|
|
{
|
|
icon: <MapPin className="w-5 h-5" />,
|
|
label:
|
|
currentLang === 'zh'
|
|
? '公司地址'
|
|
: currentLang === 'zh-tw'
|
|
? '公司地址'
|
|
: 'Address',
|
|
value:
|
|
currentLang === 'zh'
|
|
? '北京市朝阳区科技园区'
|
|
: currentLang === 'zh-tw'
|
|
? '北京市朝陽區科技園區'
|
|
: 'Beijing Chaoyang Tech Park',
|
|
href: '#',
|
|
},
|
|
];
|
|
|
|
const socialLinks = [
|
|
{ icon: <Facebook className="w-5 h-5" />, href: '#', label: 'Facebook' },
|
|
{ icon: <Twitter className="w-5 h-5" />, href: '#', label: 'Twitter' },
|
|
{ icon: <Linkedin className="w-5 h-5" />, href: '#', label: 'LinkedIn' },
|
|
{ icon: <Youtube className="w-5 h-5" />, href: '#', label: 'YouTube' },
|
|
];
|
|
|
|
return (
|
|
<footer className="bg-gradient-to-br from-amber-950 via-amber-900 to-yellow-900 text-yellow-100 relative">
|
|
{/* Main Footer Content */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8">
|
|
{/* Company Info */}
|
|
<div className="lg:col-span-2">
|
|
<div className="mb-6">
|
|
<h3 className="text-2xl font-bold text-yellow-300 mb-4">CloudPro</h3>
|
|
<p className="text-yellow-200 leading-relaxed mb-6">
|
|
{currentLang === 'zh'
|
|
? '专业的云服务器代理商，致力于为企业提供稳定、高效、安全的云计算解决方案，助力数字化转型。'
|
|
: currentLang === 'zh-tw'
|
|
? '專業的雲伺服器代理商，致力於為企業提供穩定、高效、安全的雲端運算解決方案，助力數位化轉型。'
|
|
: 'Professional cloud server reseller dedicated to providing stable, efficient, and secure cloud computing solutions for enterprises.'}
|
|
</p>
|
|
|
|
{/* Contact Info */}
|
|
<div className="space-y-3">
|
|
{contactInfo.map((contact, index) => (
|
|
<a
|
|
key={index}
|
|
href={contact.href}
|
|
className="flex items-center space-x-3 text-yellow-200 hover:text-yellow-300 transition-colors duration-200 group"
|
|
>
|
|
<div className="text-yellow-400 group-hover:text-yellow-300 transition-colors">
|
|
{contact.icon}
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-yellow-300 font-medium">
|
|
{contact.label}
|
|
</div>
|
|
<div className="text-sm">{contact.value}</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Products Links */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-yellow-300 mb-4">
|
|
{footerLinks.products.title}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{footerLinks.products.links.map((link, index) => (
|
|
<li key={index}>
|
|
<a
|
|
href={link.href}
|
|
className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Solutions Links */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-yellow-300 mb-4">
|
|
{footerLinks.solutions.title}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{footerLinks.solutions.links.map((link, index) => (
|
|
<li key={index}>
|
|
<a
|
|
href={link.href}
|
|
className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Support Links */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-yellow-300 mb-4">
|
|
{footerLinks.support.title}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{footerLinks.support.links.map((link, index) => (
|
|
<li key={index}>
|
|
<a
|
|
href={link.href}
|
|
className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company Links */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-yellow-300 mb-4">
|
|
{footerLinks.company.title}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{footerLinks.company.links.map((link, index) => (
|
|
<li key={index}>
|
|
<a
|
|
href={link.href}
|
|
className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Subscription */}
|
|
<div className="mt-12 pt-8 border-t border-yellow-800">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-yellow-300 mb-2">
|
|
{currentLang === 'zh'
|
|
? '订阅我们的资讯'
|
|
: currentLang === 'zh-tw'
|
|
? '訂閱我們的資訊'
|
|
: 'Subscribe to Our Newsletter'}
|
|
</h4>
|
|
<p className="text-yellow-200 text-sm">
|
|
{currentLang === 'zh'
|
|
? '获取最新的产品更新、技术资讯和优惠活动信息'
|
|
: currentLang === 'zh-tw'
|
|
? '獲取最新的產品更新、技術資訊和優惠活動信息'
|
|
: 'Get the latest product updates, technical insights, and promotional offers'}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
type="email"
|
|
placeholder={
|
|
currentLang === 'zh'
|
|
? '请输入您的邮箱地址'
|
|
: currentLang === 'zh-tw'
|
|
? '請輸入您的郵箱地址'
|
|
: 'Enter your email address'
|
|
}
|
|
className="flex-1 px-4 py-3 bg-amber-800 border border-yellow-600 rounded-lg text-yellow-100 placeholder-yellow-300 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent"
|
|
/>
|
|
|
|
<button className="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap">
|
|
{currentLang === 'zh'
|
|
? '订阅'
|
|
: currentLang === 'zh-tw'
|
|
? '訂閱'
|
|
: 'Subscribe'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="border-t border-yellow-800 bg-amber-950">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
|
{/* Copyright */}
|
|
<div className="text-sm text-yellow-300">
|
|
© 2024 CloudPro.{' '}
|
|
{currentLang === 'zh'
|
|
? '版权所有'
|
|
: currentLang === 'zh-tw'
|
|
? '版權所有'
|
|
: 'All rights reserved'}
|
|
.<span className="mx-2">|</span>
|
|
<a href="/privacy" className="hover:text-yellow-200 transition-colors">
|
|
{currentLang === 'zh'
|
|
? '隐私政策'
|
|
: currentLang === 'zh-tw'
|
|
? '隱私政策'
|
|
: 'Privacy Policy'}
|
|
</a>
|
|
<span className="mx-2">|</span>
|
|
<a href="/terms" className="hover:text-yellow-200 transition-colors">
|
|
{currentLang === 'zh'
|
|
? '服务条款'
|
|
: currentLang === 'zh-tw'
|
|
? '服務條款'
|
|
: 'Terms of Service'}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-sm text-yellow-300 mr-2">
|
|
{currentLang === 'zh'
|
|
? '关注我们:'
|
|
: currentLang === 'zh-tw'
|
|
? '關注我們:'
|
|
: 'Follow us:'}
|
|
</span>
|
|
{socialLinks.map((social, index) => (
|
|
<a
|
|
key={index}
|
|
href={social.href}
|
|
className="text-yellow-300 hover:text-yellow-200 transition-colors duration-200 p-2 hover:bg-amber-800 rounded-full"
|
|
aria-label={social.label}
|
|
>
|
|
{social.icon}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll to Top Button */}
|
|
{showScrollTop && (
|
|
<button
|
|
onClick={scrollToTop}
|
|
className="fixed bottom-8 right-8 p-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110 z-50"
|
|
aria-label="Scroll to top"
|
|
>
|
|
<ArrowUp className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
</footer>
|
|
);
|
|
}
|