implemented typescript for code maintainibility

client/src/App.jsx

@@ -23,7 +23,7 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 import JoinLecture from "./components/JoinLectures.jsx";
-import AboutPage from "./pages/About/AboutPage.jsx";
+import AboutPage from "./pages/About/AboutPage.tsx";
 import ContactPage from "./pages/Contact/ContactPage.tsx";
 import CoursesPage from "./pages/Courses/CoursesPage.jsx";
 import NotesPage from "./pages/Notes/NotesPage.jsx";

client/src/main.jsx

@@ -21,12 +21,12 @@ import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App.jsx';
 import { BrowserRouter } from 'react-router-dom';
-import AuthContextProvider from './context/AuthContext'; // Ensure correct import path
+import AuthContextProvider from './context/AuthContext'; 
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
-      <AuthContextProvider>  {/* Wrap App inside AuthContextProvider */}
+      <AuthContextProvider>  
         <App />
       </AuthContextProvider>
     </BrowserRouter>

client/src/pages/About/AboutPage.jsx → client/src/pages/About/AboutPage.tsx

@@ -25,7 +25,7 @@ import JourneySection from "./components/JourneySection";
 import TeamSection from "./components/TeamSection";
 import ServiceLayout from "../../layout/ServiceLayout";
 
-const AboutPage = () => {
+const AboutPage : React.FC = () => {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-950 to-indigo-950  mt-14 bg-white">
       {/* Previous sections remain unchanged */}

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

@@ -1,15 +1,22 @@
 import React from 'react';
 import milestones from "../utils/milestones.ts";
 
-const JourneySection = () => {
+
+interface Milestone{
+  year:string;
+  event:string;
+}
+
+const JourneySection : React.FC = () => {
+
   return (
     <section className="py-20 bg-gradient-to-b from-indigo-950 to-slate-950">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-violet-600 mb-12 text-center">
           Our Journey
         </h2>
         <div className="max-w-3xl mx-auto">
-          {milestones.map((milestone, index) => (
+          {milestones.map((milestone : Milestone, index : number) => (
             <div key={index} className="flex items-start mb-8 last:mb-0" data-aos="fade-up">
               <div className="flex-shrink-0 w-24">
                 <div className="font-bold text-purple-200">

client/src/pages/About/components/MissionSection.jsx → client/src/pages/About/components/MissionSection.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import values from "../utils/Values";
 
-const MissionSection = () => {
+interface Value {
+
+  title:string;
+  icon:ReactNode;
+  description:string;
+
+}
+
+const MissionSection : React.FC = () => {
   return (
     <section className="py-20 bg-gradient-to-b from-slate-950 to-indigo-950">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -13,7 +21,7 @@ const MissionSection = () => {
             To empower educational institutions with cutting-edge technology solutions that enhance learning experiences and improve educational outcomes. We believe in making quality education accessible, engaging, and effective for everyone.
           </p>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {values.map((value, index) => (
+            {values.map((value : Value, index:number) => (
               <div
                 key={index}
                 className="bg-slate-900 p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:scale-105"

client/src/pages/About/components/ServiceSection.jsx → client/src/pages/About/components/ServiceSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Services from '../../../constants/Services';
 
-const ServiceSection = () => {
+const ServiceSection : React.FC = () => {
   return (
     <section className="py-20 bg-gradient-to-b from-indigo-950 to-slate-950">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

client/src/pages/About/components/StatSection.jsx → client/src/pages/About/components/StatSection.tsx

@@ -1,12 +1,18 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import stats from "../utils/Stats";
 
-const StatSection = () => {
+interface Stat{
+number:string;
+label:string;
+icon:ReactNode
+}
+
+const StatSection : React.FC = () => {
   return (
     <section className="py-20 bg-gradient-to-b from-slate-950 ">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-          {stats.map((stat, index) => (
+          {stats.map((stat : Stat, index:number) => (
             <div
               key={index}
               className="text-center bg-slate-900 p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:scale-105"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const TeamSection = () => {
+const TeamSection : React.FC = () => {
   return (
     <section className="py-20 bg-gradient-to-b from-indigo-950 to-slate-950">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -14,7 +14,7 @@ const TeamSection = () => {
         </div>
         {/* Placeholder for team members */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {[1, 2, 3].map((_, index) => (
+          {[1, 2, 3].map((_, index:number) => (
             <div
               key={index}
               className="bg-slate-900 p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:scale-105"

client/src/pages/Auth/Login.jsx

@@ -29,7 +29,7 @@ import { useNavigate } from 'react-router-dom';
 function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const backendUrl = import.meta.env.VITE_BACKEND_URL;
+  const backendUrl=import.meta.env.VITE_BACKEND_URL;
   const navigate = useNavigate();
   const { token, setToken } = useAuth();
   const [errors,setErrors]=useState('');