Function StepsBlock

src/Components/Home/home.jsx:624–654

()

}

function StepsBlock() {
    const dark = useTheme().palette.mode === 'dark';
    const steps = [
        {n: 1, icon: <TravelExploreOutlined/>, title: '浏览与检索', desc: '在项目信息表和数据汇总里查看项目与历年真实案例，用筛选快速锁定目标。'},
        {n: 2, icon: <EditNoteOutlined/>, title: '建立你的档案', desc: '注册后在个人主页添加申请人与申请记录，数据会自动汇入数据汇总。'},
        {n: 3, icon: <AutoGraphOutlined/>, title: '分享与互助', desc: '撰写经验帖、补充项目信息，把经验传递给学弟学妹，让社区一起成长。'},
    ];
    return (
        <Box sx={{width: '100%', maxWidth: 980}}>
            <SectionHeading title='三步开始使用' subtitle='从浏览到贡献，几分钟就能上手'/>
            <Box sx={{display: 'grid', gridTemplateColumns: {xs: '1fr', md: 'repeat(3, 1fr)'}, gap: {xs: 2, md: 2.5}}}>
                {steps.map((s) => (
                    <Box key={s.n} className='GlassCard'
                         sx={glassSx(dark, {p: {xs: '1.5rem', md: '1.75rem'}, display: 'flex', flexDirection: 'column', gap: 1})}>
                        <Box sx={{display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5}}>
                            <Box sx={{
                                width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                                background: brandGradient(dark), color: '#fff', fontWeight: 700,
                                boxShadow: dark ? '0 6px 16px rgba(107,166,232,0.32)' : '0 6px 16px rgba(28,91,170,0.26)',
                            }}>{s.n}</Box>
                            <Box sx={{color: 'primary.main', display: 'flex'}}>{s.icon}</Box>
                        </Box>
                        <Typography sx={{fontWeight: 700}}>{s.title}</Typography>
                        <Typography variant='body2' sx={{color: 'text.secondary', lineHeight: 1.8}}>{s.desc}</Typography>
                    </Box>
                ))}
            </Box>
        </Box>
    );
}

function StatNumber({value}) {
    const [n, setN] = useState(0);