update

src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss

@@ -0,0 +1,48 @@
+@import '../../../../styles/utilities';
+
+.checkoutSuccessWrapper {
+    @apply flex items-center justify-center;
+    margin-top: -3.2rem;
+    
+    .checkoutSuccess {
+        border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%;
+        max-width: 77.6rem;
+        height: fit-content;
+        background: 
+            url('./assets/veget.png') left 0 top 0 no-repeat,
+            url('./assets/fish.png') right 0 top 0 no-repeat,
+            url('./assets/freezeShrimp.png') right 0 bottom 0 no-repeat,
+            url('./assets/coffeeBean.png') left 0 bottom 0 no-repeat;
+        background-color: #E3F2E9;
+    
+        .checkoutContent {
+            @apply text-center;
+            margin: 7.2rem 4.8rem 6.4rem 4.8rem;
+
+            .checkoutMsg {
+                @apply heading-1 font-heading;
+                margin-top: 3.2rem;
+                margin-bottom: 1.6rem;
+            }
+        
+            .checkoutSubMsg {
+                @apply sub-headline;
+                margin-bottom: 4rem;
+            }
+        
+            .backToHomeBtn {
+                @apply flex cursor-pointer font-bold items-center justify-center;
+                color: white;
+                background-color: var(--primary);
+                margin: auto;
+                // border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; // to do
+                width: fit-content;
+                padding: 1.6rem 3.2rem 1.6rem 3.2rem;
+        
+                .arrowRight {
+                    margin-left: 1.4rem;
+                }
+            }
+        }
+    }
+}

src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import s from './CheckoutSuccess.module.scss';
+
+import Image from "next/image";
+import Link from "next/link";
+
+import checkIcon from './assets/checkIcon.png';
+
+const CheckoutSuccess = () => {
+    
+    return (
+        <div className={s.checkoutSuccessWrapper}>
+            <div className={s.checkoutSuccess}>
+                <div className={s.checkoutContent}>
+                    <div>
+                        <Image src={checkIcon} alt="check icon" />
+                    </div>
+
+                    <div className={s.checkoutMsg}>Your purchase has been successed!</div>
+                    <div className={s.checkoutSubMsg}>Last call! Shop deep deals on 100+ bulk picks while you can.</div>
+                    
+                    <div>
+                        <Link href="/">
+                            <a className={s.backToHomeBtn}>Back to home
+                                <div className={s.arrowRight}>
+                                    <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M11.92 6.61994C11.8724 6.49719 11.801 6.38505 11.71 6.28994L6.71 1.28994C6.61676 1.1967 6.50607 1.12274 6.38425 1.07228C6.26243 1.02182 6.13186 0.99585 6 0.99585C5.7337 0.99585 5.4783 1.10164 5.29 1.28994C5.19676 1.38318 5.1228 1.49387 5.07234 1.61569C5.02188 1.73751 4.99591 1.86808 4.99591 1.99994C4.99591 2.26624 5.1017 2.52164 5.29 2.70994L8.59 5.99994H1C0.734784 5.99994 0.48043 6.1053 0.292893 6.29283C0.105357 6.48037 0 6.73472 0 6.99994C0 7.26516 0.105357 7.51951 0.292893 7.70705C0.48043 7.89458 0.734784 7.99994 1 7.99994H8.59L5.29 11.2899C5.19627 11.3829 5.12188 11.4935 5.07111 11.6154C5.02034 11.7372 4.9942 11.8679 4.9942 11.9999C4.9942 12.132 5.02034 12.2627 5.07111 12.3845C5.12188 12.5064 5.19627 12.617 5.29 12.7099C5.38296 12.8037 5.49356 12.8781 5.61542 12.9288C5.73728 12.9796 5.86799 13.0057 6 13.0057C6.13201 13.0057 6.26272 12.9796 6.38458 12.9288C6.50644 12.8781 6.61704 12.8037 6.71 12.7099L11.71 7.70994C11.801 7.61484 11.8724 7.50269 11.92 7.37994C12.02 7.13648 12.02 6.8634 11.92 6.61994Z" fill="white"/>
+                                    </svg>
+                                </div>
+                            </a>
+                        </Link>
+                        
+                    </div>
+                </div>
+
+                <div className={s.cornerImgs}>
+                    
+                    
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutSuccess