<template>
    <div class="trust-symbols">
        <h2>{{ $t('symbolOfTrust')}}</h2>
        <div>
            <picture v-for="(symbol, i) in symbols" :key="i">
                <img :src="`/images/${symbol}.svg`" />
            </picture>
        </div>
    </div>
</template>

<script setup>
const symbols = reactive(['samandehi', 'kasbokar'])
</script>

<style lang="scss">
footer .trust-symbols{
    @apply flex flex-col items-center gap-4;
    @apply sm:items-start;

    h2{
        @apply text-zinc-800 text-xl font-bold font-vazir leading-[1.9rem];
    }

    div{
        @apply flex gap-4;

        picture{
            @apply flex w-24 h-32 bg-white rounded-lg border border-neutral-300;

            img{
                @apply m-auto;
            }
        }
    }
}
</style>
