Skip to content

Commit 859df40

Browse files
atiqurxatiqurx
authored
Merge pull request #65 from V-prajit/main
Previous Events Images with a proper component
2 parents 03fa30a + 3e48bbe commit 859df40

File tree

6 files changed

+231
-3
lines changed

6 files changed

+231
-3
lines changed

‎public/assets/event-images/GBM-Spring-2025-1.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/assets/event-images/GBM-Spring-2025-2.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/assets/event-images/TOWN-HALL-2024-1.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/assets/event-images/TOWN-HALL-2024-2.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/app/events/page.tsx‎

Lines changed: 169 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
"use client";
22
import React, { useState } from "react";
33
import Calendar from "@/components/events/Calendar"; // Adjust the import path if needed
4+
import EventCard from "@/components/events/EventCard";
5+
import { eventNames } from "process";
6+
import Image from "next/image";
47

58
const EventPage = () => {
69
// Get the current date to set default month and year
10+
const eventImage1 = "/assets/event-images/GBM-Spring-2025-1.svg";
11+
const eventImage2 = "/assets/event-images/GBM-Spring-2025-2.svg";
12+
const eventImage3 = "/assets/event-images/TOWN-HALL-2024-1.svg";
13+
const eventImage4 = "/assets/event-images/TOWN-HALL-2024-2.svg";
14+
715
const today = new Date();
816
const [month, setMonth] = useState(today.getMonth());
917
const [year, setYear] = useState(today.getFullYear());
@@ -14,15 +22,173 @@ const EventPage = () => {
1422
setYear(newDate.year);
1523
};
1624

25+
const events = [
26+
{
27+
eventName: "GBM Spring 2025",
28+
image1: eventImage1,
29+
image2: eventImage2,
30+
},
31+
{
32+
eventName: "Town Hall Fall 2024",
33+
image1: eventImage3,
34+
image2: eventImage4,
35+
}
36+
];
37+
38+
1739
return (
18-
<div className="h-fit w-full bg-[url(/assets/apply/apply-bg.png)] bg-cover bg-center py-20">
19-
<div className="flex justify-between pt-16 md:mx-20">
20-
<Calendar month={month} year={year} onMonthChange={handleMonthChange} />
40+
<div className="relative overflow-hidden">
41+
{/* Background Image */}
42+
<div className="h-fit w-full bg-[url(/assets/apply/apply-bg.png)] bg-cover bg-center py-20 px-4 md:px-20 relative">
43+
<div className="flex justify-between pt-16">
44+
<Calendar month={month} year={year} onMonthChange={handleMonthChange} />
45+
</div>
46+
47+
<div className="max-w-5xl mx-auto mt-10">
48+
<h2 className="text-3xl md:text-4xl font-bold text-center mb-8 text-white">Previous Events</h2>
49+
50+
<div
51+
className={`${
52+
events.length === 1 ? "flex justify-center" : "grid grid-cols-1 sm:grid-cols-2 gap-6"
53+
}`}
54+
>
55+
{events.map((event, index) => (
56+
<EventCard
57+
key={index}
58+
eventName={event.eventName}
59+
image1={event.image1}
60+
image2={event.image2}
61+
isSingle={events.length === 1}
62+
/>
63+
))}
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div className="absolute top-20 right lg:right-24 transform blur-sm -translate-y-1/2 z-[-10] animate-pulse">
69+
<Image
70+
src="/assets/objects/crystal-2.png"
71+
alt="Crystal Design Element"
72+
width={200}
73+
height={200}
74+
className="opacity-70"
75+
/>
76+
</div>
77+
78+
<div className="absolute top-[600px] lg:top-[700px] left-0 lg:left-20 rotate-45 blur-sm transform -translate-y-1/2 z-[-10] animate-pulse">
79+
<Image
80+
src="/assets/objects/crystal-1.png"
81+
alt="Crystal Design Element"
82+
width={400}
83+
height={400}
84+
className="opacity-80"
85+
/>
86+
</div>
87+
88+
<div className="absolute top-[1200px] lg:top-[1100px] right-10 lg:right-40 transform blur-sm -translate-y-1/2 z-[-10] animate-pulse">
89+
<Image
90+
src="/assets/objects/crystal-2.png"
91+
alt="Crystal Design Element"
92+
width={250}
93+
height={250}
94+
className="opacity-70"
95+
/>
96+
</div>
97+
98+
<div className="absolute top-[2400px] lg:top-[2200px] right-0 lg:right-40 -rotate-30 blur-sm transform -translate-y-1/2 z-[-10]">
99+
<Image
100+
src="/assets/objects/crystal-1.png"
101+
alt="Crystal Design Element"
102+
width={450}
103+
height={450}
104+
className="opacity-70"
105+
/>
106+
</div>
107+
108+
<div className="absolute top-[3000px] lg:top-[2800px] left-10 lg:left-60 rotate-15 blur-sm transform -translate-y-1/2 z-[-10]">
109+
<Image
110+
src="/assets/objects/crystal-2.png"
111+
alt="Crystal Design Element"
112+
width={300}
113+
height={300}
114+
className="opacity-80"
115+
/>
116+
</div>
117+
118+
<div className="absolute top-[3600px] lg:top-[3400px] right-10 lg:right-80 blur-sm transform -translate-y-1/2 z-[-10]">
119+
<Image
120+
src="/assets/objects/ufo.svg"
121+
alt="UFO Element"
122+
width={300}
123+
height={300}
124+
className="opacity-70"
125+
/>
126+
</div>
127+
128+
<div className="absolute top-[4200px] lg:top-[4000px] left-0 lg:left-20 rotate-60 blur-sm transform -translate-y-1/2 z-[-10]">
129+
<Image
130+
src="/assets/objects/crystal-1.png"
131+
alt="Crystal Design Element"
132+
width={400}
133+
height={400}
134+
className="opacity-80"
135+
/>
136+
</div>
137+
138+
<div className="absolute bottom -right-20 transform -translate-y-1/2 -rotate-12 z-[-10] max-h-screen overflow-hidden">
139+
<Image
140+
src="/assets/objects/web.png"
141+
alt="Web Element"
142+
width={600}
143+
height={600}
144+
className="opacity-70 object-contain"
145+
/>
146+
</div>
147+
148+
<div className="absolute top-[1600px] left-10 lg:left-40 transform rotate-15 blur-sm -translate-y-1/2 z-[-10] animate-pulse">
149+
<Image
150+
src="/assets/objects/crystal-2.png"
151+
alt="Crystal Design Element"
152+
width={180}
153+
height={180}
154+
className="opacity-70"
155+
/>
156+
</div>
157+
158+
<div className="absolute top-[2200px] right-20 lg:right-60 blur-sm transform -translate-y-1/2 z-[-10]">
159+
<Image
160+
src="/assets/objects/ufo.svg"
161+
alt="UFO Element"
162+
width={200}
163+
height={200}
164+
className="opacity-60"
165+
/>
166+
</div>
167+
168+
<div className="absolute top-[2800px] left-20 lg:left-80 transform rotate-45 blur-sm -translate-y-1/2 z-[-10]">
169+
<Image
170+
src="/assets/objects/rocket-flame.svg"
171+
alt="Rocket Element"
172+
width={180}
173+
height={180}
174+
className="opacity-75"
175+
/>
176+
</div>
177+
178+
<div className="absolute top-[3400px] right-30 lg:right-100 transform -rotate-30 blur-sm -translate-y-1/2 z-[-10] animate-pulse">
179+
<Image
180+
src="/assets/objects/crystal-1.png"
181+
alt="Crystal Design Element"
182+
width={300}
183+
height={300}
184+
className="opacity-70"
185+
/>
21186
</div>
22187
</div>
23188
);
24189
};
25190

