Fixes for UI and Routing Issues in Eventmint

src/assets/styles/Play.css

@@ -7,6 +7,9 @@
   }
 
   .play {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     border-radius: 15px;
     overflow: hidden;
     width: 250px;
@@ -27,15 +30,15 @@
 
   .play-poster {
     width: 100%;
-    height: auto;
+    /* height: auto; */
     border-radius: 10px 10px 0 0;
-    margin-bottom: 40px;
+    margin-bottom: 20px;
   }
 
   .play-ranking {
     position: absolute;
     text-align: left;
-    bottom: 100px;
+    top: 50%;
     width: 230px;
     color: var(--text-color);
     background-color: rgba(0, 0, 0, 0.8);

src/assets/styles/PlaysList.css

@@ -9,7 +9,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    min-height: 100vh;
+    /* min-height: 100vh; */
     margin-inline: auto;
     position: relative;
 

src/components/NavBar.js

@@ -1,39 +1,39 @@
-import React, { useState } from "react";
-import { NavLink } from "react-router-dom"; // Import Link from react-router-dom
+import React from "react";
+import { NavLink } from "react-router-dom";
 import "../assets/styles/NavBar.css";
 
 const Navbar = () => {
-  const [activeLink, setActiveLink] = useState("Movies");
+  const handleComingSoon = (event) => {
+    event.preventDefault(); // Prevents navigation
+    alert("This part of the website is not yet prepared.");
+  };
 
   return (
     <nav className="navbar secondsnav">
-      <div className="container mx-auto px-4 py-3 flex justify-center items-center gap-x-10" style={{justifyContent:"center"}}>
+      <div className="container mx-auto px-4 py-3 flex justify-center items-center gap-x-10" style={{ justifyContent: "center" }}>
         <div className="flex space-x-8">
           <NavLink
             to="/movies"
-            className={`nav-link ${activeLink === "Movies" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Movies
           </NavLink>
-          <NavLink
-            to="/stream-events"
-            className={`nav-link ${
-              activeLink === "Stream Events" ? "active" : ""
-            }`}
+          <span
+            onClick={handleComingSoon} // Show alert on click
+            className="nav-link"
+            style={{ cursor: "pointer" }}
           >
             Stream Events
-          </NavLink>
+          </span>
           <NavLink
             to="/plays"
-            className={`nav-link ${activeLink === "Plays" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Plays
           </NavLink>
           <NavLink
             to="/sports-activities"
-            className={`nav-link ${
-              activeLink === "Sports Activities" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Sports Activities
           </NavLink>
@@ -43,31 +43,26 @@ const Navbar = () => {
         <div className="flex space-x-8">
           <NavLink
             to="/list-shows"
-            className={`nav-link ${
-              activeLink === "List Your Show" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             List Your Show
           </NavLink>
-          <NavLink
-            to="/corporates"
-            className={`nav-link ${
-              activeLink === "Corporates" ? "active" : ""
-            }`}
+          <span
+            onClick={handleComingSoon} // Show alert on click
+            className="nav-link"
+            style={{ cursor: "pointer" }}
           >
             Corporates
-          </NavLink>
+          </span>
           <NavLink
             to="/offers"
-            className={`nav-link ${activeLink === "Offers" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Offers
           </NavLink>
           <NavLink
             to="/gift-cards"
-            className={`nav-link ${
-              activeLink === "Gift Cards" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Gift Cards
           </NavLink>

src/components/Play.js

@@ -4,15 +4,19 @@ import { Link } from "react-router-dom";
 
 function Play({ id, image, name, ranking, participants, category }) {
   return (
-    <div className="play">
-      <img src={image} alt={`${name} image`} className="play-poster" />
+    <div className="play h-96">
+      <img src={image} alt={`${name} image`} className="play-poster h-1/2" />
       <p className="play-ranking">
+        <span className="pr-4">
         <span className="ranking-badge">🎭</span>
         <span className="ranking-points"> {ranking} </span>
-        <span className="participants">({participants} Participants)</span>
+        </span>
+        <span className="participants pl-5">({participants} Participants)</span>
       </p>
+      <div className="pt-3">
       <h2 className="play-name">{name}</h2>
       <p className="play-category">{category}</p>
+      </div>
       <Link to={`/plays/${id}`}>
         <button className="more-details-button">More Details</button>
       </Link>