implemented typescript for code maintainibility

client/src/App.jsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import Signup from "./pages/Auth/SignUp.jsx";
-import Navbar from "./components/Navbar/Navbar.jsx";
 import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
@@ -25,13 +24,8 @@ import "react-toastify/dist/ReactToastify.css";
 
 import JoinLecture from "./components/JoinLectures.jsx";
 import AboutPage from "./pages/About/AboutPage.jsx";
-import ContactPage from "./pages/Contact/ContactPage.jsx";
+import ContactPage from "./pages/Contact/ContactPage.tsx";
 import CoursesPage from "./pages/Courses/CoursesPage.jsx";
-import Card from '@mui/material/Card';
- import CardContent from '@mui/material/CardContent';
-  import Typography from '@mui/material/Typography';
-   import Button from '@mui/material/Button'; 
-   import CardActions from '@mui/material/CardActions';
 import NotesPage from "./pages/Notes/NotesPage.jsx";
 import SyllabusPage from "./pages/Syllabus/SyllabusPage.jsx";
 import QuizList from "./components/Quiz/QuizList.jsx";
@@ -42,7 +36,6 @@ import MainLoginPage from "./pages/Auth/MainLoginPage.jsx";
 import Announcement from "./components/Announcement/Announcement.jsx";
 import HomePage from "./pages/Home/HomePage.jsx";
 import AiAssistent from "./components/AI Powered Assistant/AiAssistent.jsx";
-import Modal from "./Modal/Modal.jsx";
 import StudentDashboard from "./Student Dashboard/Dashboard/StudentDashboard.jsx";
 // import ModalComponent from "./Modal/ModalComponent.jsx";
 

client/src/pages/Contact/ContactPage.jsx → client/src/pages/Contact/ContactPage.tsx

@@ -1,11 +1,17 @@
+import React from 'react';
 import { useState } from 'react';
 import { Mail, Phone, MapPin, Clock, Send, ChevronDown } from 'lucide-react';
 
 import faqData from './faqData.ts';
 import ServiceLayout from '../../layout/ServiceLayout.jsx';
 
-const FAQItem = ({ question, answer }) => {
-  const [isOpen, setIsOpen] = useState(false);
+interface FAQItemProps{
+  question:string;
+  answer:string;
+}
+
+const FAQItem = ({ question, answer } : FAQItemProps ) => {
+  const [isOpen, setIsOpen] = useState <boolean> (false);
 
   return (
     <div className="border-b border-gray-700 py-6">
@@ -27,8 +33,15 @@ const FAQItem = ({ question, answer }) => {
   );
 };
 
+interface formDataState{
+  name:string;
+  email:string;
+  subject:string;
+  message:string;
+}
+
 const ContactPage = () => {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<formDataState>({
     name: '',
     email: '',
     subject: '',
@@ -165,7 +178,7 @@ const ContactPage = () => {
                   name="message"
                   value={formData.message}
                   onChange={handleChange}
-                  rows="4"
+                  rows={4}
                   className="w-full px-4 py-3 bg-slate-800 text-gray-200 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 transition-all duration-300"
                   required
                 />