191+
26192
function changeMonth(
27193
amt: "inc" | "dec",
28194
{ month, year }: { month: number; year: number }

‎src/components/events/EventCard.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
3+
interface EventCardProps {
4+
eventName: string;
5+
image1: string;
6+
image2: string;
7+
isSingle?: boolean;
8+
}
9+
10+
const EventCard: React.FC<EventCardProps> = ({ eventName, image1, image2, isSingle }) => {
11+
return (
12+
<div
13+
className={`bg-white/10 backdrop-blur-md shadow-lg rounded-lg p-6 text-center border border-white-40 flex flex-col items-center
14+
${isSingle ? "w-full md:w-3/4 lg:w-2/3 xl:w-1/2 mx-auto" : "w-full"}`}
15+
>
16+
<h2 className="text-2xl font-semibold mb-4 text-white">{eventName}</h2>
17+
18+
<div className="flex flex-col sm:flex-row justify-center gap-4 w-full">
19+
<img src={image1} alt={`${eventName} - Image 1`} className="w-full sm:w-1/2 h-60 object-cover rounded-lg" />
20+
<img src={image2} alt={`${eventName} - Image 2`} className="w-full sm:w-1/2 h-60 object-cover rounded-lg" />
21+
</div>
22+
</div>
23+
);
24+
};
25+
26+
export default EventCard;

0 commit comments

Comments
 (0)