Skip to content

Commit

Permalink
Merge pull request #463 from Ojas-Arora/test
Browse files Browse the repository at this point in the history 
Transform Your Services Page: Make It as Engaging as Your Blog
  • Loading branch information
@SUGAM-ARORA
SUGAM-ARORA authored Jul 9, 2024
2 parents 3dbeda9 + a5800e8 commit e706be0
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 103 deletions.
1 change: 0 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

116 changes: 46 additions & 70 deletions src/Components/footer_section/services/Services.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
65 changes: 33 additions & 32 deletions src/Components/footer_section/services/Services.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="services">
<Link to="/">
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<div className="service">
{service.map((service, index) => (
<div
key={index}
className={`service-post ${activeIndex === index ? 'expanded' : ''}`}
onClick={() => toggleServices(index)}
>
<h2>{service.title}</h2>

{activeIndex === index && <p className="content">{service.content}</p>}
</div>
<div className="services-page">
<Link to="/">
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<h1>Our Services</h1>
<div className="services">
{services.map((service, index) => (
<React.Fragment key={index}>
<div
className={`service-post ${activeIndex === index ? 'active' : ''}`}
onClick={() => toggleService(index)}
>
<h2>
{service.title}
<span>{activeIndex === index ? <FaAngleUp /> : <FaAngleDown />}</span>
</h2>
<p className="date"></p>
</div>
<div className={`content ${activeIndex === index ? 'expand' : ''}`}>
{activeIndex === index ? service.content : ''}
</div>
</React.Fragment>
))}
</div>
</div>
Expand Down

0 comments on commit e706be0

Please sign in to comment.