feat: marquee, events page

package.json

@@ -19,16 +19,20 @@
     "@fontsource/poppins": "^5.0.8",
     "@vitejs/plugin-react": "^4.2.1",
     "baffle": "^0.3.6",
+    "canvas": "^3.0.0",
+    "color-thief-react": "^2.1.0",
     "framer-motion": "^11.5.4",
     "gsap": "^3.12.5",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.469.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.5",
     "react-parallax-tilt": "^1.7.268",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
+    "swiper": "^11.1.15",
     "vite": "^5.1.0"
   },
   "devDependencies": {

src/pages/Events/EventsCard.jsx

@@ -0,0 +1,195 @@
+import { useMemo, useState, useEffect } from "react";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import PropTypes from "prop-types";
+import Tilt from "react-parallax-tilt";
+
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 150);
+  const g = Math.floor(Math.random() * 150);
+  const b = Math.floor(Math.random() * 150);
+  return `rgba(${r}, ${g}, ${b}, 0.3)`;
+};
+
+function ImageCarousel({
+  images,
+  interval = 3000,
+  onManualChange,
+  className,
+  isModal,
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    let timer;
+    if ((isHovered || isModal) && !onManualChange) {
+      timer = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % images.length);
+      }, interval);
+    }
+    return () => clearInterval(timer);
+  }, [images.length, interval, onManualChange, isHovered, isModal]);
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    setCurrentIndex(0);
+  };
+
+  const handlePrev = (e) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+  };
+
+  const handleNext = (e) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+  };
+
+  return (
+    <div
+      className="relative w-full h-full"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={handleMouseLeave}
+    >
+      <img
+        src={images[currentIndex]}
+        alt={`Slide ${currentIndex}`}
+        className={className}
+      />
+      {images.length > 1 && (
+        <>
+          {isModal && (
+            <>
+              <button
+                onClick={handlePrev}
+                type="button"
+                className="absolute left-2 top-1/2 -translate-y-1/2 p-1 bg-black/30 rounded-full text-white hover:bg-black/50"
+              >
+                <ChevronLeft className="h-6 w-6" />
+              </button>
+              <button
+                onClick={handleNext}
+                type="button"
+                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 bg-black/30 rounded-full text-white hover:bg-black/50"
+              >
+                <ChevronRight className="h-6 w-6" />
+              </button>
+            </>
+          )}
+          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
+            {images.map((image, idx) => (
+              <div
+                key={image}
+                className={`h-1.5 w-1.5 rounded-full ${
+                  idx === currentIndex ? "bg-white" : "bg-white/50"
+                }`}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function EventsCard({ event }) {
+  const [showModal, setShowModal] = useState(false);
+  const randomColor = useMemo(() => getRandomColor(), []);
+
+  const truncateText = (text, length) =>
+    text.length > length ? `${text.slice(0, length)}...` : text;
+
+  return (
+    <>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => setShowModal(true)}
+        onKeyPress={(e) => {
+          if (e.key === "Enter" || e.key === " ") setShowModal(true);
+        }}
+        className="w-full"
+      >
+        <Tilt tiltMaxAngleX={5} tiltMaxAngleY={5}>
+          <div className="relative inline-block w-full h-[400px] md:h-[350px] overflow-hidden rounded-xl shadow-lg cursor-pointer transition-transform">
+            <ImageCarousel
+              images={event.images}
+              className="w-full h-full object-cover object-bottom rounded-t-xl"
+            />
+            <div
+              className="absolute bottom-0 w-full flex flex-col justify-center backdrop-blur-md rounded-b-xl p-4"
+              style={{ backgroundColor: randomColor }}
+            >
+              <h3 className="text-white font-semibold mb-1 text-ellipsis whitespace-nowrap overflow-hidden">
+                {event.title}
+              </h3>
+              <p className="text-white text-xs mb-1">{event.date}</p>
+              <p className="text-white text-sm">
+                {truncateText(event.description, 100)}
+              </p>
+            </div>
+          </div>
+        </Tilt>
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto relative">
+            <button
+              type="button"
+              onClick={() => setShowModal(false)}
+              className="absolute right-4 top-4 p-1 hover:bg-gray-100 rounded-full z-10"
+            >
+              <X className="h-6 w-6" />
+            </button>
+            <div className="h-64">
+              <ImageCarousel
+                images={event.images}
+                interval={5000}
+                onManualChange
+                className="w-full h-full object-contain object-bottom rounded-t-xl"
+                isModal
+              />
+            </div>
+            <div className="p-6">
+              <h2 className="text-2xl font-bold mb-2">{event.title}</h2>
+              <p className="text-gray-600 mb-4">{event.date}</p>
+              <p className="text-gray-800">{event.description}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+ImageCarousel.propTypes = {
+  images: PropTypes.arrayOf(
+    PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      alt: PropTypes.string,
+    }),
+  ).isRequired,
+  interval: PropTypes.number,
+  onManualChange: PropTypes.func,
+  className: PropTypes.string,
+  isModal: PropTypes.bool,
+};
+
+ImageCarousel.defaultProps = {
+  interval: 3000,
+  onManualChange: null,
+  className: "",
+  isModal: false,
+};
+
+EventsCard.propTypes = {
+  event: PropTypes.shape({
+    images: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of image URLs
+    title: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default EventsCard;

src/pages/Events/events.js

@@ -0,0 +1,105 @@
+const events = [
+  {
+    images: [
+      "/CodeX-Website/gallery/AIML SESSION/aiml6.jpg",
+      "/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
+      "/CodeX-Website/gallery/AIML SESSION/aiml2.jpg",
+      "/CodeX-Website/gallery/AIML SESSION/aiml3.jpg",
+      "/CodeX-Website/gallery/AIML SESSION/aiml4.jpg",
+      "/CodeX-Website/gallery/AIML SESSION/aiml5.jpg",
+    ],
+    title: "AIML Session",
+    date: "14th October, 2023",
+    description:
+      "Conducted an engaging and informative event focused on the principles and applications of Artificial Intelligence and Machine Learning. Attendees were captivated by the in-depth exploration of these transformative technologies.",
+  },
+  {
+    images: [
+      "/CodeX-Website/gallery/RUST SESSION/rs1.JPG",
+      "/CodeX-Website/gallery/RUST SESSION/rs2.jpg",
+      "/CodeX-Website/gallery/RUST SESSION/rs3.jpg    ",
+    ],
+    title: "Rust Session",
+    date: "7th October, 2023",
+    description:
+      "Conducted an engaging event that delved into the intricacies of Rust programming. An exploration of this powerful and efficient programming language. Participants gained valuable insights into its practical applications and unique features.",
+  },
+  {
+    images: [
+      "/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
+      "/CodeX-Website/gallery/HackTober Fest/htf2_1.jpg",
+      "/CodeX-Website/gallery/HackTober Fest/htf3_1.jpg",
+      "/CodeX-Website/gallery/HackTober Fest/htf4_1.jpg",
+      "/CodeX-Website/gallery/HackTober Fest/htf5_1.jpg",
+    ],
+    title: "Hacktober Fest - Open Source Contribution Session",
+    date: "30th September, 2023",
+    description:
+      "During the event, we guided participants through the essential steps of getting started with open-source: from cloning repositories to making commits, and finally, opening pull requests. By the end of the session, students gained hands-on experience and the confidence to contribute to Hacktoberfest and other open-source projects, fostering a deeper understanding of collaborative coding and community-driven development.",
+  },
+  {
+    images: [
+      "/CodeX-Website/gallery/Generative ai session/gas1.jpg",
+      "/CodeX-Website/gallery/Generative ai session/gas2.jpg",
+      "/CodeX-Website/gallery/Generative ai session/gas3.jpg",
+    ],
+    title:
+      "Guest lecture on generative AI for Building and Scaling Applications in the Real World",
+    date: "3rd February, 2024",
+    description:
+      "Hosted a guest lecture by Shubham Londhe. He shared insights into practical applications of Generative AI, discussing its role in creativity and scalability challenges. It was a deep dive into the practical applications of Generative AI. He explored how this cutting-edge technology can spark creativity and address real-world scalability challenges.",
+  },
+  {
+    images: [
+      "/CodeX-Website/gallery/Laser Lock/ll1.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll4.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll5.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll6.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll7.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll8.jpg",
+      "/CodeX-Website/gallery/Laser Lock/ll9.jpg",
+    ],
+    title: "Laser Lock - SymbiTech",
+    date: "20th September, 2024- 21st September, 2024",
+    description:
+      "A major success at the annual techfest (Symbitech) of SIT, Pune. Participant's programming skills were put to the test as well as their shooting abilities with a prize of INR 8000.",
+  },
+  //   {
+  //     title: "Project Exhibition",
+  //     date: "21st April, 2023",
+  //     description:
+  //       "Event where we invited various industry experts to provide their valuable suggestions and reviews for student’s PBL-1 and PBL-2 projects. A great way for students to receive constructive criticism from industry experts and identify areas of improvement. It had a cash prize of INR 3500 for first place, INR 2500 for second place, and INR 1500 for third place.",
+  //   },
+  //   {
+  //     title: "Git and Github Session",
+  //     date: "27th March, 2023",
+  //     description:
+  //       "The session provided students with invaluable learning experience, covering the essentials of Git and GitHub and their practical applications in software development. Certificates were also provided to participants.",
+  //   },
+  //   {
+  //     title: "The Bug Detective",
+  //     date: "8th April, 2022",
+  //     description:
+  //       "This was a debugging competition designed by our team of seasoned coders to test your coding knowledge and determination. The faster participants debug the codes, the closer they get to winning a share of the INR 3000 prize.",
+  //   },
+  //   {
+  //     title: "Learning Series",
+  //     date: "10th February, 2022- 11th February, 2022",
+  //     description:
+  //       "An Intermediate Level Programming Course, led by Moubani Ghosh and Antriksh Sharma, who are accomplished competitive coders with a strong grasp of Data Structures and Algorithms (DSA).",
+  //   },
+  //   {
+  //     title: "Study Abroad Webinar",
+  //     date: "12th December, 2021",
+  //     description:
+  //       "SIT alumni Mukul Shinde: Master’s degree holder in Mechanical and Aerospace Engineering from Illinois Institute of Technology, and Quality Engineer at MilliporeSigma, U.S, Rashi Dhir: SIT graduate currently pursuing her Master’s in Computer Science at New York University, Siddharth Vyas: Final-year B.Tech student in IT at SIT. Participants gained valuable insights and advice on studying abroad from these experienced professionals.",
+  //   },
+  //   {
+  //     title: "Webinar on Greenware Software",
+  //     date: "31st March, 2024",
+  //     description:
+  //       "Conducted by CodeX in collaboration with the Department of Computer Science and Engineering, featured Kedar Deo, Vice President at Tech Mahindra. Delved into the role of technology for creating a more sustainable future, eco-friendly coding practices and the environmental impact of software.",
+  //   },
+];
+
+export default events;

src/pages/Events/index.jsx

@@ -0,0 +1,36 @@
+import Marquee from "react-fast-marquee";
+import EventsCard from "./EventsCard";
+import events from "./events";
+import PageTransition from "@/components/PageTransition";
+
+function EventsPage() {
+  return (
+    <PageTransition>
+      <Marquee gradient={false} speed={50}>
+        <div className="flex flex-row gap-8 mr-8 overflow-hidden">
+          <span className="text-outlined uppercase text-6xl md:text-8xl font-black text-transparent whitespace-nowrap">
+            Events
+          </span>
+          <span className="text-text-light uppercase text-6xl md:text-8xl font-black whitespace-nowrap">
+            Events
+          </span>
+          <span className="text-outlined uppercase text-6xl md:text-8xl font-black text-transparent whitespace-nowrap">
+            Events
+          </span>
+          <span className="text-text-light uppercase text-6xl md:text-8xl font-black whitespace-nowrap">
+            Events
+          </span>
+        </div>
+      </Marquee>
+      <div className="my-8 flex justify-center">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 justify-items-center mx-12">
+          {events.map((event) => (
+            <EventsCard key={event.title} event={event} />
+          ))}
+        </div>
+      </div>
+    </PageTransition>
+  );
+}
+
+export default EventsPage;

src/pages/Gallery/Gallery.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import Heading from "@/components/Heading/index";
 import PageTransition from "../../components/PageTransition";
 
-const images = [
+export const images = [
   {
     src: "/CodeX-Website/gallery/RUST SESSION/rs1.JPG",
     caption: "Rust Session - Introduction to Rust",

src/routes/index.jsx

@@ -5,6 +5,7 @@ import Gallery from "@/pages/Gallery/Gallery";
 import Contact from "@/pages/Contact";
 import PageNotFound from "../pages/PageNotFound";
 import Loader from "@/components/Loader";
+import Events from "../pages/Events";
 
 const routes = [
   {
@@ -37,6 +38,12 @@ const routes = [
     requireAuth: false,
     render: <Teams />,
   },
+  {
+    label: "Events",
+    path: "/events",
+    requireAuth: false,
+    render: <Events />,
+  },
   {
     label: "Home",
     path: "/",