Created Rules Page

paras/src/App.js

@@ -3,14 +3,15 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Game from "./Game"
 import Signup from "./Signup"
 import Login from "./Login"
+import Rules from './Rules';
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Game/>} />
         <Route path="/signup" element={<Signup/>} />
         <Route path="/login" element={<Login/>} />
-
+        <Route path="/rules.js" element={<Rules />} />
       </Routes>
     </Router>
   );

paras/src/Game.js

@@ -128,7 +128,7 @@ const App = () => {
               <div class="navbar-links">
                 <Link to="/home" class="nav-link">Home</Link>
                 <Link to="/about" class="nav-link">About</Link>
-                <Link to="/rules" class="nav-link">Rules</Link>
+                <Link to="/rules.js" class="nav-link">Rules</Link>
                 <Link to="/contact" class="nav-link">Contact</Link>
                 <Link to="/signup" className='nav-link'>Sign Up</Link>
                 <Link to="/Login" className='nav-link'>Log In</Link>

paras/src/Rules.css

@@ -0,0 +1,55 @@
+.rules-container {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 30px;
+    text-align: center;
+    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
+    border-radius: 16px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .rules-container:hover {
+    transform: scale(1.02);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .rules-container h1 {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: #333;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+
+  .rules-container ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .rules-container li {
+    font-size: 1.4rem;
+    margin: 12px 0;
+    color: #555;
+    line-height: 1.6;
+    position: relative;
+    padding-left: 25px;
+    text-align: left;
+  }
+
+  .rules-container li::before {
+    content: "✔";
+    position: absolute;
+    left: 0;
+    color: #4caf50;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+
+  .rules-container li:hover {
+    color: #333;
+    transition: color 0.3s ease;
+  }
+

paras/src/Rules.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "./Rules.css";
+const Rules = () => {
+  return (
+    <div className="rules-container">
+      <h1>Tic Tac Toe Rules</h1>
+      <ul>
+        <li>The game is played on a 3x3 grid.</li>
+        <li>Two players take turns: Player 1 is 'X' and Player 2 is 'O'.</li>
+        <li>
+          The goal is to get three of your marks in a row, column, or diagonal.
+        </li>
+        <li>
+          If all nine squares are filled without a winner, the game ends in a
+          draw.
+        </li>
+        <li>Players cannot mark a square that is already occupied.</li>
+        <li>The first player to align three marks wins!</li>
+      </ul>
+    </div>
+  );
+};
+
+export default Rules;