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 89 | 2x | import React from "react";
import "./FeaturesSection.scss";
import { Container, Typography } from "@mui/material";
import MenuBookOutlinedIcon from "@mui/icons-material/MenuBookOutlined";
import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
import GroupsOutlinedIcon from "@mui/icons-material/GroupsOutlined";
import AssignmentOutlinedIcon from "@mui/icons-material/AssignmentOutlined";
import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
import SecurityOutlinedIcon from "@mui/icons-material/SecurityOutlined";
const FeaturesSection = () => {
const features = [
{
icon: <MenuBookOutlinedIcon />,
title: "Question Banks",
description:
"Access thousands of TEKS-aligned questions with built-in math editor support and multimedia content.",
},
{
icon: <AnalyticsOutlinedIcon />,
title: "Real-Time Analytics",
description:
"Track student progress with detailed analytics, performance insights, and automated grading.",
},
{
icon: <GroupsOutlinedIcon />,
title: "Collaborative Learning",
description:
"Foster collaboration with class management tools, discussion forums, and group assignments.",
},
{
icon: <AssignmentOutlinedIcon />,
title: "Smart Assignments",
description:
"Create and distribute assignments with ease. Multiple question types, deadlines, and workflows.",
},
{
icon: <CloudOutlinedIcon />,
title: "Cloud Platform",
description:
"Access your learning environment anywhere, anytime. Seamless sync across all devices.",
},
{
icon: <SecurityOutlinedIcon />,
title: "Enterprise Security",
description:
"Bank-level encryption, role-based access control, and FERPA compliance for data safety.",
},
];
return (
<section className="features-section">
<Container maxWidth="lg">
<div className="features-header">
<span className="section-label">Features</span>
<Typography variant="h2" className="section-title">
Everything you need for modern education
</Typography>
<Typography variant="body1" className="section-subtitle">
Comprehensive tools designed to enhance teaching and learning experiences
</Typography>
</div>
<div className="features-grid">
{features.map((feature, index) => (
<div
className="feature-card"
key={index}
style={{ animationDelay: `${0.1 * index}s` }}
>
<div className="feature-icon">{feature.icon}</div>
<div className="feature-content">
<Typography variant="h6" className="feature-title">
{feature.title}
</Typography>
<Typography variant="body2" className="feature-description">
{feature.description}
</Typography>
</div>
</div>
))}
</div>
</Container>
</section>
);
};
export default FeaturesSection;
|