144 lines
6.7 KiB
TypeScript
144 lines
6.7 KiB
TypeScript
"use client"
|
||
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Mail, MapPin, Phone, Github, MessageSquare } from "lucide-react"
|
||
|
||
export default function ContactSection() {
|
||
const contactInfo = [
|
||
{
|
||
icon: <Mail className="h-5 w-5 text-primary" />,
|
||
title: "邮件",
|
||
details: "contact@simbarobotics.com",
|
||
link: "mailto:contact@simbarobotics.com",
|
||
},
|
||
{
|
||
icon: <Phone className="h-5 w-5 text-primary" />,
|
||
title: "电话",
|
||
details: "+86 139 3616 9908",
|
||
link: "tel:+8613936169908",
|
||
},
|
||
{
|
||
icon: <MapPin className="h-5 w-5 text-primary" />,
|
||
title: "地址",
|
||
details: "602实验室, 物理实验楼, 黑龙江大学",
|
||
link: "https://www.bing.com/maps?&ty=18&q=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&ss=ypid.YN4067x5856225&mb=45.709873~126.616074~45.704718~126.624132&description=%E9%BB%91%E9%BE%99%E6%B1%9F%E7%9C%81%E5%93%88%E5%B0%94%E6%BB%A8%E5%B8%82%E5%AD%A6%E5%BA%9C%E8%B7%AF74%E5%8F%B7&cardbg=%23333333&dt=1744891200000&tt=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&tsts0=%2526ty%253D18%2526q%253D%2525E9%2525BB%252591%2525E9%2525BE%252599%2525E6%2525B1%25259F%2525E5%2525A4%2525A7%2525E5%2525AD%2525A6-%2525E7%252594%2525B5%2525E5%2525AD%252590%2525E5%2525B7%2525A5%2525E7%2525A8%25258B%2525E5%2525AD%2525A6%2525E9%252599%2525A2%2526ss%253Dypid.YN4067x5856225%2526mb%253D45.709873~126.616074~45.704718~126.624132%2526description%253D%2525E9%2525BB%252591%2525E9%2525BE%252599%2525E6%2525B1%25259F%2525E7%25259C%252581%2525E5%252593%252588%2525E5%2525B0%252594%2525E6%2525BB%2525A8%2525E5%2525B8%252582%2525E5%2525AD%2525A6%2525E5%2525BA%25259C%2525E8%2525B7%2525AF74%2525E5%25258F%2525B7%2526cardbg%253D%252523333333%2526dt%253D1744891200000&tstt0=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&cp=45.707282~126.619347&lvl=18.469374&pi=0&ftst=0&ftics=False&v=2&sV=2&form=S00027",
|
||
},
|
||
]
|
||
|
||
const socialLinks = [
|
||
{
|
||
icon: <Github className="h-5 w-5" />,
|
||
name: "GitHub",
|
||
link: "https://github.com/simbarobotics",
|
||
},
|
||
{
|
||
icon: (
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
className="h-5 w-5"
|
||
>
|
||
<path d="M17.8 4.8H6.2c-1.2 0-2.2 1-2.2 2.2v10c0 1.2 1 2.2 2.2 2.2h11.6c1.2 0 2.2-1 2.2-2.2V7c0-1.2-1-2.2-2.2-2.2Z" />
|
||
<path d="m9 10 3 3 3-3" />
|
||
</svg>
|
||
),
|
||
name: "Bilibili",
|
||
link: "https://space.bilibili.com/simbarobotics",
|
||
},
|
||
{
|
||
icon: <MessageSquare className="h-5 w-5" />,
|
||
name: "微信公众号",
|
||
link: "#wechat-qrcode",
|
||
onClick: (e: { preventDefault: () => void }) => {
|
||
e.preventDefault()
|
||
// 这里可以添加显示微信二维码的逻辑，例如打开一个模态框
|
||
alert("扫描二维码关注我们的微信公众号：SimbaRobotics")
|
||
},
|
||
},
|
||
]
|
||
|
||
return (
|
||
<section id="contact" className="py-20 relative overflow-hidden">
|
||
<div className="absolute inset-0 grid-pattern opacity-20" />
|
||
<div className="absolute left-0 top-0 bottom-0 red-section z-0" />
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
<div className="flex flex-col md:flex-row gap-8">
|
||
<div className="md:w-1/3">
|
||
<div className="red-accent pl-4">
|
||
<h2 className="text-3xl font-bold mb-2 uppercase">联系我们</h2>
|
||
<p className="text-xs text-muted-foreground uppercase mb-4 font-mono">CONTACT US</p>
|
||
</div>
|
||
<div className="diagonal-line mb-8"></div>
|
||
<div className="content-overlay">
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
有问题或有兴趣加入我们的团队？请通过以下任何渠道联系我们。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{contactInfo.map((item, index) => (
|
||
<a
|
||
key={index}
|
||
href={item.link}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center gap-4 p-4 border border-white/10 bg-white/5 card-hover-effect"
|
||
>
|
||
<div className="p-2 bg-primary/10">{item.icon}</div>
|
||
<div>
|
||
<h3 className="font-medium">{item.title}</h3>
|
||
<p className="text-sm text-muted-foreground">{item.details}</p>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<h3 className="font-bold mb-4">关注我们</h3>
|
||
<div className="flex gap-4">
|
||
{socialLinks.map((social, index) => (
|
||
<a
|
||
key={index}
|
||
href={social.link}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-3 bg-primary/10 hover:bg-primary/20 transition-colors card-hover-effect"
|
||
aria-label={social.name}
|
||
onClick={social.onClick}
|
||
>
|
||
{social.icon}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="md:w-2/3">
|
||
<Card className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
|
||
<CardContent className="p-6">
|
||
<h3 className="text-xl font-bold mb-4">加入我们的队伍</h3>
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
Simba Robotics
|
||
正在寻找充满激情的新成员加入我们的团队。我们欢迎各种学术背景的学生，无论是机械工程、电子工程、计算机科学还是市场营销专业的学生。
|
||
</p>
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
如果您对机器人技术充满热情，希望在实际项目中运用自己的技能，并愿意在团队环境中工作，我们非常欢迎您的加入。
|
||
</p>
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
请通过上述渠道与我们联系，并附上您的简历和一封简短的介绍信，说明您希望加入 Simba Robotics 的原因。
|
||
</p>
|
||
<p className="text-primary font-bold font-sans">开放招募时间： 每学期的前两周</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|