Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UI): implement dark theme for courses page #74

Merged
merged 1 commit into from
Jan 13, 2025
Merged

feat(UI): implement dark theme for courses page #74

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions client/src/pages/Courses/CoursesPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,31 @@ const CoursesPage = () => {
.filter(category => category.courses.length > 0); // Keep only categories with matching courses

return (
<div className="min-h-screen bg-gray-50 p-4">
<div className="min-h-screen bg-gradient-to-b from-slate-950 to-indigo-950">
{/* Hero Section */}
<div className="bg-gradient-to-r mt-[5%] max-md:w-full w-[83%] mx-auto from-blue-900 via-violet-950 to-indigo-950 text-white py-12 px-6 rounded-md mb-8">
<div className="max-w-7xl max-md:w-full mx-auto">
<h1 className="text-4xl font-bold mb-4">Professional Degree Programs</h1>
<p className="text-xl text-blue-100">Shape your future with our comprehensive range of professional courses</p>
<div className="pt-20 pb-12 px-6">
<div className="max-w-7xl mx-auto text-center">
<h1 className="text-5xl font-bold mb-4 text-gray-200">Professional Degree Programs</h1>
<p className="text-xl text-gray-300">Shape your future with our comprehensive range of professional courses</p>
</div>
</div>

{/* Search and Filter Section */}
<div className="max-w-7xl mx-auto px-6 mb-8">
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="max-w-7xl mx-auto px-6 mb-12">
<div className="bg-slate-900/50 backdrop-blur-sm rounded-lg border border-gray-700 shadow-xl p-6">
<div className="flex flex-col md:flex-row gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
<input
type="text"
placeholder="Search courses or specializations..."
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full pl-10 pr-4 py-2 bg-slate-800 text-gray-200 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<select
className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className="px-4 py-2 bg-slate-800 text-gray-200 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
Expand All @@ -84,40 +84,40 @@ const CoursesPage = () => {
filteredCourses.map(category => (
<div key={category.id} className="mb-12">
<div className="flex items-center gap-3 mb-6">
<GraduationCap className="h-8 w-8 text-blue-600" />
<h2 className="text-2xl font-bold text-gray-900">{category.category}</h2>
<GraduationCap className="h-8 w-8 text-violet-400" />
<h2 className="text-2xl font-bold text-gray-200">{category.category}</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{category.courses.map((course, idx) => (
<div
key={idx}
className="bg-white rounded-lg shadow hover:shadow-lg transition-all duration-300 border-t-4 border-t-blue-600 p-6"
className="bg-slate-900/50 backdrop-blur-sm rounded-lg border border-gray-700 shadow-xl hover:shadow-violet-500/10 transition-all duration-300 p-6"
>
<div className="mb-4">
<h3 className="text-2xl font-bold text-gray-900 mb-1">{course.name}</h3>
<p className="text-sm text-gray-600">{course.fullName}</p>
<h3 className="text-2xl font-bold text-gray-200 mb-1">{course.name}</h3>
<p className="text-sm text-gray-400">{course.fullName}</p>
</div>

<div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
<div className="flex items-center gap-2 mb-4 text-sm text-gray-400">
<Clock className="h-4 w-4" />
<span>{course.duration}</span>
</div>

<div className="mb-4">
<h4 className="text-sm font-semibold mb-2">Specializations</h4>
<h4 className="text-sm font-semibold text-gray-300 mb-2">Specializations</h4>
<div className="flex flex-wrap gap-2">
{course.specializations.map((spec, index) => (
<span
key={index}
className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full"
className="text-xs bg-violet-500/20 text-violet-300 px-2 py-1 rounded-full border border-violet-500/20"
>
{spec}
</span>
))}
</div>
</div>

<button className="w-full mt-4 flex items-center justify-center gap-2 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
<button className="w-full mt-4 flex items-center justify-center gap-2 py-2 bg-violet-500 text-white rounded-lg hover:bg-violet-600 transition-colors">
<span>View Details</span>
<ArrowRight className="h-4 w-4" />
</button>
Expand All @@ -128,8 +128,8 @@ const CoursesPage = () => {
))
) : (
<div className="text-center py-12">
<h3 className="text-lg font-medium text-gray-900 mb-2">No courses found</h3>
<p className="text-gray-600">Try adjusting your search or filters</p>
<h3 className="text-lg font-medium text-gray-200 mb-2">No courses found</h3>
<p className="text-gray-400">Try adjusting your search or filters</p>
</div>
)}
</div>
Expand Down
Loading