feat: marquee, events page

Author: Abhishek Patawari

package.json

@@ -19,6 +19,8 @@
     "@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",
@@ -28,6 +30,7 @@
     "react-fast-marquee": "^1.6.5",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
+    "swiper": "^11.1.15",
     "vite": "^5.1.0"
   },
   "devDependencies": {

src/pages/Events/Card.jsx

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import PropTypes from "prop-types";
+import { images } from "../Gallery/Gallery";
+
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgba(${r}, ${g}, ${b}, 0.3)`; // Add transparency for the glassmorphism effect
+};
+
+function Card({ object }) {
+  const imageSrc = object?.src || images[0]?.src;
+  const imageAlt = object?.caption || images[0]?.caption;
+
+  const randomColor = useMemo(() => getRandomColor(), []);
+
+  return (
+    <div className="relative inline-block w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg h-[300px] overflow-hidden rounded-xl shadow-lg">
+      <img
+        src={imageSrc}
+        alt={imageAlt}
+        className="w-full h-full object-cover object-bottom rounded-t-xl"
+      />
+      <div
+        className="absolute bottom-0 w-full h-1/3 flex items-center justify-center backdrop-blur-md rounded-b-xl"
+        style={{ backgroundColor: randomColor }}
+      >
+        <p className="text-white">{imageAlt}</p>
+      </div>
+    </div>
+  );
+}
+
+Card.propTypes = {
+  object: PropTypes.shape({
+    src: PropTypes.string,
+    caption: PropTypes.string,
+  }).isRequired,
+};
+
+export default Card;

src/pages/Events/EventPage.jsx

@@ -0,0 +1,26 @@
+import Marquee from "react-fast-marquee";
+import Card from "./Card";
+import { images } from "../Gallery/Gallery";
+
+function EventPage() {
+  return (
+    <div>
+      <Marquee gradient={false} speed={50}>
+        <p className="font-bold text-white mr-8">events</p>
+        <p className="font-bold text-white mr-8">events</p>
+        <p className="font-bold text-white mr-8">events</p>
+        <p className="font-bold text-white mr-8">events</p>
+        <p className="font-bold text-white mr-8">events</p>
+      </Marquee>
+      <div className="my-8 flex justify-center">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {images.map((image) => (
+            <Card key={image.caption} object={image} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EventPage;

src/pages/Events/dependency.txt

@@ -0,0 +1,5 @@
+idk what im doing rn, 
+these are some dependencies might need to configure server 
+
+
+brew install pkg-config cairo pango libpng jpeg giflib librsvg

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 EventPage from "../pages/Events/EventPage";
 
 const routes = [
   {
@@ -37,6 +38,12 @@ const routes = [
     requireAuth: false,
     render: <Teams />,
   },
+  {
+    label: "Events",
+    path: "/events",
+    requireAuth: false,
+    render: <EventPage />,
+  },
   {
     label: "Home",
     path: "/",