feat: Create and add ClearGridButton to homepage

frontend/src/components/clearGridButton/ClearGridButton.css

@@ -0,0 +1,25 @@
+.clear-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px; 
+
+}
+
+.clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px; 
+    width: 60px; 
+    height: 60px; 
+    border-radius: 50%;
+    border: none; 
+    cursor: pointer; 
+    background-color: var(--ss-blue-grotto);
+
+}
+
+.play-icon {
+    width: 100%;
+    height: 100%;
+  }

frontend/src/components/clearGridButton/ClearGridButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { resetGrid } from "../../services/animationService";
+import "./ClearGridButton.css";
+
+const ClearGridButton: React.FC = () => {
+    return (
+        <div className="clear-button-container">
+            <button className="clear-button" onClick={resetGrid}>
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24" 
+                    fill="none" 
+                    strokeWidth={1.8} 
+                    stroke="currentColor" 
+                    className="size-10"
+                    >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+
+                </svg>
+            </button>
+        </div>
+    );
+}
+
+export default ClearGridButton;

frontend/src/components/startButton/StartButton.css

@@ -2,7 +2,6 @@
     display: flex;
     justify-content: center;
     margin-top: 20px; 
-    width: 268px;
 }
 
 .start-button {

frontend/src/pages/homePage/HomePage.tsx

@@ -14,6 +14,7 @@ import AlgorithmStepSlider from "../../components/algorithmStepSlider/AlgorithmS
 import GenerateObstacleButtons from "../../components/generateObstacleButtons/GenerateObstacleButtons";
 import AlgorithmsMenu from "../../components/algorithmsMenu/AlgorithmsMenu";
 import AnimationSpeedSlider from "../../components/animationStepSlider/AnimationSpeedSlider";
+import ClearGridButton from "../../components/clearGridButton/ClearGridButton";
 
 export const mapSizeSliderSignal = signal<number>(50);
 export const animationSpeed = signal<number>(1);
@@ -72,7 +73,11 @@ const HomePage = () => {
           <AnimationSpeedSlider />
         </div>
         <StartAndEndPointsButton />
-        <StartButton />
+        <div className="flex">
+          <StartButton />
+          <ClearGridButton />
+        </div>
+
       </div>
     </div>
   );