From 3d20bbfdb31bfb906f1b6d0c22c89eeeffe83f88 Mon Sep 17 00:00:00 2001
From: Abiodun001-world <adekunleabiodun354@gmail.com>
Date: Tue, 28 Oct 2025 20:46:46 +0100
Subject: [PATCH] Fix: add light mode support to footer component

---
 components/Footer.tsx | 59 ++++++++++++++++++-------------------------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 4bffbcc..91daa6e 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,7 +12,7 @@ const Footer: React.FC = () => {
       { name: 'Integrations', href: '#integrations' },
     ],
     resources: [
-      { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, // Placeholder - will link to actual docs
+      { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' },
     ],
     opensource: [
       { name: 'GitHub Repository', href: 'https://github.com/OpsiMate/OpsiMate' },
@@ -25,29 +25,29 @@ const Footer: React.FC = () => {
   const socialLinks = [
     { 
       name: 'GitHub', 
-      href: 'https://github.com/OpsiMate/OpsiMate', // From documentation
+      href: 'https://github.com/OpsiMate/OpsiMate',
       icon: Github 
     },
     { 
       name: 'Slack Community', 
-      href: 'https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA', // From documentation
+      href: 'https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA',
       icon: Slack 
     },
     { 
       name: 'Email', 
-      href: 'mailto:idan.lut@gmail.com', // Placeholder
+      href: 'mailto:idan.lut@gmail.com',
       icon: Mail 
     },
   ];
 
   return (
-    <footer className="bg-gray-900 text-white">
+    <footer className="bg-[#FEFEFE] dark:bg-gray-900 text-gray-900 dark:text-white border-t border-gray-200 dark:border-gray-800 transition-colors duration-200">
       <div className="container-max section-padding">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
           {/* Company Info */}
           <div className="lg:col-span-2">
             <Logo className="mb-4" />
-            <p className="text-gray-300 mb-6 max-w-md">
+            <p className="text-gray-700 dark:text-gray-300 mb-6 max-w-md">
               Simplify your infrastructure management with one unified platform. 
               Monitor, manage, and optimize your entire infrastructure from a single dashboard.
             </p>
@@ -58,7 +58,7 @@ const Footer: React.FC = () => {
                   <Link
                     key={social.name}
                     href={social.href}
-                    className="text-gray-400 hover:text-white transition-colors duration-200"
+                    className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                     aria-label={social.name}
                   >
                     <Icon size={20} />
@@ -70,13 +70,13 @@ const Footer: React.FC = () => {
 
           {/* Product Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Product</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Product</h3>
             <ul className="space-y-2">
               {footerLinks.product.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                   >
                     {link.name}
                   </Link>
@@ -87,13 +87,13 @@ const Footer: React.FC = () => {
 
           {/* Resources Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Resources</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Resources</h3>
             <ul className="space-y-2">
               {footerLinks.resources.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                   >
                     {link.name}
                   </Link>
@@ -104,30 +104,13 @@ const Footer: React.FC = () => {
 
           {/* Open Source Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Open Source</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Open Source</h3>
             <ul className="space-y-2">
               {footerLinks.opensource.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Open Source Links */}
-          <div>
-            <h3 className="font-semibold text-white mb-4">Open Source</h3>
-            <ul className="space-y-2">
-              {footerLinks.opensource.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -140,15 +123,21 @@ const Footer: React.FC = () => {
         </div>
 
         {/* Bottom Section */}
-        <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-          <p className="text-gray-400 text-sm">
+        <div className="border-t border-gray-200 dark:border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             © {currentYear} OpsiMate. All rights reserved.
           </p>
           <div className="flex space-x-6 mt-4 md:mt-0">
-            <Link href="/privacy" className="text-gray-400 hover:text-white text-sm transition-colors duration-200">
+            <Link 
+              href="/privacy" 
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm transition-colors duration-200"
+            >
               Privacy Policy
             </Link>
-            <Link href="/terms" className="text-gray-400 hover:text-white text-sm transition-colors duration-200">
+            <Link 
+              href="/terms" 
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm transition-colors duration-200"
+            >
               Terms of Service
             </Link>
           </div>
@@ -158,4 +147,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file