Merge branch 'main' into main

package.json

@@ -12,8 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@react-oauth/google": "^0.12.1",
-
-
+    "@reduxjs/toolkit": "^2.2.5",
     "antd": "^5.17.4",
     "aos": "^2.3.4",
     "bootstrap": "^5.3.3",
@@ -26,6 +25,7 @@
     "react-chatbot-kit": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",

src/App.css

@@ -1,6 +1,6 @@
 #header {
     text-align: center;
-    color: #212EA0;
+    /* color: #212EA0; */
     font-size: 23px;
     font-weight: 600;
     padding-top: 60px;
@@ -15,22 +15,50 @@
     overflow-x: hidden;
 }
 
-#light {
-    background-color: white;
+.header-light{
+    /* background-color: #FFFFFF; */
+    background-color: rgba(0, 0, 128,.6) !important;
+    border-color: #D8DADF !important;
+    color: #11131f !important;
 }
+.header-dark{
+    background-color:#11131f !important;
+    border-color: #2D3135 !important;
+    color: #FFFFFF !important;
+}
+.footer-light{
+    /* background-color: #FFFFFF; */
+    background-color: rgb(33,46,160) !important;
+    color: white !important;
+}
+.footer-dark{
+    background-color:#11131f !important;
 
-#dark {
-    background-color: black;
-    color: white;
+}
+.cardTheme-dark{
+    background-color: rgb(24,25,27) !important;
+    border-color: #2D3135 !important;
+    color: white !important;
+}
+.light {
+    background-color: #FFFFFF !important;
+    border-color: #D8DADF !important;
+    color: #141726 !important;
+}
+
+.dark {
+    background-color:#141726 !important;
+    border-color: #2D3135 !important;
+    color: white !important;
 }
 
 nav1{
-  padding: 10px 15px;
-  border-radius: 15px;
-  transition: background-color 0.3s ease, color 0.3s ease;
+    padding: 10px 15px;
+    border-radius: 15px;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 nav1:hover{
-  background-color: transparent; /* Background color on hover */
-  color: black; /* Text color on hover */
+    background-color: transparent; /* Background color on hover */
+    color: black; /* Text color on hover */
 }

src/App.jsx

@@ -32,14 +32,11 @@ import InvestorManagementPage from "./Pages/InvestorManagementPage";
 import FinancialServices from './Pages/FinancialServices'
 import FullServiceFund from './Pages/FullServiceFund';
 import { PiSelectionInverseThin } from "react-icons/pi";
-import FeedbackPage from './Pages/FeedbackForm';
 import Notfound from './Components/Notfound/Notfound';
-
-export const ThemeContext = createContext();
+import { useSelector } from 'react-redux';
 
 const App = () => {
-  const storedTheme = localStorage.getItem('theme') || 'light';
-  const [theme, setTheme] = useState(storedTheme);
+  const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
 
   const toggleTheme = () => {
     const newTheme = theme === 'light' ? 'dark' : 'light';
@@ -57,14 +54,9 @@ const App = () => {
   }, []);
 
   return (
-    <ThemeContext.Provider value={{theme, toggleTheme}}>
-    <div className="main-div" id={theme}>
-
+    <div className={`main-div ${theme}`}>
     <Router>
-
-      <div className="main-div">
-
-      <Navbar/>
+      <Navbar />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/login" element={<Login />} />
@@ -80,18 +72,13 @@ const App = () => {
           <Route path='/investormanagementpage' element={<InvestorManagementPage/>}/>
           <Route path='/financialservicesPage' element = {<FinancialServices/>}/>
           <Route path="/fullservicefund" element={<FullServiceFund/>}/>
-<Route path="/feedback" element={<FeedbackPage />} />
-<Route path="*" element={<Notfound />} />
-
+          <Route path="*" element={<Notfound/>}/>
         </Routes>
         <ChatAssistant/>
         <GoToTop/>
         <Footer />
-
-      </div>
     </Router>
-      </div>
-    </ThemeContext.Provider>
+    </div>
   );
 };
 

src/Components/About/About.css

@@ -30,21 +30,18 @@
 .about h3{
   font-weight: 600;
   font-weight: 16px;
-  color: #212EA0;
 }
 
 .about h2{
   font-weight: 600;
   font-size: 35px;
   margin: 10px 0;
   max-width: 400px;
-  color: black;
   text-align: center;
 
 }
 
 .about p{
-  color: #676767;
   margin-bottom: 15px;
 }
 

src/Components/About/About.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import "./About.css";
 import about_img from "../../assets/about1.jpg";
+import { useSelector } from 'react-redux';
 // import play_icon from "../../assets/play-icon.png";
 
 const About = () => {
+  const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
   return (
     <div className="about" id="about">
       <div className="about-left">
         <img src={about_img} alt="" className="about-img" data-aos="slide-right" />
         {/* <img src={play_icon} alt='' className='play-icon'></img> */}
       </div>
       <div className="about-right" id="heading" data-aos="slide-left" >
-        <h2 className='about-heading'>Bridging the gap between ideas and investments</h2>
+        <h2 className={`about-heading ${theme}`}>Bridging the gap between ideas and investments</h2>
         <div className="about-right-div2">
           <p>
             At StartConnectHub, our mission is to create a thriving ecosystem

src/Components/Contact/Contact.css

@@ -8,16 +8,9 @@
 
 .contact-col {
   flex-basis: 48%;
-  color: #676767;
-}
-
-
-#dark .send {
-  color: blue;
 }
 
 .contact-col h3 {
-  color: #000f38;
   font-weight: 500;
   font-size: 25px;
   display: flex;
@@ -50,7 +43,7 @@
 .contact form textarea {
   display: block;
   width: 90%;
-  background: #ebebeb;
+  /* background: #ebebeb; */
   padding: 15px;
   border: 0;
   outline: 0;
@@ -112,7 +105,7 @@
     /* background-color: black; */
   }
   .contact-right form {
-    background-color: red;
+    /* background-color: red; */
     display: flex;
     flex-direction: column;
     text-align: left;

src/Components/Contact/Contact.jsx

@@ -5,8 +5,10 @@ import mail_icon from "../../assets/mail-icon.png";
 import phone_icon from "../../assets/phone-icon.png";
 import location_icon from "../../assets/location-icon.png";
 import white_arrow from "../../assets/white-arrow.png";
+import { useSelector } from 'react-redux';
 
 const Contact = () => {
+  const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
   const [result, setResult] = React.useState("");
 
   const onSubmit = async (event) => {
@@ -33,7 +35,7 @@ const Contact = () => {
   };
 
   return (
-    <div className="contact" id="contact">
+    <div className={`contact ${theme}`} id="contact">
       <div className="contact-col">
         <h3 className="send">
           Send us a message<img src={msg_icon} alt=""></img>

src/Components/FAQ/accordian.css

@@ -1,6 +1,5 @@
 h2 {
     text-align: center;
-    color: #212EA0;
     font-weight: 600;
     display: flex;
     justify-content: center;
@@ -12,8 +11,8 @@ h2 {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #212EA0;
-    border: 3px solid whitesmoke;
+    background-color: rgb(33,46,160);
+    border: 2px solid whitesmoke;
     color: azure;
     border-radius: 10px;
     padding-top: 15px;

src/Components/Footer/Components/Main.css

@@ -118,7 +118,6 @@
 /* Accordian CSS */
 .faqh2 {
     text-align: center;
-    color: #212EA0;
     font-weight: 600;
     display: flex;
     justify-content: center;
@@ -158,13 +157,7 @@
     justify-content: space-between;
 }
 
-.contact-col{
-    flex-basis: 48%;
-    color: #676767;
-}
-
 .contact-col h3{
-    color: #000F38;
     font-weight: 500;
     font-size: 25px;
     display: flex;

src/Components/Footer/Footer.css

@@ -2,6 +2,7 @@
   background-color: #212ea0;
   color: white;
   padding: 2.5rem;
+
 }
 
 .footer-container {

src/Components/Footer/Footer.jsx

@@ -6,6 +6,7 @@ import { scroller } from "react-scroll";
 import { FaXTwitter } from "react-icons/fa6";
 
 const Footer = () => {
+  const theme = "footer-light";
   const [sticky, setSticky] = useState(false);
 
   useEffect(() => {
@@ -28,8 +29,7 @@ const Footer = () => {
   };
 
   return (
-
-    <div className='footer'>
+    <div className={`footer ${theme}`}>
       <div className='footer-container footer-container-md'>
         <div className='footer-1'>
           <div className='footer-title'>
@@ -70,10 +70,12 @@ const Footer = () => {
                 <li className='footer-link'>Testimonials</li>
               </NavLink>
               <li className='footer-link'>Sitemap</li>
+              <NavLink to="/howitworks" onClick={() => scrollToSection("howitworks")}>
+              <li className='footer-link'>How it Works</li>
+              </NavLink>
               <NavLink to="/#accordian" onClick={() => scrollToSection("accordian")}>
                 <li className='footer-link'>FAQ</li>
               </NavLink>
-              <NavLink to="/feedback"><li className='footer-link'>Feedback</li></NavLink>
             </ul>
           </div>
           <div className='footer-2'>

src/Components/Login/Login.css

@@ -4,7 +4,6 @@
   align-items: center;
   height: 60vh;
   margin-top: 150px; /* Adjust this value to move the login box down */
-  background-color: #fff;
 }
 
 .login-container {
@@ -59,7 +58,7 @@ button:hover {
   background-color: #0056b3;
 }
 
-p {
+.login-container p {
   margin-top: 10px;
   text-align: center;
   padding-bottom: 20px;