Merge pull request #76 from yours7himanshu/ui-improvement/coursePage

improved ui

client/src/components/Navbar/Navbar.jsx

@@ -25,10 +25,10 @@ const Navbar = () => {
   const navigate = useNavigate();
 
   return (
-    <nav className="bg-gray-950 fixed top-0 left-0 w-full z-50 h-[10%] text-white max-md:shadow-sm shadow-lg p-3">
+    <nav className="bg-gray-950 fixed top-0 left-0 w-full z-50 h-[11%] text-white max-md:shadow-sm shadow-lg p-3">
       <div className="container mx-auto max-md:m-2 flex justify-between items-center">
         {/* Logo */}
-        <div className="text-3xl max-md:text-3xl flex items-center gap-2 font-extrabold">
+        <div className="text-3xl ml-3 max-md:text-3xl flex items-center gap-2 font-extrabold">
         <img className="rounded-full  h-10" src="/logo/EduMatrix2.png" alt="" />
           <Link to="/">EduMatrix</Link>
         </div>
@@ -89,7 +89,7 @@ const Navbar = () => {
           ) : ( */}
             <button
               onClick={()=> navigate("/MainLogin")}
-              className="bg-zinc-200 font-medium text-black px-5 py-3 rounded-md  max-md:px-2  max-md:text-sm  "
+              className="bg-zinc-200 mr-3 font-medium text-black px-5 py-3 rounded-md  max-md:px-2  max-md:text-sm  "
             >
               Create Account
             </button>

client/src/pages/About/AboutPage.jsx

@@ -28,7 +28,7 @@ import TeamSection from "./components/TeamSection";
 
 const AboutPage = () => {
   return (
-    <div className="min-h-screen gradient-bg  mt-14 bg-white">
+    <div className="min-h-screen bg-gradient-to-b from-slate-950 to-indigo-950  mt-14 bg-white">
       {/* Previous sections remain unchanged */}
       {/* Hero Section */}
       <HeroSection />
@@ -49,6 +49,7 @@ const AboutPage = () => {
       {/* Team Section */}
 
       <TeamSection />
+      <hr  className="outline-none  border-t-2 border-indigo-900 max-md:mx-11 mx-24" />
 
       {/* Footer */}
       <Footer />

client/src/pages/About/components/HeroSection.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 
 const HeroSection = () => {
   return (
-    <section className=" text-white py-20">
+    <section className="  py-20">
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div className="text-center">
-        <h1 className="text-4xl font-bold  mb-6">
+        <h1 className="text-4xl text-purple-200 font-bold  mb-6">
           About EduMatrix
         </h1>
-        <p className="text-xl  max-w-3xl mx-auto">
+        <p className="text-xl text-gray-300  max-w-3xl mx-auto">
           We're on a mission to make quality education accessible to
           everyone through innovative technology and dedicated teaching.
         </p>

client/src/pages/About/components/JourneySection.jsx

@@ -3,21 +3,21 @@ import milestones from "../utils/milestones";
 
 const JourneySection = () => {
   return (
-    <section className="py-16 bg-gray-50">
+    <section className="py-16 bg-gradient-to-b from-indigo-950 to-slate-950 bg-gray-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-12 text-center">
+          <h2 className="text-3xl font-bold text-gray-300 mb-12 text-center">
             Our Journey
           </h2>
           <div className="max-w-3xl mx-auto">
             {milestones.map((milestone, index) => (
               <div key={index} className="flex items-start mb-8 last:mb-0">
                 <div className="flex-shrink-0 w-24">
-                  <div className="font-bold text-blue-600">
+                  <div className="font-bold text-purple-200">
                     {milestone.year}
                   </div>
                 </div>
-                <div className="flex-grow pl-8 border-l-2 border-blue-100">
-                  <div className="bg-white p-4 rounded-lg shadow-sm">
+                <div className="flex-grow pl-8 border-l-2 border-indigo-900">
+                  <div className="bg-indigo-900 text-gray-300 p-4 rounded-lg shadow-sm">
                     {milestone.event}
                   </div>
                 </div>

client/src/pages/About/components/TeamSection.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 const TeamSection = () => {
   return (
-    <section className="py-16 bg-white">
+    <section className="py-16  bg-slate-950">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">
-            <h2 className="text-3xl font-bold text-gray-900 mb-6">Our Team</h2>
-            <p className="text-lg text-gray-600 mb-12 max-w-3xl mx-auto">
+            <h2 className="text-3xl font-bold text-gray-300 mb-6">Our Team</h2>
+            <p className="text-lg text-gray-200 mb-12 max-w-3xl mx-auto">
               We're a dedicated team of educators, technologists, and innovators
               working together to transform education.
             </p>

client/src/pages/About/utils/Stats.jsx

@@ -18,25 +18,19 @@ limitations under the License.
 
 
 import { 
-    Award, 
+
     Users, 
-    Globe, 
     BookOpen, 
     Building, 
     GraduationCap,
-    Video,
-    ClipboardCheck,
-    HelpCircle,
-    LineChart,
-    MessageCircle,
-    Calendar
+
   } from 'lucide-react';
 
 const Stats = [
-    { number: "10K+", label: "Students Enrolled", icon: <Users className="w-6 h-6 text-blue-600" /> },
-    { number: "500+", label: "Expert Teachers", icon: <GraduationCap className="w-6 h-6 text-blue-600" /> },
-    { number: "100+", label: "Courses", icon: <BookOpen className="w-6 h-6 text-blue-600" /> },
-    { number: "50+", label: "Partner Institutions", icon: <Building className="w-6 h-6 text-blue-600" /> }
+    { number: "10K+", label: "Students Enrolled", icon: <Users className="w-6 h-6 text-purple-200" /> },
+    { number: "500+", label: "Expert Teachers", icon: <GraduationCap className="w-6 h-6 text-purple-200" /> },
+    { number: "100+", label: "Courses", icon: <BookOpen className="w-6 h-6 text-purple-200" /> },
+    { number: "50+", label: "Partner Institutions", icon: <Building className="w-6 h-6 text-purple-200" /> }
   ];
 
 

client/src/pages/Contact/ContactPage.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Mail, Phone, MapPin, Clock, Send, ChevronDown, ExternalLink } from 'lucide-react';
+import { Mail, Phone, MapPin, Clock, Send, ChevronDown} from 'lucide-react';
 import Footer from '../../shared/Footer/Footer';
 import faqData from './faqData.js';
 
@@ -13,12 +13,12 @@ const FAQItem = ({ question, answer }) => {
         className="flex justify-between items-center w-full text-left"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <span className="text-lg font-medium text-gray-800">{question}</span>
+        <span className="text-lg font-medium text-gray-200">{question}</span>
         <ChevronDown 
-          className={`w-5 h-5 text-gray-600 transition-transform duration-300 ${isOpen ? 'transform rotate-180' : ''}`} 
+          className={`w-5 h-5 text-gray-200 transition-transform duration-300 ${isOpen ? 'transform rotate-180' : ''}`} 
         />
       </button>
-      <div className={`mt-2 text-gray-600 transition-all duration-300 ${isOpen ? 'block opacity-100' : 'hidden opacity-0'}`}>
+      <div className={`mt-2 text-gray-200 transition-all duration-300 ${isOpen ? 'block opacity-100' : 'hidden opacity-0'}`}>
         {answer}
       </div>
     </div>
@@ -35,12 +35,7 @@ const ContactPage = () => {
 
 
 
-  const socialLinks = [
-    { name: 'Website', url: '#' },
-    { name: 'Support', url: '#' },
-    { name: 'Community', url: '#' },
-    { name: 'Resources', url: '#' }
-  ];
+
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -77,7 +72,7 @@ const ContactPage = () => {
           {/* Contact Information Cards */}
           <div className="space-y-6">
             {/* Email Card */}
-            <div className="bg-indigo-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
+            <div className="bg-gradient-to-r from-indigo-950 to-blue-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
               <div className="flex items-center space-x-4 backdrop-opacity-0">
                 <div className="bg-blue-100 p-3 rounded-full">
                   <Mail className="w-6 h-6 text-gray-900 font-extralight" />
@@ -90,7 +85,7 @@ const ContactPage = () => {
             </div>
 
             {/* Phone Card */}
-            <div className="bg-indigo-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
+            <div className=" bg-gradient-to-r from-indigo-950 to-blue-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
               <div className="flex items-center space-x-4">
                 <div className="bg-green-100 p-3 rounded-full">
                   <Phone className="w-6 h-6 text-green-600" />
@@ -103,7 +98,7 @@ const ContactPage = () => {
             </div>
 
             {/* Location Card */}
-            <div className="bg-indigo-950    text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
+            <div className="bg-gradient-to-r from-indigo-950 to-blue-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
               <div className="flex items-center  space-x-4">
                 <div className="bg-purple-100 border  p-3 rounded-full">
                   <MapPin className="w-6 h-6 text-purple-600" />
@@ -116,7 +111,7 @@ const ContactPage = () => {
             </div>
 
             {/* Hours Card */}
-            <div className="bg-indigo-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
+            <div className=" bg-gradient-to-r from-indigo-950 to-blue-950   text-white rounded-lg border/80 border-white-100 shadow-xl p-6 hover:shadow-md transition-shadow">
               <div className="flex items-center space-x-4">
                 <div className="bg-orange-100 p-3 rounded-full">
                   <Clock className="w-6 h-6 text-orange-600" />
@@ -130,7 +125,7 @@ const ContactPage = () => {
           </div>
 
           {/* Contact Form */}
-          <div className="bg-indigo-950  backdrop-blur-lg p-8 rounded-2xl shadow-xl">
+          <div className=" bg-gradient-to-r from-indigo-950 to-blue-950  backdrop-blur-lg p-8 rounded-xl shadow-xl">
             <h2 className="text-2xl font-semibold mb-6 text-gray-200">Send us a message</h2>
             <form onSubmit={handleSubmit} className="space-y-6">
               <div>
@@ -190,8 +185,8 @@ const ContactPage = () => {
         </div>
 
         {/* FAQ Section */}
-        <div className="mt-24 bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8">
-          <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center ">
+        <div className="mt-24 bg-indigo-950 backdrop-blur-lg rounded-2xl shadow-xl p-8">
+          <h2 className="text-3xl font-bold text-gray-300 mb-8 text-center ">
             Frequently Asked Questions
           </h2>
           <div className="max-w-3xl mx-auto">

client/src/pages/Courses/CoursesPage.jsx

@@ -53,20 +53,20 @@ const CoursesPage = () => {
 
       {/* Search and Filter Section */}
       <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="bg-slate-900/50  backdrop-blur-sm rounded-lg  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 bg-slate-800 text-gray-200 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500"
+                className="w-full pl-10 pr-4 py-2 bg-slate-900 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 bg-slate-800 text-gray-200 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500"
+              className="px-4 py-2 bg-slate-900 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)}
             >
@@ -109,7 +109,7 @@ const CoursesPage = () => {
                         {course.specializations.map((spec, index) => (
                           <span
                             key={index}
-                            className="text-xs bg-violet-500/20 text-violet-300 px-2 py-1 rounded-full border border-violet-500/20"
+                            className="text-xs bg-purple-200 text-indigo-950 px-2 py-1 rounded-full border border-violet-400 shadow-lg"
                           >
                             {spec}
                           </span>