introducing screens

src/pages/Home.jsx

@@ -1,5 +1,35 @@
-import React from "react";
+import Menu from "../components/Menu";
+import { useWordpressCustomData } from "../hooks/WordpressFetchData";
+import coverWorker from "../assets/img/cover_worker.svg";
+import screenWorker1 from "../assets/img/screen_worker_1.svg";
+import screenWorker2 from "../assets/img/screen_worker_2.svg";
+import { Link } from "react-router-dom";
+
 
 export default function Home() {
-	return <div>Home</div>;
+	const welcomeScreenDatas = useWordpressCustomData("/interface-content/welcome");
+
+	if (!welcomeScreenDatas) {
+		return <div>Chargement...</div>;
+	}
+	return (
+		<div className='page-container page-container--home'>
+			<div className='screen screen--home'>
+				<Menu />
+				<section className='screen__content'>
+					<img className='cover_worker' src={coverWorker} alt='' />
+					<h1 className='application_title'>{welcomeScreenDatas.applicationTitle}</h1>
+					<h2 className='application_subtitle'>
+						{welcomeScreenDatas.applicationSubtitle}
+					</h2>
+					<p className='application_description'>
+						{welcomeScreenDatas.applicationDescription}
+					</p>
+					<Link to='/profile' className='cta cta--construction cta--round cta--play ' />
+				</section>
+				<img className='screen_worker_1' src={screenWorker1} alt='' />
+				<img className='screen_worker_2' src={screenWorker2} alt='' />
+			</div>
+		</div>
+	);
 }

src/pages/Single.jsx

@@ -0,0 +1,11 @@
+import { useParams } from "react-router-dom";
+
+export default function Single() {
+	const { id } = useParams();
+	return (
+		<div>
+			Single
+			<h1>Article {id}</h1>
+		</div>
+	);
+}

src/pages/Test.jsx

@@ -0,0 +1,16 @@
+import Menu from "../components/Menu";
+import { postWordpressStatisticsData } from "../hooks/WordpressFetchData";
+
+export default function Test() {
+	function addPost() {
+		postWordpressStatisticsData("/statistics/post");
+	}
+	return (
+		<div className='page-test'>
+			<Menu />
+			<div id='screen-container'>
+				<button onClick={addPost}>Finish the game</button>
+			</div>
+		</div>
+	);
+}

src/screens/SearchAndFind.jsx

@@ -0,0 +1,25 @@
+import Menu from "../components/Menu";
+import { useWordpressData } from "../hooks/WordpressFetchData";
+
+export default function SearchAndFind() {
+	const screenData = useWordpressData("/search-and-find");
+
+	return (
+		<div className='page-container page-container--play'>
+			<div id='screen-container'>
+				<Menu />
+
+				<div>
+					{screenData && <h2>{screenData[0].title.rendered}</h2>}
+					{screenData && (
+						<div
+							dangerouslySetInnerHTML={{
+								__html: screenData[0].content.rendered,
+							}}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}