Feature Grid with CTA Card and App Preview

<div class="flex flex-col z-10 w-full relative gap-x-16 gap-y-16 m-8 max-w-5xl my-20 mx-auto">

    <!-- Top Feature Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">

        <!-- Feature 1 -->
        <div class="flex flex-col gap-4">
            <div class="text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="28" height="28"
                    viewBox="0 0 24 24" class="">
                    <path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2"
                        opacity=".5" class="">
                    </path>
                    <path fill="currentColor"
                        d="M12 6a1 1 0 0 1 1 1v4.586l2.707 2.707a1 1 0 0 1-1.414 1.414l-3-3A1 1 0 0 1 11 12V7a1 1 0 0 1 1-1"
                        class="">
                    </path>
                </svg>
            </div>
            <p class="leading-relaxed text-base font-medium text-zinc-900 font-normal">
                Your learning path adapts based on progress and skill assessments.
            </p>
        </div>

        <!-- Feature 2 -->
        <div class="flex flex-col gap-4">
            <div class="text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="28" height="28"
                    viewBox="0 0 24 24" class="">
                    <path fill="currentColor"
                        d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12"
                        opacity=".5" class=""></path>
                    <path fill="currentColor"
                        d="M12 7.75a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8.5a.75.75 0 0 1 .75-.75"
                        class="">
                    </path>
                </svg>
            </div>
            <p class="leading-relaxed text-base font-medium text-zinc-900 font-normal">
                The system knows when to push or hold back — based on mastery zones.
            </p>
        </div>

        <!-- Feature 3 -->
        <div class="flex flex-col gap-4">
            <div class="text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="28" height="28"
                    viewBox="0 0 24 24" class="">
                    <path fill="currentColor"
                        d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22"
                        opacity=".5" class=""></path>
                    <path fill="currentColor"
                        d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0"
                        class="">
                    </path>
                </svg>
            </div>
            <p class="leading-relaxed text-base font-medium text-zinc-900 font-normal">
                No more switching platforms. Theory, practice, and labs unified.
            </p>
        </div>

        <!-- Feature 4 -->
        <div class="flex flex-col gap-4">
            <div class="text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="28" height="28"
                    viewBox="0 0 24 24" class="">
                    <path fill="currentColor"
                        d="M19.83 8.7L12 2.1a.08.08 0 0 0-.07 0L4.17 8.7A1 1 0 0 0 4 9.6V20a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.6a1 1 0 0 0-.17-.9"
                        opacity=".5" class=""></path>
                    <path fill="currentColor" d="M12.75 18a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 1.5 0z" class=""></path>
                </svg>
            </div>
            <p class="leading-relaxed text-base font-medium text-zinc-900 font-normal">
                Portfolio, skills, and credentials tracked. Always know your value.
            </p>
        </div>

    </div>

    <!-- Main CTA Card -->
    <div
        class="overflow-hidden min-h-[500px] lg:min-h-[600px] shadow-zinc-900/30 bg-zinc-900 rounded-[2rem] relative shadow-2xl">

        <!-- Grid Pattern Overlay -->
        <div class="absolute inset-0 opacity-10"
            style="background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px;">
        </div>

        <!-- Content Container -->
        <div class="grid grid-cols-1 lg:grid-cols-1 min-h-[500px] lg:min-h-[600px] relative h-full">

            <!-- Left: Text Content -->
            <div
                class="flex flex-col md:p-12 lg:p-16 bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a5387a0b-52c6-40c2-b3be-ef86329b19cc_1600w.webp)] bg-cover pt-8 pr-8 pb-8 pl-8 saturate-50 justify-center">
                <h2 class="md:text-4xl lg:text-5xl leading-tight text-3xl font-normal text-white tracking-tight mb-8">We
                    unify your missions, telemetry, and crew insights into one adaptive command console that evolves as
                    you explore deeper into space — no clutter, no guesswork.</h2>

                <button class="group flex items-center gap-3 bg-white hover:bg-zinc-100 transition-all text-zinc-900 text-sm font-medium rounded-full px-6 py-3 w-fit shadow-lg hover:shadow-xl hover:-translate-y-0.5">
                    <span class="">Try For Free</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:translate-x-1 transition-transform"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>

                <!-- Trusted By -->
                <div class="mt-12 pt-8 border-t border-white/10">
                    <p class="text-xs text-white/50 uppercase tracking-widest mb-4 font-medium">Trusted by teams at
                    </p>
                    <div class="flex flex-wrap items-center gap-6 opacity-60">
                        <!-- Coinbase -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="20" viewBox="0 0 512 127.964"
                            style="color: rgb(255, 255, 255); width: 100px; height: 20px;" class="w-[100px] h-[20px]"
                            data-logos="linear" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
                            <path fill="#ffffff"
                                d="m4.086 51.292l72.586 72.587c1.06 1.06.549 2.859-.924 3.134a64 64 0 0 1-7.508.947a1.9 1.9 0 0 1-1.46-.554L.558 61.184a1.9 1.9 0 0 1-.554-1.46c.17-2.546.489-5.051.948-7.507c.275-1.473 2.074-1.984 3.134-.925M2.04 80.682c-.484-1.806 1.65-2.946 2.973-1.623l43.893 43.893c1.322 1.322.183 3.457-1.624 2.972c-22.009-5.9-39.34-23.233-45.242-45.242m6.362-48.609c.616-1.067 2.073-1.23 2.945-.36l84.904 84.905c.871.871.708 2.328-.36 2.945a64 64 0 0 1-5.548 2.851a1.885 1.885 0 0 1-2.11-.394L5.945 39.732a1.885 1.885 0 0 1-.395-2.11a64 64 0 0 1 2.852-5.549M63.912 0c35.375 0 64.052 28.677 64.052 64.052c0 18.78-8.081 35.672-20.957 47.387c-.743.677-1.883.632-2.594-.079L16.604 23.551a1.88 1.88 0 0 1-.079-2.594C28.241 8.082 45.133 0 63.912 0m194.14 35.248c4.591 0 8.313-3.735 8.313-8.343s-3.722-8.343-8.313-8.343c-4.59 0-8.312 3.735-8.312 8.343c0 4.507 3.561 8.18 8.014 8.338zm-71.202 72.761V18.567h14.773v76.356h39.83v13.086zm105.144-36.497v36.497H277.7V44.62h14.115v10.865l.179-.12q2.153-5.102 6.938-8.524q4.784-3.482 12.201-3.482q6.578 0 11.961 2.942q5.383 2.88 8.612 8.464q3.23 5.583 3.23 13.686v39.56h-14.294V70.43q0-7.203-3.828-10.925q-3.766-3.781-10.108-3.782q-4.066 0-7.415 1.681q-3.35 1.68-5.323 5.163q-1.974 3.48-1.974 8.944m147.608-28.154q5.98 0 10.764 1.561q4.786 1.5 8.134 4.322q3.41 2.821 5.204 6.664q1.793 3.84 1.794 8.464v43.64h-13.696v-8.944h-.239q-1.435 2.701-3.888 4.982q-2.392 2.282-6.1 3.662q-3.708 1.32-8.912 1.32q-6.338 0-11.243-2.1q-4.904-2.16-7.775-6.363q-2.87-4.263-2.87-10.565q0-5.463 2.033-8.944a15.7 15.7 0 0 1 5.502-5.583q3.529-2.1 8.014-3.182q4.485-1.08 9.33-1.62l2.647-.301q4.076-.472 6.684-.84q3.467-.48 4.904-1.5q1.494-1.022 1.495-3.182v-.48q0-2.881-1.436-5.043q-1.436-2.16-4.126-3.421q-2.632-1.26-6.4-1.261t-6.638 1.26q-2.871 1.2-4.546 3.362a9.16 9.16 0 0 0-1.914 4.922h-13.816q.3-5.882 3.648-10.565q3.35-4.681 9.271-7.443q5.981-2.822 14.175-2.822m11.84 34.037q-.582.426-1.783.806l-.31.094q-1.374.42-3.348.84l-4.246.78q-2.274.361-4.666.721q-3.29.42-6.1 1.501t-4.546 2.941q-1.674 1.86-1.674 4.863q0 3.84 3.05 6.063q3.05 2.16 8.195 2.16q5.082 0 8.552-1.86q3.468-1.92 5.142-4.983q1.735-3.12 1.735-6.843zm26.527 30.614V44.62h13.755v10.445h.18q1.735-5.403 5.442-8.224q3.768-2.88 9.869-2.881q1.496 0 2.69.12l1.49.08q.326.02.605.04v12.906l-.322-.046a67 67 0 0 0-2.429-.254a46 46 0 0 0-4.187-.18q-3.529 0-6.46 1.62q-2.93 1.622-4.664 4.983q-1.675 3.301-1.675 8.344v36.437zm-227.094 0V44.62h14.294v63.39zM374.38 43.18q6.758 0 12.26 2.4q5.564 2.401 9.51 6.844q3.947 4.382 6.1 10.445q2.153 6.003 2.154 13.326v3.842h-45.976q.165 4.962 1.957 8.884q1.974 4.263 5.742 6.663q3.827 2.402 9.15 2.402q3.947 0 6.938-1.201q2.99-1.2 4.963-3.302a12.9 12.9 0 0 0 2.932-4.982h13.456q-1.196 6.183-5.203 10.925q-4.007 4.683-10.048 7.384q-5.98 2.64-13.277 2.641q-9.45 0-16.328-4.262q-6.877-4.261-10.585-11.706q-3.709-7.503-3.709-17.108q0-9.665 3.828-17.168T358.83 47.44q6.76-4.261 15.55-4.262m.179 11.525q-4.904 0-8.553 2.221q-3.586 2.22-5.62 6.303q-1.452 2.956-1.836 6.723h32.078q-.384-3.766-1.834-6.723q-1.974-4.082-5.622-6.303q-3.649-2.22-8.613-2.221"
                                class="">
                            </path>
                        </svg>
                        <!-- Chainlink -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="20" viewBox="0 0 512 99"
                            style="color: rgb(255, 255, 255); width: 80px; height: 20px;" class="w-[80px] h-[20px]"
                            data-logos="zendesk" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
                            <path fill="#ffffff"
                                d="M340.962 29.149c21.899 0 34.319 16.728 33.204 39.946h-51.657c1.49 9.834 10.433 16.77 20.328 15.765a25.35 25.35 0 0 0 18.199-7.097l9.023 9.784a35.5 35.5 0 0 1-27.12 10.747c-22.052 0-36.297-14.701-36.297-34.573a33.81 33.81 0 0 1 34.32-34.572m-236.382 0c21.9 0 34.319 16.728 33.204 39.946H86.178c1.49 9.812 10.4 16.74 20.277 15.765a25.35 25.35 0 0 0 18.2-7.097l9.023 9.784a35.5 35.5 0 0 1-27.121 10.747c-22.052 0-36.296-14.701-36.296-34.573A33.81 33.81 0 0 1 104.58 29.15m333.51 12.42l-11.812 6.894a17.13 17.13 0 0 0-14.853-7.554c-7.553 0-11.406 3.7-11.406 7.96c0 4.257 6.083 6.082 15.664 8.211l.656.145l.658.148q.495.111.991.229l.662.158q.331.08.663.163l.663.168l.661.174c9.364 2.507 18.264 6.865 18.264 18.586c0 9.175-7.96 21.494-26.817 21.392a31.02 31.02 0 0 1-29.098-15.36l12.724-6.843a18.91 18.91 0 0 0 16.982 9.682c7.96 0 12.065-4.106 12.065-8.77s-7.705-6.489-16.07-8.212l-.678-.145l-.679-.148l-.34-.076l-.678-.154c-10.504-2.427-20.588-6.518-20.588-19.247c0-10.494 10.138-20.278 25.65-20.278a30.42 30.42 0 0 1 26.716 12.876M293.31 0v96.925h-14.093V87.8a28.24 28.24 0 0 1-22.152 10.494a33.41 33.41 0 0 1-33.103-34.573A33.103 33.103 0 0 1 257.166 29.2a28.59 28.59 0 0 1 22.051 10.139V0zM58.297 30.77v12.978L18.452 84.303h40.555v12.774H0V84.15l39.845-40.554H.912V30.771zM464.399 0v63.468l29.858-33.052h17.135l-25.904 28.439L512 96.925h-15.867l-20.581-29.453l-11.153 12.218v17.286h-14.092V0zM182.09 29.2c16.73 0 30.822 10.898 30.822 28.945v38.78h-14.498V59.92c0-10.848-5.272-17.388-15.918-17.388a15.715 15.715 0 0 0-16.78 17.388v37.006H151.37v-38.78c0-18.047 13.99-28.946 30.72-28.946m76.902 13.534c-11.59 0-20.987 9.396-20.987 20.987s9.396 20.987 20.987 20.987s20.987-9.396 20.987-20.987s-9.396-20.987-20.987-20.987m63.468 15.259l36.144.05c-.491-9.14-8.298-16.153-17.439-15.664c-9.38-.55-17.57 6.287-18.705 15.614m-236.28 0l36.042.05c-.518-9.12-8.316-16.102-17.438-15.613c-9.325-.498-17.448 6.297-18.605 15.563"
                                class="">
                            </path>
                        </svg>
                        <!-- Uniswap -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="90" height="20" viewBox="0 0 512 89"
                            style="color: rgb(255, 255, 255); width: 90px; height: 20px;" class="w-[90px] h-[20px]"
                            data-logos="apache-superset" data-icon-set="logos" data-icon-replaced="true"
                            stroke-width="2">
                            <path fill="#ffffff"
                                d="M125.807 0c-14.517 0-27.89 8.167-40.814 22.437C72.293 7.943 58.696 0 43.506 0C18.354 0 0 17.95 0 42.115s18.354 41.89 43.506 41.89c15.46 0 27.441-7.247 40.814-21.696c12.924 14.494 26.072 21.742 41.487 21.742c25.152-.045 43.506-17.703 43.506-41.936C169.313 17.883 150.959 0 125.807 0M43.686 58.651c-10.658 0-17.008-7.022-17.008-16.312c0-9.289 6.35-16.514 17.008-16.514c8.975 0 16.312 7.225 24.255 16.963c-7.495 9.065-15.415 15.863-24.255 15.863m81.358 0c-8.84 0-16.312-7.022-24.255-16.312c8.167-9.737 15.19-16.514 24.255-16.514c10.658 0 16.94 7.315 16.94 16.514c0 9.2-6.282 16.312-16.94 16.312"
                                class="">
                            </path>
                            <path fill="#ffffff"
                                d="m103.257 78.015l16.918-20.194c-6.731-2.02-12.946-8.077-19.386-15.594L84.319 62.31a74 74 0 0 0 18.938 15.706M84.993 22.415A76.1 76.1 0 0 0 66.168 6.35l-16.94 20.418c6.44 2.244 12.138 8.032 18.197 15.414l.673.472z"
                                class="">
                            </path>
                            <path fill="#ffffff"
                                d="M222.13 56.453a6.73 6.73 0 0 0-2.378-5.363a24.2 24.2 0 0 0-6.878-3.443l-1.49-.416a47.1 47.1 0 0 1-15.707-7.135a13.47 13.47 0 0 1-5.34-11.219a14 14 0 0 1 6.125-11.712a25.3 25.3 0 0 1 15.706-4.488a23.47 23.47 0 0 1 15.707 5.116a15.33 15.33 0 0 1 5.834 11.486v1.348h-11.354a8.5 8.5 0 0 0-2.715-6.552a10.77 10.77 0 0 0-7.584-2.49c-2.587-.16-5.151.57-7.27 2.064a6.73 6.73 0 0 0-2.557 5.34a5.73 5.73 0 0 0 2.58 4.667a37.7 37.7 0 0 0 9.424 3.972a36.7 36.7 0 0 1 14.629 7.09a14.75 14.75 0 0 1 4.98 10.5l.001 1.1a13.88 13.88 0 0 1-5.923 11.825a25.72 25.72 0 0 1-15.707 4.33a28.45 28.45 0 0 1-16.626-4.914a15.37 15.37 0 0 1-6.938-12.682l.027-1.341h11.645a8.99 8.99 0 0 0 3.187 7.65a14.43 14.43 0 0 0 8.975 2.424c2.582.175 5.151-.52 7.292-1.974a6.25 6.25 0 0 0 2.356-5.183m45.504 8.997a14.7 14.7 0 0 1-5.093 5.25c-5.866 3.25-13.227 2.2-17.95-2.557q-3.86-4.488-3.86-13.642V28.316H252.4v26.32a11.4 11.4 0 0 0 1.593 6.73a5.66 5.66 0 0 0 4.056 2.067l.678-.002c1.654.036 3.294-.27 4.824-.898a8.14 8.14 0 0 0 3.276-2.692V28.316h11.712v43.372h-9.984zm58.045-14.248a24.8 24.8 0 0 1-4.487 15.482a14.73 14.73 0 0 1-12.43 5.856a14.1 14.1 0 0 1-6.058-1.256a12.6 12.6 0 0 1-4.488-3.725v20.822H286.55V28.316h10.545l.696 5.116a14.04 14.04 0 0 1 4.622-4.376a12.6 12.6 0 0 1 6.327-1.548a14.44 14.44 0 0 1 12.498 6.305a27.98 27.98 0 0 1 4.487 16.56zm-11.712-.897a21.3 21.3 0 0 0-2.042-9.962a6.74 6.74 0 0 0-6.26-3.815a8.84 8.84 0 0 0-4.487 1.077a8.03 8.03 0 0 0-2.962 3.097V59.75a7.3 7.3 0 0 0 2.962 2.805a9.7 9.7 0 0 0 3.56.944l.927.02a6.74 6.74 0 0 0 6.238-3.343a17.57 17.57 0 0 0 1.997-8.975zm38.784 22.216l-1.627.02a19.56 19.56 0 0 1-15.011-6.014a21.53 21.53 0 0 1-5.617-13.984l.008-2.889a23.73 23.73 0 0 1 5.317-15.93c7.418-7.86 19.97-8.275 27.89-.92a20.38 20.38 0 0 1 4.891 14.315v6.372h-25.96v.247a11.22 11.22 0 0 0 2.872 7.023a8.98 8.98 0 0 0 6.91 2.76a22.8 22.8 0 0 0 6.463-.786a29.8 29.8 0 0 0 5.61-2.468l3.163 7.247a21.6 21.6 0 0 1-6.933 3.59a29.8 29.8 0 0 1-7.976 1.417m-2.682-35.88a6.13 6.13 0 0 0-5.138 2.49a12.9 12.9 0 0 0-2.244 6.53l.112.201h14.36V44.83a9.4 9.4 0 0 0-1.75-5.968a6.29 6.29 0 0 0-5.34-2.334zm48.375 1.727h-4.308a7.83 7.83 0 0 0-4.285 1.077a6.86 6.86 0 0 0-2.558 3.052v29.19h-11.668v-43.37h10.927l.516 6.416c.866-2.07 2.23-3.9 3.972-5.318a8.8 8.8 0 0 1 5.61-1.907q.811-.007 1.615.135l1.503.336zm29.214 21.383a4.09 4.09 0 0 0-1.863-3.343a19.2 19.2 0 0 0-5.458-2.19l-1.452-.278a28 28 0 0 1-11.6-4.645a10.01 10.01 0 0 1-3.927-8.347a11.97 11.97 0 0 1 4.712-9.536a19.17 19.17 0 0 1 12.61-3.904a20.8 20.8 0 0 1 13.215 3.882a11.53 11.53 0 0 1 4.716 8.868l-.004 1.206h-11.219a5.77 5.77 0 0 0-1.66-4.263a6.74 6.74 0 0 0-4.13-1.648l-.761.01a6.74 6.74 0 0 0-4.488 1.391a4.35 4.35 0 0 0-1.615 3.456a3.93 3.93 0 0 0 1.705 3.298a18.6 18.6 0 0 0 6.91 2.244c4.282.63 8.36 2.244 11.915 4.712a10.35 10.35 0 0 1 3.882 8.548a11.45 11.45 0 0 1-5.004 9.581a21.8 21.8 0 0 1-13.238 3.702a20.05 20.05 0 0 1-13.687-4.487a12.26 12.26 0 0 1-4.916-8.818l-.043-1.279h10.703a6.03 6.03 0 0 0 2.244 5.048c1.393.924 3 1.46 4.656 1.562l.998.01a8.1 8.1 0 0 0 4.936-1.302a4.11 4.11 0 0 0 1.863-3.478M466.4 72.52l-1.63.02a19.5 19.5 0 0 1-14.989-6.014a21.53 21.53 0 0 1-5.617-13.984l.008-2.889a23.83 23.83 0 0 1 5.295-15.93c7.418-7.86 19.97-8.275 27.89-.92a20.2 20.2 0 0 1 4.869 14.315v6.372H456.31v.247a11.22 11.22 0 0 0 2.85 7.023a8.98 8.98 0 0 0 5.962 2.755l.971.004a22.6 22.6 0 0 0 6.44-.785a29.3 29.3 0 0 0 5.631-2.468l3.164 7.247a21.8 21.8 0 0 1-6.933 3.59a30 30 0 0 1-7.995 1.417m-2.663-35.88a6.08 6.08 0 0 0-5.138 2.49a12.94 12.94 0 0 0-2.244 6.53l.135.201h14.36V44.83a9.4 9.4 0 0 0-1.75-5.968a6.29 6.29 0 0 0-5.363-2.334zm40.275-18.96v10.635h7.315v8.212h-7.315V58.63a5.12 5.12 0 0 0 1.055 3.612a3.7 3.7 0 0 0 2.805 1.077q.789.006 1.57-.112a14 14 0 0 0 1.548-.336L512 71.33c-1.126.392-2.282.7-3.455.92q-1.203.193-2.419.259l-1.216.032a12.48 12.48 0 0 1-9.334-3.32a14.63 14.63 0 0 1-3.276-10.546V36.528h-6.327v-8.212h6.327V17.681z"
                                class="">
                            </path>
                        </svg>
                        <!-- Aave -->

                    </div>
                </div>
            </div>

            <!-- Right: App Preview -->
            <div
                class="lg:justify-end lg:p-0 lg:pr-12 -bottom-40 lg:scale-100 hidden sm:block pt-8 pr-12 pb-8 pl-8 absolute right-0 scale-50 items-end justify-center">
                <!-- Phone Mockup -->
                <div class="relative w-[280px] md:w-[320px] transform translate-y-8 lg:translate-y-16">
                    <!-- Phone Frame -->
                    <div class="bg-zinc-800 rounded-[2.5rem] pt-3 pr-3 pb-3 pl-3 relative shadow-2xl"
                        style="box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)">
                        <!-- Notch -->


                        <!-- Screen -->
                        <div class="relative bg-white rounded-[2rem] overflow-hidden">
                            <!-- Status Bar -->
                            <div class="flex items-center justify-between px-6 py-3 bg-zinc-50">
                                <span class="text-xs font-semibold text-zinc-900">9:41</span>
                                <div class="flex items-center gap-1">
                                    <div class="w-4 h-2 bg-zinc-400 rounded-sm"></div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                        class="text-zinc-400">
                                        <path fill="currentColor"
                                            d="M12 3C7.5 3 3.75 4.95 1 8l11 13l11-13c-2.75-3.05-6.5-5-11-5" class="">
                                        </path>
                                    </svg>
                                    <div class="w-6 h-3 border border-zinc-400 rounded-sm relative">
                                        <div class="absolute inset-0.5 bg-emerald-500 rounded-sm" style="width: 70%;">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- App Content -->
                            <div class="p-5 space-y-5">
                                <!-- Greeting -->
                                <div class="flex items-center justify-between">
                                    <div class="">
                                        <p class="text-lg font-normal text-zinc-900 tracking-tight">Hi, Marcus</p>
                                    </div>
                                    <div class="w-8 h-8 bg-zinc-100 rounded-full flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" class="text-zinc-600">
                                            <path fill="currentColor"
                                                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
                                                class="">
                                            </path>
                                        </svg>
                                    </div>
                                </div>

                                <!-- Daily Suggestion Card -->
                                <div class="bg-zinc-700 rounded-2xl px-4 py-4">
                                    <p class="text-[10px] text-zinc-400 uppercase tracking-wider mb-1">Today's
                                        suggestion</p>
                                    <p class="text-base font-normal text-white tracking-tight mb-3">Complete Module
                                        3
                                    </p>
                                    <div class="space-y-2">
                                        <div class="h-1.-700 rounded-full overflow-hidden">
                                            <div class="h-full bg-gradient-to-r from-indigo-500 to-violet-500 rounded-full"
                                                style="width: 65%;"></div>
                                        </div>
                                        <div class="flex justify-between text-[10px]">
                                            <span class="text-zinc-400">2h 15m · Zone 2</span>
                                            <span class="text-indigo-400">65%</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Weekly Progress Card -->
                                <div class="bg-zinc-50 border border-zinc-100 rounded-2xl p-4">
                                    <p class="text-[10px] text-zinc-400 uppercase tracking-wider mb-1">Weekly
                                        Progress
                                    </p>
                                    <p class="text-xl font-normal text-zinc-900 tracking-tight mb-2">87% Learning
                                        Load</p>
                                    <div class="flex items-center gap-2">
                                        <div class="flex-1 h-2 bg-zinc-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-emerald-500 rounded-full" style="width: 87%;">
                                            </div>
                                        </div>
                                        <span class="text-[10px] text-emerald-600 font-medium">Optimal</span>
                                    </div>
                                </div>

                                <!-- XP Balance Card -->
                                <div class="bg-zinc-50 border border-zinc-100 rounded-2xl p-4">
                                    <p class="text-[10px] text-zinc-400 uppercase tracking-wider mb-1">XP Balance
                                    </p>
                                    <div class="flex items-baseline gap-1">
                                        <p class="text-xl font-semibold text-zinc-900 tracking-tight">4,850</p>
                                        <span class="text-sm text-zinc-400">XP</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>