Added Plays Section

src/App.js

@@ -17,6 +17,7 @@ import ListShows from "./components/ListShows";
 import SportsActivitiesPage from "./components/SportsActivitiesPage";
 import SportDetails from "./components/SportsDetails";
 import GiftCard from "./components/GiftCard";
+import PlaysPage from "./components/PlaysPage";
 
 
 function App() {
@@ -45,6 +46,7 @@ function App() {
 					<Route path="/offers" element={<Offers/>}/>
 					<Route path="/list-shows" element={<ListShows/>}/>
 					<Route path="/sports-activities" element={<SportsActivitiesPage/>}/>
+					<Route path="/plays" element={<PlaysPage/>}/>
 					<Route path="/sports/:id" element={<SportDetails />} />
 					<Route path="/gift-cards" element={<GiftCard />} />
 

src/assets/styles/Play.css

@@ -0,0 +1,95 @@
+:root {
+    --primary-color: #ff4500;
+    --secondary-color: #ff6500;
+    --text-color: #ffffff;
+    --bg-color: #000000;
+    --font-family: 'Arial', sans-serif;
+  }
+
+  .play {
+    border-radius: 15px;
+    overflow: hidden;
+    width: 250px;
+    text-align: center;
+    font-family: var(--font-family);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    background-color: #f8f8f8;
+    padding: 10px;
+    margin: 10px;
+  }
+
+  .play:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  .play-poster {
+    width: 100%;
+    height: auto;
+    border-radius: 10px 10px 0 0;
+    margin-bottom: 40px;
+  }
+
+  .play-ranking {
+    position: absolute;
+    text-align: left;
+    bottom: 100px;
+    width: 230px;
+    color: var(--text-color);
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 10px;
+    border-radius: 0 0 5px 5px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .ranking-badge {
+    color: var(--primary-color);
+  }
+
+  .ranking-points {
+    color: var(--text-color);
+    font-size: 12px;
+  }
+
+  .participants {
+    font-size: 12px;
+    color: var(--text-color);
+  }
+
+  .play-name {
+    font-size: 20px;
+    text-align: left;
+    margin: 15px 0 5px 10px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .play-category {
+    font-size: 12px;
+    margin: 5px 0 15px 10px;
+    text-align: left;
+    color: #777;
+  }
+
+  .more-details-button {
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-size: 14px;
+  }
+
+  .more-details-button:hover {
+    background-color: var(--secondary-color);
+  }
+
+  .book-tickets-button:hover {
+    background-color: var(--secondary-color);
+  }
+

src/assets/styles/PlaysList.css

@@ -0,0 +1,36 @@
+/* SportList.css */
+
+.play-list {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    gap: 10px;
+
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    margin-inline: auto;
+    position: relative;
+
+    padding: 10px;
+    margin-bottom: 100px;
+  }
+
+  .play-list::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for better UX */
+  }
+
+  @media screen and (max-width:1100px) {
+    .play-list{
+      top: 80px;
+      margin-bottom: 40px;
+    }
+  }
+
+  @media screen and (max-width:800px) {
+    .play-list{
+      top: 0px;
+      margin-bottom: -45px;
+    }
+  }

src/components/Play.js

@@ -0,0 +1,23 @@
+import React from "react";
+import "../assets/styles/Play.css";
+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" />
+      <p className="play-ranking">
+        <span className="ranking-badge">🎭</span>
+        <span className="ranking-points"> {ranking} </span>
+        <span className="participants">({participants} Participants)</span>
+      </p>
+      <h2 className="play-name">{name}</h2>
+      <p className="play-category">{category}</p>
+      <Link to={`/plays/${id}`}>
+        <button className="more-details-button">More Details</button>
+      </Link>
+    </div>
+  );
+}
+
+export default Play;

src/components/PlaysImageSlider.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import image1 from '../assets/images/plays/play1.png';
+import image2 from '../assets/images/plays/play2.png';
+import image3 from '../assets/images/plays/play3.png';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import '../assets/styles/ImageSlider.css'; 
+
+const ImageWithNoEffect = ({ imageSrc, altText }) => {
+  return (
+    <div style={{ display: 'inline-block' }}>
+      <img
+        src={imageSrc}
+        alt={altText}
+        style={{
+          width: '100%',
+          height: '400px',
+          borderRadius: '10px',
+          objectFit: 'contain'
+        }}
+      />
+    </div>
+  );
+};
+
+const ImageSlider = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    centerMode: true,
+    centerPadding: '10%', 
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    arrows: true, 
+    prevArrow: <CustomPrevArrow />, 
+    nextArrow: <CustomNextArrow />,
+  };
+
+  return (
+    <div className="slider-container">
+      <Slider {...settings}>
+        <div>
+          <ImageWithNoEffect imageSrc={image1} altText="Image 1" />
+        </div>
+        <div>
+          <ImageWithNoEffect imageSrc={image2} altText="Image 2" />
+        </div>
+        <div>
+          <ImageWithNoEffect imageSrc={image3} altText="Image 3" />
+        </div>
+      </Slider>
+    </div>
+  );
+};
+
+const CustomPrevArrow = ({ onClick }) => {
+  return (
+    <div className="custom-arrow custom-prev" onClick={onClick}>
+      &#9664;
+    </div>
+  );
+};
+
+const CustomNextArrow = ({ onClick }) => {
+  return (
+    <div className="custom-arrow custom-next" onClick={onClick}>
+      &#9654;
+    </div>
+  );
+};
+
+export default ImageSlider;

