navbar and the pages with link done

client/src/App.js

@@ -1,4 +1,25 @@
-//import { Route, Routes } from "react-router-dom";
+
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Card from "./pages/Cards";
+import Gameboard from "./pages/Gameboard";
+import Home from "./pages/Home";
+import About from "./pages/About";
+
+
+
+
+function App() {
+	return (
+		<Router>
+			<Navbar />
+			<Card />
+		</Router>
+	);
+
+}
+
+
 
 import About from "./pages/About";
 import RegistrationForm from "./components/RegistrationForm";
@@ -10,4 +31,31 @@ const App = () => (
 	</div>
 );
 
+
 export default App;
+
+			{/* <Switch>
+        <Route path="/" component={Home} exact>
+          <Home />
+        </Route>
+
+        <Route path="/about" component={About} exact>
+          <About />
+        </Route>
+
+        <Route path="/contact" component={ContactUs} exact>
+          <ContactUs />
+        </Route>
+
+        <Route path="/signUp" component={Signup} exact>
+          <Signup />
+        </Route>
+
+        <Route path="/" component={Home} exact>
+          <Home />
+        </Route>
+
+        <Route path="/" component={Home} exact>
+          <Home />
+        </Route>
+      </Switch> */}

client/src/components/NavBar.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./navbar.css";
+import Home from "../pages/Home";
+import About from "../pages/About";
+import ContactUs from "../pages/ContactUs";
+import Login from "../pages/Login";
+
+
+
+
+function Navbar() {
+	return (
+		<nav className="nav-bar">
+			<h3 className="logo">Logo</h3>
+			<ul className="nav-links">
+				<Link to="/" className="home">
+					<li>Home</li>
+				</Link>
+
+				<Link to="/About" className="about">
+					<li>About</li>
+				</Link>
+
+				<Link to="/ContactUs" className="contact">
+					<li>Contact Us</li>
+				</Link>
+
+				<Link to="/Login" className="Login">
+					<li>Log in</li>
+				</Link>
+				<Link to="/SignUp" className="signup">
+					<li>Sign Up</li>
+				</Link>
+			</ul>
+		</nav>
+	);
+}
+
+export default Navbar;

client/src/index.js

@@ -1,3 +1,4 @@
+
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 

client/src/pages/Cards.js

@@ -0,0 +1,91 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { Grid } from "@mui/material";
+import "./card.css";
+
+export default function MediaCard() {
+  return (
+		<Grid container className="card-container">
+			<Grid item xs={4} sm={4} md={4}>
+				<paper>
+					<Card sx={{ maxWidth: 345 }}>
+						<CardMedia
+							sx={{ height: 140 }}
+							image="https://images.pexels.com/photos/6325984/pexels-photo-6325984.jpeg?auto=compress&cs=tinysrgb&w=1600"
+							title="green iguana"
+						/>
+						<CardContent>
+							<Typography gutterBottom variant="h5" component="div">
+								Mentors
+							</Typography>
+							<Typography variant="body2" color="text.secondary">
+								Mentor are here to give advise to student any other persons,
+								requiring help.
+							</Typography>
+						</CardContent>
+						<CardActions>
+							<Button size="small">Share</Button>
+							<Button size="small">Login in</Button>
+						</CardActions>
+					</Card>
+				</paper>
+			</Grid>
+
+			<Grid item xs={4} sm={4} md={4}>
+				<paper>
+					<Card sx={{ maxWidth: 345 }}>
+						<CardMedia
+							sx={{ height: 140 }}
+							image="https://images.pexels.com/photos/5212348/pexels-photo-5212348.jpeg?auto=compress&cs=tinysrgb&w=1600"
+							title="green iguana"
+						/>
+						<CardContent>
+							<Typography gutterBottom variant="h5" component="div">
+								Teachers
+							</Typography>
+							<Typography variant="body2" color="text.secondary">
+								Teacher are here to be able to create qui, set quiz and assigned
+								if you need help login to the teacher section to see more!
+							</Typography>
+						</CardContent>
+						<CardActions>
+							<Button size="small">Share</Button>
+							<Button size="small">Login in</Button>
+						</CardActions>
+					</Card>
+				</paper>
+			</Grid>
+
+			<Grid item xs={4} sm={4} md={4}>
+				<paper>
+					<Card sx={{ maxWidth: 345 }}>
+						<CardMedia
+							sx={{ height: 140 }}
+							image="https://images.pexels.com/photos/1454360/pexels-photo-1454360.jpeg?auto=compress&cs=tinysrgb&w=1600"
+							title="green iguana"
+						/>
+						<CardContent>
+							<Typography gutterBottom variant="h5" component="div">
+								Students
+							</Typography>
+							<Typography variant="body2" color="text.secondary">
+								Students will be able to study here by going through different
+								quiz and view practice their skill by using the quiz.
+							</Typography>
+						</CardContent>
+						<CardActions>
+							<Button size="small">Share</Button>
+							<Button size="small">Login in</Button>
+						</CardActions>
+					</Card>
+				</paper>
+			</Grid>
+		</Grid>
+	);
+}
+

