Made needed changes and fixed components alignment

src/App.css

@@ -31,10 +31,32 @@
   color: #19162c ;
 }
 
+.a-feedback-btn{ 
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  z-index: 1000; 
+}
+.feedback-btn{
+  background-color: #ff21bc;
+  font-size: 17px; 
+  width: 180px;
+  height: 45px;
+  padding: 0;
+  border: none;
+  border-radius: 5px;
+}
+
 @media only screen and (max-width: 525px) {
   .App-content {
     flex-direction: column;
   }
+  .feedback-btn{
+    font-size: 13px;
+    width: 100%;
+    height: auto;
+    padding: 10px;
+  }
 }
 /* Animations */
 .fromTop{

src/App.js

@@ -56,18 +56,8 @@ function App() {
         <GoToTop />
         <Footer />
         <ChatbotIcon />
-        <a href="/feedback" style={{ position: 'fixed', bottom: '20px', left: '30px', zIndex: '1000' }}>
-  <button
-    style={{
-      backgroundColor: '#ff21bc',
-      fontSize: '17px', // Optional: sets text size
-      width: '180px',  // Adjust width as needed
-      height: '45px',  // Adjust height as needed
-      padding: '0',    // Reset padding if needed
-      border: 'none',  // Remove border if any
-      borderRadius: '5px', // Optional: adds rounded corners
-    }}
-  >
+        <a href="/feedback" className="a-feedback-btn">
+  <button className="feedback-btn">
     Help Us Improve!
   </button>
 </a>

src/Components/CardMain.css

@@ -64,7 +64,7 @@
     text-decoration: none;
     text-align: center;
   }
-
+    
   .button:hover {
     background-color: #0056b3;
   }

src/Components/CardMain.js

@@ -164,7 +164,7 @@ const features = [
 },
 ];
 
-function CardMain() {
+function CardMain({sortProjects}) {
   const [isVisible, setIsVisible] = useState(
     new Array(features.length).fill(false)
   );
@@ -210,13 +210,15 @@ function CardMain() {
     });
   };
 
+  const sortedProjects = sortProjects([...features]);
+
   return (
     <div
       className="card"
       ref={containerRef}
       style={{ overflowY: "auto", maxHeight: "100vh" }}
     >
-      {features.map((project, index) => (
+      {sortedProjects.map((project, index) => (
         <div className="card_main" key={index}>
           <img
             src={project.img}

src/Components/ChatbotIcon.css

@@ -1,13 +1,12 @@
 .chatbot-icon {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 30px;
+    right: 30px;
     cursor: pointer;
     z-index: 1000;
-  }
+}
 
-  .chatbot-icon img {
+.chatbot-icon img {
     width: 50px;
     height: 50px;
-  }
-
+}

src/Components/Footer.js

@@ -4,11 +4,11 @@ import logo from '../img/apple-touch-icon.png';
 import SubscribeMail from './footer_section/Mail/SubscribeMail';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar, faInfoCircle, faBriefcase, faEnvelope, faUsers, faBlog, faClipboardList, faQuestionCircle, faFileAlt, faGavel, faAddressBook, faUsersGear } from '@fortawesome/free-solid-svg-icons';
-import { faLinkedin, faGithub, faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons';
+import { faLinkedin, faGithub, faFacebook } from '@fortawesome/free-brands-svg-icons';
 
-const scrollToTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-};
+// const scrollToTop = () => {
+//   window.scrollTo({ top: 0, behavior: 'smooth' });
+// };
 
 const Footer = () => {
   const today = new Date();
@@ -59,16 +59,16 @@ const Footer = () => {
       </div>
       <SubscribeMail />
       <div className='footer-icons footer-icons-md'>
-        <a href="#" target="_blank" rel='noreferrer'>
+        <a href="/" target="_blank" rel='noreferrer'>
           <FontAwesomeIcon icon={faLinkedin} />
         </a>
         <a href="https://github.com/SUGAM-ARORA/UniCollab" target="_blank" rel='noreferrer'>
           <FontAwesomeIcon icon={faGithub} />
         </a>
-        <a href="#" target="_blank" rel='noreferrer'>
+        <a href="/" target="_blank" rel='noreferrer'>
           <FontAwesomeIcon icon={faFacebook} />
         </a>
-        <a href="#" target="_blank" rel='noreferrer'>
+        <a href="/" target="_blank" rel='noreferrer'>
         <i class="fa-brands fa-square-x-twitter"></i>  
               </a>
       </div>

src/Components/MainContainer.js

@@ -16,6 +16,7 @@ function MainContainer() {
   const [activeFilterButton, setActiveFilterButton] = useState("All");
   const [sortByOpen, setSortByOpen] = useState(false);
   const [nameDropdownOpen, setNameDropdownOpen] = useState(false);
+  const [sortCriteria, setSortCriteria] = useState({key:"name", order: "asc"});
 
   const uploadImageHandler = () => {
     imageUploadInputRef?.current?.click();
@@ -42,9 +43,9 @@ function MainContainer() {
     }
   };
 
-  const toggleNameDropdown = () => {
+   const toggleNameDropdown = () => {
     setNameDropdownOpen(!nameDropdownOpen);
-  };
+   };
 
   // Close dropdown if clicked outside
   useEffect(() => {
@@ -59,6 +60,26 @@ function MainContainer() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+
+  const handleSortChange = (key, order) => {
+    setSortCriteria({ key, order });
+  };
+
+  const sortProjects = (projects) => {
+    return projects.sort((a, b) => {
+      if (sortCriteria.key === 'name') {
+        if (sortCriteria.order === 'asc') {
+          return a.title.localeCompare(b.title);
+        } else {
+          return b.title.localeCompare(a.title);
+        }
+      } else if (sortCriteria.key === 'hearts') {
+        return b.hearts - a.hearts; // descending order for hearts
+      }
+      return 0;
+    });
+  };
+
   return (
     <div className="maincontainer">
       <div className="left">
@@ -155,12 +176,11 @@ function MainContainer() {
                   <button className="dropdown-item" onClick={toggleNameDropdown}>
                     Name
                   </button>
-                  <button className="dropdown-item">Role</button>
-                  <button className="dropdown-item">Hearts</button>
+                  <button className="dropdown-item" onClick={() => handleSortChange("hearts", "desc")}>Hearts</button>
                   {nameDropdownOpen && (
                     <div className="sub-dropdown">
-                      <button className="dropdown-item">Ascending</button>
-                      <button className="dropdown-item">Descending</button>
+                      <button className="dropdown-item" onClick={() => handleSortChange("name", "asc")}>Ascending</button>
+                      <button className="dropdown-item" onClick={() => handleSortChange("name", "desc")}>Descending</button>
                     </div>
                   )}
                 </div>
@@ -170,7 +190,7 @@ function MainContainer() {
 
           <main className="fromBottom">
             {activeButton === "Feed" ? (
-              <CardMain />
+              <CardMain sortProjects={sortProjects}/>
             ) : (
               <Popular /> // Use the Popular component here
             )}

src/Components/Menu.js

@@ -88,7 +88,7 @@ function Menu() {
           }}
         >
           {[
-            { to: "/projects", icon: <FaList size={30} />, text: "My projects" },
+            { to: "/projects", icon: <FaList size={30} />, text: "Projects" },
             { to: "/Delicious", icon: <FaDelicious size={30} />, text: "Delicious" },
             { to: "/cart", icon: <FaShoppingCart size={30} />, text: "Cart" },
             { to: "/wallet", icon: <FaWallet size={30} />, text: "Wallet" },