Skip to content

Commit

Permalink
Merge branch 'SUGAM-ARORA:main' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@RadhikaMalpani1702
RadhikaMalpani1702 authored Jul 8, 2024
2 parents 739f5d1 + 388a26c commit 6ca35c1
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 130 deletions.
75 changes: 45 additions & 30 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,51 @@
import React from 'react';
import './App.css';
import Container from './Components/Container';
import Footer from './Components/Footer';
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 FAQPage from './Components/footer_section/FAQPage/FAQPage';
import Services from './Components/footer_section/services/Services';
import ContactUs from './Components/footer_section/ContactUs/contact_us';
import Readmore from './Components/Readmore';
import Login from './Components/Login';
import Pricing from './Components/footer_section/Pricing/pricing';
import MyProjects from './Components/menu_section/my_projects/MyProjects';
import NewProject from './Components/menu_section/new_project/NewProject';
import Error from './Components/404_page/Error';
import Profiles from './Components/Profiles';
import Profile from './Components/Profile/profile';
import Licensing from './Components/footer_section/Legal/Licensing';
import TermsConditions from './Components/footer_section/Legal/TermsandConditions';
import PrivacyPolicy from './Components/footer_section/Legal/PrivacyPolicy';
import Careers from './Components/Careers/CareersPage';
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';
import "./App.css";
import Container from "./Components/Container";
import Footer from "./Components/Footer";
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 FAQPage from "./Components/footer_section/FAQPage/FAQPage";
import Services from "./Components/footer_section/services/Services";
import ContactUs from "./Components/footer_section/ContactUs/contact_us";
import Readmore from "./Components/Readmore";
import Login from "./Components/Login";
import Pricing from "./Components/footer_section/Pricing/pricing";
import MyProjects from "./Components/menu_section/my_projects/MyProjects";
import NewProject from "./Components/menu_section/new_project/NewProject";
import Error from "./Components/404_page/Error";
import Profiles from "./Components/Profiles";
import Profile from "./Components/Profile/profile";
import Licensing from "./Components/footer_section/Legal/Licensing";
import TermsConditions from "./Components/footer_section/Legal/TermsandConditions";
import PrivacyPolicy from "./Components/footer_section/Legal/PrivacyPolicy";
import Careers from "./Components/Careers/CareersPage";
import EmailVerification from "./Components/auth/resetPassword/EmailVerification";
import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
import Helmet from "react-helmet";
import Freelancer from "./Components/FreeLancer/Freelancer";
import router from "./configs/router";
import ChatbotIcon from './Components/ChatbotIcon';
import GoToTop from './Components/gototop';


