Elevating User Experience: Footer Refinement, Freelancer Page Fixes, and FAQ Styling

src/Components/Footer.css

@@ -2,9 +2,12 @@
   background-color: #19162c;
   color: white;
   padding: 2.5rem 2.5rem 1rem 2.5rem;
-  z-index: 1000;
+  z-index: 900;
+  height: 55vh;;
+}
+.scrolltop{
+  size: 20px;
 }
-
 .footer-container {
   display: flex;
   z-index: 1000;

src/Components/Footer.js

@@ -2,6 +2,10 @@ import React from 'react';
 import './Footer.css';
 import logo from '../img/apple-touch-icon.png';
 
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
 const Footer = () => {
   return (
 
@@ -65,8 +69,16 @@ const Footer = () => {
           © 2024 UniCollab. All rights reserved.
         </div>
       </div>
+      <div className='scrolltop'>
+      <div style={{ textAlign: 'center', padding: '20px'  }}>
+        <button onClick={scrollToTop} className="button btn">
+          To the Top
+        </button>
+      </div>
+    </div>
     </div>
   );
 }
 
 export default Footer;
+

src/Components/FreeLancer/Freelancer.css

@@ -1,21 +1,30 @@
 .box1Freelancer {
     width: 100vw;
     height: 420px;
-    margin-bottom: 100px;
+    margin-bottom: 2px;
+}
+.home-icon {
+    position: absolute;
+    top: 1.8rem;
+    left: 1.5rem;
+    width: 2.5rem;
+    cursor: pointer;
 }
-
 .freelancer {
     margin: 50px 0px;
+    height: 3300px;
+}
+.footer{
+    margin-bottom: 0px;
 }
-
 .heading1freelancerbox1 {
     font-size: 80px;
     font-weight: 600;
     max-width: 1000px;
     width: 85vw;
     margin: auto;
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
     color: #ff21bc;
     font-weight: bold;
 }
@@ -35,6 +44,7 @@
     font-weight: 500;
     font-size: 22px;
     border-radius: 20px;
+    background-color: darkturquoise;
 }
 
 .box2Freelancer {
@@ -46,7 +56,7 @@
     justify-items: center;
     justify-content: center;
     align-items: center;
-    margin-bottom: 175px;
+    margin-bottom: 200px;
     gap: 1vw;
 }
 
@@ -108,7 +118,7 @@
     height: auto;
     margin: auto;
     display: flex;
-    margin-bottom: 150px;
+    margin-bottom: 50px;
 }
 
 .firstBox3 {
@@ -139,7 +149,7 @@
 
 .desc1box3 {
     font-size: 26px;
-    margin-bottom: 75px;
+    margin-bottom: 55px;
 }
 
 .desc2box3 {
@@ -261,8 +271,8 @@
     align-items: center;
 }
 
-.locationContent {
-    color: green;
+.locationContent{
+    color: darkturquoise;
 }
 
 .locationofFreelancer {

src/Components/Login.css

@@ -1,11 +1,17 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
 
 * {
-  margin: 0;
+  margin: 100px;
   padding: 0;
   box-sizing: border-box;
 }
-
+.home-icon {
+  position: absolute;
+  top: 1.9rem;
+  left: 1.5rem;
+  width: 2.5rem;
+  cursor: pointer;
+}
 body,
 input {
   font-family: "Poppins", sans-serif;
@@ -157,6 +163,9 @@ form.sign-in-form {
   transform: scale(1.1); /* Slightly enlarges the icon */
   box-shadow: 0 4px 8px darkturquoise !important; /* Adds a shadow on hover */
 }
+.home-link.no-margin-right {
+  margin-right: 0px;
+}
 
 .btn {
   width: 150px;

src/Components/Login.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import './Login.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import logImg from './Profile/log.svg';
 import registerImg from './Profile/register.svg';
-import { useNavigate } from 'react-router-dom';
+import homeIcon from './FreeLancer/homeicon.png'
 
 const LogIn = () => {
   const [email, setEmail] = useState('');
@@ -44,12 +44,12 @@ const LogIn = () => {
           console.log('Login successful', data);
           displayAlert('Logged in');
 
-        // Store the username and email in local storage
-        localStorage.setItem('username', data.user.username);
-        localStorage.setItem('email', data.user.email);
+          // Store the username and email in local storage
+          localStorage.setItem('username', data.user.username);
+          localStorage.setItem('email', data.user.email);
 
           setTimeout(() => {
-            navigate('/'); 
+            navigate('/');
           }, 1000);
 
           // Handle successful login
@@ -95,7 +95,7 @@ const LogIn = () => {
         const data = await response.json();
         if (response.ok) {
           console.log('Signup successful', data);
-          displayAlert('signed-in. Now login')
+          displayAlert('Signed up. Now login');
           // Handle successful signup
         } else {
           displayAlert(data.message || 'Signup failed');
@@ -128,10 +128,15 @@ const LogIn = () => {
 
   return (
     <div className={`container1 ${isSignUpMode ? 'sign-up-mode' : ''}`}>
+      {/* Home Link */}
       <div className="forms-container">
         <div className="signin-signup">
-          <form className="sign-in-form" onSubmit={handleNextClick} action="/https://uni-collab.vercel.app/" method="post">
+          <form className="sign-in-form" onSubmit={handleNextClick}>
+          <Link to="/" className="home-link">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <h2 className="title">Step into UniCollab! Log In</h2>
+
             <div className="input-field">
               <i className="fas fa-user"></i>
               <input
@@ -173,8 +178,12 @@ const LogIn = () => {
             </div>
           </form>
 
-          <form className="sign-up-form" onSubmit={handleSignUpClick} action="/https://uni-collab.vercel.app/" method="post">
+          <form className="sign-up-form" onSubmit={handleSignUpClick}>
+
             <h2 className="title">Start Journey with UniCollab</h2>
+            <Link to="/" className="home-link">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <div className="input-field">
               <i className="fas fa-user"></i>
               <input
@@ -235,9 +244,10 @@ const LogIn = () => {
               Explore our platform and unlock a realm of personalized experiences.
             </p>
             <br />
-            <button className="btn transparent" onClick={toggleSignUpMode} style={{ display: 'block', margin: 'auto' }}>
-              Become a Member
-            </button>
+            <button className="btn transparent" onClick={toggleSignUpMode} style={{ display: 'block', margin: '0 auto' }}>
+  Become a Member
+</button>
+
           </div>
           <img src={logImg} className="image" alt="Login illustration" />
         </div>
@@ -248,7 +258,7 @@ const LogIn = () => {
               Embark on a journey through UniCollab for personalized experiences.
             </p>
             <br />
-            <button className="btn transparent" onClick={toggleSignUpMode} style={{ display: 'block', margin: 'auto' }}>
+            <button className="btn transparent" onClick={toggleSignUpMode} style={{ display: 'block', margin: '0 auto' }}>
               ENTER YOUR REALM
             </button>
           </div>

src/Components/footer_section/FAQPage/FAQPage.css

@@ -15,9 +15,9 @@
     padding: 20px;
     max-width: 800px;
     margin: 0 auto;
-    margin-top: 50px;
+    margin-top: 30px;
     border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+
 }
 
 .page-container h1 {
@@ -31,6 +31,7 @@
     flex-direction: column;
     gap: 20px;
     max-width: 800px;
+
 }
 
 .faq-item {
@@ -42,7 +43,7 @@
     width: 100%;
     position: relative;
     overflow: hidden;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 7px 7px 32px 0 #6052ff;
 }
 
 .faq-item::before {
@@ -56,6 +57,7 @@
     z-index: 1;
     opacity: 0;
     transition: opacity 0.3s;
+
 }
 
 .faq-item:hover::before {