create final page

src/components/ui/PageTextTemplate/PageTextTemplate.tsx

@@ -0,0 +1,51 @@
+import { Container } from "@mui/material";
+import Image from "next/image";
+
+export interface IPageTextTemplate {
+  content: JSX.Element;
+}
+
+const PageTextTemplate: React.FC<IPageTextTemplate> = ({ content }) => {
+  return (
+    <Container
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        height: "100vh",
+        width: "100vh",
+      }}
+    >
+      <Container
+        sx={{
+          height: "140vh",
+          width: "140vh",
+          backgroundColor: "primary.main",
+          opacity: "5%",
+          borderRadius: "50%",
+          marginTop: "-20vh",
+          position: "fixed",
+          zIndex: "-1",
+        }}
+      />
+      <Container
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          flexDirection: "column",
+          marginTop: "-15vh",
+        }}
+      >
+        <Image
+          src={require("/public/icons/logo.svg")}
+          alt=""
+          role="presentation"
+          width={160}
+          height={55}
+        />
+        {content}
+      </Container>
+    </Container>
+  );
+};
+
+export default PageTextTemplate;

src/pages/final.tsx

@@ -0,0 +1,50 @@
+import { Typography } from "@mui/material";
+import { Container } from "@mui/system";
+import type { NextPage } from "next";
+import Image from "next/image";
+
+import AppLink from "src/components/ui/Buttons/AppLink";
+import PageTextTemplate from "src/components/ui/PageTextTemplate/PageTextTemplate";
+
+const FinalPage: NextPage = () => {
+  const content = (
+    <Container
+      sx={{
+        textAlign: "center",
+        marginTop: "15vh",
+        justifyContent: "center",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Image
+        src={require("public/product_assets/images/congrats.svg")}
+        alt=""
+      />
+      <Typography
+        fontSize={60}
+        sx={{
+          color: "primary.main",
+          marginTop: "50px",
+        }}
+      >
+        Félicitations,
+      </Typography>
+      <Typography
+        style={{
+          fontFamily: "fontFamily",
+          fontSize: "30px",
+          color: "primary.main",
+          marginBottom: "5vh",
+        }}
+      >
+        tu as réussi à commander les ingrédients pour réaliser ta tarte aux
+        pommes
+      </Typography>
+      <AppLink text="Retenter l'expérience ?" link="/" />
+    </Container>
+  );
+  return <PageTextTemplate content={content} />;
+};
+
+export default FinalPage;

src/simulators/initilizations/ColorFiltersDefinition.tsx

@@ -6,6 +6,9 @@ const ColorFiltersDefinition = () => (
     version="1.1"
     id="wds-colorBlindnessFilter"
     height="0"
+    style={{
+      position: "absolute",
+    }}
   >
     <defs>
       <filter id={COLOR_FILTER_ID.PROTANOPIA}>