<template>
    <div class="max-w-[880px] m-auto">
        <h2
            class="mx-auto max-w-[838.19px] mt-[212.94px] text-center text-[42px] text-gray-300 font-semibold leading-[50.83px] pt-[25.85px]"
        >
            {{ $i18n.locale === "en" ? sloganEn : sloganAr }}
        </h2>
        <h4
            class="text-gray-200 max-w-[780px] font-medium font-Inter text-center leading-[26.63px] m-auto px-5 pt-[25px]"
        >
            {{ $i18n.locale === "en" ? textEn : textAr }}
        </h4>
        <div class="pt-[46px] pb-[71px] w-full">
            <img
                class="m-auto w-full h-[270px] no-magnify"
                :src="image"
                alt=""
            />
        </div>
    </div>
</template>
<script>
export default {
    props: {
        sloganAr: String,
        sloganEn: String,
        textAr: String,
        textEn: String,
        image: String,
    },
};
</script>
