Added ThemeToggle

Added Footer

src/index.css

@@ -1,51 +1,70 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import "flowbite/src/themes/default";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@plugin "flowbite/plugin";
-@source "../node_modules/flowbite";
-:root {
-    --primary-color: #F4F6FF;
-    --secondary-color: #F3C623;
-    --accent-color: #EB8317;
-    /* --dark-color: #10375C; */
-    --dark-color: #111827;
-    --font-color: #D1D5DB;
+@layer base {
+     :root {
+        --bg-color: #f8fafc;
+        --surface-color: #ffffff;
+        --text-color: #1e293b;
+        --border-color: #e2e8f0;
+        --primary-color: #275094;
+        --secondary-color: #3c3c3c;
+    }
+    .dark {
+        --bg-color: #0f172a;
+        --surface-color: #1e293b;
+        --text-color: #f1f5f9;
+        --border-color: #334155;
+        --primary-color: #1c3a6b;
+        --secondary-color: #2a2a2a;
+    }
+    body {
+        @apply bg-theme text-theme transition-colors duration-300;
+        font-family: system-ui, -apple-system, sans-serif;
+    }
 }
 
-
-/* Default font for all languages except Arabic */
-
-* {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-
-/* Arabic font family when document direction is RTL */
-
-@font-face {
-    font-family: 'Madani Arabic';
-    src: url('./assets/fonts/Madani-Arabic-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Madani Arabic';
-    src: url('./assets/fonts/Madani-Arabic-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-}
-
-
-/* Arabic font override */
-
-html[dir="rtl"] *,
-html[lang="ar"] * {
-    font-family: 'Madani Arabic', Arial, sans-serif;
-}
-
-html {
-    scroll-behavior: smooth;
+@layer components {
+    .theme-container {
+        @apply bg-theme text-theme transition-colors duration-300;
+    }
+    .theme-surface {
+        @apply bg-surface border border-theme rounded-lg p-4 transition-colors duration-300;
+    }
+    .theme-card {
+        @apply bg-white dark: bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark: border-gray-700 transition-all duration-300 hover: shadow-xl;
+    }
+    .theme-btn-primary {
+        @apply bg-primary hover: bg-primary-light dark: bg-primary-dark dark: hover: bg-primary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
+    }
+    .theme-btn-secondary {
+        @apply bg-secondary hover: bg-secondary-light dark: bg-secondary-dark dark: hover: bg-secondary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
+    }
+    .theme-input {
+        @apply w-full px-4 py-3 bg-white dark: bg-gray-800 border border-gray-300 dark: border-gray-600 rounded-lg focus: ring-2 focus: ring-primary focus: border-transparent text-gray-900 dark: text-white placeholder-gray-500 dark: placeholder-gray-400 transition-colors duration-200;
+    }
+    .theme-nav {
+        @apply bg-white dark: bg-gray-800 shadow-md border-b border-gray-200 dark: border-gray-700 transition-colors duration-300;
+    }
+    .theme-nav-link {
+        @apply text-gray-700 dark: text-gray-300 hover: text-primary dark: hover: text-primary-light font-medium transition-colors duration-200 px-4 py-2;
+    }
+    .theme-section {
+        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-white dark: bg-gray-900 transition-colors duration-300;
+    }
+    .theme-section-alt {
+        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-gray-50 dark: bg-gray-800 transition-colors duration-300;
+    }
+    .theme-heading {
+        @apply text-3xl md: text-4xl lg: text-5xl font-bold text-gray-900 dark: text-white mb-6;
+    }
+    .theme-subheading {
+        @apply text-xl md: text-2xl text-gray-600 dark: text-gray-300 mb-8;
+    }
+    .theme-text {
+        @apply text-gray-700 dark: text-gray-300 leading-relaxed;
+    }
+    .theme-footer {
+        @apply bg-gray-800 dark: bg-gray-900 text-white py-8 border-t border-gray-700 dark: border-gray-800 transition-colors duration-300;
+    }
 }