Modal initial comit

src/pages/public/HomePage.tsx

@@ -1,7 +1,51 @@
+import Modal from "@/components/modal/Modal";
+import ModalBody from "@/components/modal/ModalBody";
+import ModalFooter from "@/components/modal/ModalFooter";
+import ModalHeader from "@/components/modal/ModalHeader";
+import { useState } from "react";
+
+
 export default function HomePage(){
+	const [ displayModal, setDisplayModal ] = useState(false);
+
+
+	const showModal = () => {
+		setDisplayModal(true);
+	}
+
+	const hideModal = () => {
+		setDisplayModal(false);
+	}
+
+
 	return (
 		<main>
 			Home Page
+			<button
+				onClick={showModal}
+			>
+				Modal
+			</button>
+			<Modal
+				display={displayModal}
+				close={hideModal}
+				backgroundType="darken-blur"
+			>
+				<ModalHeader
+					close={hideModal}
+					backgroundType="lighten"
+				>
+					Header
+				</ModalHeader>
+				<ModalBody>
+					Body
+				</ModalBody>
+				<ModalFooter
+					backgroundType="lighten"
+				>
+					Footer
+				</ModalFooter>
+			</Modal>
 		</main>
 	);
 }