<template>
    <div class="container relative max-w-6xl">
        <Search class="px-2" />
        <main
            class="relative flex flex-col items-center justify-center flex-1 gap-5 lg:flex-row"
        >
            <div
                class="relative flex-1 w-full max-w-[430px] h-64 sm:h-72 md:h-96 lg:inset-y-0 lg:right-0 lg:h-[490px]"
            >
                <img
                    class="object-cover w-full h-full"
                    :src="content.slogan_image_url"
                    alt=""
                />
            </div>
            <div class="w-full max-w-md md:text-center lg:text-left rtl:lg:text-right" >
                <div class="">
                    <h1
                        class="text-4xl font-semibold text-gray-300 md:text-[42px]"
                    >
                        <span class="block xl:inline">{{
                            content["slogan_" + $i18n.locale]
                        }}</span>
                    </h1>
                    <p
                        class="max-w-md mx-auto mt-3 font-medium text-blue-300 md:mt-5 md:max-w-3xl"
                    >
                        {{ content["sub_slogan_" + $i18n.locale] }}
                    </p>
                    <div class="flex-1 mt-10 text-sm overflow-ellipsis">
                        <Typewriter />
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import Typewriter from "@/components/Landing/Typewriter";
import Search from "@/components/Landing/Search";

export default {
    props: {
        content: {
            type: Object,
            required: true,
        },
    },
    components: {
        Typewriter,
        Search,
    },
};
</script>
