theodo · RobinCar · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/src/components/ui/Cards/ObjectiveCard/ObjectiveCard.tsx b/src/components/ui/Cards/ObjectiveCard/ObjectiveCard.tsx
@@ -5,6 +5,7 @@ const ObjectiveCard: React.FC = () => {
   return (
     <Paper
       sx={{
+        minWidth: "330px",
         width: "330px",
         height: "300px",
         borderRadius: "8px",

diff --git a/src/components/ui/FinalPage/FailureComponent.tsx b/src/components/ui/FinalPage/FailureComponent.tsx
@@ -10,34 +10,41 @@ const FailureComponent: React.FC<IFailureComponent> = ({
   missingCartTitles,
 }) => {
   return (
-    <Container>
+    <Container
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        textAlign: "center",
+        rowGap: "1em",
+      }}
+    >
       <Image src={require("/public/icons/smiley-sad.svg")} alt="" />
-      <Typography
-        fontSize={60}
-        sx={{
-          color: "primary.main",
-          marginTop: "20px",
-        }}
-      >
-        Dommage,
-      </Typography>
-      <Typography
-        style={{
-          fontFamily: "fontFamily",
-          fontSize: "20px",
-          color: "primary.main",
-          marginBottom: "5px",
-        }}
-      >
-        Tu as oublié d&apos;ajouter les ingrédients suivants à ton panier :
-        <List sx={{ listStyleType: "disc" }}>
-          {missingCartTitles.map((title) => (
-            <ListItem sx={{ display: "list-item" }} key={title}>
-              {title}
-            </ListItem>
-          ))}
-        </List>
-      </Typography>
+      <Container sx={{ width: "700px", textAlign: "center" }}>
+        <Typography fontSize={60} color="primary.main">
+          Dommage,
+        </Typography>
+        <Container
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Typography fontSize={20} fontWeight={700} textAlign="center">
+            Tu as oublié d&apos;ajouter les ingrédients suivants à ton panier :
+          </Typography>
+          <Typography fontSize={20} fontWeight={700} textAlign="center">
+            <List sx={{ listStyleType: "disc" }}>
+              {missingCartTitles.map((title) => (
+                <ListItem sx={{ display: "list-item", padding: 0 }} key={title}>
+                  {title}
+                </ListItem>
+              ))}
+            </List>
+          </Typography>
+        </Container>
+      </Container>
     </Container>
   );
 };

diff --git a/src/components/ui/FinalPage/SucessComponent.tsx b/src/components/ui/FinalPage/SucessComponent.tsx
@@ -3,27 +3,25 @@ import { Container } from "@mui/system";
 import Image from "next/image";
 
 const SuccessComponent = (
-  <Container>
+  <Container
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      rowGap: "1em",
+    }}
+  >
     <Image src={require("public/icons/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>
+    <Container sx={{ width: "700px", textAlign: "center" }}>
+      <Typography fontSize={60} color="primary.main">
+        Félicitations,
+      </Typography>
+      <Typography fontSize={20} fontWeight={700} textAlign="center">
+        tu as réussi à commander les ingrédients pour réaliser ta tarte aux
+        pommes
+      </Typography>
+    </Container>
   </Container>
 );
 

diff --git a/src/components/ui/PageTextTemplate/PageTextTemplate.tsx b/src/components/ui/PageTextTemplate/PageTextTemplate.tsx
@@ -11,8 +11,8 @@ const PageTextTemplate: React.FC<IPageTextTemplate> = ({ content }) => {
       sx={{
         display: "flex",
         justifyContent: "center",
-        height: "100vh",
-        width: "100vh",
+        minHeight: "100vh",
+        width: "auto",
       }}
     >
       <Container
@@ -30,19 +30,24 @@ const PageTextTemplate: React.FC<IPageTextTemplate> = ({ content }) => {
       <Container
         sx={{
           display: "flex",
-          justifyContent: "center",
           flexDirection: "column",
-          marginTop: "-15vh",
+          rowGap: "2em",
+          margin: "30px 0",
         }}
       >
         <Image
           src={require("/public/icons/logo.svg")}
           alt=""
           role="presentation"
           width={160}
-          height={55}
+          height={40}
+          style={{ justifySelf: "top" }}
         />
-        {content}
+        <Container
+          sx={{ height: "100%", display: "flex", justifyContent: "center" }}
+        >
+          {content}
+        </Container>
       </Container>
     </Container>
   );

diff --git a/src/pages/final.tsx b/src/pages/final.tsx
@@ -26,11 +26,11 @@ const FinalPage: NextPage = () => {
   const content = (
     <Container
       sx={{
-        textAlign: "center",
-        marginTop: "15vh",
-        justifyContent: "center",
         display: "flex",
         flexDirection: "column",
+        justifyContent: "center",
+        textAlign: "center",
+        rowGap: "2em",
       }}
     >
       {isCartValid ? SuccessComponent : FailureComponent({ missingCartTitles })}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -20,19 +20,20 @@ const Home: NextPage = () => {
 
   const presentationText = (
     <Typography>
-      A11Y INYERFACE est un projet visant à{" "}
+      A11Y INYERFACE est un projet visant à vous faire{" "}
       <Box component="span" sx={emphasisStyle}>
-        sensibiliser les utilisateurs aux principes de l&apos;accessibilité{" "}
+        vivre l&apos;expérience de personas handicapés{" "}
       </Box>
-      et à les encourager à{" "}
+      grâce à des simulations interactives. En vous mettant dans leur peau, vous
+      découvrirez{" "}
       <Box component="span" sx={emphasisStyle}>
-        adopter des pratiques{" "}
+        les défis auxquels ils sont confrontés au quotidien.{" "}
       </Box>{" "}
-      qui rendent le web{" "}
+      Notre objectif est de{" "}
       <Box component="span" sx={emphasisStyle}>
-        plus inclusif
+        sensibiliser à l&apos;importance de l&apos;accessibilité pour un web
+        plus inclusif.
       </Box>{" "}
-      pour tous.
     </Typography>
   );
 
@@ -43,16 +44,23 @@ const Home: NextPage = () => {
         flexDirection: "column",
         justifyContent: "center",
         textAlign: "center",
-        marginTop: "3em",
-        width: "120%",
-        marginLeft: "-10%",
-        marginBottom: "-5em",
+        rowGap: "1em",
       }}
     >
-      {presentationText}
-      <Stack py="2em" spacing="5em" textAlign="center" justifyContent="center">
-        <Stack direction="row" justifyContent="space-around" spacing="5em">
-          <Image src={require("/public/images/apple-pie.jpeg")} alt="" />
+      <Typography variant="h1" fontSize={40} color="primary.main">
+        A11Y INYERFACE
+      </Typography>
+      <Container sx={{ width: "800px" }}>{presentationText}</Container>
+      <Stack spacing="2em" textAlign="center" justifyContent="center">
+        <Stack direction="row" justifyContent="center" spacing="5em">
+          <Image
+            src={require("/public/images/apple-pie.jpeg")}
+            alt=""
+            width={330}
+            height={300}
+            objectFit="cover"
+            style={{ borderRadius: "8px" }}
+          />
           <ObjectiveCard />
         </Stack>
         <AppLink text="Commencer l'expérience" link="/fruits" />