light/dark mode

src/App.css

@@ -5,16 +5,112 @@
 /* --- Global & Base Styles --- */
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  font-family: Arial, sans-serif;
-  background-color: #f4f4f4;
-  margin: 0;
-  padding: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+  transition: background-color var(--transition-speed) ease, 
+              color var(--transition-speed) ease;
+  text-align: left;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- About Component Styles --- */
+.about-container {
+  padding: 2rem 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.about-container h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: var(--color-text);
+  text-align: center;
+}
+
+.about-container h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--color-text);
+  text-align: center;
+}
+
+.about-container p {
+  margin-bottom: 1rem;
+  color: var(--color-text-secondary);
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin: 3rem 0;
+}
+
+.grid-item {
+  background: var(--color-bg-secondary);
+  border-radius: 10px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  text-align: center;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.grid-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
+  background: var(--color-bg-tertiary);
+}
+
+.grid-item h2 {
+  margin: 1.2rem 0 1rem;
+  font-size: 1.3rem;
+}
+
+.grid-item p {
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.button-container {
+  margin: 2rem 0 4rem;
   text-align: center;
 }
 
+.cta-button {
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  padding: 0.8rem 2rem;
+  font-size: 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  font-weight: 600;
+}
+
+.cta-button:hover {
+  background-color: var(--color-primary-hover);
+  transform: translateY(-2px);
+}
+
 /* --- ANIMATION KEYFRAMES --- */
 @keyframes fadeIn {
   from {
@@ -1164,18 +1260,21 @@ strong {
   padding: 20px;
 }
 .grid-item {
-  background: #fff;
+  background: var(--color-bg-secondary);
   padding: 20px;
   border-radius: 10px;
   text-align: center;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
   cursor: pointer;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
 }
 
 .grid-item:hover {
-  transform: translateY(-10px); /* slight lift */
-  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* deeper shadow */
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
+  background: var(--color-bg-tertiary);
 }
 
 /*======================================*/

src/App.js

@@ -1,49 +1,79 @@
 // App.js
-import React from "react";
-import { HashRouter as Router, Route, Routes } from "react-router-dom";
-import StocksList from "./components/StockList";
-import Stockdata from "./components/Stockdata";
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./App.css";
+import "./styles/global.css";
+
+// Components
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import StocksList from "./components/StockList";
+import Stockdata from "./components/Stockdata";
+import AboutComponent from "./components/About";
+import ContactForm from "./components/ContactForm";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
-import AboutComponent from "./components/About";
+import Watchlist from "./components/Watchlist";
 import { AuthProvider } from "./components/AuthContext";
-import Watchlist from "./pages/Watchlist";
-import ContactForm from "./components/ContactForm";
+
+// Theme
+import { ThemeProvider, useTheme } from "./components/ThemeContext";
+
+// Global styles for smooth transitions
+const GlobalStyles = () => {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    // Remove the no-js class if JavaScript is enabled
+    document.documentElement.classList.remove('no-js');
+    document.documentElement.classList.add('js');
+
+    // Set theme class on body for easier targeting
+    document.body.className = `theme-${theme}`;
+
+    // Add transition class after initial render
+    const timer = setTimeout(() => {
+      document.documentElement.classList.add('theme-transition-ready');
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [theme]);
+
+  return null;
+};
 
 const App = () => {
   return (
-    <AuthProvider>
-      <Router>
-        <div className="app-container">
-          <Header />
-          <div className="content">
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <>
-                    <StocksList />
-                    <AboutComponent />
-                    <ContactForm />
-                  </>
-                }
-              />
-              <Route path="/login" element={<Login />} />
-              <Route path="/signup" element={<Signup />} />
-              <Route path="/stock/:ticker" element={<Stockdata />} />
-              <Route path="/about" element={<AboutComponent />} />
-              <Route path="/stocks" element={<StocksList />} />
-              <Route path="/watchlist" element={<Watchlist />} />
-              <Route path="/contact" element={<ContactForm />} />
-            </Routes>
+    <ThemeProvider>
+      <GlobalStyles />
+      <AuthProvider>
+        <Router>
+          <div className="app-container">
+            <Header />
+            <div className="content">
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <>
+                      <StocksList />
+                    </>
+                  }
+                />
+                <Route path="/login" element={<Login />} />
+                <Route path="/signup" element={<Signup />} />
+                <Route path="/stock/:ticker" element={<Stockdata />} />
+                <Route path="/about" element={<AboutComponent />} />
+                <Route path="/stocks" element={<StocksList />} />
+                <Route path="/watchlist" element={<Watchlist />} />
+                <Route path="/contact" element={<ContactForm />} />
+              </Routes>
+            </div>
+            <Footer />
           </div>
-          <Footer />
-        </div>
-      </Router>
-    </AuthProvider>
+        </Router>
+      </AuthProvider>
+    </ThemeProvider>
   );
 };
 

src/components/About.jsx

@@ -1,18 +1,20 @@
 import React from "react";
 import { FaChartLine, FaClock, FaRobot } from "react-icons/fa";
 import { MdOutlineDesignServices } from "react-icons/md";
-import { FaLock, FaUsers, FaEnvelope } from "react-icons/fa";
 import { FiRefreshCcw } from "react-icons/fi";
 import { Link } from "react-router-dom";
 import "../App.css";
 import BackToTopBtn from "../components/BackToTopBtn";
+
 const AboutComponent = () => {
+  const iconColor = "var(--color-primary)";
+  const headingStyle = { color: "var(--color-primary)" };
+
   return (
-    <>
+    <div className="about-container">
       <div id="About">
-        <h1> About Us </h1>
+        <h1>About Us</h1>
         <h3>Welcome to our AI Stock Analyzer</h3>
-        <br></br>
         <p>Your personal companion for real-time stock insights.</p>
         <p>
           Our app offers real-time stock data, user-friendly interfaces, and
@@ -23,61 +25,58 @@ const AboutComponent = () => {
           designed to help you make informed decisions and manage your
           investments effectively.
         </p>
-        <br></br>
 
         <div className="grid-container">
-          <div className="grid-item on-hover">
-            <FaChartLine size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>Real-Time Data</h2>
+          <div className="grid-item">
+            <FaChartLine size={40} color={iconColor} />
+            <h2 style={headingStyle}>Real-Time Data</h2>
             <p>
               Access live stock prices and market trends to stay ahead in your
               trading journey.
             </p>
           </div>
           <div className="grid-item">
-            <MdOutlineDesignServices size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>User-Friendly Interface</h2>
+            <MdOutlineDesignServices size={40} color={iconColor} />
+            <h2 style={headingStyle}>User-Friendly Interface</h2>
             <p>
               Navigate through our intuitive design that makes trading easy and
               efficient.
             </p>
           </div>
           <div className="grid-item">
-            <FaRobot size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>AI-Powered Predictions </h2>
+            <FaRobot size={40} color={iconColor} />
+            <h2 style={headingStyle}>AI-Powered Predictions</h2>
             <p>Accurate forecasts using Machine Learning and AI models.</p>
           </div>
           <div className="grid-item">
-            <FaChartLine size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>Market Trend Analysis </h2>
+            <FaChartLine size={40} color={iconColor} />
+            <h2 style={headingStyle}>Market Trend Analysis</h2>
             <p>Clear visuals to show current and future trends.</p>
           </div>
           <div className="grid-item">
-            <FiRefreshCcw size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>Continuous Updates</h2>
+            <FiRefreshCcw size={40} color={iconColor} />
+            <h2 style={headingStyle}>Continuous Updates</h2>
             <p>
               We are constantly improving our app to provide you with the best
               trading experience.
             </p>
           </div>
           <div className="grid-item">
-            <FaClock size={40} color="#27AE60" />
-            <h2 style={{ color: "#136fcaff" }}>24/7 Data Monitoring </h2>
+            <FaClock size={40} color={iconColor} />
+            <h2 style={headingStyle}>24/7 Data Monitoring</h2>
             <p>Constant tracking for updated insights.</p>
           </div>
         </div>
-        <br></br>
 
         <div className="button-container">
           <Link to="/stocks">
-            <button>Get Started Now</button>
+            <button className="cta-button">Get Started Now</button>
           </Link>
         </div>
-        <br></br>
-        <br></br>
       </div>
       <BackToTopBtn />
-    </>
+    </div>
   );
 };
+
 export default AboutComponent;