Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 2x | import React from "react";
import "./StatsSection.scss";
import { Container, Typography } from "@mui/material";
import TrendingUpOutlinedIcon from "@mui/icons-material/TrendingUpOutlined";
import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
import SchoolOutlinedIcon from "@mui/icons-material/SchoolOutlined";
import EmojiEventsOutlinedIcon from "@mui/icons-material/EmojiEventsOutlined";
const StatsSection = () => {
const stats = [
{
icon: <PeopleOutlineOutlinedIcon />,
value: "50,000+",
label: "Active Students",
description: "Learning every day",
},
{
icon: <SchoolOutlinedIcon />,
value: "500+",
label: "Educators",
description: "Creating quality content",
},
{
icon: <EmojiEventsOutlinedIcon />,
value: "95%",
label: "Success Rate",
description: "Student achievement growth",
},
{
icon: <TrendingUpOutlinedIcon />,
value: "1M+",
label: "Assessments",
description: "Completed this year",
},
];
return (
<section className="stats-section">
<div className="stats-background">
<div className="gradient-overlay" />
</div>
<Container maxWidth="lg" className="stats-container">
<div className="stats-header">
<span className="section-label">Impact</span>
<Typography variant="h2" className="section-title">
Trusted by educators across Texas
</Typography>
<Typography variant="body1" className="section-subtitle">
Join thousands of educators and students achieving remarkable results
</Typography>
</div>
<div className="stats-grid">
{stats.map((stat, index) => (
<div
className="stat-card"
key={index}
style={{ animationDelay: `${0.1 * index}s` }}
>
<div className="stat-icon">{stat.icon}</div>
<Typography variant="h3" className="stat-value">
{stat.value}
</Typography>
<Typography variant="h6" className="stat-label">
{stat.label}
</Typography>
<Typography variant="body2" className="stat-description">
{stat.description}
</Typography>
</div>
))}
</div>
</Container>
</section>
);
};
export default StatsSection;
|