Merge pull request #435 from shreeyanshi123/feature-branch

completed Contact us form

.vscode/tasks.json

@@ -0,0 +1,28 @@
+{
+    "tasks": [
+        {
+            "type": "cppbuild",
+            "label": "C/C++: g++.exe build active file",
+            "command": "C:\\MinGW\\bin\\g++.exe",
+            "args": [
+                "-fdiagnostics-color=always",
+                "-g",
+                "${file}",
+                "-o",
+                "${fileDirname}\\${fileBasenameNoExtension}.exe"
+            ],
+            "options": {
+                "cwd": "${fileDirname}"
+            },
+            "problemMatcher": [
+                "$gcc"
+            ],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "detail": "Task generated by Debugger."
+        }
+    ],
+    "version": "2.0.0"
+}

paras/src/App.js

@@ -298,11 +298,15 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Game from "./Game"
 import Signup from "./Signup"
 import Login from "./Login"
+
+import Contact from "./Contact";
+
 import About from "./components/about"
 import Contact from "./components/contact";
 import Rules from "./components/rules";
 import navBar from "./components/navBar";
 import Chatbot from './components/Chatbot/Chatbot';
+
 function App() {
   return (
     <>
@@ -311,9 +315,15 @@ function App() {
       <Routes>
         <Route path="/" element={<Game/>} />
         <Route path="/signup" element={<Signup/>} />
+
+        <Route path="/login" element={<Login/>} />
+        <Route path="/contact" element={<Contact/>}/>
+
+
         <Route path="/About" element={<About/>} />
         <Route path="/Contact" element={<Contact/>} />
         <Route path="/Rules" element={<Rules/>} />
+
 
         <Route path="/login" element={<Login/>} />
 

paras/src/Contact.css

@@ -0,0 +1,83 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f3f4f6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .login-container {
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+    text-align: left;
+  }
+
+  .form-group label {
+    font-size: 14px;
+    color: #666;
+  }
+
+  .form-group input {
+    padding: 10px;
+    width: 100%;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-top: 5px;
+  }
+
+  .form-group input:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+
+  .login-btn {
+    padding: 12px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+
+
+  .form-group2 input {
+    padding: 10px;
+    width: 100%;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-top: 5px;
+  }
+
+  .form-group2 input:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+  .form-group2 label {
+    font-size: 14px;
+    color: #666;
+  }
+  .form-group2 input{
+    width: 100%;
+    height: 150px;
+  }
+

paras/src/Contact.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import './Contact.css'
+import { useNavigate } from 'react-router-dom'
+
+
+const Contact = () => {
+  const navigate = useNavigate();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    navigate('/');
+  };
+  return (
+
+    <div className="login-container">
+
+      <h2>Contact Us</h2>
+      <form className='login-form' onSubmit={handleSubmit}>
+        <div className='form-group'>
+          <label htmlFor='email'>Email</label>
+          <input
+            type="email"
+            name="email"
+            className=''
+            placeholder="Enter your email"
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="name">Name:</label>
+          <input
+            type="text"
+            name="name"
+
+            className=''
+            placeholder="Enter your name"
+          />
+
+        </div>
+        <div className="form-group2">
+          <label htmlFor="msg">Message:</label>
+          <input
+            type="text-box"
+            name="msg"
+
+            className=''
+            placeholder="Enter your msg"
+          />
+
+        </div>
+        <button type="submit" className="login-btn">Send</button>
+      </form>
+
+
+    </div >
+  )
+}
+
+export default Contact