Upload folder using huggingface_hub

client/src/pages/Dashboard.tsx

@@ -1,12 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { 
-  AcademicCapIcon, 
-  BookOpenIcon, 
-  HandThumbUpIcon,
   UserIcon,
-  ChartBarIcon,
-  DocumentTextIcon
+  ChartBarIcon
 } from '@heroicons/react/24/outline';
 
 interface User {
@@ -47,47 +43,53 @@ const Dashboard: React.FC = () => {
     return user.role === 'admin' ? 'Admin' : 'Student';
   };
 
+  const getIconSrc = (name: string): string => {
+    switch (name) {
+      case 'Tutorial Tasks': return '/icons/tutorial tasks.svg';
+      case 'Weekly Practice': return '/icons/weekly practice.svg';
+      case 'Vote Results': return '/icons/votes.svg';
+      case 'Toolkit': return '/icons/toolkit.svg';
+      case 'Slides': return '/icons/slides.svg';
+      case 'Feedback': return '/icons/feedback.svg';
+      default: return '/icons/home.svg';
+    }
+  };
+
   const quickActions = [
     {
       name: 'Tutorial Tasks',
       description: 'Complete weekly tasks',
       href: '/tutorial-tasks',
-      icon: AcademicCapIcon,
       color: 'bg-blue-500'
     },
     {
       name: 'Weekly Practice',
       description: 'Practice with examples',
       href: '/weekly-practice',
-      icon: BookOpenIcon,
       color: 'bg-green-500'
     },
     {
       name: 'Vote Results',
       description: 'View and vote on translations',
       href: '/votes',
-      icon: HandThumbUpIcon,
       color: 'bg-purple-500'
     },
     {
       name: 'Toolkit',
       description: 'Evaluation and reference tools',
       href: '/toolkit',
-      icon: ChartBarIcon,
       color: 'bg-indigo-500'
     },
     {
       name: 'Slides',
       description: 'Download tutorial slides',
       href: '/slides',
-      icon: DocumentTextIcon,
       color: 'bg-amber-500'
     },
     {
       name: 'Feedback',
       description: 'Send requests and issues',
       href: '/feedback',
-      icon: DocumentTextIcon,
       color: 'bg-rose-500'
     }
   ];
@@ -141,7 +143,7 @@ const Dashboard: React.FC = () => {
               >
                 <div className="flex items-center">
                   <div className={`p-3 rounded-2xl bg-gradient-to-br from-orange-400/30 via-amber-400/30 to-orange-500/30 hover:from-orange-400/40 hover:via-amber-400/40 hover:to-orange-500/40`}>
-                    <action.icon className="h-6 w-6 text-orange-500" />
+                    <img src={getIconSrc(action.name)} alt={action.name} className="h-6 w-6" />
                   </div>
                   <div className="ml-4">
                     <h3 className="text-lg font-medium text-ui-text">{action.name}</h3>

client/src/pages/Feedback.tsx

@@ -62,7 +62,10 @@ const Feedback: React.FC = () => {
   return (
     <div className="min-h-screen bg-gray-50 py-8">
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h1 className="text-2xl font-semibold text-gray-900 mb-4">Feedback & Suggestions</h1>
+        <div className="flex items-center mb-4">
+          <img src="/icons/feedback.svg" alt="Feedback" className="h-8 w-8 mr-3" />
+          <h1 className="text-2xl font-semibold text-gray-900">Feedback & Suggestions</h1>
+        </div>
         <p className="text-sm text-gray-600 mb-4">Share feature requests or issues.</p>
         <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-3">
           <textarea

client/src/pages/Profile.tsx

@@ -459,7 +459,10 @@ const Manage: React.FC = () => {
       <div className="mb-8">
         <div className="flex justify-between items-center">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">Manage</h1>
+            <div className="flex items-center">
+              <img src="/icons/manage.svg" alt="Manage" className="h-8 w-8 mr-3" />
+              <h1 className="text-2xl font-bold text-gray-900">Manage</h1>
+            </div>
             <p className="mt-2 text-gray-600">Admin panel for system management</p>
           </div>
           <div className="flex items-center space-x-4">

client/src/pages/Slides.tsx

@@ -54,7 +54,10 @@ const Slides: React.FC = () => {
     <div className="min-h-screen bg-gray-50 py-8">
       <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="mb-6">
-          <h1 className="text-2xl font-semibold text-gray-900">Slides</h1>
+          <div className="flex items-center mb-2">
+            <img src="/icons/slides.svg" alt="Slides" className="h-8 w-8 mr-3" />
+            <h1 className="text-2xl font-semibold text-gray-900">Slides</h1>
+          </div>
           <p className="text-gray-600 text-sm">Download tutorial slides</p>
         </div>
 

client/src/pages/Toolkit.tsx

@@ -358,7 +358,7 @@ const Toolkit: React.FC = () => {
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <WrenchScrewdriverIcon className="h-8 w-8 text-indigo-900 mr-3" />
+            <img src="/icons/toolkit.svg" alt="Toolkit" className="h-8 w-8 mr-3" />
             <h1 className="text-3xl font-bold text-gray-900">Toolkit</h1>
           </div>
           <p className="text-gray-600">Helpful tools for evaluation and reference. Pick a tool below.</p>

client/src/pages/TutorialTasks.tsx

@@ -1069,7 +1069,7 @@ const TutorialTasks: React.FC = () => {
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <AcademicCapIcon className="h-8 w-8 text-ui-neonBlue mr-3" />
+            <img src="/icons/tutorial tasks.svg" alt="Tutorial Tasks" className="h-8 w-8 mr-3" />
             <h1 className="text-3xl font-bold text-ui-text">Tutorial Tasks</h1>
           </div>
           <p className="text-ui-text/70">

client/src/pages/VoteResults.tsx

@@ -319,7 +319,7 @@ const VoteResults: React.FC = () => {
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <HandThumbUpIcon className="h-8 w-8 text-indigo-600 mr-3" />
+            <img src="/icons/votes.svg" alt="Vote Results" className="h-8 w-8 mr-3" />
             <h1 className="text-3xl font-bold text-gray-900">Vote Results</h1>
           </div>
           <p className="text-gray-600">

client/src/pages/WeeklyPractice.tsx

@@ -1415,7 +1415,7 @@ const WeeklyPractice: React.FC = () => {
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <BookOpenIcon className="h-8 w-8 text-ui-neonBlue mr-3" />
+            <img src="/icons/weekly practice.svg" alt="Weekly Practice" className="h-8 w-8 mr-3" />
             <h1 className="text-3xl font-bold text-ui-text">Weekly Practice</h1>
           </div>
           <p className="text-ui-text/70">