|
|
|
@ -1,78 +1,79 @@ |
|
|
|
import Link from 'next/link'; |
|
|
|
import Image from 'next/image'; |
|
|
|
|
|
|
|
const Footer = () => { |
|
|
|
const currentYear = new Date().getFullYear(); |
|
|
|
|
|
|
|
const footerLinks = { |
|
|
|
company: [ |
|
|
|
{ name: '关于我们', href: '/about' }, |
|
|
|
{ name: '企业文化', href: '/culture' }, |
|
|
|
{ name: '发展历程', href: '/history' }, |
|
|
|
{ name: '招聘信息', href: '/careers' }, |
|
|
|
products: [ |
|
|
|
{ name: '网站建设', href: '/products/website' }, |
|
|
|
{ name: '移动应用', href: '/products/mobile' }, |
|
|
|
{ name: '系统开发', href: '/products/system' }, |
|
|
|
{ name: '电商平台', href: '/products/ecommerce' }, |
|
|
|
], |
|
|
|
services: [ |
|
|
|
{ name: '产品服务', href: '/services' }, |
|
|
|
{ name: '解决方案', href: '/solutions' }, |
|
|
|
{ name: '技术支持', href: '/support' }, |
|
|
|
{ name: '客户案例', href: '/cases' }, |
|
|
|
solutions: [ |
|
|
|
{ name: '企业数字化', href: '/solutions/digital' }, |
|
|
|
{ name: '教育信息化', href: '/solutions/education' }, |
|
|
|
{ name: '智慧城市', href: '/solutions/smart-city' }, |
|
|
|
{ name: '工业互联网', href: '/solutions/industry' }, |
|
|
|
], |
|
|
|
resources: [ |
|
|
|
{ name: '新闻资讯', href: '/articles' }, |
|
|
|
{ name: '行业动态', href: '/news' }, |
|
|
|
{ name: '技术博客', href: '/blog' }, |
|
|
|
{ name: '下载中心', href: '/downloads' }, |
|
|
|
support: [ |
|
|
|
{ name: '技术文档', href: '/docs' }, |
|
|
|
{ name: '开发指南', href: '/guide' }, |
|
|
|
{ name: 'API参考', href: '/api' }, |
|
|
|
{ name: '常见问题', href: '/faq' }, |
|
|
|
], |
|
|
|
contact: [ |
|
|
|
company: [ |
|
|
|
{ name: '关于我们', href: '/about' }, |
|
|
|
{ name: '新闻动态', href: '/news' }, |
|
|
|
{ name: '招聘信息', href: '/careers' }, |
|
|
|
{ name: '联系我们', href: '/contact' }, |
|
|
|
{ name: '在线客服', href: '/service' }, |
|
|
|
{ name: '意见反馈', href: '/feedback' }, |
|
|
|
{ name: '合作伙伴', href: '/partners' }, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<footer className="footer"> |
|
|
|
<div className="container"> |
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> |
|
|
|
<footer className="bg-gray-900 text-white py-12"> |
|
|
|
<div className="container mx-auto px-4"> |
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8"> |
|
|
|
{/* 公司信息 */} |
|
|
|
<div className="lg:col-span-2"> |
|
|
|
<div className="footer-section"> |
|
|
|
<h3 className="footer-title">企业官网</h3> |
|
|
|
<div className="mb-8 lg:mb-0"> |
|
|
|
<h3 className="text-lg font-semibold mb-4">WEBSOFT</h3> |
|
|
|
<p className="text-gray-300 mb-6 max-w-md"> |
|
|
|
我们致力于为客户提供优质的产品和服务，以创新驱动发展，以质量赢得信赖。 |
|
|
|
专业、诚信、创新是我们的核心价值观。 |
|
|
|
专业的Web应用开发服务商，致力于为企业提供高质量的数字化解决方案。 |
|
|
|
我们拥有丰富的行业经验和专业的技术团队。 |
|
|
|
</p> |
|
|
|
<div className="space-y-2 text-gray-300"> |
|
|
|
<div className="flex items-center"> |
|
|
|
<svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20"> |
|
|
|
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" /> |
|
|
|
</svg> |
|
|
|
<span>北京市朝阳区某某大厦 888 号</span> |
|
|
|
<span>福建省福州市鼓楼区软件园</span> |
|
|
|
</div> |
|
|
|
<div className="flex items-center"> |
|
|
|
<svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20"> |
|
|
|
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" /> |
|
|
|
</svg> |
|
|
|
<span>400-888-8888</span> |
|
|
|
<span>0591-88888888</span> |
|
|
|
</div> |
|
|
|
<div className="flex items-center"> |
|
|
|
<svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20"> |
|
|
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /> |
|
|
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /> |
|
|
|
</svg> |
|
|
|
<span>contact@company.com</span> |
|
|
|
<span>info@websoft.top</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 公司链接 */} |
|
|
|
<div className="footer-section"> |
|
|
|
<h3 className="footer-title">公司</h3> |
|
|
|
{/* 产品链接 */} |
|
|
|
<div className="mb-8 lg:mb-0"> |
|
|
|
<h3 className="text-lg font-semibold mb-4">产品</h3> |
|
|
|
<ul className="space-y-3"> |
|
|
|
{footerLinks.company.map((link) => ( |
|
|
|
{footerLinks.products.map((link) => ( |
|
|
|
<li key={link.name}> |
|
|
|
<Link href={link.href} className="footer-link"> |
|
|
|
<Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300"> |
|
|
|
{link.name} |
|
|
|
</Link> |
|
|
|
</li> |
|
|
|
@ -80,13 +81,13 @@ const Footer = () => { |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 服务链接 */} |
|
|
|
<div className="footer-section"> |
|
|
|
<h3 className="footer-title">服务</h3> |
|
|
|
{/* 解决方案链接 */} |
|
|
|
<div className="mb-8 lg:mb-0"> |
|
|
|
<h3 className="text-lg font-semibold mb-4">解决方案</h3> |
|
|
|
<ul className="space-y-3"> |
|
|
|
{footerLinks.services.map((link) => ( |
|
|
|
{footerLinks.solutions.map((link) => ( |
|
|
|
<li key={link.name}> |
|
|
|
<Link href={link.href} className="footer-link"> |
|
|
|
<Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300"> |
|
|
|
{link.name} |
|
|
|
</Link> |
|
|
|
</li> |
|
|
|
@ -94,18 +95,43 @@ const Footer = () => { |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 资源链接 */} |
|
|
|
<div className="footer-section"> |
|
|
|
<h3 className="footer-title">资源</h3> |
|
|
|
{/* 技术支持链接 */} |
|
|
|
<div className="mb-8 lg:mb-0"> |
|
|
|
<h3 className="text-lg font-semibold mb-4">技术支持</h3> |
|
|
|
<ul className="space-y-3"> |
|
|
|
{footerLinks.resources.map((link) => ( |
|
|
|
{footerLinks.support.map((link) => ( |
|
|
|
<li key={link.name}> |
|
|
|
<Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300"> |
|
|
|
{link.name} |
|
|
|
</Link> |
|
|
|
</li> |
|
|
|
))} |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 公司链接和二维码 */} |
|
|
|
<div className="mb-8 lg:mb-0"> |
|
|
|
<h3 className="text-lg font-semibold mb-4">公司</h3> |
|
|
|
<ul className="space-y-3 mb-6"> |
|
|
|
{footerLinks.company.map((link) => ( |
|
|
|
<li key={link.name}> |
|
|
|
<Link href={link.href} className="footer-link"> |
|
|
|
<Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300"> |
|
|
|
{link.name} |
|
|
|
</Link> |
|
|
|
</li> |
|
|
|
))} |
|
|
|
</ul> |
|
|
|
{/* 二维码 */} |
|
|
|
<div className="text-center"> |
|
|
|
<div className="w-20 h-20 bg-white rounded-lg flex items-center justify-center mb-2"> |
|
|
|
<div className="w-16 h-16 bg-gray-300 rounded flex items-center justify-center"> |
|
|
|
<svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20"> |
|
|
|
<path fillRule="evenodd" d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 2V5h1v1H5zM3 13a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm2 2v-1h1v1H5zM13 3a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V4a1 1 0 00-1-1h-3zm1 2v1h1V5h-1z" clipRule="evenodd" /> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p className="text-xs text-gray-400">微信公众号</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