function App() {
return (
<div className="App">
<>
<Helmet>
<meta name="description" content="Welcome to UniCollab, the ultimate platform for student collaboration. Connect with peers from various universities and colleges to innovate and elevate your projects. UniCollab: where ideas flow, knowledge is shared, and learning transcends classrooms."/>
<meta name="language" content="English"/>
<meta name="keywords" content="Collab, Education, Students, Student Collaboration, University Collaboration, College Projects, Innovative Learning, Peer Networking, Academic Collaboration, Project Sharing, Knowledge Sharing, Student Innovation, Collaborative Learning, University Networking, Inter-University Projects, Academic Networking, Collaborative Projects, Student Platform" />
<meta property="og:type" content="website" />
<meta name="author" content="Sugma Arora" />
<meta property="og:title" content="Unicollab" />
<meta property="og:description" content="Welcome to UniCollab, the ultimate platform for student collaboration. Connect with peers from various universities and colleges to innovate and elevate your projects. UniCollab: where ideas flow, knowledge is shared, and learning transcends classrooms." />
<meta property="og:image" content="https://github.com/SUGAM-ARORA/UniCollab/blob/main/image.png" />
<meta property="og:url" content="https://uni-collab.vercel.app/" />
<meta name="twitter:card" content="summary_large_image" />
</Helmet>
<div className="App">
<div className="App-content"></div>
<div>
<RouterProvider router={router} />
Expand All @@ -40,7 +54,8 @@ function App() {
<Footer />
<ChatbotIcon />
</div>
</>
);
}

export default App;
export default App;
126 changes: 41 additions & 85 deletions src/Components/footer_section/FAQPage/FAQPage.css
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,69 @@
.home-icon {
position: absolute;
top: 1.5rem;
left: 1.5rem;
width: 2.5rem;
cursor: pointer;
}

.page-container {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, #121026, #2d2a4f);
.faq-page {
background: #121026;
color: #ffffff;
width: 100%;
padding: 20px;
max-width: 800px;
margin: 0 auto;
margin-top: 30px;
border-radius: 10px;

}

.page-container h1 {
.faq-page h1 {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}

.faqs {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;

align-items: center;
width: 100%;
}

.faq-item {
background: #19162c;
padding: 20px;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
background: #1f1c35;
padding: 10px 20px;
transition: 0.3s;
cursor: pointer;
width: 100%;
position: relative;
max-width: 800px;
overflow: hidden;
box-shadow: 7px 7px 32px 0 #6052ff;
}

.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:not(.active):hover {
box-shadow: 0 0px 10px rgba(193, 193, 193, 0.3);
}

.faq-item:hover::before {
opacity: 1;
}

.faq-item h2 {
margin-bottom: 10px;
cursor: pointer;
font-size: 1.5rem;
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.faq-item.active {
background-color: #1f1c35;
}

.faq-item .question {
font-size: 0.9em;
color: #aaa;
margin-bottom: 15px;
.faq-item.active * {
color: #ff21bc;
}

.faq-item .answer {
.faqs .answer {
line-height: 1.6;
margin-top: 15px;
color: #e0e0e0;
transition: 0.1s;
opacity: 0;
transition: opacity 0.3s;
}

.faq-item.expanded .answer {
opacity: 1;
background-color: #1f1c35;
transform: scaleY(0);
transform-origin: top;
width: 100%;
max-width: 800px;
margin-bottom: 12px;
padding: 0 20px;
border-top: 2px solid #121026;
box-shadow: 7px 7px 32px 0 #6052ff;
}

button {
background: #ff6347;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
.home-icon {
position: absolute;
top: 1rem;
left: 1rem;
width: 2.5rem;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background: #e55347;
}

@media (max-width: 768px) {
.page-container {
padding: 10px;
}

.faq-item {
padding: 15px;
}
.faqs .answer.expand {
opacity: 1;
transform: scaleY(1);
padding: 20px;
}
39 changes: 24 additions & 15 deletions src/Components/footer_section/FAQPage/FAQPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React, { useState } from 'react';
import './FAQPage.css'; // Ensure the CSS file is created and imported
import './FAQPage.css';
import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import homeIcon from '../../../img/homeicon.png';

const faqs = [
{
question: "What is UniCollab?",
Expand All @@ -13,11 +15,11 @@ const faqs = [
},
{
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..."
answer: "You can add a project by clicking on the 'Add Project' button on your dashboard and filling out the necessary details."
},
{
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..."
answer: "You can collaborate with other students by sending a collaboration request from the project's page. If the project owner accepts your request, you can start working together."
},
{
question: "Is UniCollab free to use?",
Expand Down Expand Up @@ -53,21 +55,28 @@ const FAQPage = () => {
};

return (
<div className="page-container">
<Link to="/">
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<div className="faq-page">
<Link to="/">
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<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
key={index}
className={activeIndex === index ? "faq-item active" : "faq-item"}
onClick={() => toggleFaq(index)}
>
<h2>
{faq.question}
<span>{activeIndex === index ? <FaAngleUp /> : <FaAngleDown />}</span>
</h2>
</div>
<p
className={activeIndex === index ? "answer expand" : "answer"}
>{activeIndex === index ? faq.answer : ""}</p>
</>
))}
</div>
</div>
Expand Down

0 comments on commit 6ca35c1

Please sign in to comment.