src/components/PlaysList.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Play from './Play'; 
+import '../assets/styles/PlaysList.css';
+
+import play1 from '../assets/images/plays/playposter1.jpg';
+import play2 from '../assets/images/plays/playposter2.jpg';
+import play3 from '../assets/images/plays/playposter3.jpg';
+import play4 from '../assets/images/plays/playposter4.jpg';
+import play5 from '../assets/images/plays/playposter5.jpg';
+
+function PlaysList({ searchTerm }) { 
+  const plays = [
+    {
+      id: 1,
+      image: play1,
+      name: 'Hamlet',
+      ranking: 1,
+      participants: '1.2K',
+      category: 'Tragedy'
+    },
+    {
+      id: 2,
+      image: play2,
+      name: 'Macbeth',
+      ranking: 2,
+      participants: '960.2K',
+      category: 'Tragedy'
+    },
+    {
+      id: 3,
+      image: play3,
+      name: 'A Midsummer Night\'s Dream',
+      ranking: 3,
+      participants: '43.9K',
+      category: 'Comedy'
+    },
+    {
+      id: 4,
+      image: play4,
+      name: 'Othello',
+      ranking: 4,
+      participants: '7.5K',
+      category: 'Tragedy'
+    },
+    {
+      id: 5,
+      image: play5,
+      name: 'The Tempest',
+      ranking: 5,
+      participants: '44.2K',
+      category: 'Romantic'
+    },
+  ];
+
+  const filteredPlays = plays.filter(play => 
+    play.name.toLowerCase().includes(searchTerm.toLowerCase())
+  ); 
+
+  return (
+    <div className="play-list mt-20">
+      {filteredPlays.map((play, index) => (
+        <Play
+          key={index}
+          id={play.id}
+          image={play.image}
+          name={play.name}
+          ranking={play.ranking}
+          participants={play.participants}
+          category={play.category}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default PlaysList;

src/components/PlaysPage.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import Header from './Header'
+import Chatbot from '../chatbot'
+import Heading from './heading'
+import Loader from './Loader'
+import Footer from './Footer'
+import PlaysImageSlider from './PlaysImageSlider'
+import PlaysList from './PlaysList'
+
+
+const PlaysActivities = () => {
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState("");
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+        setLoading(false);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (loading) {
+        return <Loader loading={loading} />;
+    }
+    return (
+    <div>
+        <Header onSearch={setSearchTerm} />
+        <Chatbot />
+        <Heading />
+        <PlaysImageSlider />
+        <PlaysList searchTerm={searchTerm}/>
+        <Footer />
+    </div>
+  )
+}
+
+export default PlaysActivities