73 lines
3.5 KiB
TypeScript
73 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { Mail, MapPin } from "lucide-react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
|
|
export default function ContactSection() {
|
|
return (
|
|
<section className="py-20 px-4 relative" id="contact">
|
|
<div className="container mx-auto max-w-7xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 drop-shadow-sm font-mono">
|
|
联系方式
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">项目咨询和技术支持</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
{/* Contact Information */}
|
|
<Card className="glass-card-white bg-white/40 border border-blue-200/50 backdrop-blur-xl shadow-lg hover:shadow-xl transition-all duration-500 group">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-xl flex items-center justify-center backdrop-blur-sm shadow-lg group-hover:scale-110 transition-all duration-300">
|
|
<Mail className="text-white" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-gray-800 font-mono">邮箱联系</h3>
|
|
<p className="text-blue-600 font-mono">zichen.hao@entalnet.com</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass-card-white bg-white/40 border border-purple-200/50 backdrop-blur-xl shadow-lg hover:shadow-xl transition-all duration-500 group">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-xl flex items-center justify-center backdrop-blur-sm shadow-lg group-hover:scale-110 transition-all duration-300">
|
|
<MapPin className="text-white" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-gray-800 font-mono">服务地区</h3>
|
|
<p className="text-purple-600 font-mono">中国大陆</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="mt-12 max-w-2xl mx-auto">
|
|
<div className="glass-card-white bg-white/40 p-8 rounded-2xl border border-gray-200/50 backdrop-blur-xl shadow-lg">
|
|
<h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4 font-mono">
|
|
服务特点
|
|
</h3>
|
|
<ul className="space-y-3 text-gray-600">
|
|
<li className="flex items-center space-x-3">
|
|
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
|
<span className="font-mono">技术支持</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<div className="w-2 h-2 bg-purple-400 rounded-full"></div>
|
|
<span className="font-mono">项目交付</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<div className="w-2 h-2 bg-pink-400 rounded-full"></div>
|
|
<span className="font-mono">持续维护</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|