Added "Reset Functionality" and "Thank You pop up Message" After Subscribing Also Changed the "Color Grading"

src/components/Footer.css

@@ -290,3 +290,67 @@ a:hover {
   }
 
 
+  .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: fadeIn 0.5s;
+  }
+
+  .modal-content {
+    background: rgb(255, 255, 255);
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    animation: fadeIn 0.5s;
+  }
+
+  .modal-content h2 {
+    margin-top: 0;
+    color: #072183;
+    font-weight: bold;
+  }
+
+  .modal-content p {
+    color: #000000;
+  }
+
+
+  .modal-content button {
+    background: #093eba;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+  }
+
+  .modal-content button:hover {
+    background: #05286f;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+

src/components/Footer.jsx

@@ -13,10 +13,11 @@ const quotes = [
 ];
 
 const Footer = () => {
-  const [footerStyle, setFooterStyle] = useState({
-    color: 'black'
-  });
+  const [footerStyle, setFooterStyle] = useState({ color: 'black' });
   const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
 
   useEffect(() => {
     let savedTheme = localStorage.getItem('theme') || 'light';
@@ -52,6 +53,19 @@ const Footer = () => {
     return () => clearInterval(intervalId); // cleanup interval on component unmount
   }, []);
 
+  const handleSubscribe = () => {
+    if (!email) {
+      setError('Please enter your email ⚠️.');
+      return;
+    }
+    setIsModalOpen(true);
+    setTimeout(() => {
+      setIsModalOpen(false);
+    }, 9000); 
+    setEmail(''); 
+    setError(''); 
+  };
+
   return (
     <footer className="footer" style={footerStyle}>
       <div className="footer-content">
@@ -149,19 +163,40 @@ const Footer = () => {
               </a>
             </li>
             <li>
-              <input type="text" placeholder="Enter your email" className="p-1 rounded-md" />
-            </li>
+              <input
+                type="text"
+                placeholder="Enter your email"
+                className="p-1 rounded-md"
+                id="email-input"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                style={{ color: 'black' }} 
+              />
+            </li>
+            {error && (
+              <li style={{ color: 'red' }}>{error}</li>
+            )}
             <li>
-              <button className="border px-2 py-1 rounded-sm">Subscribe</button>
+              <button onClick={handleSubscribe} className="border px-2 py-1 rounded-sm">Subscribe</button>
             </li>
           </ul>
         </div>
       </div>
       <div className="footer-bottom">
         <p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
       </div>
+
+      {isModalOpen && (
+        <div className="modal">
+          <div className="modal-content">
+            <h2>Thank you!</h2>
+            <p>Thank you for subscribing. <br />Stay tuned to hear about our new updates.</p>
+            <button onClick={() => setIsModalOpen(false)}>Close</button>
+          </div>
+        </div>
+      )}
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;