frontend dev

Frontend/admin/src/css/actor-marketing-analysis.css

@@ -22,16 +22,26 @@
 .actor-marketing-results-contend-container {
   display: flex;
   justify-content: space-around;
-  padding-top: 2%;
+  padding-top: 1%;
   width: 100%;
   height: auto;
 }
 .actor-marketing-results-actor-container {
   width: 50%;
+}
+.actor-marketing-results-actor-warper {
+  width: 100%;
   display: flex;
   gap: 5%;
+  padding-top: 2%;
   flex-wrap: wrap;
 }
+.actor-marketing-results-actor-title {
+  font-size: 15px;
+  font-weight: 500;
+  font-style: italic;
+  font-family: system-ui;
+}
 .card {
   width: 11rem;
   height: 15rem;
@@ -58,11 +68,8 @@
   margin: 0;
   transition: inset 0.3s 0.3s ease-out;
   font-family: "Roboto Condensed", sans-serif;
-  font-weight: bold;
+  font-weight: bolder;
   text-transform: uppercase;
-  color: #ffffff;
-	-webkit-text-stroke: 0.5px #282828;
-	text-shadow: 0px 4px 4px #282828;
 }
 .card-content-para {
   position: absolute;
@@ -70,6 +77,7 @@
   max-width: 80%;
   transition: opacity 0.3s ease-out;
   inset: auto auto 25px 20px;
+  font-weight: bold;
 }
 .card:hover .card-content-topic {
   inset: auto auto 50px 20px;
@@ -88,5 +96,5 @@
   justify-content: center;
   align-items: center;
   width: 50%;
-  height:40vh;
+  height: 40vh;
 }

Frontend/admin/src/pages/actor-marketing-analysis.jsx

@@ -12,7 +12,9 @@ import MovieFilterIcon from "@mui/icons-material/MovieFilter";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import { Pie } from "react-chartjs-2";
-import Channa from "../images/nadeeka.jpg";
+import Channa from "../images/channa.png";
+import Mashi from "../images/mashi.png";
+import Nadeeka from "../images/nadeeka.png";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
@@ -22,11 +24,7 @@ export const data = {
     {
       label: "# of Votes",
       data: [12, 19],
-      backgroundColor: [
-        "rgba(255, 99, 132, 0.2)",
-        "rgba(54, 162, 235, 0.2)",
-        ,
-      ],
+      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)"],
       borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
       borderWidth: 1,
     },
@@ -129,31 +127,36 @@ export default function ActorMarketingAnalysis() {
         <div className="actor-marketing-title">Film Trailer Name Results</div>
         <div className="actor-marketing-results-contend-container">
           <div className="actor-marketing-results-actor-container">
-            {/* --------------------------------- */}
-            <div className="card">
-              <img src={Channa} alt="" className="card-img" />
-              <div className="card-content">
-                <div className="card-content-topic">Channa Perera</div>
-                <div className="card-content-para">Sir lankan Actress</div>
-              </div>
+            <div className="actor-marketing-results-actor-title">
+              Actor Analysis 
             </div>
-            {/* ---------------------------------------- */}
-            <div className="card">
-              <img src={Channa} alt="" className="card-img" />
-              <div className="card-content">
-                <div className="card-content-topic">Channa Perera</div>
-                <div className="card-content-para">Sir lankan Actress</div>
+            <div className="actor-marketing-results-actor-warper">
+              {/* --------------------------------- */}
+              <div className="card">
+                <img src={Nadeeka} alt="" className="card-img" />
+                <div className="card-content">
+                  <div className="card-content-topic">Nadeeka Gunasekara</div>
+                  <div className="card-content-para">Sir lankan Actress</div>
+                </div>
               </div>
-            </div>
-            {/* ---------------------------------------- */}
-            <div className="card">
-              <img src={Channa} alt="" className="card-img" />
-              <div className="card-content">
-                <div className="card-content-topic">Channa Perera</div>
-                <div className="card-content-para">Sir lankan Actress</div>
+              {/* ---------------------------------------- */}
+              <div className="card">
+                <img src={Channa} alt="" className="card-img" />
+                <div className="card-content">
+                  <div className="card-content-topic">Channa Perera</div>
+                  <div className="card-content-para">Sir lankan Actress</div>
+                </div>
+              </div>
+              {/* ---------------------------------------- */}
+              <div className="card">
+                <img src={Mashi} alt="" className="card-img" />
+                <div className="card-content">
+                  <div className="card-content-topic">Mashi Siriwardene</div>
+                  <div className="card-content-para">Sir lankan Actress</div>
+                </div>
               </div>
+              {/* ---------------------------------------- */}
             </div>
-            {/* ---------------------------------------- */}
           </div>
           <div className="actor-marketing-results-pie-chart-container">
             <Pie data={data} />