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.
50 lines
1.8 KiB
50 lines
1.8 KiB
6 months ago
|
import LearnWithUS from '@/assets/img/learn-with-us.jpg'
|
||
|
|
import Image from 'next/image';
|
||
|
|
|
||
|
|
const HeroSection: React.FC = () => {
|
||
|
|
return (
|
||
|
|
<div className="bg-gradient-to-br from-purple-900 to-indigo-900 text-white">
|
||
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
|
|
<div>
|
||
|
|
<div className="text-purple-300 mb-4">
|
||
|
|
RESEARCH-POWERED LEARNING PLATFORM
|
||
|
|
</div>
|
||
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||
|
|
Connect, Learn, and Grow Together
|
||
|
|
</h1>
|
||
|
|
<p className="mb-8 text-gray-300 text-lg">
|
||
|
|
Join a community where researchers and educators create engaging
|
||
|
|
courses, share knowledge, and help learners validate their
|
||
|
|
understanding through interactive assessments.
|
||
|
|
</p>
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<button className="bg-white text-gray-900 px-6 py-3 rounded-md font-medium">
|
||
|
|
Explore Courses
|
||
|
|
</button>
|
||
|
|
<button className="text-white border border-white px-6 py-3 rounded-md font-medium">
|
||
|
|
Create Course →
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative">
|
||
|
|
<div className='overlay-purple'>
|
||
|
|
<Image
|
||
|
|
src={LearnWithUS}
|
||
|
|
alt="Collaborative learning"
|
||
|
|
className="rounded-lg shadow-xl"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="absolute -bottom-4 -right-4 bg-purple-700 text-white p-4 rounded-lg shadow-lg">
|
||
|
|
<p className="font-bold">10,000+</p>
|
||
|
|
<p className="text-sm">Active Learners</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default HeroSection
|