Merge branch 'SUGAM-ARORA:main' into main

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "lottie-react": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",

src/App.js

@@ -5,6 +5,8 @@ import { BrowserRouter as Router, Routes, Route } 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 FAQPage from "./Components/footer_section/FAQPage/FAQPage";
+import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
 
 function App() {
@@ -17,6 +19,8 @@ function App() {
           <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 />} />
         </Routes>
         <Footer />

src/Components/Preloader.css

@@ -0,0 +1,5 @@
+.pre{
+    display: flex;
+    justify-content: center;
+    padding-top: 12%;
+}

src/Components/Preloader.js

@@ -0,0 +1,28 @@
+import React ,{useState,useEffect} from 'react';
+import '../Components/Preloader.css';
+import pre from '../lottie/pre.json';
+import Lottie from 'lottie-react';
+import App from '../App';
+function Preloader() {
+    const [loading,setLoading]=useState(false);
+    useEffect(()=>{
+        setLoading(true);
+        setTimeout(() =>{
+            setLoading(false)
+        },2000)
+    },[])
+return (
+
+
+            loading ?
+            <div className='pre'>
+                <div><Lottie className="preloader" animationData={pre}/></div>
+            </div>
+
+             :
+            //Rest Code
+                <App/>
+
+  );
+}
+export default Preloader;

src/Components/footer_section/FAQPage/FAQPage.css

@@ -0,0 +1,103 @@
+.page-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(135deg, #121026, #2d2a4f);
+    color: #ffffff;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+    margin-top: 50px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.page-container h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 2rem;
+}
+
+.faqs {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 800px;
+}
+
+.faq-item {
+    background: #19162c;
+    padding: 20px;
+    border-radius: 10px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.faq-item::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), transparent);
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.faq-item:hover::before {
+    opacity: 1;
+}
+
+.faq-item h2 {
+    margin-bottom: 10px;
+    cursor: pointer;
+    font-size: 1.5rem;
+}
+
+.faq-item .question {
+    font-size: 0.9em;
+    color: #aaa;
+    margin-bottom: 15px;
+}
+
+.faq-item .answer {
+    line-height: 1.6;
+    margin-top: 15px;
+    color: #e0e0e0;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.faq-item.expanded .answer {
+    opacity: 1;
+}
+
+button {
+    background: #ff6347;
+    color: #ffffff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background: #e55347;
+}
+
+@media (max-width: 768px) {
+    .page-container {
+        padding: 10px;
+    }
+
+    .faq-item {
+        padding: 15px;
+    }
+}

