Merge pull request #55 from harshitgautam2003/main

Putting the same navbar in about, feedback and contact us page with full responsiveness. Also look for the content visibility in the dark mode #39

.gitignore

@@ -1 +1,2 @@
-/node_modules
+/node_modules
+.env*.local

Swayam-Bazaar-Application/package.json

@@ -5,6 +5,7 @@
     "private": true,
     "dependencies": {
         "@mui/icons-material": "^5.14.1",
+        "@react-google-maps/api": "^2.19.2",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",

Swayam-Bazaar-Application/src/App.js

@@ -12,10 +12,13 @@ import Loginshopkeeper from "./components/Loginshopkeeper";
 import Navbar from "./components/navbar/Navbar";
 import ContactForm from "./components/Contact";
 import Footer from "./components/footer/footer";
+import About from "./components/About";
 
 function App() {
 
   return (
+    <>
+
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<Navbar />}></Route>
@@ -31,8 +34,10 @@ function App() {
         <Route path='/shopkeeper-login' element={<Loginshopkeeper />}></Route>
         <Route path='/contact-us' element={<ContactForm />}></Route>
         <Route path='/footer' element={<Footer />}></Route>
+        <Route path='/about' element={<About />}></Route>
       </Routes>
     </BrowserRouter>
+    </>
   )
 }
 

Swayam-Bazaar-Application/src/components/About.js

@@ -0,0 +1,174 @@
+// About.js
+
+import React, { useMemo } from 'react';
+import { useFormik } from 'formik';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+import Switch from 'react-switch';
+import bg from '../components/navbar/bg.jpg';
+import logo from '../components/images/Logo_.png';
+import { useEffect,useState } from 'react';
+import Footer from './footer/footer';
+import {GoogleMap, useLoadScript, Marker} from "@react-google-maps/api"
+const About = () => {
+    const {isLoaded}=useLoadScript({
+        googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+    });
+  const [theme, setTheme] = useState('light');
+  const [showChatbot, setShowChatbot] = useState(false);
+
+  const toggleTheme = (theme) => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+    console.log(theme);
+  };
+
+  const toggleChatbot = () => {
+    setShowChatbot((prevShowChatbot) => !prevShowChatbot);
+  };
+
+  useEffect(() => {
+    if (theme !== 'dark') {
+      document.body.style.background = `url(${bg})`;
+    } else {
+      document.body.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+    }
+    return () => {
+      document.body.style.background = null;
+    };
+  }, [theme]);
+
+  const formik = useFormik({
+    initialValues: {
+      name: '',
+      email: '',
+      message: '',
+    },
+    onSubmit,
+  });
+
+  const port = process.env.REACT_APP_API_PORT || 5000;
+
+  async function onSubmit(values) {
+    axios
+      .post(`http://localhost:${port}/api/Contact/contact-us`, values)
+      .then((result) => {
+        console.log(result);
+        formik.resetForm();
+      })
+      .catch((err) => console.log(err));
+    console.log(values);
+  }
+
+  return (
+    <>
+      <nav
+        className={`navbar navbar-expand-lg navbar-${
+          theme === 'dark' ? 'dark' : 'light'
+        } flex justify-center`}
+        style={{ backgroundColor: theme === 'dark' ? '#333' : 'white' }}
+      >
+        <div className="container-fluid">
+          <div className="ms-2">
+            <Link exact to="/">
+              <img src={logo} alt="logo" style={{ width: '15%' }} />
+            </Link>
+          </div>
+          <button
+            className="navbar-toggler absolute top-3 right-3"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="navbar-collapse visible mt-3 -ms-4" id="navbarNav">
+            <div className="navbar-nav w-full ms-11 flex justify-around">
+              <div className="nav-item">
+                <Link
+                  className={`nav-link ${theme === 'dark' ? 'dark-mode' : ''}`}
+                  to="/"
+                >
+                  Home
+                </Link>
+              </div>
+              <div className="nav-item">
+                <Link
+                  className={`nav-link ${theme === 'dark' ? 'dark-mode' : ''}`}
+                  to="/about"
+                >
+                  About
+                </Link>
+              </div>
+              <div className="nav-item">
+                <Link
+                  className={`nav-link ${theme === 'dark' ? 'dark-mode' : ''}`}
+                  to="/contact-us"
+                >
+                  Contact Us
+                </Link>
+              </div>
+              <div className="mb-3">
+                <Link
+                  className={`nav-link ${theme === 'dark' ? 'dark-mode' : ''}`}
+                  to="/feedback"
+                >
+                  Feedback
+                </Link>
+              </div>
+              <div className="switch -ms-12 pt-2 mb-4">
+                <Switch
+                  checked={theme === 'dark'}
+                  onChange={() => toggleTheme(theme)}
+                  onColor="#2C3245"
+                  offColor="#E1E2E2"
+                  onHandleColor="#fff"
+                  handleDiameter={10}
+                  uncheckedIcon="🔆"
+                  checkedIcon="🌙"
+                  height={25}
+                  width={57}
+                  className="theme-toggle-switch px-5"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <div className="bg-white mx-auto p-4">
+        <h2 className="text-3xl font-semibold mb-4">About Us</h2>
+        <p className="text-lg">
+          This web application aims to connect users with local vendors in their
+          area, allowing them to purchase groceries and other goods directly
+          from these vendors. Unlike the existing local application called City
+          Mall, which doesn't offer the option to buy from specific shops, this
+          application will enable users to select the shops they prefer. The main
+          goal is to establish a direct connection between users and local shops
+          for purchasing goods. For instance, if a user wants to buy flour from a
+          particular local shop that isn't a well-known brand but offers
+          high-quality and affordable flour, this application will assist them in
+          doing so. To address the challenge of gathering a comprehensive dataset,
+          we propose a solution where shopkeepers themselves can input their
+          goods into the application. This approach is similar to how Google Maps
+          allows users to add new places they discover to the database. In
+          summary, the application will have two separate logins: one for users
+          and another for shopkeepers.
+        </p>
+      </div>
+       <Map/>
+      <Footer className="bg-white"/>
+    </>
+  );
+};
+
+
+function Map(){
+    const center=useMemo(()=>({lat:44,lng:-80}),[]);
+    return <GoogleMap zoom={10} center={{lat:44,lng:-80}} className="w-full h-full" >
+        <Marker position={center} />
+    </GoogleMap>;
+}
+
+export default About;