dlearn-front/components/home-page/Information.vue

<template>
    <div class="flex justify-center">
        <div class="w-[81.04%] flex flex-col md:flex-row justify-between mt-[12.821vw] md:mt-[7.25vw]">
            <div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
                <svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" width="8.854vw" height="8.854vw" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_1_2081)">
                        <circle cx="85" cy="81" r="70" fill="white" />
                    </g>
                    <g clip-path="url(#clip0_1_2081)">
                        <path
                            d="M75.5335 77.2334C75.2002 77.2001 74.8002 77.2001 74.4335 77.2334C66.5002 76.9667 60.2002 70.4667 60.2002 62.4667C60.2002 54.3001 66.8002 47.6667 75.0002 47.6667C83.1669 47.6667 89.8002 54.3001 89.8002 62.4667C89.7669 70.4667 83.4669 76.9667 75.5335 77.2334Z"
                            stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M99.6999 54.3333C106.167 54.3333 111.367 59.5666 111.367 65.9999C111.367 72.2999 106.367 77.4333 100.133 77.6666C99.8666 77.6333 99.5666 77.6333 99.2666 77.6666"
                            stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M58.8664 89.5333C50.7997 94.9333 50.7997 103.733 58.8664 109.1C68.0331 115.233 83.0664 115.233 92.2331 109.1C100.3 103.7 100.3 94.8999 92.2331 89.5333C83.0997 83.4333 68.0664 83.4333 58.8664 89.5333Z"
                            stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M106.134 107.667C108.534 107.167 110.8 106.2 112.667 104.767C117.867 100.867 117.867 94.4334 112.667 90.5334C110.834 89.1334 108.6 88.2001 106.234 87.6667"
                            stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                    </g>
                    <defs>
                        <filter id="filter0_d_1_2081" x="0" y="0" width="170" height="170"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix"
                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feOffset dy="4" />
                            <feGaussianBlur stdDeviation="7.5" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix"
                                values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2081" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2081"
                                result="shape" />
                        </filter>
                        <clipPath id="clip0_1_2081">
                            <rect width="80" height="80" fill="white" transform="translate(45 41)" />
                        </clipPath>
                    </defs>
                </svg>
                <div class="text-[#383E43] font-semibold">
                    <p class="text-[5.11vw] md:text-[1.979vw]">{{info?.data?.value?.student}} +</p>
                    <p class="text-[3.59vw] md:text-[1.502vw]">دانشجو</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
                <svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" viewBox="0 0 171 170" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_1_2068)">
                        <circle cx="85.5" cy="81" r="70" fill="white" />
                    </g>
                    <path
                        d="M87.267 109.067H66.2003C55.667 109.067 52.167 102.067 52.167 95.0333V66.9667C52.167 56.4333 55.667 52.9333 66.2003 52.9333H87.267C97.8003 52.9333 101.3 56.4333 101.3 66.9667V95.0333C101.3 105.567 97.767 109.067 87.267 109.067Z"
                        stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                        d="M110.566 97.9999L101.3 91.4999V70.4666L110.566 63.9666C115.1 60.8 118.833 62.7333 118.833 68.2999V93.6999C118.833 99.2666 115.1 101.2 110.566 97.9999Z"
                        stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                        d="M83.833 77.6667C86.5944 77.6667 88.833 75.4282 88.833 72.6667C88.833 69.9053 86.5944 67.6667 83.833 67.6667C81.0716 67.6667 78.833 69.9053 78.833 72.6667C78.833 75.4282 81.0716 77.6667 83.833 77.6667Z"
                        stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <filter id="filter0_d_1_2068" x="0.5" y="0" width="170" height="170"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix"
                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feOffset dy="4" />
                            <feGaussianBlur stdDeviation="7.5" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix"
                                values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2068" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2068"
                                result="shape" />
                        </filter>
                    </defs>
                </svg>

                <div class="text-[#383E43] font-semibold">
                    <p class="text-[5.11vw] md:text-[1.979vw]">{{info?.data?.value?.expertise}}</p>
                    <p class="text-[3.59vw] md:text-[1.502vw]">ویدئوی آموزشی</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
                <svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_1_2057)">
                        <circle cx="85" cy="81" r="70" fill="white" />
                    </g>
                    <g clip-path="url(#clip0_1_2057)">
                        <path
                            d="M90.7664 52.7L96.633 64.4334C97.433 66.0667 99.5664 67.6334 101.366 67.9334L112 69.7C118.8 70.8334 120.4 75.7667 115.5 80.6334L107.233 88.9C105.833 90.3 105.066 93.0001 105.5 94.9334L107.866 105.167C109.733 113.267 105.433 116.4 98.2664 112.167L88.2997 106.267C86.4997 105.2 83.533 105.2 81.6997 106.267L71.733 112.167C64.5997 116.4 60.2664 113.233 62.133 105.167L64.4997 94.9334C64.933 93.0001 64.1664 90.3 62.7664 88.9L54.4997 80.6334C49.633 75.7667 51.1997 70.8334 57.9997 69.7L68.633 67.9334C70.3997 67.6334 72.533 66.0667 73.333 64.4334L79.1997 52.7C82.3997 46.3334 87.5997 46.3334 90.7664 52.7Z"
                            stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
                    </g>
                    <defs>
                        <filter id="filter0_d_1_2057" x="0" y="0" width="170" height="170"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix"
                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feOffset dy="4" />
                            <feGaussianBlur stdDeviation="7.5" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix"
                                values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2057" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2057"
                                result="shape" />
                        </filter>
                        <clipPath id="clip0_1_2057">
                            <rect width="80" height="80" fill="white" transform="translate(45 41)" />
                        </clipPath>
                    </defs>
                </svg>

                <div class="text-[#383E43] font-semibold">
                    <p class="text-[5.11vw] md:text-[1.979vw]">{{info?.data?.value?.rate}}</p>
                    <p class="text-[3.59vw] md:text-[1.502vw]">امتیاز دانشجویان به ما</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const info = await useFetch('/api/settings')

</script>