完成大部分页面
This commit is contained in:
小潘
@@ -1,69 +1,83 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { products } from '../data/products';
|
||||
import { Phone, MapPin } from 'lucide-react';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#0a1628] text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
|
||||
{/* Left: Brand + desc */}
|
||||
<div className="lg:col-span-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<img src="/favicon.ico" alt="讯驰" className="w-20 h-20" />
|
||||
<h3 className="text-3xl font-bold text-white">讯驰科技</h3>
|
||||
<footer className="bg-[#0a1628] text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
|
||||
backgroundSize: '24px 24px',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute top-0 right-0 w-80 h-80 bg-[#043b8f]/8 rounded-full blur-[120px]" />
|
||||
|
||||
<div className="relative max-w-5xl mx-auto px-6 py-10">
|
||||
{/* Row 1 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 divide-x divide-white/15 text-center">
|
||||
{/* Brand + Contact */}
|
||||
<div className="md:px-8">
|
||||
<div className="flex items-center justify-center gap-2.5 mb-3 whitespace-nowrap">
|
||||
<img src="/favicon.ico" alt="讯驰" className="w-8 h-8" />
|
||||
<span className="text-lg font-bold text-white tracking-tight">讯驰科技</span>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs leading-loose mb-4">智慧校园解决方案提供商</p>
|
||||
<div className="flex items-start justify-center gap-2 mb-3">
|
||||
<MapPin className="w-3.5 h-3.5 text-white/50 mt-0.5 shrink-0" />
|
||||
<span className="text-white/70 text-xs leading-loose">南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Phone className="w-3.5 h-3.5 text-white/50 shrink-0" />
|
||||
<span className="text-white/70 text-xs">0771-3864294</span>
|
||||
</div>
|
||||
<p className="text-sm text-white mb-5 font-medium leading-7">智慧校园解决方案提供商</p>
|
||||
<p className="text-sm text-white mb-4 flex items-start gap-1.5 leading-7">
|
||||
<svg className="w-3.5 h-3.5 mt-[7px] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||
<span>南宁市总部路3号中国东盟科技企业孵化基地<br />二期9号厂房二楼212房</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right: Two columns */}
|
||||
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white mb-6 tracking-wide">产品中心</h4>
|
||||
<ul className="space-y-4">
|
||||
{products.map((product) => (
|
||||
<li key={product.slug}>
|
||||
<Link
|
||||
to={`/product/${product.slug}`}
|
||||
className="text-sm text-white hover:text-white/80 transition-colors"
|
||||
>
|
||||
{product.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Products */}
|
||||
<div className="md:px-8">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">产品中心</h4>
|
||||
<ul className="space-y-2.5 flex flex-col items-center">
|
||||
{products.map((product) => (
|
||||
<li key={product.slug}>
|
||||
<Link to={`/product/${product.slug}`}
|
||||
className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
|
||||
{product.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white mb-6 tracking-wide">联系与合作</h4>
|
||||
<ul className="space-y-4 text-sm">
|
||||
<li>
|
||||
<Link to="/contact" className="inline-flex items-center gap-1.5 text-white hover:text-white/80 transition-colors">
|
||||
在线咨询
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className="inline-flex items-center gap-1.5 text-white hover:text-white/80 transition-colors">
|
||||
成为代理商
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Quick links */}
|
||||
<div className="md:px-8">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">快速链接</h4>
|
||||
<ul className="space-y-2.5 flex flex-col items-center">
|
||||
<li>
|
||||
<Link to="/" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
|
||||
返回首页
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
|
||||
在线咨询
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
|
||||
成为代理商
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="border-t border-white/[0.06]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="text-center text-xs text-white">
|
||||
<span>© 2024 讯驰科技 版权所有 · 桂ICP备XXXXXXXX号</span>
|
||||
</div>
|
||||
{/* Row 2: Copyright */}
|
||||
<div className="pt-6 border-t border-white/15">
|
||||
<p className="text-white/50 text-xs text-center">© 2024 讯驰科技 版权所有 · 桂ICP备XXXXXXXX号</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user