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.
 
 
 
FreeBug/frontend/edu-connect/src/app/_partials/HeroSection.tsx

53 lines
2.1 KiB

import LearnWithUS from '@/assets/img/learn-with-us.jpg'
import { defaultFetcher } from '@/helpers/fetch.helper';
import { APP_BASE_URL } from '@/utils/constants';
import Image from 'next/image';
import useSWR from "swr"
const HeroSection: React.FC = () => {
const {data : TotalUserCount } = useSWR(APP_BASE_URL + '/api/user/count' , defaultFetcher)
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">{}+</p>
<p className="text-sm">Active Learners</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default HeroSection