Update various image change

src/Components/Content/CharacterDetail/index.js

@@ -41,7 +41,7 @@ function CharacterDetail({ randomAnime, loadingRandomAnime }) {
 							>
 								{randomAnime.characters.map((character, i) => (
 									<SwiperSlide
-										className="w-[100px] flex flex-col justify-center items-center flex flex-col text-[#42EADDFF]"
+										className="w-[100px] flex flex-col justify-center items-center text-[#42EADDFF]"
 										key={i}
 									>
 										<div className="h-full">

src/Components/Content/RandomAnimeENGComp/index.js

@@ -1,13 +1,20 @@
-import React from "react"
 import "swiper/css"
 import "swiper/css/pagination"
 import "./movieanime.css"
 import { Link } from "react-router-dom"
 import { toSlug } from "../../../Utilities/toSlug"
 import { duration } from "../../../Utilities/duration"
+import { useState } from "react"
 import Image from "../Image"
 
 function RandomAnimeENGComp({ randomAnime }) {
+	const [showFullText, setShowFullText] = useState(false)
+
+	// Your data
+	const description = randomAnime.description?.replace(/<[br]+>/g, "")
+
+	// Check if the text is longer than 5 lines
+	const isLongText = description.split("\n").length > 5
 	return (
 		<>
 			<h1 className="font-black ml-6 mr-6 mt-2 border-b-4 border-white text-rose-500 max-sm:text-center">
@@ -59,12 +66,22 @@ function RandomAnimeENGComp({ randomAnime }) {
 							</Link>
 						))}
 					</div>
-					<div
-						className="mx-[20px]"
-						dangerouslySetInnerHTML={{
-							__html: randomAnime.description?.replace(/<[br]+>/g, ""),
-						}}
-					></div>
+					<div>
+						<div
+							className={`mx-[20px] ${showFullText ? "" : "line-clamp-5"}`}
+							dangerouslySetInnerHTML={{
+								__html: description,
+							}}
+						></div>
+						{isLongText && (
+							<button
+								className="p-[4px] bg-black/80 my-2 hover:opacity-80 duration-200 rounded"
+								onClick={() => setShowFullText(!showFullText)}
+							>
+								{showFullText ? "Show Less" : "Show More"}
+							</button>
+						)}
+					</div>
 					<div></div>
 					<div className="flex lg:flex-row [&>*]:p-[6px] [&>*]:m-[4px] max-lg:flex-col">
 						<div className="flex flex-col items-center">

src/Components/Content/RandomAnimeRightCover/index.js

@@ -18,7 +18,7 @@ function RandomAnimeRightCover({ randomAnime }) {
 					<Link to={`/info/${randomAnime.slug}`} aria-label={randomAnime.slug}>
 						<Image
 							src={randomAnime.cover || ""}
-							className="today-cover-image w-full h-auto object-fill aspect-[2/3] duration-500 ease-in-out"
+							className="today-cover-image w-full h-auto object-fill aspect-[2/3] duration-500 ease-in-out hover:opacity-80"
 							alt={randomAnime.name}
 							loading="lazy"
 						/>

src/Components/Content/RandomAnimeTitle/index.js

@@ -16,7 +16,7 @@ function RandomAnimeTitle({ randomAnime }) {
 							aria-label={randomAnime.slug}
 						>
 							<Card.Img
-								className="today-banner-card-image object-cover"
+								className="today-banner-card-image object-cover hover:opacity-80"
 								variant="bottom"
 								src={randomAnime.banner}
 								alt={randomAnime.name}

src/Pages/HomeVI/home.css

@@ -346,6 +346,8 @@
 		padding-right: 0 !important;
 		-o-border-image: none !important;
 		border-image: none !important;
+		margin-left: 0px;
+		margin-right: 0px;
 	}
 
 	.col-9 {