Merge pull request #42 from codeXsit/Codex-3-events

Codex 3 events

Author: Dios-001

src/App.jsx

@@ -11,6 +11,7 @@ const navLinks = [
   { name: "Our Team", path: "/teams" },
   { name: "Events", path: "/events" },
   { name: "Gallery", path: "/gallery" },
+  { name: "Events", path: "/events" },
   { name: "Contact", path: "/contact" },
   { name: "Community", path: "/community" },
 ];

src/assets/images/Events/image1.jpg

@@ -27,3 +27,18 @@ a {
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #737373;
 }
+
+.words {
+  position: relative;
+  animation: move-words 25s linear infinite;
+  margin: 0;
+}
+
+@keyframes move-words {
+  0% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
+}

src/assets/images/Events/image2.jpg

@@ -50,7 +50,15 @@ function Navbar({ links }) {
           <li
             key={link.name}
             className={`
-            group font-regular text-white md:my-0 md:ml-8 transition-all hover:text-primary
+              font-semibold text-white md:my-0 md:ml-8
+              border-b-2 
+              ${
+                location.pathname
+                  .toLowerCase()
+                  .includes(link.path.toLowerCase())
+                  ? "border-red-500 hover:border-red-700"
+                  : "border-transparent hover:border-red-500"
+              }
             `}
           >
             <Link to={link.path}>{link.name}</Link>
@@ -65,7 +73,18 @@ function Navbar({ links }) {
             />
           </li>
         ))}
-      </ul>
+      </ul> 
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-7 h-7 text-white cursor-pointer md:hidden"
+      >
+        {isOpen ? (
+          <img src={closeIcon} alt="close" />
+        ) : (
+          <img src={menuIcon} alt="menu" />
+        )}
+      </button>
     </nav>
   );
 }

src/assets/images/Events/image3.jpg

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+function Card({ event }) {
+  const [truncatedText, setTruncatedText] = useState("");
+  const maxLength = 25; // Maximum number of words
+
+  useEffect(() => {
+    const text = event.description;
+    const words = text.split(" ");
+
+    if (words.length > maxLength) {
+      setTruncatedText(words.slice(0, maxLength).join(" "));
+    } else {
+      setTruncatedText(text);
+    }
+  }, []);
+  return (
+    <div className="  shadow-lg bg-zinc-600 rounded-2xl max-w-96 h-[30rem] relative">
+      <img
+        className="w-mag rounded-se-2xl rounded-ss-2xl"
+        src={`${event.image}`}
+        alt={event.alt}
+      />
+      <div className="content-box px-4 pt-2">
+        <p className="py-1 font-medium text-white break-words">{event.name}</p>
+        <p className="date font-thin py-2 pr-3 text-zinc-400">{event.date}</p>
+        <p className="description text-white font-light ">{truncatedText}</p>
+      </div>
+      <Link
+        to={event.link}
+        className="absolute bottom-0 left-0 right-0 text-center tracking-widest font-thin drop-shadow-lg text-white py-7 hover:text-red-600"
+      >
+        READ MORE
+      </Link>
+    </div>
+  );
+}
+Card.propTypes = {
+  event: PropTypes.object.isRequired,
+};
+
+export default Card;

src/assets/images/Events/image4.jpg

@@ -0,0 +1,38 @@
+[
+    {
+        "name": "Event1",
+        "date": "12/12/24",
+        "description": "lorem ipsum dolor ",
+        "image": "/CodeX-Website/src/assets/images/Events/image1.jpg",
+        "link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        "alt":"event1-image"
+
+    },
+    {
+        "name": "Event2",
+        "date": "13/12/24",
+        "description": "lorem ipsum dolor ",
+        "image": "/CodeX-Website/src/assets/images/Events/image2.jpg",
+        "link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        "alt":"event2-image"
+
+    },
+    {
+        "name": "Event3",
+        "date": "14/12/24",
+        "description": "lorem ipsum dolor ",
+        "image": "/CodeX-Website/src/assets/images/Events/image3.jpg",
+        "link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        "alt":"event3-image"
+
+    },
+    {
+        "name": "Event4",
+        "date": "15/12/24",
+        "description": "lorem ipsum dolor ",
+        "image": "/CodeX-Website/src/assets/images/Events/image4.jpg",
+        "link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        "alt":"event4-image"
+
+    }
+]

src/assets/styles/index.css

@@ -0,0 +1,56 @@
+// import { useState, useEffect } from "react";
+import Card from "./card";
+import events from "./events.json";
+
+function EventPage() {
+  const borderStyle = {
+    color: "transparent",
+    WebkitTextStrokeWidth: "0.5px",
+    WebkitTextStrokeColor: "white",
+  };
+  // const [events, setEvent] = useState([]);
+
+  // useEffect(() => {
+  //   setEvent(events);
+  // }, []);
+  return (
+    <div className="">
+      <div className=" flex flex-row flex-nowrap w-full  overflow-hidden ">
+        <p
+          className="text-white text-7xl py-10 font-extrabold inline-block px-1 words"
+          style={borderStyle}
+        >
+          EVENTS
+        </p>
+        <p className="text-white text-7xl py-10 font-extrabold inline-block px-2 words">
+          {" "}
+          EVENTS
+        </p>
+        <p
+          className="text-white text-7xl py-10 font-extrabold inline-block px-2 words"
+          style={borderStyle}
+        >
+          EVENTS
+        </p>
+        <p className="text-white text-7xl py-10 font-extrabold inline-block px-2 words">
+          {" "}
+          EVENTS
+        </p>
+        <p
+          className="text-white text-7xl py-10 font-extrabold inline-block px-2 words"
+          style={borderStyle}
+        >
+          EVENTS
+        </p>
+      </div>
+      <div className=" flex flex-wrap gap-10 justify-center align-items py-10">
+        {/* Add enough content to exceed the width of the container */}
+        {events.map((event) => (
+          <Card key={event.name} event={event} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default EventPage;