Skip to content

Commit e337571

Browse files
swaindhrutiswaindhruti
committed
Enhance Events and Team pages with responsive design and improved UI components
- Refactored Events page to include mobile carousel and desktop grid for event cards. - Added dropdown filter for mobile view and improved filter button styles for desktop. - Updated empty state messaging for better user engagement on Events page. - Integrated Swiper for mobile carousel functionality on both Events and Team pages. - Enhanced Team page with responsive design, dropdown filter, and improved member card styles. - Added loading states for team member images and improved social media link presentation. - Updated overall styling for better visual consistency and user experience.
1 parent 40ac111 commit e337571

13 files changed

Lines changed: 1013 additions & 927 deletions

File tree

‎package-lock.json‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-icons": "^5.5.0",
1919
"react-router": "^7.6.3",
2020
"react-router-dom": "^7.6.3",
21+
"swiper": "^12.0.2",
2122
"tailwindcss": "^4.1.11"
2223
},
2324
"devDependencies": {

‎src/components/AboutSection.jsx‎

Lines changed: 26 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,43 @@
1-
import { useState, useEffect } from "react";
21
import { siteConfig } from "../config/navbarHero";
32

43
export default function AboutSection() {
5-
const [showFirst, setShowFirst] = useState(true);
6-
7-
useEffect(() => {
8-
const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
9-
return () => clearInterval(interval);
10-
}, []);
11-
124
return (
135
<section
146
id="about"
15-
className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
7+
className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20"
168
>
17-
<div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-x-10 xl:gap-x-12 2xl:gap-x-14">
18-
<div className="w-full px-4 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
19-
<img
20-
src={siteConfig.about.image}
21-
alt="About image 1 fade"
22-
className={` rounded-md shadow-lg mb-10 object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
23-
showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
24-
}`}
25-
/>
26-
<img
27-
src={siteConfig.hero.image}
28-
alt="About image 2 fade"
29-
className={`rounded-md shadow-lg mb-10 object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
30-
showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
31-
}`}
32-
/>
9+
<div className="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16">
10+
{/* Image Section */}
11+
<div className="w-full lg:w-1/2 relative order-2 lg:order-1">
12+
<div className="relative max-w-2xl mx-auto">
13+
<div className="relative overflow-hidden rounded-xl shadow-xl">
14+
<img
15+
src={siteConfig.about.image}
16+
alt="About ASME NIT Rourkela"
17+
className="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover transition-transform duration-300 hover:scale-105"
18+
/>
19+
<div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
20+
</div>
21+
</div>
3322
</div>
3423

35-
<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
36-
<h1
37-
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
38-
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
39-
>
40-
{siteConfig.about.title}
41-
</h1>
42-
43-
<p
44-
className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
45-
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
46-
>
47-
{siteConfig.about.description}
48-
</p>
24+
{/* Text Content */}
25+
<div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left order-1 lg:order-2">
26+
<div className="space-y-6">
27+
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#021640] leading-tight tracking-tight">
28+
{siteConfig.about.title}
29+
</h2>
30+
<p className="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
31+
{siteConfig.about.description}
32+
</p>
33+
</div>
4934

50-
<div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
35+
<div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start items-center gap-4 pt-4">
5136
<a
5237
href="#cards"
5338
role="button"
5439
tabIndex={0}
55-
className="text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
56-
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
40+
className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
5741
>
5842
{siteConfig.about.button}
5943
</a>

‎src/components/Achievements.jsx‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,65 @@ export default function Achievements() {
55
const navigate = useNavigate();
66

77
return (
8-
<div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
9-
<div style={{ marginBottom: "12rem" }}>
10-
<h2 className="text-3xl font-bold text-[#0B2044] mb-4">
11-
Our Achievements
12-
</h2>
13-
<p className="text-gray-700 mb-6 max-w-3xl text-lg">
14-
ASME NIT Rourkela excels in fostering innovation and leadership
15-
through workshops, competitions, and expert lectures. Recognized for
16-
achievements in events like the Student Design Challenge and HPVC, the
17-
chapter addresses real-world problems with engineering creativity.
18-
Their STEM outreach initiatives further enhance their impact,
19-
solidifying their reputation for excellence in mechanical engineering.
20-
</p>
21-
<button
22-
className="bg-slate-900 text-white border border-slate-900 px-4 py-2 rounded hover:bg-white hover:text-slate-900 md:mb-12"
23-
onClick={() => navigate("/achievements")}
24-
>
25-
View all Achievements
26-
</button>
27-
</div>
8+
<section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
9+
<div className="max-w-7xl mx-auto">
10+
{/* Header Section */}
11+
<div className="text-center mb-16">
12+
<div className="space-y-6">
13+
<h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
14+
Our Achievements
15+
</h2>
16+
<p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
17+
ASME NIT Rourkela excels in fostering innovation and leadership
18+
through workshops, competitions, and expert lectures. Recognized
19+
for achievements in events like the Student Design Challenge and
20+
HPVC, the chapter addresses real-world problems with engineering
21+
creativity. Their STEM outreach initiatives further enhance their
22+
impact, solidifying their reputation for excellence in mechanical
23+
engineering.
24+
</p>
25+
</div>
2826

29-
<div className="relative">
30-
<div className="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-black -translate-y-1/2 z-0"></div>
31-
<div className="md:hidden absolute left-2 top-0 h-full w-1 bg-black z-0"></div>
27+
<div className="pt-8">
28+
<button
29+
className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
30+
onClick={() => navigate("/achievements")}
31+
>
32+
View all Achievements
33+
</button>
34+
</div>
35+
</div>
3236

33-
<div className="flex flex-col md:flex-row items-start md:items-center justify-between relative z-10 md:mb-60">
37+
{/* Achievements Grid - Simple Layout */}
38+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
3439
{achievementsData
35-
.filter((item) => item.id <= 5)
40+
.filter((item) => item.id <= 6)
3641
.map((item, index) => (
3742
<div
3843
key={index}
39-
className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
44+
className="bg-white border border-gray-200 hover:border-[#021640]/30 p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
4045
>
41-
<div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>
42-
43-
<div
44-
className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
45-
index % 2 === 0
46-
? "md:top-1/2 md:translate-y-6 self-start"
47-
: "md:bottom-1/2 md:-translate-y-6 self-end"
48-
}`}
49-
>
50-
<h3 className="font-bold text-lg text-black">{item.year}</h3>
51-
<h4
52-
className="text-sm text-black decoration-4"
53-
style={{ display: "inline" }}
54-
>
55-
{item.title}:{" "}
46+
<div className="space-y-4">
47+
<div className="flex items-center justify-between">
48+
<div className="inline-block px-3 py-1 bg-[#021640]/10 text-[#021640] rounded-full text-sm font-semibold">
49+
{item.year}
50+
</div>
51+
<div className="w-2 h-2 bg-[#021640] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
52+
</div>
53+
<h4 className="font-bold text-lg text-[#021640] leading-tight">
54+
{item.title}
5655
</h4>
57-
<p
58-
className="text-sm text-gray-700"
59-
style={{ display: "inline" }}
60-
>
56+
<p className="text-gray-600 text-sm leading-relaxed">
6157
{item.description}
6258
</p>
6359
</div>
60+
61+
{/* Simple accent line */}
62+
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 rounded-t-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
6463
</div>
6564
))}
6665
</div>
6766
</div>
68-
</div>
67+
</section>
6968
);
7069
}

‎src/components/EventCard.jsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const EventCard = ({ title, description, images, date, location, status }) => {
5454

5555
return (
5656
<div
57-
className="bg-white rounded-xl shadow-md hover:shadow-lg overflow-hidden border border-gray-100 transition-all duration-300 hover:-translate-y-1 max-w-sm w-full"
57+
className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
5858
onMouseEnter={() => setIsHovered(true)}
5959
onMouseLeave={() => setIsHovered(false)}
6060
>
@@ -69,6 +69,7 @@ const EventCard = ({ title, description, images, date, location, status }) => {
6969
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
7070
loading="lazy"
7171
/>
72+
<div className="absolute inset-0 ring-1 ring-black/10"></div>
7273

7374
{/* Navigation Controls (show on hover if multiple images) */}
7475
{images.length > 1 && (
@@ -95,7 +96,7 @@ const EventCard = ({ title, description, images, date, location, status }) => {
9596
{status && (
9697
<div className="absolute top-3 left-3">
9798
<span
98-
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(status)}`}
99+
className={`px-3 py-1 rounded-full text-xs font-semibold ${getStatusColor(status)}`}
99100
>
100101
{status}
101102
</span>
@@ -132,36 +133,40 @@ const EventCard = ({ title, description, images, date, location, status }) => {
132133
</div>
133134

134135
{/* Content Section */}
135-
<div className="p-5">
136-
<h3 className="text-lg font-semibold text-[#0B2044] mb-2 line-clamp-2">
137-
{title || "Event Title"}
138-
</h3>
139-
140-
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
141-
{description || "Event description will be displayed here."}
142-
</p>
136+
<div className="p-6 space-y-4">
137+
<div>
138+
<h3 className="font-bold text-lg text-[#021640] leading-tight mb-2 line-clamp-2">
139+
{title || "Event Title"}
140+
</h3>
141+
<p className="text-sm text-gray-600 line-clamp-3">
142+
{description || "Event description will be displayed here."}
143+
</p>
144+
</div>
143145

144146
{/* Event Meta Information */}
145-
<div className="space-y-2 mb-4">
147+
<div className="space-y-2">
146148
{date && (
147-
<div className="flex items-center text-xs text-gray-500">
148-
<FaCalendar className="w-3 h-3 mr-2" />
149+
<div className="flex items-center text-sm text-gray-500">
150+
<FaCalendar className="w-3 h-3 mr-2 text-[#021640]" />
149151
<span>{date}</span>
150152
</div>
151153
)}
152154
{location && (
153-
<div className="flex items-center text-xs text-gray-500">
154-
<FaMapMarkerAlt className="w-3 h-3 mr-2" />
155+
<div className="flex items-center text-sm text-gray-500">
156+
<FaMapMarkerAlt className="w-3 h-3 mr-2 text-[#021640]" />
155157
<span>{location}</span>
156158
</div>
157159
)}
158160
</div>
159161

160162
{/* Action Button */}
161-
<button className="w-full px-4 py-2 bg-[#0B2044] text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200">
163+
<button className="w-full bg-[#021640] text-white px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-300 hover:bg-[#021640]/90 hover:shadow-lg">
162164
View Details
163165
</button>
164166
</div>
167+
168+
{/* Accent line */}
169+
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
165170
</div>
166171
);
167172
};

0 commit comments

Comments
 (0)