Merge branch 'SUGAM-ARORA:main' into main

src/App.js

@@ -1,10 +1,10 @@
 import "./App.css";
 import Container from "./Components/Container";
 import Footer from "./Components/Footer";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./Components/Settings/SettingsPage";
 import About_us from "./Components/footer_section/about_us/About_us";
-import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
+import BlogPage from "./Components/footer_section/BlogPage/BlogPage";
 import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
 import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
@@ -24,42 +24,20 @@ import EmailVerification from "./Components/auth/resetPassword/EmailVerification
 import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
 import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
 import Freelancer from "./Components/FreeLancer/Freelancer";
+import router from "./configs/router";
+// Define the routes
 
 
 function App() {
   return (
-    <Router>
-      <div className="App">
-        <div className="App-content"></div>
-        <Routes>
-        <Route path="*" element={<Error />} />
-          <Route path="/" element={<Container />} />
-          <Route path="/login" element={<Login/>}/>
-          <Route path="/settings" element={<Settings />} />
-          <Route path="/about" element={<About_us />} />
-          <Route path="/blogs" element={<BlogPage />} />
-          <Route path="/faq" element={<FAQPage />} /> 
-          <Route path="/services" element={<Services />} />
-          <Route path="/contacts" element={<ContactUs />} />
-          <Route path="/termsandconditions" element={<TermsConditions />} />
-          <Route path="/privacypolicy" element={<PrivacyPolicy />} />
-          <Route path="/licensing" element={<Licensing />} />
-          <Route path="/readmore/:id" element={<Readmore/>}/>
-          <Route path="/profile/:id" element={<Profiles/>}/>
-          <Route path="/pricing" element={<Pricing />} />
-          <Route path="/projects" element={<MyProjects />} />
-          <Route path="/new/project" element={<NewProject />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/careers" element={<Careers />} />
-          <Route path="/verifyEmail" element={<EmailVerification />} />
-          <Route path="/otpVerification/:email" element={<OTPVerification />} />
-          <Route path="/resetPassword/:email" element={<ResetPassword />} />
-          <Route path="/freelancer" element={<Freelancer />} />
-
-        </Routes>
-        <Footer />
+    <div className="App">
+      <div className="App-content"></div>
+      <div>
+        <RouterProvider router={router} />
       </div>
-    </Router>
+
+      <Footer />
+    </div>
   );
 }
 

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;
@@ -22,10 +25,28 @@
   width: 40%;
 }
 
+.footer-1 > div {
+  display: flex;
+  flex-direction: column;
+}
+
 .footer-1 img {
   height: 3rem;
 }
 
+.footer-title {
+  text-transform: uppercase;
+  font-size: 2rem;
+}
+
+.footer-description {
+  margin-top: 0.8rem;
+  font-size: 0.999rem;
+  color: #fff;
+
+
+}
+
 .footer-half {
   width: 60%;
   display: flex;
@@ -37,11 +58,6 @@
   width: 20%;
 }
 
-.footer-title {
-  text-transform: uppercase;
-  font-size: 2rem;
-}
-
 .footer-section-title {
   color: white;
   font-weight: bold;

src/Components/Footer.js

@@ -2,13 +2,23 @@ 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 (
+
     <div className='footer'>
       <div className='footer-container footer-container-md'>
         <div className='footer-1'>
           <img src={logo} alt="logo"/>
-          <div className='footer-title'>Unicollab</div>
+          <div>
+            <div className='footer-title'>Unicollab</div>
+            <div className='footer-description'>
+              UniCollab is more than just a platform;<br /> it's a gateway to a world where students from different universities/colleges converge to collaborate, innovate, and <br />elevate their projects.
+            </div>
+          </div>
         </div>
         <div className='footer-half footer-sections'>
           <div className='footer-2'>
@@ -59,8 +69,16 @@ const Footer = () => {
           &copy; 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;
@@ -204,7 +213,6 @@ form.sign-in-form {
 }
 
 .panels-container {
-  position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
@@ -337,7 +345,6 @@ form.sign-in-form {
 @media (max-width: 870px) {
   .container {
     min-height: 800px;
-    height: 100vh;
   }
   .signin-signup {
     width: 100%;

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>