From e70319e45fb84605f829443069f3b72b0a03c26b Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 14:50:07 +0530 Subject: [PATCH 01/15] Added BoxShadow Effect --- frontend/src/App.css | 18 +- frontend/src/App.js | 107 +--- frontend/src/Component/Footer.js | 1 + frontend/src/Component/Home.js | 519 +++++------------- frontend/src/Component/Navbar/NavbarCenter.js | 129 +---- frontend/src/style/Footer.css | 6 +- frontend/src/style/Home.css | 39 +- frontend/src/style/Navbar.css | 260 ++++----- 8 files changed, 321 insertions(+), 758 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 5a45d6a8..3c55be0c 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,19 +1,5 @@ -* { - cursor: none; -} - .sidebar-content { padding: 10px; - cursor: none; + cursor: pointer; transition: background-color 0.2s; -} - -.Toastify__toast-container { - color: #000; -} - -.Toastify__toast { - font-size: 18px; - color: black; - background-color: rgb(165, 57, 197); -} +} \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index 9e354644..a53a80f8 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,58 +1,41 @@ -import React, { useState, useEffect, Suspense, lazy } from "react"; +import React, { useState, useEffect } from "react"; import { Route, Routes } from "react-router-dom"; // Correct import import "./App.css"; +import About from "./Component/About"; +import Footer from "./Component/Footer"; +import Rateus from "./Component/Rateus"; +import Home from "./Component/Home"; +import Navbar from "./Component/Navbar/Navbar"; +import BookMark from "./Component/BookMark"; +import ChatAssistant from "./ChatAssistant/ChatAssistant"; +import NotFound from "./Component/NotFound"; +import BackToTopButton from "./Component/BackToTopButton"; +import OpenSource from "./Component/OpenSource"; +import Review from "./Component/Review"; import AOS from "aos"; import "aos/dist/aos.css"; import { Toaster } from "react-hot-toast"; import ScrollToTop from "./Component/ScrollToTop"; -import Navbar from "./Component/Navbar/Navbar"; -import BackToTopButton from "./Component/BackToTopButton"; -import Footer from "./Component/Footer"; -import TrailingCursor from "./Component/TrailingCursor/TrailingCursor"; -import Login from "./Component/Login"; -import Register from "./Component/Register"; -import ChatAssistant from "./ChatAssistant/ChatAssistant"; -// Lazy load components -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 OpenSource = lazy(() => import("./Component/OpenSource")); -const Review = lazy(() => import("./Component/Review")); -const BookMark = lazy(() => import("./Component/BookMark")); -const Contact = lazy(() => import("./Component/Contact")); -const Signup = lazy(() => import("./Component/Signup")); -const Profile = lazy(() => import("./Component/Profile")); -const RemoteJobs = lazy(() => import("./pages/RemoteJobs")); -const AI = lazy(() => import("./pages/AI")); -const UI = lazy(() => import("./pages/UI")); -const Movie = lazy(() => import("./pages/Movie")); -const Extension = lazy(() => import("./pages/Extension")); -const EthicalHacking = lazy(() => import("./pages/EthicalHacking")); -const FrontendTools = lazy(() => import("./pages/FrontendTools")); -const Faq = lazy(() => import("./Component/Faq")); -const CodingPlatform = lazy(() => import("./pages/CodingPlatform")); // Corrected import -const CoursesPlatform = lazy(() => import("./pages/CoursesPlatform")); -const Collaboration = lazy(() => import("./pages/Collaboration")); -const Productivity = lazy(() => import("./pages/Productivity")); -const Extensions = lazy(() => import("./pages/Extensions")); - -const Movies = lazy(() => import("./pages/Movies")); - -const Ui = lazy(() => import("./pages/UserInterface")); - -const RemoteJob = lazy(() => import("./pages/RemoteJob")); +//cards +import RemoteJobs from "./pages/RemoteJobs"; +import AI from "./pages/AI"; +import Movie from "./pages/Movie"; +import Extension from "./pages/Extension"; +import UI from "./pages/UI"; +import FrontendTools from "./pages/FrontendTools"; +import EthicalHacking from "./pages/EthicalHacking"; +import Faq from "./Component/Faq"; +import CodingPlatform from "./pages/CodingPlatform"; // Corrected import +import CoursesPlatform from "./pages/CoursesPlatform"; function App() { const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { AOS.init(); }, []); - return ( <> - } /> @@ -62,7 +45,6 @@ function App() { } /> } /> } /> - } /> } /> } /> } /> @@ -71,48 +53,11 @@ function App() { } /> } /> } /> - } /> - } /> - } /> {/* New Route */} - } /> {/* New Route */} + + }/> {/* Define other routes as needed */} - } /> {/* 404 route */} +} /> {/* 404 route */} -======= - Loading...}> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - - } /> - } /> - - {/* Define other routes as needed */} - {/* } /> 404 route */} - -
diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index ac69a22b..c83f1601 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -235,3 +235,4 @@ function Footer() { } export default Footer; + diff --git a/frontend/src/Component/Home.js b/frontend/src/Component/Home.js index d74d216e..a12f1e43 100644 --- a/frontend/src/Component/Home.js +++ b/frontend/src/Component/Home.js @@ -1,17 +1,13 @@ import axios from "axios"; -import debounce from "lodash.debounce"; -import React, { useEffect, useRef, useState } from "react"; -import toast from "react-hot-toast"; -import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; -import "react-loading-skeleton/dist/skeleton.css"; -import Tilt from "react-parallax-tilt"; +import React, { useEffect, useState, useRef } from "react"; import { useDispatch } from "react-redux"; +import ClipLoader from "react-spinners/ClipLoader"; import jsonTools from "../DB/product.json"; -import Devlabs from "../image/hero_img.svg"; -import Testimonials from "../pages/Testimonials"; import { deleteSource, setSource } from "../Slice/DataSlice"; import "../style/Home.css"; +import Devlabs from "../image/hero_img.svg"; import NavbarItem from "./Navbar/NavbarItem"; +import toast from "react-hot-toast"; const BACKEND = process.env.REACT_APP_BACKEND; @@ -20,34 +16,29 @@ function Home(props) { const [localStorageValue, setLocalStorageValue] = useState( localStorage.getItem("filter") || "" ); - const ref = useRef(null); - useEffect(() => { - if (props.searchQuery !== "") { - ref.current?.scrollIntoView({ - behavior: "smooth", - }); - } - }, [props.searchQuery]); - const [selectedFilters, setSelectedFilters] = useState([]); - const [filteredItems, setFilteredItems] = useState(jsonTools); + const ref = useRef(); + + if (props.searchQuery !== "") { + ref.current?.scrollIntoView({ + behavior: "smooth", + }); + } + const [currentPage, setCurrentPage] = useState(1); const postPerpage = 16; const lastPostIndex = currentPage * postPerpage; const firstPostIndex = lastPostIndex - postPerpage; const [dataBaseData, setDataBaseData] = useState([]); const [loading, setLoading] = useState(false); - const [showPopup, setShowPopup] = useState(false); - const [showRemovePopup, setShowRemovePopup] = useState(false); - const [contributors, setContributors] = useState([]); - const [searchQuery, setSearchQuery] = useState(""); - const [searchResults, setSearchResults] = useState([]); - console.log(searchQuery); + const currentPost1 = dataBaseData; let allvalue = []; - const handleBookmarks = () => { + + function handleBookmarks() { const bookmark = JSON.parse(localStorage.getItem("bookmarks")); setBookmark(bookmark); - }; + } + useEffect(() => { handleBookmarks(); }, []); @@ -60,31 +51,20 @@ function Home(props) { window.addEventListener("storage", handleStorageChange); const fetchData = async () => { - try { - const response = await axios.get(`${BACKEND}/tools/all`); - if (response.data.success) { - setDataBaseData(response.data.tools); - } else { - setDataBaseData(jsonTools); - } - } catch (error) { - console.error(error); + const response = await axios + .get(`${BACKEND}/tools/all`) + .catch((error) => { + return error.response; + }); + if (response.data.success) { + setDataBaseData(response.data.tools); + } else { setDataBaseData(jsonTools); } - setTimeout(() => { - setLoading(false); - }, 2000); - }; - - const fetchContributors = async () => { - const response = await axios.get( - "https://api.github.com/repos/HimanshuNarware/Devlabs/contributors" - ); - setContributors(response.data); + setLoading(false); }; fetchData(); - fetchContributors(); return () => { window.removeEventListener("storage", handleStorageChange); @@ -109,10 +89,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 = @@ -123,38 +103,35 @@ function Home(props) { const numbers = [...Array(npage + 1).keys()].slice(1); const dispatch = useDispatch(); - const prePage = () => { + function prePage() { if (currentPage > 1) { setCurrentPage(currentPage - 1); - window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" }); } - }; + } - const nextPage = () => { + function nextPage() { if (currentPage < npage) { setCurrentPage(currentPage + 1); - window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" }); } - }; + } - const changeCPage = (id) => { + function changeCPage(id) { setCurrentPage(id); - window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" }); - }; - - const handleBookmark = (datalist) => { - let bookmarkList = JSON.parse(localStorage.getItem("bookmarks")) || []; - let found = bookmarkList.some((item) => item.name === datalist.productName); + } - if (!found) { - bookmarkList.push({ - image: datalist.image, - name: datalist.productName, - desc: datalist.description, - link: datalist.link, - }); - localStorage.setItem("bookmarks", JSON.stringify(bookmarkList)); - toast.success("Bookmark added successfully"); + function handleBookmark(datalist) { + if (bookmarks === null) { + localStorage.setItem( + "bookmarks", + JSON.stringify([ + { + image: datalist.image, + name: datalist.productName, + desc: datalist.description, + link: datalist.link, + }, + ]) + ); dispatch( setSource({ image: datalist.image, @@ -163,8 +140,8 @@ function Home(props) { link: datalist.link, }) ); + toast.success("Bookmark added successfully"); } else { - toast.error("Already bookmarked"); let found = false; for (let item of bookmarks) { if (item.name === datalist.productName) { @@ -196,14 +173,10 @@ function Home(props) { link: datalist.link, }) ); - setShowPopup(true); - setTimeout(() => { - setShowPopup(false); - }, 2000); } } handleBookmarks(); - }; + } const handleDeleteBookmark = (name) => { dispatch(deleteSource({ name })); @@ -216,312 +189,114 @@ function Home(props) { (bookmark) => bookmark.name !== name ); localStorage.setItem("bookmarks", JSON.stringify(updatedBookmarks)); - setShowRemovePopup(true); - setTimeout(() => { - setShowRemovePopup(false); - }, 2000); handleBookmarks(); }; - const filters = [ - "AI", - "Ethical", - "Extensions", - "Web", - "Movies", - "Remote", - "Resume", - "UI", - "Coding", - "Course", - "Tools", - ]; - - const handleFilterButtonClick = (selectedCategory) => { - if (selectedFilters.includes(selectedCategory)) { - setSelectedFilters([]); - } else { - setSelectedFilters([selectedCategory]); - } - }; - - useEffect(() => { - filterItems(); - }, [selectedFilters]); - - const filterItems = () => { - if (selectedFilters.length > 0) { - const tempItems = selectedFilters.map((selectedCategory) => - jsonTools.filter( - (jsonTool) => - jsonTool.category.toLowerCase() === selectedCategory.toLowerCase() - ) - ); - setFilteredItems(tempItems.flat()); - } else { - setFilteredItems([...jsonTools]); - } - }; - - const handleSearch = debounce((query) => { - setSearchQuery(query); - - if (query === "") { - setSearchResults([]); - return; - } - - const results = jsonTools.filter( - (tool) => - tool.productName && - tool.productName.toLowerCase().includes(query.toLowerCase()) - ); - - setSearchResults(results); - }, 300); - - let filterdata = []; - return ( - - -
-
-
-
-
- Welcome to -
Devlabs! -

- Discover Free Tools, -
- Empower Your Projects. -
- -Built by open-source community -

-
- -
-
-
- - devlabs-removebg-preview - -
-
- -
-
-
-

Lets Get, What You seek!

-
- handleSearch(e.target.value)} - type="text" - placeholder="Search Tools ..." - /> -
-
- {searchQuery && searchResults.length === 0 && ( -
- - empty_state_img - - empty_state_img - -

No matching tools found.

+
+
+
+
+
+

+ Welcome to +
Devlabs! +

+ Discover Free Tools, +
+ Empower Your Projects. +
+ + {" "} + -Built by open-source community + +

+ + +
+ +
- )} - {!loading && currentPost.length === 0 && ( -
- no post -

No posts found.

+
+ devlabs-removebg-preview
- )} - -
-
- {filters.map((category) => ( +
+
+
+
+
+ + + {currentPost.map((datalist) => { + return ( +
+ {datalist.category} +

{datalist.productName}

+

{datalist.description}

- ))} -
-
- {loading && ( -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- )} - - {!loading && - filteredItems - .filter((item) => { - return searchQuery.toLowerCase() === "" - ? item - : item.productName.toLowerCase().includes(searchQuery); - }) - .slice(firstPostIndex, lastPostIndex) - .map((datalist) => { - filterdata.push(datalist); - return ( -
- {datalist.category} -

{datalist.productName}

-

{datalist.description}

- - {bookmarks?.some((item) => - item.name.includes(datalist.productName) - ) ? ( - <> - - - ) : ( - - )} -
- ); - })} -
- {filterdata.length > 0 && ( -
-
    -
    -
  • - - < - -
    • -
    -
    - {numbers.map((n, i) => { - // Calculate range of visible page numbers around current page - const start = Math.max(1, currentPage - 4); // Show 4 pages before current page - const end = Math.min(npage, start + 8); // Show 8 pages in total - - // Show ellipsis if start is greater than 1 - if (start > 1 && i === 1) { - return ( -
  • - ... -
    • - ); - } - - // Show ellipsis if end is less than npage - if (end < npage && i === numbers.length - 1) { - return ( -
  • - ... -
    • - ); - } - - // Display the page number if within the visible range - if (n >= start && n <= end) { - return ( -
  • - changeCPage(n)}> - {n} - -
    • - ); - } - - return null; // Hide pages outside the visible range - })} -
    -
    -
  • - - > - -
    • -
    -
+ {bookmarks?.some((item) => + item.name.includes(datalist.productName) + ) ? ( + <> + + + ) : ( + + )}
- )} -
- + ); + })} +
+
+
- - +
); } diff --git a/frontend/src/Component/Navbar/NavbarCenter.js b/frontend/src/Component/Navbar/NavbarCenter.js index 0974a9ca..7741e9ca 100644 --- a/frontend/src/Component/Navbar/NavbarCenter.js +++ b/frontend/src/Component/Navbar/NavbarCenter.js @@ -2,144 +2,49 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; import "../../style/Navbar.css"; import NavbarItem from "./NavbarItem"; -import RateUsComponent from "../../Component/Rate.jsx"; // Import the RateUsComponent -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import "../../style/BookMark.css" -import { - faHome, - faBookmark, - faCode, - faInfoCircle, - faQuestionCircle, - faStar, - faUser, - faEnvelope, -} from "@fortawesome/free-solid-svg-icons"; -import { Modal, Backdrop, Box } from "@mui/material"; +import Modal from "../../Component/Modal"; +import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faHome, faBookmark, faCode, faInfoCircle, faQuestionCircle, faStar, faEnvelope } from '@fortawesome/free-solid-svg-icons'; -function NavbarCenter( ) { - const totalBookmarks = - useSelector((state) => state.SourceReducer.totalBookmarks) || 0; +function NavbarCenter() { + const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0; const [isModalOpen, setIsModalOpen] = useState(false); const handleRateUsClick = () => { setIsModalOpen(true); }; - const handleCloseModal = () => { - setIsModalOpen(false); - }; - return (
- } - - to="/bookmark" - /> + Bookmark ({totalBookmarks})} to="/bookmark" />
  • - - Open Source - - } - to="/open-source" - /> + Open Source} to="/open-source" />
  • - - About Us - - } - to="/about" - /> + About Us} to="/about" />
  • - - FAQ's - - } - to="/faq" - /> + FAQ's} to="/faq" />
  • - - Rate Us - - } - to="/Rate" - /> - - -
    • -
  • - - Contact - - } - to="/contact" - /> + Rate Us} to="#" />
  • - - Login - - } - to="/Login" - /> -
    • -
  • - - Register - - } - to="/Register" - My Profile - - } - to="/profile" - /> + Contact} to="https://www.linkedin.com/in/himanshunarware/" />
    • - - - - - + setIsModalOpen(false)}> + + ); } + export default NavbarCenter; diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 9b7a23bd..e118949a 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -330,6 +330,9 @@ ul a .mr-2 { color: #000; transition: transform 0.3s ease, color 0.3s ease; } +.contact-link a:hover { + border: 2px solid #fff; +} .contact-link a:hover { cursor: none; @@ -356,6 +359,3 @@ ul a .mr-2 { } } -.contact-link a:hover { - border: 2px solid #fff; -} diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css index a6c8c74b..62dce8e2 100644 --- a/frontend/src/style/Home.css +++ b/frontend/src/style/Home.css @@ -67,11 +67,11 @@ max-width: 100vw; overflow: auto; display: flex; - justify-content: center; /* Change from start to center */ + justify-content: start; align-items: center; margin-top: 20px; padding: 1rem; - margin-left: 0; /* Remove margin-left to center */ + margin-left: 32%; } .pagination .page-wrapper{ @@ -131,17 +131,13 @@ display: flex; flex-direction: row; align-items: center; - justify-content: center; /* Change from space-between to center */ -} -.let-text{ - text-align: center; - font-size: 30px; + justify-content: space-between; } + .hero-content { display: flex; - flex-direction: row; - width: 100%; /* Change from 50% to 100% for full width */ - text-align: center; /* Center the text */ + flex-direction: column; + width: 50%; gap: 6px; } @@ -229,8 +225,8 @@ text-align: center; } .hero-content { - /* display: flex; */ - /* flex-direction: column; */ + display: flex; + flex-direction: column; width: 100%; gap: 6px; } @@ -238,8 +234,12 @@ justify-content: center; } .hero-image { + height: 45%; + width: 100%; display: flex; - justify-content: center; /* Center the image */ + align-items: center; + justify-content: center; + margin-top: 2rem; } .hero-image img { height: 100%; @@ -516,13 +516,6 @@ background-color: #8b5cf6; cursor: pointer; } -.filter-container { - display: flex; - justify-content: center; /* Center filter buttons */ - flex-wrap: wrap; - gap: 10px; -} - .active_filter, .filter-button:hover { background-color: #09001f63; @@ -532,10 +525,10 @@ box-shadow: -1px 2px 8px #c5aff899,0px 2px 8px #6943c392; } -.search-feilds { +.search-fields { display: flex; - justify-content: center; /* Center the search field */ - margin-top: 20px; + justify-content: center; + margin: 20px 0; } .search-input { diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css index d25725aa..8661067f 100644 --- a/frontend/src/style/Navbar.css +++ b/frontend/src/style/Navbar.css @@ -1,88 +1,97 @@ .navbar { - background-color: #6a43c3; - padding: 1rem; + background-color: #8b5cf6; + padding: 5px 10px; /* Decreased padding to reduce height */ position: fixed; - width: 1500px; + width: 100%; top: 0px; left: 0px; - height: auto; + height: 80px; align-items: center; - justify-content: start; + justify-content: space-between; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; z-index: 4; isolation: isolate; mix-blend-mode: normal; - - gap: 10px; - + padding-left: 30px; } .search-bar { display: flex; align-items: center; position: relative; - top: -10px; + top: -10px; /* Adjust the value as needed */ } - .navbar-content li { - flex-grow: 1; - margin: 0 15px; + flex-grow: 1; /* Make the navbar items stretch to fill the width */ + margin: 0 15px; /* Add margin to create space between nav items */ font-size: 1.3rem; - text-decoration: none; + text-decoration: none; /* Ensures no underline */ } -.navbar-brand { - background: transparent; -} -.navbar-content { - display: flex; - align-items: center; -} - -.nav-item { - position: relative; - color: #fff; - transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; - box-shadow: 0 0 10px rgba(255, 255, 255, 0); -} .navbar-content .nav-item { - flex-wrap: wrap; - flex-grow: 1; + flex-grow: 1; /* Allow items to stretch */ text-align: center; - text-decoration: none; - margin: 0 -1px; + text-decoration: none; /* Ensures no underline */ + margin: 0 15px; /* Add space between items */ } + + .logo-img { width: 150px; - margin-right: auto !important; + margin-right: auto; /* Move the logo to the left */ +} +.navbar-content li { + list-style: none; + margin: 0 10px; + font-size: 1.3rem; + text-decoration: none; /* Ensures no underline */ + animation: slideTop 1s ease forwards; } - .navbar-content { display: flex; + text-decoration: none; /* Ensures no underline */ list-style: none; padding: 0; margin: 0; - justify-content: space-between; - width: 109%; + justify-content: space-between; /* Add space between items */ + width: 109%; /* Make the navbar items stretch along the width */ } .card-body img { background: transparent; } + +.navbar-brand { + background: transparent; +} + +.navbar-content { + display: flex; + align-items: center; +} +/* Define hover effect for nav-items */ +/* Define hover effect for nav-items */ +.nav-item { + position: relative; + color: #fff; + transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Add box-shadow to transition */ + box-shadow: 0 0 10px rgba(255, 255, 255, 0); /* Initially no shadow */ +} + .nav-item:hover { - color: black; - transform: scale(1.05); - filter: brightness(1.2); + transform: scale(1.05); /* Scale up slightly on hover */ + filter: brightness(1.2); /* Brighten on hover for shine effect */ + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Add glowing effect */ } + + .navbar-left { display: flex; - width: fit-content; justify-content: center; align-items: center; - padding: 10px; gap: 5px; animation: slideLeft 1s ease forwards; } @@ -91,14 +100,17 @@ width: 30px; height: 30px; position: relative; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); transform: rotate(0deg); + -webkit-transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } -#nav-icon1:hover{ - cursor: none; -} .navbar-left #nav-icon1 span { display: block; position: absolute; @@ -108,7 +120,13 @@ border-radius: 9px; opacity: 1; left: 0; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); transform: rotate(0deg); + -webkit-transition: 0.25s ease-in-out; + -moz-transition: 0.25s ease-in-out; + -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } @@ -126,6 +144,9 @@ #nav-icon1.open span:nth-child(1) { top: 18px; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); transform: rotate(135deg); } @@ -136,77 +157,43 @@ #nav-icon1.open span:nth-child(3) { top: 18px; + -webkit-transform: rotate(-135deg); + -moz-transform: rotate(-135deg); + -o-transform: rotate(-135deg); transform: rotate(-135deg); } -.navbar-left { - display: flex; - width: fit-content; - justify-content: flex-start; /* Align items to the left */ - align-items: center; - padding: 10px; - gap: 5px; - animation: slideLeft 1s ease forwards; -} -.navbar-left { +.navbar-right { display: flex; - width: fit-content; - justify-content: flex-start; /* Align items to the left */ align-items: center; - padding: 10px; - gap: 5px; - animation: slideLeft 1s ease forwards; -} - -.navbar-center { animation: slideRight 1s ease forwards; - margin-right: 115px; + /* margin-right: 115px; */ } .logo-img { width: 150px; - margin-right: 140px; + margin-right: 140px; /* Move the logo to the right */ } -.nav-item a, -.navbar-content ul li a, -.Bookmark.nav-link.active { - - color: black !important; /* Ensure nav items are always black */ - text-decoration: none !important; - font-size: 1.2rem; +.nav-item a { + color: #0e0303; + text-decoration: none; + font-size: 1.2rem; /* Adjust font size as needed */ transition: color 0.3s; - position: relative; } -.nav-item a:hover, -.Bookmark.nav-link.active:hover { - color: black !important; /* Ensure nav items remain black on hover */ - font-weight: 700; +.navbar-content ul li a.active { + color: white; + background-color: green; } -.nav-item a::after, -.Bookmark.nav-link.active::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - - bottom: -5px; - left: 0; - background-color: black; /* Ensure underline is black */ - transition: all 0.3s ease-in-out; +.nav-item { + position: relative; + color: #fff; } -.nav-item a:hover::after, -.Bookmark.nav-link.active:hover::after { +.nav-item:hover::before { width: 100%; - background-color: black; /* Ensure underline remains black on hover */ -} - -.navbar-content ul li a.active { - color: black; - background-color: rgb(0, 128, 0); } .sidebar { @@ -214,26 +201,26 @@ height: 92%; background-color: #8b5cf6; position: fixed; - top: 4.6rem; - z-index: 4; + top: 4.4rem; + z-index: 3; display: flex; flex-direction: column; font-size: 1.4rem; overflow-y: scroll; transition: width 0.3s; + z-index: 4; } .nav-item::before { content: ""; position: absolute; - /* bottom: 0; */ + bottom: 0; left: 50%; - top: 35px; transform: translateX(-50%); width: 0; height: 2px; background-color: black; - /* transition: width 0.2s ease-in-out; */ + transition: width 0.2s ease-in-out; } .sidebar.active { @@ -243,6 +230,7 @@ .sidebar-content { border-bottom: 1px solid rgb(2, 27, 43); font-weight: 500; + transform: translateY(40px); opacity: 0; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.2s; @@ -268,10 +256,10 @@ font-weight: 500; } -/* .Link:hover { +.Link:hover { color: rgb(72, 5, 5); text-decoration: none; -} */ +} .sidebar-btns { display: flex; @@ -288,9 +276,9 @@ line-height: 1; } -/* .sidebar-btn:hover { +.sidebar-btn:hover { color: rgba(0, 0, 0, 0.84); -} */ +} .sidebar { color: rgba(0, 0, 0, 0.84); @@ -343,7 +331,7 @@ background-clip: padding-box; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; position: relative; - padding-right: 40px; + padding-right: 40px; /* Adjust as needed */ flex: 1 1 auto; width: 1%; margin-bottom: 0; @@ -363,31 +351,31 @@ line-height: 1; } -/* .sidebar-btn:hover { +.sidebar-btn:hover { color: rgba(0, 0, 0, 0.84); -} */ +} .sidebar { - color: rgb(23, 0, 38); + color: rgba(0, 0, 0, 0.84); } -/* .filter:hover { - font-size: 1.8rem; - text-decoration: underline; -} */ .filter { transition: font-size 0.3s ease, text-decoration 0.3s ease; } - +.filter:hover { + font-size: 1.8rem; + text-decoration: underline; + /* transition: all 0.3s; */ +} .search { - margin-top: 0px; + margin-top: 0px; position: relative; } .box { margin-top: 15px; - margin-left: 65px; + margin-left: 65px; outline: none !important; border-radius: 20px; width: 80% !important; @@ -398,9 +386,9 @@ border: none; } -/* .box:hover { +.box:hover { border: 2.5px solid black; -} */ +} .input:focus { outline: none; @@ -409,6 +397,7 @@ } .span { + /* background: transparent !important; */ border: none !important; border-radius: 2px 100px 100px 2px; margin: 1.5px; @@ -418,11 +407,12 @@ font-size: 1.5rem; font-weight: b; line-height: 1.5; - color: black; + color: #495057; text-align: center; white-space: nowrap; background-color: #ebeff4; border: 1px solid #ced4da; + /* border-radius: 0.25rem; */ font-weight: bold !important; cursor: pointer; } @@ -448,7 +438,7 @@ font-size: 1.5rem; font-weight: b; line-height: 1.5; - color: black; + color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; @@ -477,38 +467,6 @@ } /* Ensure no underline under nav items */ -.nav-item a, -.navbar-content ul li a, -.Bookmark.nav-link.active { - color: rgb(23, 0, 38) !important; /* Ensure nav items are always black */ +.nav-item a, .navbar-content ul li a { text-decoration: none !important; - font-size: 1.2rem; - transition: color 0.3s; - position: relative; -} - - -.nav-item a:hover, -.Bookmark.nav-link.active:hover { - color: rgb(23, 0, 38) !important; /* Ensure nav items remain black on hover */ - font-weight: 700; -} - - -.nav-item a::after, -.Bookmark.nav-link.active::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - bottom: -5px; - left: 0; - background-color: black; /* Ensure underline is black */ - transition: all 0.3s ease-in-out; -} - -.nav-item a:hover::after, -.Bookmark.nav-link.active:hover::after { - width: 100%; - background-color: black; /* Ensure underline remains black on hover */ } From 6d282e3aac15be7250a3cbcd93e3c25263718e0e Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 14:56:52 +0530 Subject: [PATCH 02/15] Enhanced RateUs --- frontend/src/Component/Rateus.js | 82 +++++++++++++----- frontend/src/Component/Sidebar/Sidebar.js | 4 +- frontend/src/style/Rateus.css | 100 +++++++++++++++------- 3 files changed, 132 insertions(+), 54 deletions(-) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 472b6d40..6855a4e5 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -1,25 +1,67 @@ -import React from 'react'; +import React, { useState } from "react"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import "./../style/Rateus.css"; + +function RateUsComponent({ previousContent }) { + const [rating, setRating] = useState(0); + const [feedback, setFeedback] = useState(""); + const handleFeedbackChange = (e) => { + setFeedback(e.target.value); + }; + + const handleEmojiClick = (emojiIndex) => { + setRating(emojiIndex); + }; + + const handleSubmit = () => { + if (rating !== 0 && feedback.trim() !== "") { + setRating(0); + setFeedback(""); + toast.success("Thanks For Your Feedback :)", { + position: "top-center" + }); + } else { + toast.error("Please Enter All Details :(", { + position: "top-center" + }); + } + }; + + const emojis = ["😢", "😟", "😐", "😊", "😍"]; -export default function Rate({ rating, setRating }) { return ( -
    - {[1, 2, 3, 4, 5].map((star) => ( - = star ? '#0d6efd' : 'gray', - fontSize: '35px', - }} - onClick={() => { - setRating(star); - }} - > - ★ - - ))} -
    + <> +
    +
    +

    Rate Our Website

    +
    + {emojis.map((emoji, index) => ( + handleEmojiClick(index + 1)} + > + {emoji} + + ))} +
    + + +
    +
    + + ); } - +export default RateUsComponent; + diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index c1f8322a..9467c34b 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -16,6 +16,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FaRobot, FaUserSecret, FaFilm, FaCogs, FaLaptopCode, FaTools, FaBook, FaUsers, FaTasks } from "react-icons/fa"; import "../../style/Sidebar.css"; + function Sidebar({ showSideNav }) { const sidebarContent = [ { name: "all", description: "All", url: "/", icon: AiFillHome }, @@ -45,6 +46,7 @@ function Sidebar({ showSideNav }) { BookMark
    +
    About Us @@ -66,7 +68,7 @@ function Sidebar({ showSideNav }) {
    - + Rate Us
    diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 5cc2e423..477db21b 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -1,69 +1,103 @@ -.rate-us { +.rate-us-page { display: flex; justify-content: center; align-items: center; - height: 100vh; /* Ensure the component is centered vertically */ } -.rate-us__container { + +.toast-success { + background-color: #28a745; /* Green background for success */ + color: white; +} + +.toast-error { + background-color: #dc3545; /* Red background for error */ + color: white; +} + +.toast-body { + font-size: 16px; + text-align: center; +} + +.rate-us-container { width: 70%; max-width: 600px; padding: 20px; - border: 1px solid #210202; border-radius: 5px; - background-color: black; + background-color: #8B5CF6; transition: box-shadow 0.3s, transform 0.3s; } -.rate-us__heading { - text-align: center; - margin-bottom: 20px; - color: #7c1de2; +.rate-us-container:hover { + box-shadow: 0 0 20px #8B5CF6; + transform: scale(1.05); } -.rate-us__container--hover:hover { - box-shadow: 0 0 20px #7c1de2; - transform: scale(1.05); +.rate-us-heading { + text-align: center; + margin-bottom: 20px; + color: #000; } -.rate-us__icon-rating { +.emoji-rating { margin-bottom: 20px; display: flex; justify-content: center; } - -.rate-us__submit-button { - width: 30%; - padding: 10px; - background-color: #7c1de2; +.submit-button:hover { + background: #101623; + border: 2px solid #fff; color: white; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; } -.rate-us__icon { - font-size: 2rem; /* Increase emoji size */ + +.emoji { + font-size: 24px; cursor: pointer; - transition: transform 0.3s, filter 0.3s; + transition: transform 0.3s, text-shadow 0.3s; + margin: 0 10px; } -.rate-us__submit-button--hover:hover { - background-color: #5f129f; + +.emoji.selected { + transform: scale(1.5); + text-shadow: 0 0 20px #f7b731; + animation: shine 1.5s infinite; } -.rate-us__icon--selected { - transform: scale(1.0); /* Make selected emoji bigger */ - filter: brightness(1.5); /* Shine effect */ + +@keyframes shine { + 0% { + text-shadow: 0 0 10px #f7b731, 0 0 20px #f7b731, 0 0 30px #f7b731, 0 0 40px #f7b731, 0 0 50px #f7b731, 0 0 60px #f7b731, 0 0 70px #f7b731; + } + 100% { + text-shadow: 0 0 20px #f7b731, 0 0 30px #f7b731, 0 0 40px #f7b731, 0 0 50px #f7b731, 0 0 60px #f7b731, 0 0 70px #f7b731, 0 0 80px #f7b731; + } } -.rate-us__feedback-textarea { +.feedback-textarea { width: 100%; height: 180px; padding: 10px; - border: 1px solid #060404; + background-color: #101623; border-radius: 5px; resize: none; margin-bottom: 20px; - font-size: 1rem; /* Adjust textarea font size */ + color: white; } + +.submit-button { + width: 30%; + padding: 10px; + background-color: #101623; + color: white; + font-weight: 600; + border: none; + border-radius: 25px; + cursor: pointer; + transition: background-color 0.3s; +} + + + + From a7502a5e52e316922ed126c6277ff9b8f400a614 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 14:58:52 +0530 Subject: [PATCH 03/15] Corrected Routes --- frontend/src/Component/Sidebar/Sidebar.js | 1 + frontend/src/style/Sidebar.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index 9467c34b..fb39e1bc 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -16,6 +16,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FaRobot, FaUserSecret, FaFilm, FaCogs, FaLaptopCode, FaTools, FaBook, FaUsers, FaTasks } from "react-icons/fa"; import "../../style/Sidebar.css"; + function Sidebar({ showSideNav }) { const sidebarContent = [ diff --git a/frontend/src/style/Sidebar.css b/frontend/src/style/Sidebar.css index 189e0774..15f44c7c 100644 --- a/frontend/src/style/Sidebar.css +++ b/frontend/src/style/Sidebar.css @@ -6,7 +6,7 @@ justify-content: flex-start; margin-top: 20px; } - + .sidebar-btn { margin-bottom: 10px; } From 30d4fa207f04518a41a0ad11e6f3ed821a80c57b Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 15:02:13 +0530 Subject: [PATCH 04/15] Fixed Mobile view --- frontend/src/style/Footer.css | 18 ++++++++---------- frontend/src/style/Home.css | 2 +- frontend/src/style/Modal.css | 17 ++++++++--------- frontend/src/style/Sidebar.css | 2 +- 4 files changed, 18 insertions(+), 21 deletions(-) diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index e118949a..2e99780c 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -332,15 +332,7 @@ ul a .mr-2 { } .contact-link a:hover { border: 2px solid #fff; -} - -.contact-link a:hover { - cursor: none; - color: #474eff !important; - color: white; - transform: scale(1.1); - animation: pulse 1s infinite alternate; -} +} @keyframes pulse { 0% { @@ -358,4 +350,10 @@ ul a .mr-2 { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } - +contact-link a:hover { + cursor: none; + color: #474eff !important; + color: white; + transform: scale(1.1); + animation: pulse 1s infinite alternate; +} diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css index 62dce8e2..f15307e8 100644 --- a/frontend/src/style/Home.css +++ b/frontend/src/style/Home.css @@ -636,7 +636,7 @@ .hero-button a:hover { color: white; } - + @keyframes slideInLeft { from { opacity: 0; diff --git a/frontend/src/style/Modal.css b/frontend/src/style/Modal.css index 50236186..edaa921f 100644 --- a/frontend/src/style/Modal.css +++ b/frontend/src/style/Modal.css @@ -2,7 +2,7 @@ position: fixed; top: 0; left: 0; - right: 0; + right: 0; bottom: 0; background: rgba(239, 234, 234, 0.7); display: flex; @@ -11,14 +11,6 @@ z-index: 1000; } -.modal-content { - padding: 30px; - border-radius: 5px; - box-shadow: 0 0 10px rgba(168, 158, 158, 0.25); - color: rgb(19, 8, 26); /* Ensure text is purple */ - position: relative; -} - .close-buttoned { width: 50px; height: 50px; @@ -36,3 +28,10 @@ outline: none; /* Remove the default outline */ margin-left: auto; } +.modal-content { + padding: 30px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(168, 158, 158, 0.25); + color: rgb(19, 8, 26); /* Ensure text is purple */ + position: relative; +} \ No newline at end of file diff --git a/frontend/src/style/Sidebar.css b/frontend/src/style/Sidebar.css index 15f44c7c..3f622c16 100644 --- a/frontend/src/style/Sidebar.css +++ b/frontend/src/style/Sidebar.css @@ -6,7 +6,7 @@ justify-content: flex-start; margin-top: 20px; } - + .sidebar-btn { margin-bottom: 10px; } From e98c69efb7daca19b5a4c88cda23571c7bc2d30c Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 15:04:39 +0530 Subject: [PATCH 05/15] Fixed Footer --- frontend/src/Component/Footer.js | 1 - frontend/src/style/Footer.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index c83f1601..837368d5 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -233,6 +233,5 @@ function Footer() {
    ); } - export default Footer; diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 2e99780c..c52f2b82 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -350,7 +350,7 @@ ul a .mr-2 { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } -contact-link a:hover { +.contact-link a:hover { cursor: none; color: #474eff !important; color: white; From f88d5257f644fe77c385723fecbceec8a93501f3 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 15:34:17 +0530 Subject: [PATCH 06/15] Enhanced RateUs --- frontend/src/Component/Rate.css | 13 +++++++------ frontend/src/Component/Rateus.js | 2 +- frontend/src/style/Rateus.css | 20 ++++++++++---------- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/frontend/src/Component/Rate.css b/frontend/src/Component/Rate.css index 76fb8884..8fbfa2b0 100644 --- a/frontend/src/Component/Rate.css +++ b/frontend/src/Component/Rate.css @@ -1,6 +1,13 @@ input[type=radio]{ display: none; } + +.Rate .star{ + cursor: pointer; +} +.star FaStar{ + border: 1px solid #fff; +} .Rate{ height: 500px; } @@ -12,9 +19,3 @@ input[type=radio]{ margin-top: 20px; /* background-color: ; */ } -.Rate .star{ - cursor: pointer; -} -.star FaStar{ - border: 1px solid #fff; -} diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 6855a4e5..c2915dff 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -28,6 +28,7 @@ function RateUsComponent({ previousContent }) { } }; + const emojis = ["😢", "😟", "😐", "😊", "😍"]; return ( @@ -62,6 +63,5 @@ function RateUsComponent({ previousContent }) { ); } - export default RateUsComponent; diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 477db21b..ae022428 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -57,6 +57,16 @@ transition: transform 0.3s, text-shadow 0.3s; margin: 0 10px; } +.feedback-textarea { + width: 100%; + height: 180px; + padding: 10px; + background-color: #101623; + border-radius: 5px; + resize: none; + margin-bottom: 20px; + color: white; +} .emoji.selected { @@ -75,16 +85,6 @@ } } -.feedback-textarea { - width: 100%; - height: 180px; - padding: 10px; - background-color: #101623; - border-radius: 5px; - resize: none; - margin-bottom: 20px; - color: white; -} .submit-button { width: 30%; From 6f1c8ffcb1d06f5bdeffc969dd4c99cae82a71b6 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 15:35:44 +0530 Subject: [PATCH 07/15] Added Emojis instead of Stars --- frontend/src/Component/Rate.css | 11 ----------- frontend/src/Component/Rateus.js | 2 +- frontend/src/style/Rateus.css | 20 ++++++++++---------- 3 files changed, 11 insertions(+), 22 deletions(-) diff --git a/frontend/src/Component/Rate.css b/frontend/src/Component/Rate.css index 8fbfa2b0..98c1cba3 100644 --- a/frontend/src/Component/Rate.css +++ b/frontend/src/Component/Rate.css @@ -8,14 +8,3 @@ input[type=radio]{ .star FaStar{ border: 1px solid #fff; } -.Rate{ - height: 500px; -} - -.Rate p{ - color: #fff; - font-size: 20px; - font-weight: 400; - margin-top: 20px; - /* background-color: ; */ -} diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index c2915dff..6855a4e5 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -28,7 +28,6 @@ function RateUsComponent({ previousContent }) { } }; - const emojis = ["😢", "😟", "😐", "😊", "😍"]; return ( @@ -63,5 +62,6 @@ function RateUsComponent({ previousContent }) { ); } + export default RateUsComponent; diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index ae022428..477db21b 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -57,16 +57,6 @@ transition: transform 0.3s, text-shadow 0.3s; margin: 0 10px; } -.feedback-textarea { - width: 100%; - height: 180px; - padding: 10px; - background-color: #101623; - border-radius: 5px; - resize: none; - margin-bottom: 20px; - color: white; -} .emoji.selected { @@ -85,6 +75,16 @@ } } +.feedback-textarea { + width: 100%; + height: 180px; + padding: 10px; + background-color: #101623; + border-radius: 5px; + resize: none; + margin-bottom: 20px; + color: white; +} .submit-button { width: 30%; From 49142d54b3ad94d4940c7a9d3c8f31a150c243e9 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 18:58:09 +0530 Subject: [PATCH 08/15] Corrected Routes --- frontend/src/Component/Sidebar/Sidebar.js | 2 - .../src/Component/Sidebar/SidebarContent.js | 2 - frontend/src/style/Sidebar.css | 38 +++++++++---------- 3 files changed, 19 insertions(+), 23 deletions(-) diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index fb39e1bc..9d93fdd4 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -16,8 +16,6 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FaRobot, FaUserSecret, FaFilm, FaCogs, FaLaptopCode, FaTools, FaBook, FaUsers, FaTasks } from "react-icons/fa"; import "../../style/Sidebar.css"; - - function Sidebar({ showSideNav }) { const sidebarContent = [ { name: "all", description: "All", url: "/", icon: AiFillHome }, diff --git a/frontend/src/Component/Sidebar/SidebarContent.js b/frontend/src/Component/Sidebar/SidebarContent.js index d88a5b44..c9165c2b 100644 --- a/frontend/src/Component/Sidebar/SidebarContent.js +++ b/frontend/src/Component/Sidebar/SidebarContent.js @@ -1,9 +1,7 @@ import React from "react"; function SidebarContent({name,description,active}) { - function handleSidebarClick(prop) { localStorage.setItem("filter", prop); - if (prop === "tools") { localStorage.setItem("filter-2", "web"); } diff --git a/frontend/src/style/Sidebar.css b/frontend/src/style/Sidebar.css index 3f622c16..a353035f 100644 --- a/frontend/src/style/Sidebar.css +++ b/frontend/src/style/Sidebar.css @@ -7,26 +7,7 @@ margin-top: 20px; } -.sidebar-btn { - margin-bottom: 10px; -} -.sidebar-btn a { - color: var(--sidebar-text-light); - text-decoration: none; - display: flex; - align-items: center; - padding: 10px; - transition: color 0.3s ease-in-out; -} - -.sidebar-btn a:hover { - color: var(--sidebar-hover-light); -} - -.sidebar-btn a svg { - margin-right: 10px; -} @media (prefers-color-scheme: dark) { .sidebar { @@ -106,7 +87,26 @@ 0 0 30px var(--sidebar-hover), 0 0 40px var(--sidebar-hover); } +.sidebar-btn { + margin-bottom: 10px; +} +.sidebar-btn a { + color: var(--sidebar-text-light); + text-decoration: none; + display: flex; + align-items: center; + padding: 10px; + transition: color 0.3s ease-in-out; +} + +.sidebar-btn a:hover { + color: var(--sidebar-hover-light); +} + +.sidebar-btn a svg { + margin-right: 10px; +} /* Cascade Style */ .sidebar-content { display: flex; From 47f1ff0a5364b30f7232b3b1ec381eaef42115b3 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:16:22 +0530 Subject: [PATCH 09/15] Update App.css --- frontend/src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 3c55be0c..9dbe29ca 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -2,4 +2,4 @@ padding: 10px; cursor: pointer; transition: background-color 0.2s; -} \ No newline at end of file +} From 7d0793943e752388a590bbb307c82d46c5e2e37c Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:23:58 +0530 Subject: [PATCH 10/15] Update App.css --- frontend/src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 9dbe29ca..07eb4039 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -2,4 +2,4 @@ padding: 10px; cursor: pointer; transition: background-color 0.2s; -} +} From eea8ef2674c2f84b2f455ceed78d44b7ea71267e Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:37:52 +0530 Subject: [PATCH 11/15] Update Sidebar.js --- frontend/src/Component/Sidebar/Sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index 9d93fdd4..31d3fc4a 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -1,7 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; import { BsBookmark } from "react-icons/bs"; -import { AiFillHome } from "react-icons/ai"; +import { AiFillHome } from "react-icons/ai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, From 0cd56d5d04d102c5a753b9d874c34fc138fe4596 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 20:49:19 +0530 Subject: [PATCH 12/15] Update App.css --- frontend/src/App.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 07eb4039..455044c5 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -3,3 +3,5 @@ cursor: pointer; transition: background-color 0.2s; } + + From 8f1d3366dd3cf9ef9d20a0294ed2b003769149f9 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 22:12:17 +0530 Subject: [PATCH 13/15] Update Rateus.css --- frontend/src/style/Rateus.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 477db21b..75edfca8 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -9,6 +9,7 @@ color: white; } + .toast-error { background-color: #dc3545; /* Red background for error */ color: white; From b37a0519a8357d174659357ced42a9c3eebb8054 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Sat, 10 Aug 2024 12:56:20 +0530 Subject: [PATCH 14/15] Update App.css --- frontend/src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 455044c5..63692368 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,6 +1,6 @@ .sidebar-content { padding: 10px; - cursor: pointer; + cursor: pointer; transition: background-color 0.2s; } From c42348eaf4f85ac53ac54df74f45b1386a90e2af Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Sat, 10 Aug 2024 13:02:00 +0530 Subject: [PATCH 15/15] Update App.js --- frontend/src/App.js | 107 +++++++++++++++++++++++++++++++++----------- 1 file changed, 81 insertions(+), 26 deletions(-) diff --git a/frontend/src/App.js b/frontend/src/App.js index a53a80f8..1a389e91 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,41 +1,58 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, Suspense, lazy } from "react"; import { Route, Routes } from "react-router-dom"; // Correct import import "./App.css"; -import About from "./Component/About"; -import Footer from "./Component/Footer"; -import Rateus from "./Component/Rateus"; -import Home from "./Component/Home"; -import Navbar from "./Component/Navbar/Navbar"; -import BookMark from "./Component/BookMark"; -import ChatAssistant from "./ChatAssistant/ChatAssistant"; -import NotFound from "./Component/NotFound"; -import BackToTopButton from "./Component/BackToTopButton"; -import OpenSource from "./Component/OpenSource"; -import Review from "./Component/Review"; import AOS from "aos"; import "aos/dist/aos.css"; import { Toaster } from "react-hot-toast"; import ScrollToTop from "./Component/ScrollToTop"; -//cards -import RemoteJobs from "./pages/RemoteJobs"; -import AI from "./pages/AI"; -import Movie from "./pages/Movie"; -import Extension from "./pages/Extension"; -import UI from "./pages/UI"; -import FrontendTools from "./pages/FrontendTools"; -import EthicalHacking from "./pages/EthicalHacking"; -import Faq from "./Component/Faq"; -import CodingPlatform from "./pages/CodingPlatform"; // Corrected import -import CoursesPlatform from "./pages/CoursesPlatform"; +import Navbar from "./Component/Navbar/Navbar"; +import BackToTopButton from "./Component/BackToTopButton"; +import Footer from "./Component/Footer"; +import TrailingCursor from "./Component/TrailingCursor/TrailingCursor"; +import Login from "./Component/Login"; +import Register from "./Component/Register"; +import ChatAssistant from "./ChatAssistant/ChatAssistant"; +// Lazy load components +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 OpenSource = lazy(() => import("./Component/OpenSource")); +const Review = lazy(() => import("./Component/Review")); +const BookMark = lazy(() => import("./Component/BookMark")); +const Contact = lazy(() => import("./Component/Contact")); +const Signup = lazy(() => import("./Component/Signup")); +const Profile = lazy(() => import("./Component/Profile")); +const RemoteJobs = lazy(() => import("./pages/RemoteJobs")); +const AI = lazy(() => import("./pages/AI")); +const UI = lazy(() => import("./pages/UI")); +const Movie = lazy(() => import("./pages/Movie")); +const Extension = lazy(() => import("./pages/Extension")); +const EthicalHacking = lazy(() => import("./pages/EthicalHacking")); +const FrontendTools = lazy(() => import("./pages/FrontendTools")); +const Faq = lazy(() => import("./Component/Faq")); +const CodingPlatform = lazy(() => import("./pages/CodingPlatform")); // Corrected import +const CoursesPlatform = lazy(() => import("./pages/CoursesPlatform")); +const Collaboration = lazy(() => import("./pages/Collaboration")); +const Productivity = lazy(() => import("./pages/Productivity")); +const Extensions = lazy(() => import("./pages/Extensions")); + +const Movies = lazy(() => import("./pages/Movies")); + +const Ui = lazy(() => import("./pages/UserInterface")); + +const RemoteJob = lazy(() => import("./pages/RemoteJob")); function App() { const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { AOS.init(); }, []); + return ( <> + } /> @@ -45,6 +62,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -53,11 +71,48 @@ function App() { } /> } /> } /> - - }/> + } /> + } /> + } /> {/* New Route */} + } /> {/* New Route */} {/* Define other routes as needed */} -} /> {/* 404 route */} + } /> {/* 404 route */} +======= + Loading...}> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + + } /> + } /> + + {/* Define other routes as needed */} + {/* } /> 404 route */} + +