You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.9 KiB
66 lines
2.9 KiB
6 months ago
|
|
||
|
|
type Feature = {
|
||
|
|
title : string ,
|
||
|
|
description : string
|
||
|
|
icon : React.ReactNode
|
||
|
|
}
|
||
|
|
const FeaturesSection = () => {
|
||
|
|
|
||
|
|
const features: Feature[] = [
|
||
|
|
{
|
||
|
|
title: 'Research-Based Learning',
|
||
|
|
description: 'Create and access courses developed by leading researchers and educators in their fields.',
|
||
|
|
icon: (
|
||
|
|
<div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Knowledge Sharing',
|
||
|
|
description: 'Join a vibrant community where educators and learners share insights and resources.',
|
||
|
|
icon: (
|
||
|
|
<div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Interactive Assessments',
|
||
|
|
description: 'Validate learning through comprehensive quizzes and assessments designed by experts.',
|
||
|
|
icon: (
|
||
|
|
<div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
|
||
|
|
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return(
|
||
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">Why Choose EduConnect?</h2>
|
||
|
|
<p className=" max-w-2xl mx-auto">
|
||
|
|
Our platform connects researchers, educators, and learners in a dynamic environment focused on quality education and knowledge sharing.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
{features.map((feature, index) => (
|
||
|
|
<div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow border border-purple-700">
|
||
|
|
{feature.icon}
|
||
|
|
<h3 className="text-xl font-semibold mt-4 mb-2">{feature.title}</h3>
|
||
|
|
<p className="text-gray-600">{feature.description}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default FeaturesSection
|