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 81 82 83 84 85 86 87 88 | 2x | import React from "react";
import "./BenefitsSection.scss";
import { Container, Typography } from "@mui/material";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import SchoolOutlinedIcon from "@mui/icons-material/SchoolOutlined";
import CheckIcon from "@mui/icons-material/Check";
const BenefitsSection = () => {
const benefitGroups = [
{
icon: <PersonOutlineOutlinedIcon />,
title: "For Educators",
benefits: [
"Save time with automated grading and feedback",
"Access comprehensive question banks aligned to standards",
"Track student progress with detailed analytics",
"Create engaging assignments with multimedia support",
],
},
{
icon: <SchoolOutlinedIcon />,
title: "For Students",
benefits: [
"Learn at your own pace with personalized content",
"Get instant feedback on assignments and quizzes",
"Access learning materials anytime, anywhere",
"Track your progress and celebrate achievements",
],
},
{
icon: <BusinessOutlinedIcon />,
title: "For Administrators",
benefits: [
"Monitor district-wide performance and trends",
"Ensure curriculum alignment across all schools",
"Make data-driven decisions with comprehensive reports",
"Manage users and resources from a central dashboard",
],
},
];
return (
<section className="benefits-section">
<Container maxWidth="lg">
<div className="benefits-header">
<span className="section-label">Benefits</span>
<Typography variant="h2" className="section-title">
Designed for everyone
</Typography>
<Typography variant="body1" className="section-subtitle">
Solutions tailored to meet the unique needs of educators, students, and administrators
</Typography>
</div>
<div className="benefits-grid">
{benefitGroups.map((group, index) => (
<div
className="benefit-card"
key={index}
style={{ animationDelay: `${0.15 * index}s` }}
>
<div className="benefit-header">
<div className="benefit-icon">{group.icon}</div>
<Typography variant="h5" className="benefit-title">
{group.title}
</Typography>
</div>
<div className="benefit-list">
{group.benefits.map((benefit, idx) => (
<div className="benefit-item" key={idx}>
<div className="check-icon">
<CheckIcon />
</div>
<Typography variant="body2">{benefit}</Typography>
</div>
))}
</div>
</div>
))}
</div>
</Container>
</section>
);
};
export default BenefitsSection;
|