Merge pull request #33 from sfuosdev/feature/issue-2/events-page

Completes Issue 2 by finishing the implementation of the Events Page

Author: TommyOh0428

public/events/f24-icebreaker-1.jpg

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+
+type ProjectProps = {
+  title: string;
+  description: string;
+  imgURLs: string[];
+};
+
+const Event: React.FC<ProjectProps> = ({
+  title,
+  description,
+  imgURLs
+}) => {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  const nextImage = () => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imgURLs.length);
+  };
+
+  const prevImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === 0 ? imgURLs.length - 1 : prevIndex - 1
+    );
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row rounded-lg md:justify-between overflow-hidden">
+      <div className="md:w-1/2">
+        <div className="flex flex-row justify-start items-start space-x-4">
+              <h3 className="text-2xl font-bold mb-4 text-center">{title}</h3>
+        </div>
+        <p className="mb-4">{description}</p>
+      </div>
+
+      {imgURLs.length > 0 && (
+        <div className="md:w-1/2 w-full max-w-[325px] flex flex-col items-center justify-center mt-8 md:mt-0 relative">
+          <button
+            onClick={prevImage}
+            className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full hover:bg-gray-600"
+          >
+            &#8249;
+          </button>
+
+          <img
+            src={imgURLs[currentImageIndex]}
+            alt={`${title} image ${currentImageIndex + 1}`}
+            className="w-full object-cover rounded-md"
+          />
+
+          <button
+            onClick={nextImage}
+            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full hover:bg-gray-600"
+          >
+            &#8250;
+          </button>
+
+          <div className="flex mt-4 space-x-2">
+            {imgURLs.map((_, index) => (
+              <button
+                key={index}
+                className={`h-2 w-2 rounded-full ${
+                  currentImageIndex === index ? "bg-blue-500" : "bg-gray-300"
+                }`}
+                onClick={() => setCurrentImageIndex(index)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Event;

public/events/f24-icebreaker-2.jpg

@@ -1,122 +1,133 @@
-import React from "react";
+import React, { useState } from 'react'
+import Event from './Event';
+import { EventType } from '../interfaces/event-type';
+
+const upcomingEventsList: EventType[] = [
+];
+
+const pastEventsList: EventType[] = [
+  {
+    title: "Fall 2024 Icebreaker Event",
+    description: "At the beginning of the Fall 2024 semester, the we hosted an amazing icebreaker event to kick off the semester! We introduced the club, our executives, shared our vision, and highlighted exciting projects we'll be working on this term. Our project leads gave insightful presentations, sparking enthusiasm among attendees. It was fantastic to welcome so many passionate students eager to dive into open-source development. The pizza and drinks were a hit, making the evening even more memorable!",
+    imgURLs: [
+      "events/f24-icebreaker-1.jpg",
+      "events/f24-icebreaker-2.jpg",
+      "events/f24-icebreaker-3.jpg",
+      "events/f24-icebreaker-4.jpg",
+      "events/f24-icebreaker-5.jpg",
+      "events/f24-icebreaker-6.jpg",
+    ],
+  },
+  {
+    title: "March Speaker Series",
+    description: "The March Speaker Series was a fantastic success! We were thrilled to host guest speaker David Hobbs, who shared invaluable industry insights and actionable career tips with our members. His engaging session left attendees inspired and motivated as they plan their career journeys. A heartfelt thank you to everyone who joined us and made this event so special!",
+    imgURLs: [
+      "events/mar-speaker-series-1.jpg",
+    ],
+  },
+  {
+    title: "February Speaker Series",
+    description: "The February Speaker Series was an incredible experience! We were honored to host Charles Tong, who shared valuable insights into the intersection of Tech and Business. His engaging talk provided our members with fresh perspectives and practical knowledge to apply in their journeys. A big thank you to everyone who attended and contributed thoughtful questions, making the event even more impactful. The energy and enthusiasm of our members makes these events so special!",
+    imgURLs: [
+      "events/feb-speaker-series-1.jpg",
+      "events/feb-speaker-series-2.jpg",
+      "events/feb-speaker-series-3.jpg"
+    ],
+  }
+];
 
 const Events = () => {
+  const [activeTab, setActiveTab] = useState('PAST');
+
+  const renderEventsList = () => {
+    let eventsList = [];
+    let message = '';
+
+    if (activeTab === 'UPCOMING') {
+      eventsList = upcomingEventsList;
+      message = eventsList.length === 0 ? 'No upcoming events at the moment.' : '';
+    } else {
+      eventsList = pastEventsList;
+      message = eventsList.length === 0 ? 'No past events available.' : '';
+    }
+
+    if (eventsList.length === 0 && message) {
+      return <p>{message}</p>;
+    }
+
+    return eventsList.map((event, index) => (
+      <Event
+        key={index}
+        title={event.title}
+        description={event.description}
+        imgURLs={event.imgURLs}
+      />
+    ));
+  };
+
   return (
-    <div className="space-y-12">
-      <section className="bg-gray-700 py-20 text-center">
-        <div className="container mx-auto px-4">
-          <h1 className="text-6xl font-bold mb-4">Event</h1>
-          <p className="text-xl mb-8">[some brief description]</p>
-          <a
-            href="/"
-            className="inline-flex items-center px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300"
-          >
-            ./HOME
+    <div className="mt-[60px] md:mt-[80px]">
+      {/* Hero Section */}
+      <section className="bg-gradient-2 py-32 flex flex-col justify-center items-start">
+        <div className="container mx-auto px-6 sm:px-12">
+          <h1 className="text-6xl font-bold font-club mb-6 text-white">Events</h1>
+          <p className="text-xl mb-10 text-white">
+            Explore the dynamic events hosted by the SFU Open Source Development Club, where innovation meets collaboration. From hands-on workshops to inspiring talks, our events empower students, foster skill development, and build connections within the global open-source community.
+          </p>
+          <a href="/" className="btn btn-primary flex flex-row px-4 py-2 rounded w-56 text-white transition duration-300">
+            <p className="mr-4">&gt;</p>./HOME
           </a>
         </div>
       </section>
+      {/* Projects and Beyond Section */}
+      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-6 sm:px-12">
+        <h2 className="section-title text-left font-club">We Touch Grass. We Meet People.</h2>
 
-      <section className="container mx-auto px-4 py-12">
-        <h2 className="text-4xl font-bold mb-8">
-          We Touch Grass.
-          <br />
-          We Meet People.
-        </h2>
-        <div className="flex flex-col md:flex-row justify-between items-start">
-          <div className="md:w-1/2 mb-8 md:mb-0">
-            <p className="text-lg mb-4">
-              We are a student club at SFU aimed at bringing together talented
-              individuals from tech, design, and business. Our primary goal is
-              to collaborate on projects that contribute to the community while
-              providing valuable learning opportunities for our members.
-            </p>
-            <p className="text-lg">
-              Join us at the SFU Open Source Development Club and be part of a
-              community dedicated to making a positive impact through technology
-              and collaboration.
+        {/* Content Wrapper */}
+        <div className="flex flex-col space-y-8 md:flex-row md:space-x-8 md:space-y-0">
+          {/* Left Side (text) */}
+          <div className="md:w-1/2">
+            <p className="text-lg mb-6">
+              At the <strong className="text-primary">SFU Open Source Development Club</strong>, we believe in connecting beyond the screen. Through our <strong className="text-primary">engaging events</strong>, we create spaces for members to meet, network, and grow both <strong className="text-primary">personally</strong> and <strong className="text-primary">professionally</strong>. Whether it&lsquo;s through fun <strong className="text-primary">social gatherings</strong> or insightful <strong className="text-primary">guest talks</strong>, we foster a sense of <strong className="text-primary">community</strong> that values <strong className="text-primary">authentic connections</strong> and <strong className="text-primary">shared experiences</strong>. Our events go beyond learning—they&lsquo;re about building lasting <strong className="text-primary">relationships</strong>, celebrating <strong className="text-primary">diversity</strong>, and creating a welcoming environment where everyone feels they belong.
             </p>
           </div>
-          <div className="md:w-1/2 space-y-4">
-            <a
-              href="#"
-              className="block w-full px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300 text-center"
-            >
-              ./FUTURE_EVENTS
+
+          {/* Right Side (button links) */}
+          <div className="md:w-1/2 flex flex-col items-start md:items-end space-y-6">
+            <a href="#projects-section" className="flex flex-row px-4 py-2 rounded w-full max-w-[325px] btn btn-primary text-left text-white transition duration-300" onClick={() => setActiveTab('UPCOMING')}>
+              <p className="mr-4">&gt;</p>./UPCOMING_EVENTS
             </a>
-            <a
-              href="#"
-              className="block w-full px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300 text-center"
-            >
-              ./PAST_EVENTS
+            <a href="#projects-section" className="flex flex-row px-4 py-2 rounded w-full max-w-[325px] btn btn-primary text-left text-white transition duration-300" onClick={() => setActiveTab('PAST')}>
+              <p className="mr-4">&gt;</p>./PAST_EVENTS
             </a>
           </div>
         </div>
       </section>
 
-      <section className="container mx-auto px-4 py-12">
-        <h2 className="text-4xl font-bold mb-8">Our Events</h2>
+      {/* Our Projects Section */}
+      <section id="projects-section" className="container mx-auto py-12 px-6 sm:px-12">
+        <h2 className="section-title text-left font-club">Our Events</h2>
         <div className="flex space-x-4 mb-8">
-          <span className="px-4 py-2 bg-gray-700 rounded-full">PAST</span>
-          <span className="px-4 py-2 bg-purple-600 rounded-full">FUTURE</span>
+          <span className={`px-4 py-2 btn text-center text-white transition duration-300 cursor-pointer ${activeTab === 'UPCOMING' ? 'bg-[#D55FFF]' : 'bg-[#636C9E]'}`} onClick={() => setActiveTab('UPCOMING')}>UPCOMING</span>
+          <span className={`px-4 py-2 btn text-center text-white transition duration-300 cursor-pointer ${activeTab === 'PAST' ? 'bg-[#D55FFF]' : 'bg-[#636C9E]'}`} onClick={() => setActiveTab('PAST')}>PAST</span>
         </div>
-        <div className="space-y-8">
-          <div className="flex flex-col md:flex-row bg-gray-800 rounded-lg overflow-hidden">
-            <div className="md:w-2/3 p-6">
-              <h3 className="text-2xl font-bold mb-4">[Event 1 Name]</h3>
-              <p className="mb-4">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center px-4 py-2 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300"
-              >
-                ./DETAILS
-              </a>
-            </div>
-            <div className="md:w-1/3 bg-gray-700 flex items-center justify-center text-2xl">
-              PLACEHOLDER
-            </div>
-          </div>
-          <div className="flex flex-col md:flex-row bg-gray-800 rounded-lg overflow-hidden">
-            <div className="md:w-2/3 p-6">
-              <h3 className="text-2xl font-bold mb-4">[Event 2 Name]</h3>
-              <p className="mb-4">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center px-4 py-2 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300"
-              >
-                ./DETAILS
-              </a>
-            </div>
-            <div className="md:w-1/3 bg-gray-700 flex items-center justify-center text-2xl">
-              PLACEHOLDER
-            </div>
-          </div>
+
+        <div className="space-y-12">
+          {renderEventsList()}
         </div>
+
       </section>
 
-      <section className="container mx-auto px-4 py-12 text-center">
-        <h2 className="text-4xl font-bold mb-8">Start Your Journey With Us</h2>
-        <a
-          href="https://go.sfss.ca/clubs/867/info"
-          className="inline-flex items-center px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300"
-        >
-          ./START_UR_JOURNEY
-        </a>
+      {/* Join Us CTA Banner Section */}
+      <section className="py-24 text-center">
+        <div className="container mx-auto px-4">
+          <h2 className="text-4xl font-bold font-club mb-6 text-white">Start Your Journey With Us</h2>
+          <div className="flex justify-center">
+            <a href="/projects" className="flex flex-row px-4 py-2 rounded w-full max-w-[255px] btn btn-primary text-left text-white transition duration-300">
+              <p className="mr-4">&gt;</p>./START_UR_JOURNEY
+            </a>
+          </div>
+        </div>
       </section>
     </div>
   );

public/events/f24-icebreaker-3.jpg

@@ -0,0 +1,5 @@
+export interface EventType {
+    title: string;
+    description: string;
+    imgURLs: string[];
+}