add new images

Author: LinaBell

client/src/components/Leaderboard/Leaderboard.jsx

@@ -43,7 +43,11 @@ export const Leaderboard = () => {
   return (
     <>
       <div className="grid gap-4 text-center">
-        <div className="icon">🏆</div>
+        <img
+          src="https://sdk-race.s3.us-east-1.amazonaws.com/leaderboard.png"
+          alt="leaderboard"
+          style={{ height: "325px" }}
+        />
         <h2 className="text-white">
           <strong>Leaderboard</strong>
         </h2>

client/src/components/NewGameScreen/NewGameScreen.jsx

@@ -1,7 +1,6 @@
 import { useContext } from "react";
 
 // components
-import racingMap from "../../assets/racingMap.png";
 import { Footer, Tabs } from "@components";
 
 // context
@@ -23,7 +22,7 @@ export const NewGameScreen = () => {
     <>
       <div className="grid gap-6">
         <Tabs />
-        <img src={racingMap} alt="racing map" className="rounded-lg shadow-lg" />
+        <img src="https://sdk-race.s3.us-east-1.amazonaws.com/logo.png" alt="racing map" style={{ height: "300px" }} />
         <div className="card p-4">
           <strong>How to Play</strong>
           <ol style={{ marginLeft: "18px", listStyle: "auto" }}>

client/src/components/RaceCompletedScreen/RaceCompletedScreen.jsx

@@ -43,7 +43,12 @@ export const RaceCompletedScreen = () => {
             <h2>
               <strong>Congratulations!</strong>
             </h2>
-            <div style={{ fontSize: "50px" }}>🏁</div>
+            <img
+              src="https://sdk-race.s3.us-east-1.amazonaws.com/checkeredFlag.png"
+              alt="checkered flag"
+              className="mx-auto"
+              style={{ height: "255px" }}
+            />
             <h3>Your Time</h3>
             <h2>
               <strong>{elapsedTime}</strong>