Enhance Profile Page

GuessWho/frontend/src/App.jsx

@@ -2,12 +2,15 @@ import { Routes, Route } from 'react-router-dom';
 
 import SignUp from './signup/SignUp';
 import Dashboard from './dashboard/Dashboard';
+import Profile from './profile/Profile';
+
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<SignUp />} />
       <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/profile" element={<Profile />} />
     </Routes>
   );
 }

GuessWho/frontend/src/components/Container/Container.jsx

@@ -0,0 +1,9 @@
+import styles from "./Container.module.css";
+
+export default function Container({ children }) {
+  return (
+    <div className={`${styles.container}`}>
+      {children}
+    </div>
+  );
+}

GuessWho/frontend/src/components/Container/Container.module.css

@@ -0,0 +1,4 @@
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}

GuessWho/frontend/src/profile/Profile.jsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './Profile.module.css';
+import Container from "../components/Container/Container";
+
+const programmingLanguages = [
+    'JavaScript',
+    'TypeScript',
+    'Python',
+    'Java',
+    'C#',
+    'C++',
+    'Go'
+];
+
+const softSkills = [
+    'Communication',
+    'Teamwork',
+    'LeaderShip',
+    'Problem Solving',
+    'Adaptability',
+];
+
+const sports = [
+    'Football',
+    'Basketball',
+    'Gym',
+    'Running',
+    'Swimming',
+];
+
+const hobbies = [
+    'Reading',
+    'Gaming',
+    'Music',
+    'Travel',
+    'Cooking',
+];
+
+export default function Profile() {
+
+  const navigate = useNavigate();
+
+  const [profile, setProfile] = useState({
+    fullName: '',
+    programming: [],
+    softSkills: [],
+    sports: [],
+    hobbies: []
+  });
+
+  const handleInput = (e) => {
+    setProfile({
+        ...profile,
+        [e.target.name]: e.target.value,
+    });
+  };
+
+  const toggleItem = (field, value) => {
+  const currentItems = profile[field];
+
+  if (currentItems.includes(value)) {
+    setProfile({
+      ...profile,
+      [field]: currentItems.filter((item) => item !== value),
+    });
+  } else {
+    setProfile({
+      ...profile,
+      [field]: [...currentItems, value],
+    });
+  }
+};
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!profile.fullName.trim()) {
+        alert('Please complete all required fields');
+        return;
+    }
+
+    console.log(profile);
+
+    alert("Profile saved!");
+
+    navigate("/dashboard");
+};
+
+  return (
+    <div className={styles.profilePage}>
+    <Container className={styles.profileContainer}>
+
+      <h2>Create Profile</h2>
+
+      <form onSubmit={handleSubmit}>
+        <h3>Player Name</h3>
+        <input
+          type="text"
+          name="fullName"
+          placeholder="Enter your player name"
+          value={profile.fullName}
+          onChange={handleInput}
+        />
+
+        <h3>Programming Languages</h3>
+
+         <div className={styles.checkboxGroup}>
+        {programmingLanguages.map((language) => (
+          <label key={language}>
+            <input
+              type="checkbox"
+              checked={profile.programming.includes(language)}
+              onChange={() =>
+              toggleItem("programming", language)
+              }
+            />
+            {language}
+          </label>
+        ))}
+        </div>
+
+        <h3>Soft Skills</h3>
+
+        <div className={styles.checkboxGroup}>
+        {softSkills.map((skill) => (
+          <label key={skill}>
+            <input
+              type="checkbox"
+              checked={profile.softSkills.includes(skill)}
+              onChange={() =>
+                toggleItem("softSkills", skill)
+              }
+            />
+            {skill}
+          </label>
+        ))}
+        </div>
+
+        <h3>Sports</h3>
+
+        <div className={styles.checkboxGroup}>
+        {sports.map((sport) => (
+          <label key={sport}>
+            <input
+              type="checkbox"
+              checked={profile.sports.includes(sport)}
+              onChange={() =>
+              toggleItem("sports", sport)
+              }
+            />
+            {sport}
+          </label>
+        ))}
+        </div>
+
+        <h3>Hobbies</h3>
+       <div className={styles.checkboxGroup}>
+        {hobbies.map((hobby) => (
+          <label key={hobby}>
+            <input
+              type="checkbox"
+              checked={profile.hobbies.includes(hobby)}
+              onChange={() =>
+                toggleItem("hobbies", hobby)
+              }
+            />
+            {hobby}
+          </label>
+        ))}
+        </div>
+
+        <button type="submit">
+          Save Profile
+        </button>
+      </form>
+      </Container>
+    </div>
+  );
+}
+

GuessWho/frontend/src/profile/Profile.module.css

@@ -0,0 +1,131 @@
+.profilePage{
+  width: 100%;
+  margin: 20px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
+}
+
+.profileContainer{
+    padding: 20px;
+}
+.profileContainer h2 {
+  text-align: center;
+  color: #2563eb;
+  margin-bottom: 25px;
+}
+
+.profileContainer h3 {
+  margin: 20px 0 10px;
+  color: #333;
+  font-size: 18px;
+}
+
+.profileContainer button {
+  width: 50%;
+  margin-top: 25px;
+  padding: 14px;
+  border: none;
+  border-radius: 10px;
+  background: #2563eb;
+  color: white;
+  font-size: 17px;
+  cursor: pointer;
+  transition: .3s;
+}
+
+.profileContainer label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #f8f9fc;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.profileContainer input[type="text"],
+.profileContainer textarea {
+  width: 100%;
+  padding: 14px;
+  margin-bottom: 20px;
+  border: 2px solid #ddd;
+  border-radius: 10px;
+  font-size: 16px;
+  transition: .3s;
+}
+
+.profileContainer input[type="text"]:focus,
+.profileContainer textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+}
+
+.profileContainer textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+
+.profileContainer label:hover {
+  background: #e8f0ff;
+  border-color: #2563eb;
+}
+
+.profileContainer input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #2563eb;
+}
+
+
+.profileContainer button:hover {
+  background: #1d4ed8;
+}
+
+.checkboxGroup {
+  margin-bottom: 20px;
+}
+
+/* ---------- Tablet ------ */
+
+@media (min-width: 768px) {
+.profileContainer {
+    padding: 35px;
+  }
+
+.profileContainer label {
+    display: inline-flex;
+    width: 48%;
+    margin-right: 2%;
+    margin-bottom: 12px;
+  }
+
+.profileContainer button {
+    width: 250px;
+    display: block;
+    margin: 30px auto 0;
+  }
+}
+
+/* -------- Desktop -------- */
+
+@media (min-width: 1200px) {
+
+  .profileContainer label {
+    width: 30%;
+    margin-right: 3%;
+  }
+
+  .profileContainer h2 {
+    font-size: 34px;
+  }
+
+  .profileContainer h3 {
+    font-size: 22px;
+  }
+}

GuessWho/frontend/src/signup/SignUp.jsx

@@ -49,7 +49,7 @@ function SignUp() {
       setSuccessMessage('Account created successfully!')
 
       setTimeout(() => {
-        navigate('/dashboard')
+        navigate('/profile')
       }, 1500)
     } catch (error) {
       console.error(error)