From 52bcb94d039a55cca08b18f7c19f1d00706b85e6 Mon Sep 17 00:00:00 2001
From: wameup <wameup@outlook.com>
Date: Tue, 10 Mar 2026 03:16:12 +0000
Subject: [PATCH] Implemented a fully responsive dark/light mode toggle switch
 in the navigation bar with smooth transitions across all components.

---
 src/App.jsx                      | 43 +++++++++++----------
 src/components/layout/Footer.jsx | 28 +++++++-------
 src/components/layout/Navbar.jsx | 44 ++++++++++++++++-----
 src/context/ThemeContext.jsx     | 50 ++++++++++++++++++++++++
 src/index.css                    | 20 +++++++---
 src/pages/Home.jsx               | 66 ++++++++++++++++----------------
 tailwind.config.js               |  2 +
 7 files changed, 171 insertions(+), 82 deletions(-)
 create mode 100644 src/context/ThemeContext.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d7289db..f8519c5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from './context/ThemeContext';
 import Navbar from './components/layout/Navbar';
 import Footer from './components/layout/Footer';
 import Home from './pages/Home';
@@ -14,26 +15,28 @@ import NotFound from './pages/NotFound';
 
 function App() {
   return (
-    <Router>
-      <div className="min-h-screen flex flex-col">
-        <Navbar />
-        <main className="flex-grow">
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/properties" element={<Properties />} />
-            <Route path="/properties/:id" element={<PropertyDetail />} />
-            <Route path="/property-3d" element={<Property3D />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/privacy" element={<Privacy />} />
-            <Route path="/faq" element={<FAQ />} />
-            <Route path="/blog" element={<Blog />} />
-            <Route path="/blog/:slug" element={<BlogPost />} />
-            <Route path = '*' element={<NotFound/>} />
-          </Routes>
-        </main>
-        <Footer />
-      </div>
-    </Router>
+    <ThemeProvider>
+      <Router>
+        <div className="min-h-screen flex flex-col">
+          <Navbar />
+          <main className="flex-grow">
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/properties" element={<Properties />} />
+              <Route path="/properties/:id" element={<PropertyDetail />} />
+              <Route path="/property-3d" element={<Property3D />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/privacy" element={<Privacy />} />
+              <Route path="/faq" element={<FAQ />} />
+              <Route path="/blog" element={<Blog />} />
+              <Route path="/blog/:slug" element={<BlogPost />} />
+              <Route path = '*' element={<NotFound/>} />
+            </Routes>
+          </main>
+          <Footer />
+        </div>
+      </Router>
+    </ThemeProvider>
   );
 }
 
diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index 586fec1..068b8b4 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -4,13 +4,13 @@ import { FaDiscord } from 'react-icons/fa';
 
 function Footer() {
   return (
-    <footer className="bg-secondary-900 text-white">
+    <footer className="bg-secondary-900 dark:bg-secondary-950 text-white transition-colors duration-300">
       <div className="container py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {/* Company Info */}
           <div>
             <h3 className="text-lg font-semibold mb-4">RoyalCity</h3>
-            <p className="text-secondary-300 text-sm">
+            <p className="text-secondary-300 dark:text-secondary-400 text-sm transition-colors duration-300">
               Your trusted partner in finding the perfect property. We make real estate simple and accessible for everyone.
             </p>
           </div>
@@ -20,22 +20,22 @@ function Footer() {
             <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
             <ul className="space-y-2">
               <li>
-                <Link to="/properties" className="text-secondary-300 hover:text-white text-sm">
+                <Link to="/properties" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 text-sm transition-colors duration-300">
                   Properties
                 </Link>
               </li>
               <li>
-                <Link to="/about" className="text-secondary-300 hover:text-white text-sm">
+                <Link to="/about" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 text-sm transition-colors duration-300">
                   About Us
                 </Link>
               </li>
               <li>
-                <Link to="/faq" className="text-secondary-300 hover:text-white text-sm">
+                <Link to="/faq" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 text-sm transition-colors duration-300">
                   FAQ
                 </Link>
               </li>
               <li>
-                <Link to="/privacy" className="text-secondary-300 hover:text-white text-sm">
+                <Link to="/privacy" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 text-sm transition-colors duration-300">
                   Privacy Policy
                 </Link>
               </li>
@@ -46,15 +46,15 @@ function Footer() {
           <div>
             <h3 className="text-lg font-semibold mb-4">Contact</h3>
             <ul className="space-y-2">
-              <li className="flex items-center text-secondary-300 text-sm">
+              <li className="flex items-center text-secondary-300 dark:text-secondary-400 text-sm transition-colors duration-300">
                 <FiPhone className="mr-2" />
                 <span>+1 (555) 123-4567</span>
               </li>
-              <li className="flex items-center text-secondary-300 text-sm">
+              <li className="flex items-center text-secondary-300 dark:text-secondary-400 text-sm transition-colors duration-300">
                 <FiMail className="mr-2" />
                 <span>contact@RoyalCity.com</span>
               </li>
-              <li className="flex items-center text-secondary-300 text-sm">
+              <li className="flex items-center text-secondary-300 dark:text-secondary-400 text-sm transition-colors duration-300">
                 <FiMapPin className="mr-2" />
                 <span>123 Property Street, Real City, RC 12345</span>
               </li>
@@ -65,23 +65,23 @@ function Footer() {
           <div>
             <h3 className="text-lg font-semibold mb-4">Connect With Us</h3>
             <div className="flex space-x-4">
-              <Link to="#" className="text-secondary-300 hover:text-white">
+              <Link to="#" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 transition-colors duration-300">
                 <FiTwitter size={20} />
               </Link>
-              <Link to="#" className="text-secondary-300 hover:text-white">
+              <Link to="#" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 transition-colors duration-300">
                 <FiLinkedin size={20} />
               </Link>
-              <Link to="#" className="text-secondary-300 hover:text-white">
+              <Link to="#" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 transition-colors duration-300">
                 <FiGithub size={20} />
               </Link>
-              <Link to="#" className="text-secondary-300 hover:text-white">
+              <Link to="#" className="text-secondary-300 dark:text-secondary-400 hover:text-white dark:hover:text-secondary-200 transition-colors duration-300">
                 <FaDiscord size={20} />
               </Link>
             </div>
           </div>
         </div>
 
-        <div className="border-t border-secondary-700 mt-8 pt-8 text-center text-secondary-300 text-sm">
+        <div className="border-t border-secondary-700 dark:border-secondary-800 mt-8 pt-8 text-center text-secondary-300 dark:text-secondary-400 text-sm transition-colors duration-300">
           <p>&copy; {new Date().getFullYear()} RoyalCity. All rights reserved.</p>
         </div>
       </div>
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index b811a52..764281d 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { FiMenu, FiX } from 'react-icons/fi';
+import { FiMenu, FiX, FiSun, FiMoon } from 'react-icons/fi';
+import { useTheme } from '../../context/ThemeContext';
 
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const { isDark, toggleTheme } = useTheme();
 
   const navigation = [
     { name: 'Home', href: '/' },
@@ -14,9 +16,9 @@ function Navbar() {
   ];
 
   return (
-    <nav className="bg-white shadow-sm">
+    <nav className="bg-white dark:bg-secondary-900 shadow-sm dark:shadow-md transition-colors duration-300">
       <div className="container">
-        <div className="flex justify-between h-16">
+        <div className="flex justify-between items-center h-16">
           <div className="flex">
             <Link to="/" className="flex items-center">
               <svg width="30" height="35" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,11 +35,22 @@ function Navbar() {
               <Link
                 key={item.name}
                 to={item.href}
-                className="text-secondary-600 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+                className="text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors duration-300"
               >
                 {item.name}
               </Link>
             ))}
+            
+            {/* Theme Toggle Button */}
+            <button
+              onClick={toggleTheme}
+              className="theme-toggle"
+              aria-label="Toggle theme"
+              title={isDark ? 'Light mode' : 'Dark mode'}
+            >
+              {isDark ? <FiSun size={20} /> : <FiMoon size={20} />}
+            </button>
+            
             <button
               className="btn"
             >
@@ -45,11 +58,22 @@ function Navbar() {
             </button>
           </div>
 
-          {/* Mobile menu button */}
-          <div className="flex items-center md:hidden">
+          {/* Mobile menu and theme toggle */}
+          <div className="flex items-center md:hidden space-x-3">
+            {/* Mobile Theme Toggle Button */}
+            <button
+              onClick={toggleTheme}
+              className="theme-toggle"
+              aria-label="Toggle theme"
+              title={isDark ? 'Light mode' : 'Dark mode'}
+            >
+              {isDark ? <FiSun size={20} /> : <FiMoon size={20} />}
+            </button>
+
+            {/* Mobile menu button */}
             <button
               type="button"
-              className="text-secondary-600 hover:text-primary-600"
+              className="text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-300"
               onClick={() => setIsOpen(!isOpen)}
             >
               {isOpen ? <FiX size={24} /> : <FiMenu size={24} />}
@@ -59,20 +83,20 @@ function Navbar() {
 
         {/* Mobile Navigation */}
         {isOpen && (
-          <div className="md:hidden">
+          <div className="md:hidden bg-white dark:bg-secondary-800 transition-colors duration-300">
             <div className="pt-2 pb-3 space-y-1">
               {navigation.map((item) => (
                 <Link
                   key={item.name}
                   to={item.href}
-                  className="block px-3 py-2 text-base font-medium text-secondary-600 hover:text-primary-600 hover:bg-primary-50"
+                  className="block px-3 py-2 text-base font-medium text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-secondary-700 transition-colors duration-300"
                   onClick={() => setIsOpen(false)}
                 >
                   {item.name}
                 </Link>
               ))}
               <button
-                className="block px-3 py-2 text-base font-medium text-white bg-primary-600 hover:bg-primary-700"
+                className="block w-full text-left px-3 py-2 text-base font-medium text-white bg-primary-600 hover:bg-primary-700 transition-colors duration-300"
                 onClick={() => setIsOpen(false)}
               >
                 Connect
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..a9cd319
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,50 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [isDark, setIsDark] = useState(false);
+
+  // Initialize theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme) {
+      setIsDark(savedTheme === 'dark');
+    } else {
+      setIsDark(prefersDark);
+    }
+  }, []);
+
+  // Update DOM and localStorage when theme changes
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    
+    if (isDark) {
+      htmlElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      htmlElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }, [isDark]);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
diff --git a/src/index.css b/src/index.css
index be2f657..ecc3dbe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,12 @@
   }
   
   body {
-    @apply font-sans text-secondary-800 bg-secondary-50;
+    @apply font-sans text-secondary-800 bg-secondary-50 dark:text-secondary-100 dark:bg-secondary-950 transition-colors duration-300;
+  }
+  
+  /* Smooth transitions for dark mode */
+  * {
+    @apply transition-colors duration-300;
   }
 }
 
@@ -20,18 +25,23 @@
   }
   
   .btn {
-    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-300;
   }
   
   .btn-secondary {
-    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-300 dark:text-primary-400 dark:bg-primary-900 dark:hover:bg-primary-800;
   }
   
   .input {
-    @apply block w-full rounded-md border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm;
+    @apply block w-full rounded-md border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-secondary-800 dark:border-secondary-700 dark:text-secondary-100 transition-colors duration-300;
   }
   
   .card {
-    @apply bg-white rounded-lg shadow-md overflow-hidden;
+    @apply bg-white rounded-lg shadow-md overflow-hidden dark:bg-secondary-800 dark:shadow-lg transition-colors duration-300;
+  }
+
+  /* Theme toggle button */
+  .theme-toggle {
+    @apply relative inline-flex items-center justify-center w-10 h-10 rounded-lg text-secondary-600 hover:text-primary-600 hover:bg-secondary-100 dark:text-secondary-400 dark:hover:text-primary-400 dark:hover:bg-secondary-800 transition-colors duration-300;
   }
 }
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 6b3fa53..661b868 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -247,8 +247,8 @@ function Home() {
       {/* Investment Steps */}
       <section className="container">
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4">Start Investing in Minutes</h2>
-          <p className="text-secondary-600">Your journey to crypto-powered real estate investment</p>
+          <h2 className="text-3xl font-bold mb-4 dark:text-white">Start Investing in Minutes</h2>
+          <p className="text-secondary-600 dark:text-secondary-400">Your journey to crypto-powered real estate investment</p>
         </div>
         
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -261,13 +261,13 @@ function Home() {
               viewport={{ once: true }}
               transition={{ delay: index * 0.2 }}
             >
-              <div className="bg-white p-6 rounded-lg shadow-md text-center">
-                <div className="bg-primary-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <step.icon className="text-2xl text-primary-600" />
+              <div className="bg-white dark:bg-secondary-900 p-6 rounded-lg shadow-md dark:shadow-lg text-center transition-colors duration-300">
+                <div className="bg-primary-50 dark:bg-primary-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 transition-colors duration-300">
+                  <step.icon className="text-2xl text-primary-600 dark:text-primary-400" />
                 </div>
-                <div className="text-primary-600 text-2xl font-bold mb-4">Step {index + 1}</div>
-                <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
-                <p className="text-secondary-600">{step.description}</p>
+                <div className="text-primary-600 dark:text-primary-400 text-2xl font-bold mb-4">Step {index + 1}</div>
+                <h3 className="text-xl font-semibold mb-2 dark:text-white">{step.title}</h3>
+                <p className="text-secondary-600 dark:text-secondary-400">{step.description}</p>
               </div>
             </motion.div>
           ))}
@@ -375,26 +375,26 @@ function Home() {
       </section>
 
       {/* Why Choose Us */}
-      <section className="bg-secondary-50 pt-16">
+      <section className="bg-secondary-50 dark:bg-secondary-800 pt-16 transition-colors duration-300">
         <div className="container">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold mb-4">Why Choose RoyalCity</h2>
-            <p className="text-secondary-600">Experience the future of real estate investment</p>
+            <h2 className="text-3xl font-bold mb-4 dark:text-white">Why Choose RoyalCity</h2>
+            <p className="text-secondary-600 dark:text-secondary-400">Experience the future of real estate investment</p>
           </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
             {advantages.map((advantage, index) => (
               <motion.div
                 key={index}
-                className="bg-white p-6 rounded-lg shadow-md text-center"
+                className="bg-white dark:bg-secondary-900 p-6 rounded-lg shadow-md dark:shadow-lg text-center transition-colors duration-300"
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: index * 0.2 }}
               >
                 <advantage.icon className="text-4xl text-primary-600 mx-auto mb-4" />
-                <h3 className="text-xl font-semibold mb-2">{advantage.title}</h3>
-                <p className="text-secondary-600">{advantage.description}</p>
+                <h3 className="text-xl font-semibold mb-2 dark:text-white">{advantage.title}</h3>
+                <p className="text-secondary-600 dark:text-secondary-400">{advantage.description}</p>
               </motion.div>
             ))}
           </div>
@@ -426,14 +426,14 @@ function Home() {
       </section>
       
       {/* Blog */}
-      <div className="container bg-white py-24">
+      <div className="container bg-white dark:bg-secondary-800 py-24 transition-colors duration-300">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center max-w-3xl mx-auto mb-12"
         >
-          <h1 className="text-3xl font-bold mb-4">Latest Insights</h1>
-          <p className="text-secondary-600">
+          <h1 className="text-3xl font-bold mb-4 dark:text-white">Latest Insights</h1>
+          <p className="text-secondary-600 dark:text-secondary-400">
             Stay informed with our latest articles and market analysis
           </p>
         </motion.div>
@@ -447,7 +447,7 @@ function Home() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: index * 0.1 }}
-              className="bg-white rounded-lg shadow-md overflow-hidden"
+              className="bg-white dark:bg-secondary-900 rounded-lg shadow-md dark:shadow-lg overflow-hidden transition-colors duration-300"
             >
               <Link to={`/blog/${post.slug}`}>
                 <div className="relative h-48">
