Order Confirmation

<div class="container">
    <nav class="flex items-center min-h-10" aria-label="Fil d'ariane">
        <ol class="flex items-center gap-1 flex-wrap text-body-xs text-black/40">
            <li>
                <a href="#" class="
        
         link-sm
         link-neutral 
        
        
    ">

                    Accueil

                </a>

            </li>

            <li aria-hidden="true" class="text-neutral-500">
                •
            </li>

            <li>
                <span class="font-bold text-black tracking-[0.3px]" aria-current="page">Confirmation de commande</span>
            </li>

        </ol>
    </nav>
</div>

<section class="container grid-layout items-center pt-6 lg:pt-8 3xl:pt-10">
    <div class="col-span-4 sm:col-span-10 md:col-span-6 sm:col-start-2 md:col-start-4 flex flex-col gap-y-4 lg:gap-y-6 3xl:gap-y-10">
        <h1 class="h5 text-center flex flex-row justify-center gap-1.5">
            <span class="text-success"><svg class=" shrink-0" width="32" height="32" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M4.5 12.7546L10.5 18.7546L19.5 5.25464" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg></span>
            Merci de votre achat Marie-Noëlle !
        </h1>
        <div class="flex flex-col items-center gap-4 adjusted-marg-xs text-body-base bg-brand-100 text-center">
            <p>Votre numéro de commande est : <span class="font-bold">1000034279</span></p>
            <p>Un e-mail vous a été envoyé à l'adresse que vous avez renseignée.</p>
        </div>
    </div>
</section>

<section class="adjusted-marg-y-md">
    <div class="@container group h-full
    sm:container py-6">
        <div class="relative h-full
                grid-layout items-center                    ">

            <picture class="absolute inset-0 w-full h-full
                sm:col-start-2 sm:col-span-10                            ">
                <source srcset="/img/banner_cta/img_3.png" media="(min-width: 769px)" />
                <img src="/img/banner_cta/img_3.png" alt="Analyser votre peau" class="object-cover w-full h-full " loading="lazy" />
            </picture>

            <div class="absolute inset-0
            sm:col-start-2 sm:col-span-10                        false mix-blend-overlay        "></div>

            <section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
            
            col-span-4 sm:col-start-2 sm:col-span-10            
            
            w-1/2        ">
                <article class="
                relative flex gap-3 w-full
                flex-col                adjusted-marg-l-sm border-l-8 border-naos                            ">

                    <div class="flex flex-col gap-1.5
                                                        ">

                        <h2 class="h2 [&>span]:font-normal text-black">
                            Mon programme de fidélité MyNaos
                        </h2>

                        <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-black">
                            Découvrez vite vos offres de fidélité dans votre compte client.
                        </p>

                    </div>

                    <div class="flex  items-center gap-4">
                        <a href="#" type="button" class="w-max  btn  btn-dark  btn-outline  btn-size-lg">
                            Accéder à mon compte

                        </a>
                    </div>
                </article>
            </section>
        </div>

    </div>
</section>