diff --git a/src/components/EventCard.jsx b/src/components/EventCard.jsx index 0518c71..b9d23c6 100644 --- a/src/components/EventCard.jsx +++ b/src/components/EventCard.jsx @@ -1,44 +1,166 @@ import React, { useState, useEffect } from "react"; +import { + FaChevronLeft, + FaChevronRight, + FaCalendar, + FaMapMarkerAlt, +} from "react-icons/fa"; -const EventCard = ({ title, description, images }) => { +const EventCard = ({ title, description, images, date, location, status }) => { const [currentImageIndex, setCurrentImageIndex] = useState(0); + const [isHovered, setIsHovered] = useState(false); - // Auto-change image every 3 seconds + // Auto-change image every 3 seconds (paused on hover) useEffect(() => { - if (!images || images.length <= 1) return; // skip if 0 or 1 image + if (!images || images.length <= 1 || isHovered) return; + const interval = setInterval(() => { setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length); }, 3000); + return () => clearInterval(interval); - }, [images]); + }, [images, isHovered]); + + const goToNextImage = () => { + if (images && images.length > 1) { + setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length); + } + }; + + const goToPrevImage = () => { + if (images && images.length > 1) { + setCurrentImageIndex((prevIndex) => + prevIndex === 0 ? images.length - 1 : prevIndex - 1, + ); + } + }; + + const goToImage = (index) => { + setCurrentImageIndex(index); + }; + + const getStatusColor = (status) => { + switch (status?.toLowerCase()) { + case "upcoming": + return "bg-blue-50 text-blue-600 border-blue-200"; + case "ongoing": + return "bg-green-50 text-green-600 border-green-200"; + case "completed": + return "bg-gray-50 text-gray-600 border-gray-200"; + default: + return "bg-gray-50 text-gray-600 border-gray-200"; + } + }; return ( -
-
-
- {`${title} +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + {/* Image Section */} +
+
+ {images && images.length > 0 ? ( + <> + {`${title} + + {/* Navigation Controls (show on hover if multiple images) */} + {images.length > 1 && ( + <> + + + + + )} + + {/* Status Badge */} + {status && ( +
+ + {status} + +
+ )} + + ) : ( +
+
+
📸
+

No image

+
+
+ )}
- {images?.length > 1 && ( -
+ {/* Image Indicators */} + {images && images.length > 1 && ( +
{images.map((_, idx) => ( - goToImage(idx)} + className={`h-1.5 w-1.5 rounded-full transition-all duration-200 ${ + idx === currentImageIndex + ? "bg-white scale-125" + : "bg-white/60 hover:bg-white/80" }`} - > + aria-label={`Go to image ${idx + 1}`} + /> ))}
)}
-
-

{title}

-

{description}

+ + {/* Content Section */} +
+

+ {title || "Event Title"} +

+ +

+ {description || "Event description will be displayed here."} +

+ + {/* Event Meta Information */} +
+ {date && ( +
+ + {date} +
+ )} + {location && ( +
+ + {location} +
+ )} +
+ + {/* Action Button */} +
); diff --git a/src/components/MissionCard.jsx b/src/components/MissionCard.jsx index 7196138..b042bc5 100644 --- a/src/components/MissionCard.jsx +++ b/src/components/MissionCard.jsx @@ -1,8 +1,55 @@ -export default function MissionCard({ title, description }) { +export default function MissionCard({ title, description, index }) { return ( -
-

{title}

-

{description}

+
+ {/* Background Pattern */} +
+
+
+ + {/* Content */} +
+ {/* Icon or Number */} +
+
+ + {(index + 1).toString().padStart(2, "0")} + +
+
+ + {/* Title */} +

+ {title} +

+ + {/* Description */} +

+ {description} +

+ + {/* Hover Effect Arrow */} +
+
+ Learn More + + + +
+
+
+ + {/* Hover Overlay */} +
); } diff --git a/src/components/MissionSection.jsx b/src/components/MissionSection.jsx index ea270d6..ad3098b 100644 --- a/src/components/MissionSection.jsx +++ b/src/components/MissionSection.jsx @@ -1,13 +1,81 @@ +import { useNavigate } from "react-router-dom"; import MissionCard from "./MissionCard"; import { siteConfig } from "../config/navbarHero"; export default function MissionSection() { + const navigate = useNavigate(); + + const handleJoinUs = () => { + navigate("/applications"); + }; + return ( -
-
- {siteConfig.missions.map(({ title, description }, index) => ( - - ))} +
+ {/* Subtle Background Elements */} +
+
+
+
+ +
+ {/* Section Header */} +
+

+ Driving Innovation Forward +

+

+ Discover the core values and principles that guide our engineering + community toward innovation, collaboration, and excellence in + technology. +

+
+ + {/* Mission Cards Grid */} +
+ {siteConfig.missions.map(({ title, description }, index) => ( +
+ +
+ ))} +
+ + {/* Bottom CTA Section - Matching Card Colors */} +
+
+ {/* Decorative Elements - White with opacity */} +
+
+ +
+
+ +
+

+ Ready to Join Our Mission? +

+

+ Be part of a community that's shaping the future of technology + and innovation. Connect with like-minded engineers and make an + impact. +

+
+ +
+
+
+
); diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index a784b3e..35d6693 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -43,38 +43,38 @@ export default function Navbar() { return (
-
-
+
+ {/* Logo Section */} +
Logo
-
); }; diff --git a/src/pages/events/Events.jsx b/src/pages/events/Events.jsx index fb7e8ff..defa760 100644 --- a/src/pages/events/Events.jsx +++ b/src/pages/events/Events.jsx @@ -1,61 +1,124 @@ import { useState } from "react"; import EventCard from "../../components/EventCard"; import events from "../../config/events"; + const Events = () => { const [filter, setFilter] = useState("all"); + const filterOptions = [ + { value: "all", label: "All Events" }, + { value: "upcoming", label: "Upcoming" }, + { value: "past", label: "Past Events" }, + ]; + const renderCards = () => { const filteredEvents = filter === "all" ? events : events.filter((e) => e.type === filter); + if (filteredEvents.length === 0) { + return ( +
+
🎪
+

+ {filter === "all" ? "No Events Yet" : `No ${filter} Events`} +

+

+ {filter === "all" + ? "We're working on organizing amazing events. Stay tuned!" + : `No ${filter} events found. Check out other categories or come back later.`} +

+ + {/* Coming Soon Card for empty state */} +
+ +
+
+ ); + } + return ( -
- {filteredEvents.length > 0 ? ( - filteredEvents.map((event, index) => ( - - )) - ) : ( - - )} -
+ <> + {filteredEvents.map((event, index) => ( + + ))} + ); }; return ( -
-
-

- Our Organised Events -

- - {/* Filter Buttons */} -
- {["all", "past", "upcoming"].map((type) => ( - - ))} +
+
+ {/* Header Section */} +
+

+ Our Events +

+

+ Discover our technical workshops, competitions, and networking + events designed to enhance your engineering journey +

+
+ + {/* Filter Tabs - Teams Page Style */} +
+
+ {filterOptions.map((option) => ( + + ))} +
-
- {renderCards()} -
+ {/* Events Grid */} +
+ {renderCards()} +
+ + {/* Call to Action */} + {events.length > 0 && ( +
+
+
+

+ Stay in the Loop +

+

+ Don't miss out on our upcoming events, workshops, and + exclusive opportunities. Join our community to get notified + first. +

+
+ + +
+
+
+
+ )} +
+ ); }; diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx index 0e80b4b..5578c5e 100644 --- a/src/pages/team/TeamPage.jsx +++ b/src/pages/team/TeamPage.jsx @@ -1,18 +1,42 @@ import { useState } from "react"; -import { FaLinkedin, FaXTwitter } from "react-icons/fa6"; +import { FaLinkedin, FaXTwitter, FaUsers, FaRocket } from "react-icons/fa6"; +import { FaDraftingCompass } from "react-icons/fa"; import teamMembers from "../../config/teammate"; const TeamPage = () => { const [activeTeam, setActiveTeam] = useState("All"); const teams = [ - "All", - "Executive Body", - "Team Bluebird", - "Team Bluestreak", - "Team Blueprint", + { name: "All" }, + { name: "Executive Body" }, + { name: "Team Bluebird" }, + { name: "Team Bluestreak" }, + { name: "Team Blueprint" }, ]; + const teamDescriptions = { + "Executive Body": { + title: "Executive Body", + description: + "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.", + }, + "Team Bluestreak": { + title: "Team Bluestreak", + description: + "Bluestreak, a team within ASME at NIT Rourkela, is a dedicated team focused on research, analysis, and innovation. They specialize in designing human-powered vehicles from scratch, incorporating indigenous elements. Bluestreak actively participates in the eHPV competition at ASME Efest, showcasing their commitment to pushing the boundaries of human-powered vehicle design and contributing to the advancement of sustainable transportation solutions.", + }, + "Team Bluebird": { + title: "Team Bluebird", + description: + "Bluebird, a team from ASME NIT Rourkela, specializes in CAD modeling and coding for virtual competitions. Their expertise extends to designing vehicles for diverse challenges, including autonomous vehicle competitions, lunar lander simulations, and ocean cleanup missions. Through innovation and technical prowess, Team Bluebird consistently participates in and excels at a variety of virtual events, showcasing their commitment to engineering excellence and problem-solving in the digital realm.", + }, + "Team Blueprint": { + title: "Team Blueprint", + description: + "Team Blueprint, a team of ASME NIT Rourkela, engages in research, innovation, and design. They utilize CAD software to create diverse models, subsequently manufacturing them through 3D printing technology. The team actively participates in the IAM3D competition as part of ASME Efest, showcasing their skills and expertise in engineering and design within the ASME community.", + }, + }; + const filteredMembers = activeTeam === "All" ? Array.from(new Map(teamMembers.map((m) => [m.name, m])).values()) @@ -20,119 +44,116 @@ const TeamPage = () => { return (
-
-

+ {/* Header Section */} +
+

Meet Our Team

-

+

+ Discover the passionate individuals driving innovation and excellence + at ASME NIT Rourkela +

-
+ {/* Team Filter Buttons */} +
{teams.map((team) => ( ))}
-
- {activeTeam === "Executive Body" && ( -

- 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. -

- )} - {activeTeam === "Team Bluestreak" && ( -

- Bluestreak, a team within ASME at NIT Rourkela, is a dedicated team - focused on research, analysis, and innovation. They specialize in - designing human-powered vehicles from scratch, incorporating - indigenous elements. Bluestreak actively participates in the eHPV - competition at ASME Efest, showcasing their commitment to pushing - the boundaries of human-powered vehicle design and contributing to - the advancement of sustainable transportation solutions. -

- )} - {activeTeam === "Team Bluebird" && ( -

- Bluebird, a team from ASME NIT Rourkela, specializes in CAD modeling - and coding for virtual competitions. Their expertise extends to - designing vehicles for diverse challenges, including autonomous - vehicle competitions, lunar lander simulations, and ocean cleanup - missions. Through innovation and technical prowess, Team Bluebird - consistently participates in and excels at a variety of virtual - events, showcasing their commitment to engineering excellence and - problem-solving in the digital realm. -

- )} - {activeTeam === "Team Blueprint" && ( -

- Team Blueprint, a team of ASME NIT Rourkela, engages in research, - innovation, and design. They utilize CAD software to create diverse - models, subsequently manufacturing them through 3D printing - technology. The team actively participates in the IAM3D competition - as part of ASME Efest, showcasing their skills and expertise in - engineering and design within the ASME community -

- )} -
+ {/* Team Description */} + {activeTeam !== "All" && teamDescriptions[activeTeam] && ( +
+
+

+ About {teamDescriptions[activeTeam].title} +

+

+ {teamDescriptions[activeTeam].description} +

+
+
+ )} + {/* Team Members Grid */}
{filteredMembers.length > 0 ? ( -
- {filteredMembers.map((member, index) => ( -
-
- {member.name} -
+ <> +
+

+ {activeTeam === "All" + ? "All Team Members" + : `${activeTeam} Members`} +

+
+
-
-

- {member.name || "Full name"} -

-

{member.title || ""}

-

{member.team || ""}

-
- - - +
+ {filteredMembers.map((member, index) => ( +
+
+
+ {member.name} +
+
+ +
+

+ {member.name || "Full Name"} +

+ {member.title && ( +

+ {member.title} +

+ )} + {member.team && activeTeam === "All" && ( +

{member.team}

+ )} + +
+ {member.linkedin && ( + + + + )} +
-
- ))} -
+ ))} +
+ ) : (
👥

- No team members found + No Team Members Found

There are currently no members in the {activeTeam} team.