src/Components/footer_section/FAQPage/FAQPage.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import './FAQPage.css'; // Ensure the CSS file is created and imported
+
+const faqs = [
+    {
+        question: "What is UniCollab?",
+        answer: "UniCollab is an integrated platform for students from various universities to showcase their projects, collaborate with peers, and gain insights into different areas of study and innovation. It combines features from LinkedIn, GitHub, Twitter, and Amazon to provide a comprehensive project-sharing and networking experience."
+    },
+    {
+        question: "How can I join UniCollab?",
+        answer: "Joining UniCollab is easy! Simply sign up using your university email address to ensure you're part of a verified academic community. Once registered, you can start adding your projects and interacting with others."
+    },
+    {
+        question: "How do I add my project to UniCollab?",
+        answer: "You can edit or delete a project by going to the project's page and clicking on the 'Edit' or 'Delete' button..."
+    },
+    {
+        question: "How can I collaborate with other students?",
+        answer: "You can collaborate with other students by sending a collaboration request from the project's page..."
+    },
+    {
+        question: "Is UniCollab free to use?",
+        answer: "Yes, UniCollab is free to use. You can create an account, add projects, and collaborate with other students without any cost."
+    },
+    {
+        question: "What types of projects can be added to UniCollab?",
+        answer: "You can add any academic or personal project to UniCollab, including software development, research, design, and more. Projects should be appropriate and relevant to the student community."
+    },
+    {
+        question: "How does the feedback mechanism work?",
+        answer: "The feedback mechanism allows users to provide constructive feedback on your projects. This can include comments, suggestions for improvement, or appreciation. Feedback helps you improve your projects and gain insights from others."
+    },
+    {
+        question: "Can I see who viewed my project?",
+        answer: "Yes, UniCollab provides insights into your project's visibility, including the number of views and interactions. You can see who viewed your project from the project's analytics page."
+    },
+    {
+        question: "How do I earn experience points on UniCollab?",
+        answer: "You earn experience points by participating in activities such as adding projects, collaborating with others, and receiving likes or feedback on your projects. The points system encourages active engagement on the platform."
+    },
+    {
+        question: "Can I follow other users on UniCollab?",
+        answer: "Yes, you can follow other users to stay updated on their latest projects and activities. Following allows you to build a network and collaborate more effectively."
+    }
+];
+
+const FAQPage = () => {
+    const [activeIndex, setActiveIndex] = useState(null);
+
+    const toggleFaq = (index) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+
+    return (
+        <div className="page-container">
+            <h1>FAQs</h1>
+            <div className="faqs">
+                {faqs.map((faq, index) => (
+                    <div
+                        key={index}
+                        className={`faq-item ${activeIndex === index ? 'expanded' : ''}`}
+                        onClick={() => toggleFaq(index)}
+                    >
+                        <h2 className="question">{faq.question}</h2>
+                        {activeIndex === index && <p className="answer">{faq.answer}</p>}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default FAQPage;

src/Components/footer_section/about_us/About_us.css

@@ -1,11 +1,13 @@
 .about{
-    background-color: #0cb2cf;
+    background-color: #19162c;
     color:#fff;
     display: flex;
     align-items: center;
     justify-content: center;   
     position: relative;
     bottom: 15rem;
+    font-family: 'Times New Roman', Times, serif;
+    font-weight: 200;
 }
 
 

src/Components/footer_section/about_us/About_us.js

@@ -2,8 +2,12 @@ import './About_us.css'
 function About_us(){
     return(
         <div>
-            <div className="about"><h1>About Us </h1></div>
-            <div className="about us"><p>UniCollab is more than just a platform; it's a gateway to a world where students from different universities/colleges converge to collaborate, innovate, and elevate their projects. Imagine a space where ideas flow freely, where knowledge is shared effortlessly, and where learning transcends classrooms. That's UniCollab for you . Contribute to Open Source and make your Github profile ready for development roles</p></div>
+            <div className="about"><h1><i>About Us</i></h1></div><br></br>
+            <div className="about"><h3>Our Mission</h3></div>
+            <div className="about us"><p>At UniCollab, our mission is to revolutionize the way students collaborate and connect within the academic community.
+                 We aim to create a platform where students from diverse backgrounds and disciplines can come together, share knowledge, and foster a collaborative learning environment. We believe that learning is a collective journey, and through collaboration, students can achieve greater academic success and personal growth.</p></div>
+                 <div className="about us"><p>WHO WE ARE - UniCollab was founded by a group of passionate educators, technologists, and students who recognized the need for a more interconnected and supportive academic ecosystem.Our team is dedicated to providing innovative tools and resources that empower students to work together, learn from each other, and thrive in their studies. We are a diverse group of individuals with a shared vision of transforming education through technology and community. </p></div>
+
             <div className="about us"><p>Connect with Project Admin - SUGAM ARORA</p></div>
             <div className='links about us'>
                 <a href='https://www.linkedin.com/in/sugam-arora-117265142/'>LinkedIn</a>

src/Components/footer_section/services/Services.css

@@ -0,0 +1,86 @@
+.services {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: #121026;
+    color: #ffffff;
+    padding: 20px;
+    max-width: 700px;
+    margin: 0 auto;
+    margin-top: 50px;
+    border-radius: 10px;
+}
+
+.services h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.service {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 800px;
+}
+
+.service-post {
+    background: #19162c;
+    padding: 20px;
+    border-radius: 10px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+    width: 100%;
+}
+
+.service-post h2 {
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+.service-post .date {
+    font-size: 0.9em;
+    color: #aaa;
+    margin-bottom: 15px;
+}
+
+.service-post .content {
+    line-height: 1.6;
+    margin-top: 15px;
+}
+
+.service-post:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.service-post.expanded .content {
+    display: block;
+}
+
+.service-post .content {
+    display: none;
+}
+
+button {
+    background: #ff6347;
+    color: #ffffff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background: #e55347;
+}
+
+@media (max-width: 768px) {
+    .services {
+        padding: 10px;
+    }
+
+    .service-post {
+        padding: 15px;
+    }
+}