Final push

frontend/word-guessing-game/src/GamePage/Rules.css

@@ -0,0 +1,22 @@
+/* Rules.css */
+.rules-container {
+    background-color: #f0f0f0;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .rules-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  .rules-list {
+    list-style-type: disc;
+    padding-left: 20px;
+  }
+
+  .rules-list li {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }  

frontend/word-guessing-game/src/GamePage/Rules.js

@@ -0,0 +1,20 @@
+// Rules.js
+import React from 'react';
+import './Rules.css'; // Import the CSS file for styling
+
+function Rules() {
+  return (
+    <div className="rules-container">
+      <h2 className="rules-title">Rules to Play 'ekreb'</h2>
+      <ul className="rules-list">
+        <li>Unscramble the given word to its original form.</li>
+        <li>You have a limited time to guess each word.</li>
+        <li>Each correct guess earns you points.</li>
+        <li>Incorrect guesses won't affect your score.</li>
+        <li>Try to achieve the highest accuracy!</li>
+      </ul>
+    </div>
+  );
+}
+
+export default Rules;