<template>
    <div class="max-w-[1139px] m-auto pb-[73px]">
        <h1
            class="pb-[42px] h-[22px] font-semibold font-Inter text-[34px] leading-[22px] text-gray-300"
        >
            {{ title }}
        </h1>
        <br />
        <div class="w-full px-[48px] py-[48px] shadowing rounded-[48px]">
            <img
                class="w-[122.34px] h-[122.34px] object-cover no-magnify"
                :src="image"
                alt=""
            />
            <p
                class="font-medium pt-[30px] text-[28px] font-Inter text-gray-300 opacity-50"
            >
                {{ $i18n.locale === "en" ? textEn : textAr }}
            </p>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: String,
        image: String,
        textAr: String,
        textEn: String,
    },
};
</script>
<style>
.shadowing {
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
}
</style>