@@ -461,13 +461,13 @@ function Home() {
                   </div>
                 </div>
                 <div className="p-6">
-                  <h2 className="text-xl font-semibold mb-3 hover:text-primary-600 transition-colors">
+                  <h2 className="text-xl font-semibold mb-3 dark:text-white hover:text-primary-600 transition-colors">
                     {post.title}
                   </h2>
-                  <p className="text-secondary-600 mb-4">
+                  <p className="text-secondary-600 dark:text-secondary-400 mb-4">
                     {post.excerpt}
                   </p>
-                  <div className="flex items-center text-sm text-secondary-500">
+                  <div className="flex items-center text-sm text-secondary-500 dark:text-secondary-500">
                     <FiUser className="mr-2" />
                     <span className="mr-4">{post.author}</span>
                     <FiClock className="mr-2" />
@@ -488,17 +488,17 @@ function Home() {
           className="max-w-3xl mx-auto"
         >
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
-            <p className="text-secondary-600">Find answers to common questions about our platform, cryptocurrency payments, and real estate investment.</p>
+            <h2 className="text-3xl font-bold mb-4 dark:text-white">Frequently Asked Questions</h2>
+            <p className="text-secondary-600 dark:text-secondary-400">Find answers to common questions about our platform, cryptocurrency payments, and real estate investment.</p>
           </div>
           <div className="space-y-8">
             {faqSections.map((section, sectionIndex) => (
-              <div key={sectionIndex} className="bg-white rounded-lg shadow-md overflow-hidden">
-                <div className="divide-y divide-secondary-100">
+              <div key={sectionIndex} className="bg-white dark:bg-secondary-800 rounded-lg shadow-md dark:shadow-lg overflow-hidden transition-colors duration-300">
+                <div className="divide-y divide-secondary-100 dark:divide-secondary-700">
                   {section.questions.map((item, questionIndex) => (
                     <div key={questionIndex} className="p-6">
                       <button
-                        className="w-full flex justify-between items-center text-left"
+                        className="w-full flex justify-between items-center text-left dark:text-white"
                         onClick={() => toggleSection(section.title, questionIndex)}
                       >
                         <span className="font-medium">{item.question}</span>
@@ -517,7 +517,7 @@ function Home() {
                             transition={{ duration: 0.3 }}
                             className="overflow-hidden"
                           >
-                            <p className="mt-4 text-secondary-600">
+                            <p className="mt-4 text-secondary-600 dark:text-secondary-400">
                               {item.answer}
                             </p>
                           </motion.div>
@@ -583,24 +583,24 @@ function Home() {
             </div>
 
             <div className="mt-12 lg:mt-0 flex justify-center">
-              <div className="bg-white rounded-lg shadow-xl p-8 max-w-sm w-full">
-                <h3 className="text-2xl font-bold text-gray-900 text-center mb-6">
+              <div className="bg-white dark:bg-secondary-800 rounded-lg shadow-xl dark:shadow-2xl p-8 max-w-sm w-full transition-colors duration-300">
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white text-center mb-6">
                   Join Discord
                 </h3>
-                <p className="text-gray-500 text-center mb-8">
+                <p className="text-gray-500 dark:text-secondary-400 text-center mb-8 transition-colors duration-300">
                   Get instant access to our community and start connecting with other investors
                 </p>
                 <a
                   href="https://discord.gg/RoyalCity"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
+                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 md:py-4 md:text-lg md:px-10 transition-colors duration-300"
                 >
                   Join Now
                 </a>
-                <p className="mt-4 text-sm text-gray-500 text-center">
+                <p className="mt-4 text-sm text-gray-500 dark:text-secondary-400 text-center transition-colors duration-300">
                   Already a member?{' '}
-                  <a href="https://discord.gg/RoyalCity" className="text-indigo-600 hover:text-indigo-500">
+                  <a href="https://discord.gg/RoyalCity" className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition-colors duration-300">
                     Sign in
                   </a>
                 </p>
diff --git a/tailwind.config.js b/tailwind.config.js
index a7ad44a..11f3ffc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}"
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
@@ -30,6 +31,7 @@ export default {
           700: '#334155',
           800: '#1e293b',
           900: '#0f172a',
+          950: '#020617',
         },
       },
       fontFamily: {