diff --git a/package-lock.json b/package-lock.json index d2d4660a..e2c6ccf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17689,7 +17689,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", - "license": "MIT", "dependencies": { "object-assign": "^4.1.1", "prop-types": "^15.7.2", diff --git a/src/Components/footer_section/services/Services.css b/src/Components/footer_section/services/Services.css index 2155552d..3ed7c3d9 100644 --- a/src/Components/footer_section/services/Services.css +++ b/src/Components/footer_section/services/Services.css @@ -1,97 +1,73 @@ -.home-icon { - position: absolute; - top: 1.5rem; - left: 1.5rem; - width: 2.5rem; - cursor: pointer; -} - -.services { - display: flex; - flex-direction: column; - align-items: flex-start; +.services-page { background: #121026; color: #ffffff; + width: 100%; padding: 20px; - max-width: 700px; margin: 0 auto; - margin-top: 50px; - border-radius: 10px; } - -.services h1 { +.services-page h1 { text-align: center; margin-bottom: 20px; } - -.service { +.services { display: flex; flex-direction: column; - gap: 20px; - max-width: 800px; + align-items: center; + width: 100%; } - .service-post { - border: 2px solid #6052ff; - box-shadow: 7px 7px 32px 0 #6052ff; - 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%; + max-width: 800px; + overflow: hidden; + box-shadow: 7px 7px 32px 0 #6052ff; +} +.service-post:not(.active):hover { + box-shadow: 0 0px 10px rgba(193, 193, 193, 0.3); } - .service-post h2 { - margin-bottom: 10px; cursor: pointer; + font-size: 18px; + display: flex; + align-items: center; + justify-content: space-between; +} +.service-post.active { + background-color: #1f1c35; +} +.service-post.active * { + color: #ff21bc; } - .service-post .date { - font-size: 0.9em; + font-size: 13px; color: #aaa; - margin-bottom: 15px; } - -.service-post .content { +.services .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); */ + transition: 0.1s; + opacity: 0; + 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; } - -.service-post.expanded .content { - display: block; -} - -.service-post .content { - display: none; -} - -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) { - .services { - padding: 10px; - } - - .service-post { - padding: 15px; - } +.services .content.expand { + opacity: 1; + transform: scaleY(1); + padding: 20px; } \ No newline at end of file diff --git a/src/Components/footer_section/services/Services.js b/src/Components/footer_section/services/Services.js index 983a6d2c..26700a9d 100644 --- a/src/Components/footer_section/services/Services.js +++ b/src/Components/footer_section/services/Services.js @@ -1,69 +1,70 @@ import React, { useState } from 'react'; import './Services.css'; import { Link } from 'react-router-dom'; +import { FaAngleDown, FaAngleUp } from 'react-icons/fa'; import homeIcon from '../../../img/homeicon.png'; -const service = [ +const services = [ { title: "Project Collaborations -- Yeah!!", - - content: `Collaborate with other students and faculty members on various projects. Whether it's a group assignment, research project, or extracurricular initiative, our platform provides the tools and space for seamless collaboration. Share ideas, assign tasks, track progress, and communicate effectively to achieve your project goals.` + content: "Collaborate with other students and faculty members on various projects. Whether it's a group assignment, research project, or extracurricular initiative, our platform provides the tools and space for seamless collaboration. Share ideas, assign tasks, track progress, and communicate effectively to achieve your project goals." }, { title: "Welcome to Resource Sharing!!", - - content: `Share educational resources, documents, and study materials with your peers. Our platform facilitates the easy exchange of notes, lecture recordings, textbooks, and other resources to support your learning journey. Access a wealth of shared knowledge contributed by fellow students and educators to enhance your academic experience.` + content: "Share educational resources, documents, and study materials with your peers. Our platform facilitates the easy exchange of notes, lecture recordings, textbooks, and other resources to support your learning journey. Access a wealth of shared knowledge contributed by fellow students and educators to enhance your academic experience." }, { - title: "What's new!! -- *Communication*", - - content: `Communicate with other members through messaging and discussion forums. Stay connected with your peers and mentors to ask questions, seek advice, and engage in meaningful discussions. Our platform offers private messaging, group chats, and topic-based forums to foster collaboration, networking, and community building within the academic community.` + title: "What's new!! -- Communication", + content: "Communicate with other members through messaging and discussion forums. Stay connected with your peers and mentors to ask questions, seek advice, and engage in meaningful discussions. Our platform offers private messaging, group chats, and topic-based forums to foster collaboration, networking, and community building within the academic community." }, { title: "What's in here -- Event management!!", - - content: `Organize and manage academic and extracurricular events seamlessly with our event management service. Whether it's a conference, seminar, workshop, or student club activity, our platform provides tools for event planning, promotion, registration, and attendee management. Collaborate with event organizers, share event details, and engage participants to create memorable and impactful events.` + content: "Organize and manage academic and extracurricular events seamlessly with our event management service. Whether it's a conference, seminar, workshop, or student club activity, our platform provides tools for event planning, promotion, registration, and attendee management. Collaborate with event organizers, share event details, and engage participants to create memorable and impactful events." }, { title: "Can have Feedback & Evaluation !!", - - content: `Receive valuable feedback and evaluations from peers and instructors to improve your academic performance and personal development. Our platform facilitates peer-to-peer feedback, instructor feedback, and self-assessment tools to support continuous learning and growth. Gain insights into your strengths and areas for improvement, and take actionable steps towards achieving your academic and professional goals.` + content: "Receive valuable feedback and evaluations from peers and instructors to improve your academic performance and personal development. Our platform facilitates peer-to-peer feedback, instructor feedback, and self-assessment tools to support continuous learning and growth. Gain insights into your strengths and areas for improvement, and take actionable steps towards achieving your academic and professional goals." }, { title: "Just enjoy Mentorship Programs!!", - - content: `Connect with experienced mentors who can guide you through your academic and career journey. Our mentorship programs pair students with professionals and alumni who provide advice, support, and networking opportunities. Benefit from one-on-one mentoring sessions, group mentoring, and workshops to help you achieve your goals.` + content: "Connect with experienced mentors who can guide you through your academic and career journey. Our mentorship programs pair students with professionals and alumni who provide advice, support, and networking opportunities. Benefit from one-on-one mentoring sessions, group mentoring, and workshops to help you achieve your goals." }, { title: "Study Groups -- Available now !!", - - content: `Join or form study groups to prepare for exams, work on assignments, and enhance your understanding of course materials. Our platform makes it easy to find and connect with peers who share your academic interests and goals. Collaborate in real-time, share resources, and support each other in a structured and productive study environment.` + content: "Join or form study groups to prepare for exams, work on assignments, and enhance your understanding of course materials. Our platform makes it easy to find and connect with peers who share your academic interests and goals. Collaborate in real-time, share resources, and support each other in a structured and productive study environment." } ]; const Services = () => { const [activeIndex, setActiveIndex] = useState(null); - const toggleServices = (index) => { + const toggleService = (index) => { setActiveIndex(activeIndex === index ? null : index); }; return ( -
- - Home - -
- {service.map((service, index) => ( -
toggleServices(index)} - > -

{service.title}

- - {activeIndex === index &&

{service.content}

} -
+
+ + Home + +

Our Services

+
+ {services.map((service, index) => ( + +
toggleService(index)} + > +

+ {service.title} + {activeIndex === index ? : } +

+

+
+
+ {activeIndex === index ? service.content : ''} +
+ ))}