Created the banner structure and fixed the styling

src/common/playlists/DynamicBanner.jsx

@@ -0,0 +1,56 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import thumbPlay from 'images/thumb-play.png';
+import { Link } from 'react-router-dom';
+import { MdArrowRightAlt } from 'react-icons/md';
+
+const DynamicBanner = ({ randomPlay }) => {
+  const [coverImage, setCoverImage] = useState(null);
+
+  useEffect(() => {
+    if (randomPlay && randomPlay.cover) {
+      setCoverImage(randomPlay.cover);
+    } else {
+      import(`plays/${randomPlay.slug}/cover.png`)
+        .then((Cover) => {
+          setCoverImage(Cover.default);
+        })
+        .catch((err) => {
+          setCoverImage(thumbPlay);
+
+          return {
+            success: false,
+            error: err,
+            message: `Cover image not found for the play ${randomPlay.name}. Setting the default cover image...`
+          };
+        });
+    }
+  }, [randomPlay]);
+
+  return (
+    <Fragment>
+      <div
+        className="dynamic-banner-container"
+        style={{
+          background: `linear-gradient(rgba(0,0,0,0.5), #020808),url(${coverImage} ) center no-repeat`,
+          minHeight: '70vh'
+        }}
+      >
+        <div className="dynamic-banner-body">
+          <h1 className="text-white text-3xl md:text-5xl">{randomPlay.name}</h1>
+          <p className="text-gray-400 mt-2 text-xs md:text-base truncate">
+            {randomPlay.description}
+          </p>
+          <Link to={`/plays/${encodeURI(randomPlay?.github?.toLowerCase())}/${randomPlay.slug}`}>
+            <button className="banner-button rounded-full font-extrabold uppercase px-8 md:px-12 md:py-1">
+              Let's Play <MdArrowRightAlt className="right-arrow-icon" size={40} />
+            </button>
+          </Link>
+
+          {/* <Link to={``}><button className='banner-button'>See Creator's profile</button></Link> */}
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default DynamicBanner;

src/common/playlists/PlayList.jsx

@@ -1,16 +1,27 @@
 import PlayThumbnail from './PlayThumbnail';
 import { ReactComponent as ImageOops } from 'images/img-oops.svg';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'common/spinner/spinner';
 import * as all_plays from 'plays';
 import useGetPlays from 'common/hooks/useGetPlays';
 
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
+import DynamicBanner from './DynamicBanner';
 
 const PlayList = () => {
+  const [randomPlay, setRandomPlay] = useState({});
   const [loading, error, plays] = useGetPlays();
+  useEffect(() => {
+    const filteredPlays = plays.filter(
+      (play) => all_plays[play.component ? play.component : toSanitized(play.title_name)]
+    );
+    if (filteredPlays && filteredPlays.length > 0) {
+      const randomIndex = Math.floor(Math.random() * filteredPlays.length);
+      setRandomPlay(filteredPlays[randomIndex]);
+    }
+  }, [plays]);
 
   if (loading) {
     return <Loader />;
@@ -28,6 +39,7 @@ const PlayList = () => {
 
   return (
     <Fragment>
+      <DynamicBanner randomPlay={randomPlay} />
       <ol className="list-plays">
         {plays?.map((play, index) => (
           <React.Fragment key={index}>

src/common/playlists/playlist.css

@@ -760,3 +760,44 @@
     height: var(--play-thumb-size-h-mobile);
   }
 }
+
+/* dynamic banner */
+.dynamic-banner-container {
+  height: 100%;
+  object-fit: contain;
+  color: white;
+  position: relative;
+  width: 100%;
+}
+.dynamic-banner-body {
+  padding: 180px 10px 10px 30px;
+  font-weight: bold;
+  max-width: 600px;
+}
+
+.banner-button{
+  /* width: 8.3rem; */
+  margin-right: 10px;
+  background-color: rgba(255, 255, 255, 0.947);
+  border: none;
+  /* padding: 6px 48px; */
+  outline: none;
+  transition-timing-function: 0.5s;
+  transition: all;
+  cursor: pointer;
+  color: black;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.banner-button:hover{
+  background-color: #e6e6e6c3;
+  color: black;
+
+}
+.right-arrow-icon {
+  color: #25A0A7;
+}
+