feat: New thank you page layout

Author: Berardo Matè

components/composite/StepComplete/index.tsx

@@ -37,7 +37,7 @@ export const StepComplete: React.FC<Props> = ({
 
   return (
     <Base>
-      <ContainerFlex>
+      <Top>
         <Wrapper>
           <Logo
             logoUrl={logoUrl}
@@ -64,6 +64,7 @@ export const StepComplete: React.FC<Props> = ({
                 supportPhone={supportPhone}
               />
             </Message>
+
             {ctx?.returnUrl && (
               <WrapperButton>
                 <Button data-cy="button-continue-to-shop" onClick={handleClick}>
@@ -74,21 +75,36 @@ export const StepComplete: React.FC<Props> = ({
               </WrapperButton>
             )}
           </Main>
+        </Wrapper>
+      </Top>
+      <Bottom>
+        <Wrapper>
+          <Recap>
+            <RecapSummary>Summary</RecapSummary>
+            <RecapCustomer>Customer</RecapCustomer>
+          </Recap>
           <Footer />
         </Wrapper>
-      </ContainerFlex>
+      </Bottom>
     </Base>
   )
 }
 
 const ContainerFlex = styled.div`
   ${tw`w-full min-h-full flex min-h-inherit 2xl:max-w-screen-2xl 2xl:mx-auto`}
 `
+const Top = styled.div`
+  ${tw`bg-white`}
+`
+const Bottom = styled.div`
+  ${tw`bg-gray-100`}
+`
+
 const Main = styled.div`
-  ${tw`flex flex-col flex-1 justify-center items-center text-center`}
+  ${tw`flex flex-col flex-1 justify-center items-center text-center pb-8`}
 `
 const Wrapper = styled.div`
-  ${tw`flex flex-col flex-1 p-5 md:p-10 lg:px-20 lg:pb-10 2xl:px-0`}
+  ${tw`flex flex-col p-5 md:p-10 lg:px-20 2xl:(max-w-screen-2xl mx-auto)`}
 `
 const Title = styled.h1`
   ${tw`text-2xl lg:text-4xl font-semibold mb-4`}
@@ -103,5 +119,14 @@ const Message = styled.div`
   }
 `
 const WrapperButton = styled.div`
-  ${tw`flex items-center justify-center pt-5`}
+  ${tw`flex items-center justify-center`}
+`
+const Recap = styled.div`
+  ${tw`md:(grid auto-cols-fr grid-flow-col gap-4)`}
+`
+const RecapSummary = styled.div`
+  ${tw``}
+`
+const RecapCustomer = styled.div`
+  ${tw``}
 `