Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 42 additions & 8 deletions src/components/Team.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useNavigate } from "react-router";
const TeamSlider = () => {
const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
const [cardsPerView, setCardsPerView] = useState(1);
const [activeTeam, setActiveTeam] = useState("All");
const navigate = useNavigate();

useEffect(() => {
Expand Down Expand Up @@ -34,7 +35,20 @@ const TeamSlider = () => {
new Map(teamMembers.map((member) => [member.name, member])).values(),
);

const maxSlideIndex = Math.max(0, uniqueTeamMembers.length - cardsPerView);
const teams = [
"All",
"Executive Body",
"Team Bluebird",
"Team Bluestreak",
"Team Blueprint",
];

const filteredTeamMembers =
activeTeam === "All"
? uniqueTeamMembers
: uniqueTeamMembers.filter((member) => member.team === activeTeam);

const maxSlideIndex = Math.max(0, filteredTeamMembers.length - cardsPerView);

const showNextMembers = () => {
setCurrentSlideIndex((currentIndex) => {
Expand Down Expand Up @@ -68,13 +82,31 @@ const TeamSlider = () => {
<section className="bg-[#00163A] text-white px-4 sm:px-6 py-16">
<div className="max-w-7xl mx-auto">
<div className="mb-10">
<h2 className="text-3xl font-bold mb-2 ml-12">Our team</h2>
<p className="text-xl text-gray-300 ml-12">
<h2 className="text-3xl font-bold mb-2 ml-4 sm:ml-12">Our team</h2>
<p className="text-xl text-gray-300 ml-4 sm:ml-12">
Meet Our Amazing Team Members
</p>

{/* Team Filter Buttons */}
<div className="flex justify-start flex-wrap gap-2 sm:gap-4 mt-6 mb-6 ml-4 sm:ml-12">
{teams.map((team) => (
<button
key={team}
onClick={() => setActiveTeam(team)}
className={`px-2 py-1 sm:px-4 sm:py-2 rounded-full border text-sm sm:text-lg font-medium transition cursor-pointer hover:bg-white hover:text-[#00163A] ${
activeTeam === team
? "bg-white text-[#00163A]"
: "bg-transparent text-white border-white"
}`}
>
{team}
</button>
))}
</div>

<button
onClick={viewFullTeam}
className="mt-4 border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer"
className="mt-4 border border-white text-white py-2 px-4 ml-4 sm:ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer"
>
View all team members
</button>
Expand All @@ -96,7 +128,7 @@ const TeamSlider = () => {
transform: `translateX(-${currentSlideIndex * (100 / cardsPerView)}%)`,
}}
>
{uniqueTeamMembers.map((teamMember, memberIndex) => (
{filteredTeamMembers.map((teamMember, memberIndex) => (
<div
key={`team-member-${memberIndex}`}
className="flex-shrink-0 px-2"
Expand Down Expand Up @@ -167,12 +199,14 @@ const TeamSlider = () => {
</div>

<div className="mt-16">
<h3 className="text-xl font-bold mb-1 ml-12">Join Us Today!</h3>
<p className="text-base text-gray-300 mb-3 ml-12">
<h3 className="text-xl font-bold mb-1 ml-4 sm:ml-12">
Join Us Today!
</h3>
<p className="text-base text-gray-300 mb-3 ml-4 sm:ml-12">
Ready to be part of our amazing team? We're always looking for
talented individuals who share our passion.
</p>
<button className="border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer">
<button className="border border-white text-white py-2 px-4 ml-4 sm:ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer">
Apply here
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/config/teammate.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const teamMembers = [
linkedin: "https://www.linkedin.com/in/nikhil-dalai/",
},
{
name: "Aaditya Sahu",
name: "Aaditya Sahoo",
title: "Captain",
img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754117969/aaditya_kwvlki.jpg",
team: "Team Bluestreak",
Expand Down
17 changes: 9 additions & 8 deletions src/pages/team/TeamPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,15 @@ const TeamPage = () => {
</div>

<div className="max-w-4xl mx-auto text-lg font-bold mb-6">
{activeTeam === "Executive Body" && (
<p className="text-center text-gray-600">
The Executive Body is the core leadership team of the ASME Student
Section, responsible for planning, organizing, and executing all
technical, professional, and outreach activities. It ensures
coordination among members, represents the section, and drives
initiatives that promote engineering knowledge and collaboration.
</p>
)}
{activeTeam === "Team Bluestreak" && (
<p className="text-center text-gray-600">
Bluestreak, a team within ASME at NIT Rourkela, is a dedicated team
Expand Down Expand Up @@ -113,14 +122,6 @@ const TeamPage = () => {
>
<FaLinkedin size={18} />
</a>
<a
href={member.twitter || "#"}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-blue-500"
>
<FaXTwitter size={18} />
</a>
</div>
</div>
</div>
Expand Down
Loading