client/src/pages/ContactUs.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function ContactUs() {
+  return (
+    <div>
+
+    </div>
+  );
+}
+
+export default ContactUs;

client/src/pages/Gameboard.css

@@ -0,0 +1,31 @@
+
+.quiz-container{
+border: 1px solid black;
+margin-top: 100px;
+padding: 50px;
+background-color: rgb(177, 134, 218);
+}
+
+.question-container{
+border: 1px solid black;
+margin-bottom: 20px;
+padding: 20px;
+background-color: white;
+}
+
+.answers-container{
+border: 1px solid black;
+padding: 20px;
+margin-bottom: 20px;
+background-color: white;
+
+}
+
+.answer{
+border: 1px solid black;
+margin-bottom: 10px;
+padding: 10px;
+display: flex;
+gap: 10px;
+align-items: center;
+}

client/src/pages/Gameboard.js

@@ -0,0 +1,67 @@
+import "./Gameboard.css";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+import CropDinIcon from "@mui/icons-material/CropDin";
+import ChangeHistoryIcon from "@mui/icons-material/ChangeHistory";
+import StarBorderIcon from "@mui/icons-material/StarBorder";
+import React, { useEffect, useState } from "react";
+import { Button } from "@mui/material";
+
+const apiUrl =
+	"https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple";
+
+function Gameboard() {
+  const [questions, setQuestions] = useState([]);
+
+  const [questionNumber, setQuestionNumber] = useState(0);
+
+
+ async function getQuestions(){
+
+
+
+  let res = await fetch(apiUrl);
+  let data = await res.json();
+  console.log(data);
+  setQuestions(data.results);
+  }
+
+  useEffect(()=>{
+    getQuestions();
+  },[]);
+
+  return (
+		<div className="quiz-container">
+			<div className="question-container">
+				{questions[questionNumber]?.question}
+			</div>
+
+			<div className="answers-container">
+				<div className="answer">
+					<RadioButtonUncheckedIcon />
+					<div>{questions[questionNumber]?.incorrect_answers[0]}</div>
+				</div>
+
+				<div className="answer">
+					<CropDinIcon />
+					<div>{questions[questionNumber]?.incorrect_answers[1]}</div>
+				</div>
+
+				<div className="answer">
+					<ChangeHistoryIcon />
+					<div>{questions[questionNumber]?.incorrect_answers[2]}</div>
+				</div>
+
+				<div className="answer">
+					<StarBorderIcon />
+					<div>{questions[questionNumber]?.correct_answer}</div>
+				</div>
+			</div>
+
+			<Button onClick={()=>setQuestionNumber(questionNumber+1)} color="primary" variant="outlined">
+				Next
+			</Button>
+		</div>
+	);
+}
+
+export default Gameboard;

client/src/pages/Home.js

@@ -1,44 +1,14 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 
-import "./Home.css";
-import logo from "./logo.svg";
+import Cards from "./Cards";
+import React from "react";
 
-export function Home() {
-	const [message, setMessage] = useState("Loading...");
+function Home() {
+  return (
+    <div>
+    <Cards />
 
-	useEffect(() => {
-		fetch("/api")
-			.then((res) => {
-				if (!res.ok) {
-					throw new Error(res.statusText);
-				}
-				return res.json();
-			})
-			.then((body) => {
-				setMessage(body.message);
-			})
-			.catch((err) => {
-				console.error(err);
-			});
-	}, []);
-
-	return (
-		<main role="main">
-			<div>
-				<img
-					className="logo"
-					data-qa="logo"
-					src={logo}
-					alt="Just the React logo"
-				/>
-				<h1 className="message" data-qa="message">
-					{message}
-				</h1>
-				<Link to="/about/this/site">About</Link>
-			</div>
-		</main>
-	);
+    </div>
+  );
 }
 
 export default Home;

client/src/pages/Legend.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function S() {
+  return (
+    <div>
+
+    </div>
+  );
+}
+
+export default S;
+

client/src/pages/Login.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Login() {
+  return (
+    <div>
+
+    </div>
+  );
+}
+
+export default Login;

client/src/pages/Question.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Question() {
+  return (
+<div>
+
+</div>
+  );
+}
+
+export default Question;