412 lines
12 KiB
TypeScript
412 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import Container from "@mui/material/Container";
|
||
import Typography from "@mui/material/Typography";
|
||
import Box from "@mui/material/Box";
|
||
import Card from "@mui/material/Card";
|
||
import CardContent from "@mui/material/CardContent";
|
||
import CardHeader from "@mui/material/CardHeader";
|
||
import Button from "@mui/material/Button";
|
||
import MailIcon from "@mui/icons-material/Mail";
|
||
import GroupIcon from "@mui/icons-material/Group";
|
||
import CodeIcon from "@mui/icons-material/Code";
|
||
import MessageIcon from "@mui/icons-material/Chat";
|
||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||
import Timeline from "@mui/lab/Timeline";
|
||
import TimelineItem from "@mui/lab/TimelineItem";
|
||
import TimelineSeparator from "@mui/lab/TimelineSeparator";
|
||
import TimelineConnector from "@mui/lab/TimelineConnector";
|
||
import TimelineContent from "@mui/lab/TimelineContent";
|
||
import TimelineDot from "@mui/lab/TimelineDot";
|
||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||
import { useTheme } from "@mui/material/styles";
|
||
import ClientLayout from "../components/ClientLayout";
|
||
|
||
const Joinus: React.FC = () => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
|
||
|
||
const handleEmailClick = () => {
|
||
window.location.href = 'mailto:leonmmcoset@outlook.com';
|
||
};
|
||
|
||
// 要求列表数据
|
||
const requirements = [
|
||
{ text: "能会至少一种编程语言的开发人员", icon: <CodeIcon /> },
|
||
{ text: "有良好的沟通能力和团队合作精神", icon: <MessageIcon /> },
|
||
{ text: "无违法前科", icon: <CheckCircleIcon /> },
|
||
{ text: "拥有微信或QQ账号", icon: <GroupIcon /> }
|
||
];
|
||
|
||
// 加入步骤数据
|
||
const steps = [
|
||
{
|
||
title: "发送申请",
|
||
description: "通过我们的邮箱发送你的申请意愿",
|
||
icon: <MailIcon />
|
||
},
|
||
{
|
||
title: "等待回复",
|
||
description: "我们会在三天内回复你的申请",
|
||
icon: <MessageIcon />
|
||
},
|
||
{
|
||
title: "加入群聊",
|
||
description: "获得微信/QQ内部群聊的邀请",
|
||
icon: <GroupIcon />
|
||
},
|
||
{
|
||
title: "讨论技术",
|
||
description: "在群聊中讨论你的技术方向和项目",
|
||
icon: <CodeIcon />
|
||
}
|
||
];
|
||
|
||
// 动画延迟函数
|
||
const getDelay = (index: number) => {
|
||
return `${index * 0.2}s`;
|
||
};
|
||
|
||
return (
|
||
<Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
|
||
{/* 页面标题 */}
|
||
<Box
|
||
sx={{
|
||
textAlign: 'center',
|
||
mb: { xs: 8, md: 12 },
|
||
animation: 'fadeInUp 0.8s ease-out',
|
||
'@keyframes fadeInUp': {
|
||
'from': {
|
||
opacity: 0,
|
||
transform: 'translateY(30px)'
|
||
},
|
||
'to': {
|
||
opacity: 1,
|
||
transform: 'translateY(0)'
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<Typography
|
||
variant={isMobile ? "h3" : "h2"}
|
||
component="h1"
|
||
gutterBottom
|
||
fontWeight="bold"
|
||
sx={{ color: 'primary.main' }}
|
||
>
|
||
加入我们
|
||
</Typography>
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
maxWidth: 700,
|
||
mx: 'auto',
|
||
fontSize: { xs: '1rem', md: '1.125rem' },
|
||
lineHeight: 1.6
|
||
}}
|
||
>
|
||
我们是一个致力于推动技术创新的团队，致力于为客户提供高质量的服务。
|
||
加入我们，让我们的技术更上一层楼！
|
||
</Typography>
|
||
</Box>
|
||
|
||
{/* 要求部分 */}
|
||
<Box
|
||
sx={{
|
||
mb: { xs: 10, md: 16 },
|
||
animation: 'fadeInUp 0.8s ease-out 0.2s both',
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h4"
|
||
component="h2"
|
||
gutterBottom
|
||
sx={{
|
||
textAlign: 'center',
|
||
mb: { xs: 6, md: 8 },
|
||
position: 'relative',
|
||
'&::after': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
bottom: -16,
|
||
left: '50%',
|
||
transform: 'translateX(-50%)',
|
||
width: 50,
|
||
height: 3,
|
||
backgroundColor: 'primary.main'
|
||
}
|
||
}}
|
||
>
|
||
我们需要
|
||
</Typography>
|
||
|
||
<Box
|
||
sx={{
|
||
display: 'grid',
|
||
gridTemplateColumns: {
|
||
xs: '1fr',
|
||
sm: '1fr 1fr',
|
||
md: '1fr 1fr 1fr 1fr'
|
||
},
|
||
gap: { xs: 4, md: 6 }
|
||
}}
|
||
>
|
||
{requirements.map((requirement, index) => (
|
||
<Card
|
||
key={index}
|
||
sx={{
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
transition: 'all 0.3s ease',
|
||
'&:hover': {
|
||
transform: 'translateY(-8px)',
|
||
boxShadow: '0 12px 20px rgba(0,0,0,0.1)',
|
||
},
|
||
animation: 'fadeInUp 0.6s ease-out both',
|
||
animationDelay: getDelay(index)
|
||
}}
|
||
elevation={2}
|
||
>
|
||
<CardHeader
|
||
avatar={
|
||
<Box sx={{
|
||
bgcolor: 'primary.light',
|
||
width: 50,
|
||
height: 50,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: '50%',
|
||
color: 'primary.dark'
|
||
}}>
|
||
{requirement.icon}
|
||
</Box>
|
||
}
|
||
title={
|
||
<Typography
|
||
variant="h6"
|
||
component="div"
|
||
sx={{ fontWeight: 600 }}
|
||
>
|
||
{requirement.text}
|
||
</Typography>
|
||
}
|
||
/>
|
||
</Card>
|
||
))}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
mt: 8,
|
||
textAlign: 'center',
|
||
animation: 'fadeInUp 0.8s ease-out 0.8s both',
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h6"
|
||
component="p"
|
||
sx={{
|
||
fontWeight: 600,
|
||
color: 'white',
|
||
backgroundColor: 'primary.light',
|
||
py: 2,
|
||
px: 4,
|
||
display: 'inline-block',
|
||
borderRadius: 2
|
||
}}
|
||
>
|
||
你只要满足以上条件，就可以加入我们的团队！
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 加入步骤 - 使用Timeline组件 */}
|
||
<Box
|
||
sx={{
|
||
mb: { xs: 10, md: 16 },
|
||
animation: 'fadeInUp 0.8s ease-out 0.4s both',
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h4"
|
||
component="h2"
|
||
gutterBottom
|
||
sx={{
|
||
textAlign: 'center',
|
||
mb: { xs: 8, md: 10 },
|
||
position: 'relative',
|
||
'&::after': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
bottom: -16,
|
||
left: '50%',
|
||
transform: 'translateX(-50%)',
|
||
width: 50,
|
||
height: 3,
|
||
backgroundColor: 'primary.main'
|
||
}
|
||
}}
|
||
>
|
||
加入我们的步骤
|
||
</Typography>
|
||
|
||
<Box sx={{ px: { xs: 1, md: 4 } }}>
|
||
<Timeline position={isMobile ? "alternate" : "left"}>
|
||
{steps.map((step, index) => (
|
||
<TimelineItem key={index} sx={{ animation: 'fadeInUp 0.6s ease-out both', animationDelay: getDelay(index) }}>
|
||
<TimelineSeparator>
|
||
<TimelineDot
|
||
sx={{
|
||
bgcolor: 'primary.main',
|
||
color: 'white',
|
||
width: isMobile ? 48 : 56,
|
||
height: isMobile ? 48 : 56,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
'& .MuiSvgIcon-root': {
|
||
fontSize: isMobile ? 24 : 28
|
||
}
|
||
}}
|
||
>
|
||
{step.icon}
|
||
</TimelineDot>
|
||
{index < steps.length - 1 && <TimelineConnector sx={{ bgcolor: 'primary.light' }} />}
|
||
</TimelineSeparator>
|
||
<TimelineContent>
|
||
<Card
|
||
sx={{
|
||
maxWidth: isMobile ? '100%' : 600,
|
||
ml: isMobile ? 0 : 2,
|
||
transition: 'all 0.3s ease',
|
||
'&:hover': {
|
||
boxShadow: '0 8px 16px rgba(0,0,0,0.1)'
|
||
}
|
||
}}
|
||
elevation={3}
|
||
>
|
||
<CardContent sx={{ p: { xs: 3, md: 4 } }}>
|
||
<Typography
|
||
variant="h5"
|
||
component="h3"
|
||
gutterBottom
|
||
fontWeight="bold"
|
||
>
|
||
步骤 {index + 1}：{step.title}
|
||
</Typography>
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
fontSize: { xs: '1rem', md: '1.0625rem' },
|
||
lineHeight: 1.7
|
||
}}
|
||
>
|
||
{step.description}
|
||
</Typography>
|
||
{index === 0 && (
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
sx={{ mt: 3 }}
|
||
startIcon={<MailIcon />}
|
||
onClick={handleEmailClick}
|
||
>
|
||
立即发送申请
|
||
</Button>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</TimelineContent>
|
||
</TimelineItem>
|
||
))}
|
||
</Timeline>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* CTA 区域 */}
|
||
<Box
|
||
sx={{
|
||
textAlign: 'center',
|
||
py: { xs: 8, md: 12 },
|
||
bgcolor: 'primary.light',
|
||
borderRadius: 4,
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
animation: 'fadeInUp 0.8s ease-out 0.6s both',
|
||
'&::before': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
bgcolor: 'primary.light',
|
||
opacity: 0.2,
|
||
zIndex: 0
|
||
}
|
||
}}
|
||
>
|
||
<Box sx={{ position: 'relative', zIndex: 1 }}>
|
||
<Typography
|
||
variant="h4"
|
||
component="h2"
|
||
gutterBottom
|
||
fontWeight="bold"
|
||
sx={{ color: 'white' }}
|
||
>
|
||
准备好加入我们了吗？
|
||
</Typography>
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
maxWidth: 600,
|
||
mx: 'auto',
|
||
mb: 4,
|
||
fontSize: { xs: '1rem', md: '1.125rem' },
|
||
color: 'white'
|
||
}}
|
||
>
|
||
不要犹豫，立即发送邮件申请加入我们的团队！
|
||
</Typography>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
size={isMobile ? "large" : "medium"}
|
||
sx={{
|
||
px: { xs: 4, md: 5 },
|
||
py: { xs: 1.5, md: 1 },
|
||
fontWeight: 600,
|
||
'&:hover': {
|
||
transform: 'translateY(-2px)'
|
||
}
|
||
}}
|
||
startIcon={<MailIcon />}
|
||
onClick={handleEmailClick}
|
||
>
|
||
立即联系
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 动画样式 */}
|
||
<style jsx global>{`
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
`}</style>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default Joinus; |