delete not using icons

src/Component/Map/Map.jsx

@@ -9,9 +9,8 @@ import "./Map.css";
 
 import crashes from "../../Data/Crashes_2020.geo.json";
 
-import square from "../../icons/square.png";
-import hand from "../../icons/hand.png";
-import handFilled from "../../icons/hand_filled_yellow.png";
+import handEmpty from "../../icons/hand_empty.png";
+import handFilled from "../../icons/hand_filled.png";
 
 import { getStackCrashes } from "./getStackCrashes";
 
@@ -96,14 +95,8 @@ const Map = () => {
         },
       });
 
-      m.loadImage(square, (error, image) => {
-        if (error) throw error;
-        m.addImage("icon_square", image, {
-          sdf: true,
-        });
-      });
 
-      m.loadImage(hand, (error, image) => {
+      m.loadImage(handEmpty, (error, image) => {
         if (error) throw error;
         m.addImage("icon_hand", image, {
           sdf: true,
@@ -171,17 +164,6 @@ const Map = () => {
         },
       });
 
-      // m.addLayer({
-      //   id: "school_area",
-      //   type: "fill",
-      //   source: "schools",
-      //   layout: {},
-      //   paint: {
-      //     "fill-color": "transparent",
-      //     "fill-opacity": 0,
-      //     "fill-outline-color": "#e5f2e5",
-      //   },
-      // });
 
       m.addLayer({
         id: "outline",

src/Component/StoryLine/Causes.jsx

@@ -1,31 +1,19 @@
-import React, { useRef, useEffect } from "react";
+import React from "react";
 import * as d3 from "d3";
 
 const Causes = () => {
-  //   const ref = useRef(null);
-
-  //   useEffect(() => {
-  //     const svg = d3.select(ref.current);
-  //     const height = ref.current.clientHeight;
-  //     const width = ref.current.clientWidth;
-
-  //   });
-
   return (
-    <div className="my-[calc(100vh)] p-[25px] max-w-[400px] bg-[rgba(0,0,0,0.5)]">
+    <div className="my-[calc(100vh)] p-[25px] max-w-[400px] bg-[rgba(0,0,0,0.8)]">
       <div className="font-bold text-[20px]">
         3. Click on crossing guards to view the crashes nearby
       </div>
       <div className="mt-[10px] text-[16px]">
-        <span>Since 2020 There were</span>
-        <span className="font-bold text-[18px]"> 51 </span>
-        crashes during <span className="font-bold text-[#ffd4d2]">
-          morning
-        </span>{" "}
-        and <span className="font-bold text-[#ff727c]">afternoon</span> at
-        locations where there are current vacancies. Filled the vacant positions
-        may decrease the possibility of crashes and protect students safety
-        during commuting.
+        Since 2020, there have been a total of 51 crashes in the&nbsp;
+        <span className="font-bold text-[#ffd4d2]">morning</span> and&nbsp;
+        <span className="font-bold text-[#ff727c]">afternoon</span> at locations
+        where there are currently vacant positions. Filling these vacant
+        positions could potentially reduce the likelihood of crashes and enhance
+        student safety during their commutes.
       </div>
       <div className="flex items-center mt-[20px] w-[350px] h-[300px]">
         <div className="flex items-center">

src/Component/StoryLine/Introduction.jsx

@@ -2,12 +2,12 @@ import './Introduction.css'
 
 const Introduction = () => {
   return (
-    <div className="relative flex flex-col justify-between my-[calc(50vh-200px)] p-[25px] max-w-[400px]  bg-[rgba(0,0,0,0.5)]">
+    <div className="relative flex flex-col justify-between my-[calc(50vh-200px)] p-[25px] max-w-[400px]  bg-[rgba(0,0,0,0.8)]">
       <div>
         <div className="font-bold text-[20px]">
           NYPD is struggling to fill the shortage of crossing guards, leaving students who commute to school at risk.
         </div>
-        <p className="my-2">
+        <p className="mt-[30px] mb-[20px]">
           Without enough crossing guards at key intersections near schools, students and other pedestrians are less protected during
           (morning) drop off and (afternoon) pick up.{" "}
         </p>
@@ -17,7 +17,7 @@ const Introduction = () => {
           <div className="w-[10px] h-[10px] bg-[rgba(0,0,0,0)] border-l-[1.5px] border-b-[1.5px] rotate-[-45deg]"></div>
           <div className="w-[10px] h-[10px] bg-[rgba(0,0,0,0)] border-l-[1.5px] border-b-[1.5px] rotate-[-45deg]"></div>
         </div>
-        <p class="ml-2 text-sm align-top"><span className="font-bold">Scroll down</span> to check the related data and how crossing guards can protect.</p>
+        <p className="ml-2 text-sm align-top"><span className="font-bold">SCROLL DOWN</span> to check the related data and how crossing guards can protect.</p>
       </div>
     </div>
   );

src/Component/StoryLine/Problems.jsx

@@ -1,6 +1,9 @@
 import React, { useRef, useEffect } from "react";
 import * as d3 from "d3";
 
+import handFilled from "../../icons/hand_filled.png";
+import handEmpty from "../../icons/hand_empty.png";
+
 const Problems = () => {
   const ref = useRef(null);
 
@@ -33,25 +36,39 @@ const Problems = () => {
       .attr("fill", (d) => color(d.data[1]))
       .attr("stroke", "black")
       .style("stroke-width", "0px")
-      .style("opacity", (d) => (d.data[1] === 19 ? 0.05 : 0.25))
+      .style("opacity", (d) => (d.data[1] === 19 ? 0 : 0.4))
       .attr("transform", `translate(${width / 2},${height / 2})`);
   });
 
   return (
-    <div className="my-[calc(100vh)] p-[25px] max-w-[400px] bg-[rgba(0,0,0,0.5)]">
+    <div className="my-[calc(100vh)] p-[25px] max-w-[400px] bg-[rgba(0,0,0,0.8)]">
       <div className="font-bold text-[20px]">2. Crossing Guards Shortage</div>
       <div className="mt-[10px] text-[16px]">
-        Crossing guards are crucial to keep passengers safe.
-        However, 18 intersections near schools have vacancies.{" "}
-        <span className="font-bold text-[#fdeca6]">Filled guards</span> only
-        account for{" "}
+        Crossing guards play a vital role in ensuring the safety of pedestrians,
+        especially near school zones. Unfortunately, there is a shortage of
+        crossing guards at 18 intersections adjacent to schools. Currently,
+        only&nbsp;
         <span className="font-bold text-[16px] text-[#fdeca6]">
           {((8 / 27) * 100).toFixed(0)}%{" "}
         </span>
-        of Total posts.
+        of the total available positions for guards have been successfully
+        filled.
       </div>
+      {/* <div className="flex">
+        <div className="flex items-center mt-[25px] gap-[12px]">
+          <img src={handFilled} className="w-[20px] h-[20px]"></img>
+          <div className="">Filled Guards</div>
+        </div>
+        <div className="flex items-center mt-[25px] gap-[12px]">
+          <img src={handEmpty} className="w-[40px] h-[20px] color-[#fdeca6]" />
+          <div >Empty Guards</div>
+        </div>
+      </div> */}
+
       <svg className="mt-[20px] w-[300px] h-[300px]" ref={ref}></svg>
-      <p className="my-4 text-sm">🖰 Click on a hand icon for more details at that intersection.</p>
+      <p className="my-4 text-sm">
+        🖰 Click on a hand icon for more details at that intersection.
+      </p>
     </div>
   );
 };