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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 | import React from "react";
import "./AboutPage.scss";
import { Container, Typography, Grid, Card, CardContent, Paper } from "@mui/material";
import SchoolOutlinedIcon from "@mui/icons-material/SchoolOutlined";
import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
import GroupsOutlinedIcon from "@mui/icons-material/GroupsOutlined";
import TrendingUpOutlinedIcon from "@mui/icons-material/TrendingUpOutlined";
import VerifiedOutlinedIcon from "@mui/icons-material/VerifiedOutlined";
import PsychologyOutlinedIcon from "@mui/icons-material/PsychologyOutlined";
import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
import StarOutlineOutlinedIcon from "@mui/icons-material/StarOutlineOutlined";
const AboutPage = () => {
const values = [
{
icon: <LightbulbOutlinedIcon />,
title: "Innovation",
description: "We constantly push boundaries to bring cutting-edge educational technology to classrooms.",
},
{
icon: <FavoriteBorderOutlinedIcon />,
title: "Student-Centered",
description: "Every decision we make prioritizes the learning experience and success of students.",
},
{
icon: <VerifiedOutlinedIcon />,
title: "Quality",
description: "We maintain the highest standards in content creation, platform stability, and support.",
},
{
icon: <GroupsOutlinedIcon />,
title: "Collaboration",
description: "We believe in the power of community and collaborative learning experiences.",
},
];
const milestones = [
{
year: "2020",
title: "Foundation",
description: "EruditionTX was founded with a vision to transform math education in Texas.",
},
{
year: "2021",
title: "Platform Launch",
description: "Released our first LMS platform with TEKS-aligned content and interactive features.",
},
{
year: "2023",
title: "Expansion",
description: "Reached 500+ schools and 50,000+ students across Texas.",
},
{
year: "2024",
title: "AI Integration",
description: "Introduced AI-powered analytics and personalized learning recommendations.",
},
];
const achievements = [
{ icon: <SchoolOutlinedIcon />, number: "500+", label: "Partner Schools" },
{ icon: <GroupsOutlinedIcon />, number: "50K+", label: "Active Students" },
{ icon: <StarOutlineOutlinedIcon />, number: "98%", label: "Satisfaction Rate" },
{ icon: <TrendingUpOutlinedIcon />, number: "45%", label: "Performance Increase" },
];
return (
<React.Fragment>
{/* Hero Section */}
<section className="about-hero">
<div className="hero-background">
<div className="gradient-overlay" />
</div>
<Container maxWidth="lg">
<div className="hero-content">
<span className="section-label">About Us</span>
<Typography variant="h1" className="hero-title">
About <span className="brand-name">EruditionTX</span>
</Typography>
<Typography variant="body1" className="hero-subtitle">
Empowering educators and inspiring students through innovative learning solutions
</Typography>
</div>
</Container>
</section>
{/* Mission Section */}
<section className="mission-section">
<Container maxWidth="lg">
<Grid container spacing={6} alignItems="center">
<Grid size={{ xs: 12, md: 6 }}>
<div className="mission-content">
<span className="section-label">Our Mission</span>
<Typography variant="h2" className="section-title">
Transforming education through technology
</Typography>
<Typography variant="body1" className="mission-text">
At EruditionTX, we believe that every student has the potential to excel in
mathematics and beyond. Our mission is to provide educators with powerful tools and
comprehensive resources that make teaching more effective and learning more
engaging.
</Typography>
<Typography variant="body1" className="mission-text">
We're committed to bridging the gap between traditional education and modern
technology, creating a seamless learning experience that adapts to each student's
unique needs and pace.
</Typography>
</div>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
<div className="mission-visual">
<div className="visual-box box-1">
<PsychologyOutlinedIcon className="box-icon" />
<Typography variant="h6">Smart Learning</Typography>
</div>
<div className="visual-box box-2">
<SchoolOutlinedIcon className="box-icon" />
<Typography variant="h6">Quality Education</Typography>
</div>
<div className="visual-box box-3">
<TrendingUpOutlinedIcon className="box-icon" />
<Typography variant="h6">Proven Results</Typography>
</div>
</div>
</Grid>
</Grid>
</Container>
</section>
{/* Values Section */}
<section className="values-section">
<Container maxWidth="lg">
<div className="section-header">
<span className="section-label">Values</span>
<Typography variant="h2" className="section-title">
Our Core Values
</Typography>
<Typography variant="body1" className="section-subtitle">
The principles that guide everything we do
</Typography>
</div>
<Grid container spacing={3}>
{values.map((value, index) => (
<Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
<Card className="value-card" elevation={0}>
<CardContent>
<div className="value-icon">{value.icon}</div>
<Typography variant="h5" className="value-title">
{value.title}
</Typography>
<Typography variant="body2" className="value-description">
{value.description}
</Typography>
</CardContent>
</Card>
</Grid>
))}
</Grid>
</Container>
</section>
{/* Timeline Section */}
<section className="timeline-section">
<Container maxWidth="lg">
<div className="section-header">
<span className="section-label">Journey</span>
<Typography variant="h2" className="section-title">
Our Story
</Typography>
<Typography variant="body1" className="section-subtitle">
Key milestones in our growth and evolution
</Typography>
</div>
<div className="timeline">
{milestones.map((milestone, index) => (
<div className={`timeline-item ${index % 2 === 0 ? "left" : "right"}`} key={index}>
<div className="timeline-content">
<div className="timeline-year">{milestone.year}</div>
<Typography variant="h5" className="timeline-title">
{milestone.title}
</Typography>
<Typography variant="body2" className="timeline-description">
{milestone.description}
</Typography>
</div>
</div>
))}
</div>
</Container>
</section>
{/* Achievements Section */}
<section className="achievements-section">
<div className="achievements-background">
<div className="gradient-overlay" />
</div>
<Container maxWidth="lg" className="achievements-container">
<div className="section-header">
<span className="section-label">Impact</span>
<Typography variant="h2" className="section-title">
Our Impact
</Typography>
<Typography variant="body1" className="section-subtitle">
Measurable results that speak for themselves
</Typography>
</div>
<Grid container spacing={3}>
{achievements.map((achievement, index) => (
<Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
<Paper className="achievement-card" elevation={0}>
<div className="achievement-icon">{achievement.icon}</div>
<Typography variant="h3" className="achievement-number">
{achievement.number}
</Typography>
<Typography variant="h6" className="achievement-label">
{achievement.label}
</Typography>
</Paper>
</Grid>
))}
</Grid>
</Container>
</section>
</React.Fragment>
);
};
export default AboutPage;
|