Footer & css

src/App.jsx

@@ -7,6 +7,7 @@ import Todolist from "@pages/Todolist";
 import { TasksProvider } from "@context/TasksContext";
 import { ThemeProvider } from "@context/ThemeContext";
 import Navbar from "@components/Navbar.jsx";
+import Footer from "@components/Footer.jsx";
 
 function App() {
   return (
@@ -15,7 +16,7 @@ function App() {
         <Router>
           <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
             <Navbar />
-            <main className="pt-4">
+            <main className="flex-grow pt-4">
               <Routes>
                 <Route path="/signin" element={<SignIn />} />
                 <Route path="/signup" element={<SignUp />} />
@@ -23,6 +24,7 @@ function App() {
                 <Route path="/todolist" element={<Todolist />} />
               </Routes>
             </main>
+              <Footer />
           </div>
         </Router>
       </TasksProvider>

src/components/Footer.jsx

+import React from "react";
+import { Heart } from "lucide-react";
+
+const Footer = () => {
+    const currentYear = new Date().getFullYear();
+    const teamMembers = [
+        "Abdelhak BENKORTBI",
+        "Amine ZAIME",
+        "Anas OUKASSOU",
+        "Kevin MALDONADO"
+
+    ];
+
+    return (
+        <footer className="bg-white border-t border-gray-100">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                <div className="flex flex-col items-center space-y-4">
+                    {/* Team members */}
+                    <div className="flex flex-wrap justify-center gap-2">
+                        {teamMembers.map((member, index) => (
+                            <React.Fragment key={member}>
+                                <span className="text-gray-600 font-medium">{member}</span>
+                                {index < teamMembers.length - 1 && (
+                                    <span className="text-gray-400">•</span>
+                                )}
+                            </React.Fragment>
+                        ))}
+                    </div>
+
+                    {/* Copyright and signature */}
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>&copy; {currentYear} TaskMaster</span>
+                        <span className="text-gray-400">|</span>
+                        <div className="flex items-center gap-1">
+                            <span>Made with</span>
+                            <Heart size={14} className="text-red-500 fill-current" />
+                            <span>by the team</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
\ No newline at end of file

src/components/dashboard/TaskStats.jsx

@@ -10,7 +10,7 @@ const TaskStats = () => {
   const total = tasks.length;
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
       <TaskCard title="Completed Tasks" count={completed} />
       <TaskCard title="Incompleted Tasks" count={incompleted} />
       <TaskCard title="Total Tasks" count={total} />

src/pages/Home.jsx

@@ -21,23 +21,22 @@ const Home = () => {
             name: "",
             isCompleted: false,
             dueDate: ""
-        }
-    }
+        };
+    };
+
 
-    // Fonction pour ajouter une nouvelle tâche
     const saveTask = (task) => {
         const newTask = {
             ...task,
-            dueDate: task.dueDate || selectedDate.toISOString().split("T")[0], // Ajouter une dueDate par défaut
+            dueDate: task.dueDate || selectedDate.toISOString().split("T")[0],
         };
         setTasks([...tasks, newTask]);
     };
 
-    // Filtrer les tâches en fonction de leur dueDate
     const filteredTasks = tasks.filter(task => {
-        if (!task.dueDate) return false; // Vérifie si une tâche a bien une date
-        const taskDate = new Date(task.dueDate); // Convertir en objet Date
-        return taskDate.toDateString() === selectedDate.toDateString(); // Comparer avec la date sélectionnée
+        if (!task.dueDate) return false;
+        const taskDate = new Date(task.dueDate);
+        return taskDate.toDateString() === selectedDate.toDateString();
     });
 
     return (
@@ -46,10 +45,10 @@ const Home = () => {
                 <TaskStats />
             </div>
             <div className="min-h-screen bg-gray-100 dark:bg-gray-800 p-8">
-                <div className="grid grid-cols-2 gap-6">
 
+                <div className="grid grid-cols-3 grid-rows-2 gap-6 h-full">
 
-                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 row-span-2 col-span-2">
                         <h3 className="text-lg font-semibold mb-4 dark:text-white">
                             Tasks for {selectedDate.toDateString()}
                         </h3>
@@ -62,20 +61,18 @@ const Home = () => {
                         )}
                     </div>
 
-                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
                         <Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
                     </div>
 
-                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]"></div>
-
-                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
                         <TasksStatPercent />
                     </div>
+
                 </div>
             </div>
 
-
-            <Modal task={newTask()} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
+            <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
         </div>
     );
 };