4dkankan-components/docs/.vitepress/vitepress/components/home/svg/right-layer-svg.vue

<template>
    <svg class="right-layer" width="474" height="328" viewBox="0 0 474 328" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M25.1434 17.0806C22.6911 17.0806 20.7031 19.0686 20.7031 21.5209V285.714C20.7031 288.167 22.6911 290.155 25.1434 290.155H155.576L168.619 302.92L181.107 290.155H448.076C450.529 290.155 452.517 288.167 452.517 285.714V21.5209C452.517 19.0686 450.529 17.0806 448.076 17.0806H25.1434Z"
            fill="var(--rl-c-0)"
        />
        <path
            d="M203.307 211.895H143.364C131.409 211.895 121.718 221.745 121.718 233.895V233.895C121.718 246.046 131.409 255.895 143.364 255.895H203.307C215.261 255.895 224.953 246.046 224.953 233.895V233.895C224.953 221.745 215.261 211.895 203.307 211.895Z"
            fill="var(--rl-c-1)"
        />
        <path
            d="M329.299 211.895H269.356C257.401 211.895 247.71 221.745 247.71 233.895V233.895C247.71 246.046 257.401 255.895 269.356 255.895H329.299C341.254 255.895 350.945 246.046 350.945 233.895V233.895C350.945 221.745 341.254 211.895 329.299 211.895Z"
            fill="#3F85ED"
        />
        <path
            d="M409.223 108.105H63.9949C61.5426 108.105 59.5547 110.093 59.5547 112.546V125.311C59.5547 127.764 61.5426 129.752 63.9949 129.752H409.223C411.676 129.752 413.664 127.764 413.664 125.311V112.546C413.664 110.093 411.676 108.105 409.223 108.105Z"
            fill="var(--rl-c-1)"
        />
        <path
            d="M353.166 149.177H120.054C117.601 149.177 115.613 151.165 115.613 153.618V166.383C115.613 168.836 117.601 170.823 120.054 170.823H353.166C355.618 170.823 357.606 168.836 357.606 166.383V153.618C357.606 151.165 355.618 149.177 353.166 149.177Z"
            fill="var(--rl-c-1)"
        />
        <path
            d="M318.754 49.8273H156.685C154.233 49.8273 152.245 51.8034 152.245 54.2411V77.4135C152.245 79.8511 154.233 81.8273 156.685 81.8273H318.754C321.206 81.8273 323.194 79.8511 323.194 77.4135V54.2411C323.194 51.8034 321.206 49.8273 318.754 49.8273Z"
            fill="#91BEFF"
        />
    </svg>
</template>

<style scoped>
.right-layer {
    --rl-c-0: white;
    --rl-c-1: #e4efff;

    filter: drop-shadow(0px 0px 6px rgba(10, 34, 59, 0.04)) drop-shadow(0px 6px 20px rgba(10, 34, 59, 0.08));
}

.dark .right-layer {
    --rl-c-0: #1e2835;
    --rl-c-1: #444f5d;

    filter: drop-shadow(0px 0px 6px rgba(6, 15, 26, 0.24)) drop-shadow(0px 6px 20px rgba(6, 15, 26, 0.48));
}
</style>