Merge branch 'main' into tapaway

frontend/src/App.js

@@ -14,7 +14,7 @@ import ChatAssistant from "./ChatAssistant/ChatAssistant";
 const About = lazy(() => import("./Component/About"));
 const Rateus = lazy(() => import("./Component/Rateus"));
 const Home = lazy(() => import("./Component/Home"));
-const NotFound = lazy(() => import("./Component/NotFound"));
+// const NotFound = lazy(() => import("./Component/NotFound"));
 const OpenSource = lazy(() => import("./Component/OpenSource"));
 const Review = lazy(() => import("./Component/Review"));
 const BookMark = lazy(() => import("./Component/BookMark"));
@@ -43,7 +43,6 @@ const RemoteJob = lazy(() => import("./pages/RemoteJob"));
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
-
   useEffect(() => {
     AOS.init();
   }, []);

frontend/src/Component/Faq.js

@@ -13,7 +13,7 @@ import data from "./accordion";
 import "react-accessible-accordion/dist/fancy-example.css";
 export default function Faq() {
   let [index, setIndex] = useState(0);
-  const [className, setClassName] = useState(null);
+  const [setClassName] = useState(null);
 
   return (
     <section className="faq">

frontend/src/Component/Footer.js

@@ -1,7 +1,6 @@
 import React from "react";
 import logo from "../image/logo1.png";
 import "../style/Footer.css";
-
 import {
   FaGithubSquare,
   FaLinkedinIn,
@@ -27,13 +26,12 @@ import {
 import { BsYoutube, BsFillPersonLinesFill, BsCodeSlash } from "react-icons/bs";
 import { Link } from "react-router-dom";
 function Footer() {
-  const today = new Date();
-  const year = today.getFullYear();
   return (
-    <footer className="overflow-x-hidden">
+
+    <footer>
       <div className="Footer">
         <div className="container">
-          <div className="row justify-content-center">
+          <div className="row">
             <div className="col-md-6 col-lg-4 col-12 ft-1">
               <a href="https://www.devlabsstore.tech/">
                 <img width={209} src={logo} alt="devlabs" />
@@ -126,7 +124,7 @@ function Footer() {
                 </li>
               </ul>
             </div>
-            <div className="col-md-6 col-lg-2 col-12 ft-2 ft-last explore">
+            <div className="col-md-6 col-lg-2 col-12 ft-2 ft-last">
               <h3>Explore</h3>
               <ul>
                 <li className="nav-item">
@@ -149,18 +147,14 @@ function Footer() {
           </div>
         </div>
       </div>
+
       <div className="Last-footer">
         <div className="container">
           <div className="row justify-content-center">
             <div className="col-md-6 col-12 ft-1">
-            <div className="text-center fs-6 my-3">
-                COPYRIGHT &copy; Devlabs {year}  |  <br /> MAINTAINED BY HIMANSHU NARWARE
-                <br />
-              <div className="legal">
-              <a href="/PrivacyPolicy" className="footer-link" target="_blank" rel="noopener noreferrer">Privacy Policy</a> | 
-              <a href="/TermsOfService" className="footer-link" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+              <div className="text-center fs-6 my-3">
+                COPYRIGHT © Devlabs 2024 | <br /> MAINTAINED BY HIMANSHU NARWARE
               </div>
-            </div>
               <div className="text-center mb-2">
                 <a
                   href="https://github.com/sponsors/HimanshuNarware"

frontend/src/Component/Home.js

@@ -111,10 +111,10 @@ function Home(props) {
 
   const filteredData = !!props.searchQuery
     ? allvalue.filter((datalist) => {
-        return datalist.productName
-          .toLowerCase()
-          .includes(props.searchQuery.toLowerCase());
-      })
+      return datalist.productName
+        .toLowerCase()
+        .includes(props.searchQuery.toLowerCase());
+    })
     : allvalue;
 
   const currentPost =
@@ -128,17 +128,20 @@ function Home(props) {
   const prePage = () => {
     if (currentPage > 1) {
       setCurrentPage(currentPage - 1);
+      window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
     }
   };
 
   const nextPage = () => {
     if (currentPage < npage) {
       setCurrentPage(currentPage + 1);
+      window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
     }
   };
 
   const changeCPage = (id) => {
     setCurrentPage(id);
+    window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
   };
 
   const handleBookmark = (datalist) => {
@@ -303,10 +306,13 @@ function Home(props) {
                   </h1>
                 </h1>
 
+
+                <div className="hero-button-container" style={{ display: "flex", justifyContent: "center" }}>
                 <div
                   className="hero-button-container"
                   style={{ display: "flex", justifyContent: "center" }}
                 >
+
                   <button className="hero-button">
                     <NavbarItem description="Get Started" to="/open-source" />
                   </button>
@@ -334,13 +340,17 @@ function Home(props) {
         <br />
         {searchQuery && searchResults.length === 0 && (
           <div className="no-results">
+
+            <img src="./empty-state.png" height={"300px"} width={"300px"} style={{ background: "none" }} alt="empty_state_img" />
+
             <img
               src="./empty-state.png"
               height={"300px"}
               width={"300px"}
               style={{ background: "none" }}
               alt="empty_state_img"
             />
+
             <h1>No matching tools found.</h1>
           </div>
         )}
@@ -360,9 +370,8 @@ function Home(props) {
             {filters.map((category) => (
               <button
                 key={category}
-                className={`filter-button ${
-                  selectedFilters.includes(category) ? "active_filter" : ""
-                }`}
+                className={`filter-button ${selectedFilters.includes(category) ? "active_filter" : ""
+                  }`}
                 onClick={() => handleFilterButtonClick(category)}
               >
                 {category}

frontend/src/Component/Navbar/Navbar.js

@@ -3,16 +3,15 @@ import "../../style/Navbar.css";
 import Sidebar from "../Sidebar/Sidebar";
 import NavbarLeft from "./NavbarLeft";
 import NavbarCenter from "./NavbarCenter";
-import Progress from "./Progress";
 function Navbar(props) {
   const [showSideNav, setShowSideNav] = useState(false);
 
   return (
     <header>
-      <div className="navbar w-100">
-        <Progress />
+      <div className="navbar">
         <NavbarLeft showSideNav={showSideNav} setShowSideNav={setShowSideNav} />
-        <NavbarCenter showSideNav={showSideNav} />     
+        <NavbarCenter showSideNav={showSideNav} />
+
         {/* Pass setSearchQuery directly 
         <NavbarRight setSearchQuery={props.setSearchQuery} />
         */}
@@ -21,4 +20,5 @@ function Navbar(props) {
     </header>
   );
 }
+
 export default Navbar;

frontend/src/Component/Navbar/NavbarCenter.js

@@ -25,6 +25,7 @@ function NavbarCenter( ) {
   const handleRateUsClick = () => {
     setIsModalOpen(true);
   };
+
   const handleCloseModal = () => {
     setIsModalOpen(false);
   };

frontend/src/Component/Pagination.js

@@ -10,6 +10,8 @@ const Pagination = ({
   handlePageChange,
   scrollPosition
 }) => {
+
+
   return (
     <nav>
       <div className="page-index">

frontend/src/Component/Profile.js

@@ -10,6 +10,9 @@ function Profile() {
     website: ""
   });
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const [image, setImage] = useState(null);
+  const [preview, setPreview] = useState(null);
+
 
   // Le data from localStorage when the component mounts
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -41,6 +44,12 @@ function Profile() {
     }));
   };
 
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    setImage(file);
+    setPreview(URL.createObjectURL(file));
+  };
+
   const handleProfileSubmit = (e) => {
     e.preventDefault();
     localStorage.setItem("profileData", JSON.stringify(profileData));
@@ -79,14 +88,15 @@ function Profile() {
   if (!isLoggedIn) {
     return showLogin ? (
       <div className="auth__container">
-        <h1>Login</h1>
+        <h1>LOGIN</h1>
         <form className="auth__form" onSubmit={handleAuthSubmit}>
           <div className="auth__form-group">
             <label htmlFor="email">Email:</label>
             <input
               type="email"
               id="email"
               name="email"
+              placeholder="youremail@mail.com"
               value={formData.email}
               onChange={handleAuthChange}
               required
@@ -120,6 +130,7 @@ function Profile() {
               type="text"
               id="name"
               name="name"
+              placeholder="Your Name"
               value={formData.name}
               onChange={handleAuthChange}
               required
@@ -131,6 +142,7 @@ function Profile() {
               type="email"
               id="email"
               name="email"
+              placeholder="youremail@mail.com"
               value={formData.email}
               onChange={handleAuthChange}
               required
@@ -148,7 +160,19 @@ function Profile() {
             />
           </div>
           {error && <p className="auth__error">{error}</p>}
+          <div className="signup__form-group">
+          <label>
+            <input
+              type="checkbox"
+              name="subscribe"
+              checked={formData.subscribe}
+              onChange={handleChange}
+            />
+             Subscribe to promotions and newsletter
+          </label>
+        </div>
           <button type="submit" className="auth__submit-btn">Sign Up</button>
+          <p className="auth__terms">By creating this account, you agree to our <a>terms & conditions</a>.</p>
           <p className="auth__switch-container">
             Already have an account? <button className="login-btn-switch" onClick={handleAuthSwitch}>Login</button>
           </p>
@@ -159,24 +183,43 @@ function Profile() {
 
   return isSubmitted ? (
     <div className="profile__container">
+      <div className="profile__row">
+
+      <div>
       <div className="profile__avatar">
         <div className="profile__avatar-placeholder">
-          {profileData.name.charAt(0).toUpperCase()}
+          {preview ? (
+              <img src={preview} alt="Profile" className="profile__avatar-img" />
+            ) : (
+              <div className="profile__avatar-placeholder">
+                {profileData.name.charAt(0).toUpperCase()}
+              </div>
+            )}
         </div>
       </div>
       <h2 className="profile__name">{profileData.name}</h2>
-      <p className="profile__bio">{profileData.bio}</p>
-      <div className="profile__info">
-        <p><strong>Email:</strong> {profileData.email}</p>
-        {profileData.github && (
-          <p><strong>GitHub:</strong> <a href={profileData.github} target="_blank" rel="noreferrer">{profileData.github}</a></p>
-        )}
-        {profileData.website && (
-          <p><strong>Website:</strong> <a href={profileData.website} target="_blank" rel="noreferrer">{profileData.website}</a></p>
-        )}
       </div>
-      <button className="profile__edit-btn" onClick={() => setIsSubmitted(false)}>Edit Profile</button>
-      <button className="profile__logout-btn" onClick={handleLogout}>Logout</button>
+
+      <div className="profile__right">
+        <div className="profile__details">
+          <p className="profile__bio">{profileData.bio}</p>
+            <div className="profile__info">
+              <p><span><i class="fa-solid fa-envelope"></i> </span><strong>Email:</strong> {profileData.email}</p>
+              {profileData.github && (
+              <p><span><i class="fa-brands fa-github-alt"></i> </span><strong>GitHub:</strong> <a href={profileData.github} target="_blank" rel="noreferrer">{profileData.github}</a></p>
+                  )}
+              {profileData.website && (
+              <p><span><i class="fa-solid fa-link"></i> </span><strong>Website:</strong> <a href={profileData.website} target="_blank" rel="noreferrer">{profileData.website}</a></p>
+              )}
+            </div>
+        </div>
+      <div className="profile__buttons">
+          <button className="profile__edit-btn" onClick={() => setIsSubmitted(false)}>Edit Profile</button>
+          <button className="profile__logout-btn" onClick={handleLogout}>Logout</button>
+        </div>
+      </div>
+
+      </div>
     </div>
   ) : (
     <div className="profile__container">
@@ -191,7 +234,7 @@ function Profile() {
             value={profileData.name}
             onChange={handleChange}
             required
-            placeholder="enter your name"
+            placeholder="Enter your name"
           />
         </div>
         <div className="profile__form-group">
@@ -202,7 +245,7 @@ function Profile() {
             value={profileData.bio}
             onChange={handleChange}
             rows="3"
-            placeholder="enter your bio"
+            placeholder="Enter your bio"
           ></textarea>
         </div>
         <div className="profile__form-group">
@@ -214,7 +257,7 @@ function Profile() {
             value={profileData.email}
             onChange={handleChange}
             required
-            placeholder="enter your email"
+            placeholder="youremail@mail.com"
           />
         </div>
         <div className="profile__form-group">
@@ -225,7 +268,7 @@ function Profile() {
             name="github"
             value={profileData.github}
             onChange={handleChange}
-            placeholder="enter your github url"
+            placeholder="Enter your github url"
           />
         </div>
         <div className="profile__form-group">
@@ -236,7 +279,18 @@ function Profile() {
             name="website"
             value={profileData.website}
             onChange={handleChange}
-            placeholder="enter your personal website url"
+            placeholder="Enter your personal website url"
+          />
+        </div>
+        <div className="profile__form-group">
+          <label htmlFor="profileImage">Profile Image:</label>
+          <br />
+          <input
+            type="file"
+            id="profileImage"
+            name="profileImage"
+            onChange={handleImageChange}
+            accept="image/*"
           />
         </div>
         <button type="submit" className="profile__submit-btn">Save Profile</button>