<script>
    import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import {t, locale} from '$lib/translations.js'
    import { inView } from '$lib/config/inView';
</script>
<section use:inView class="news from-sky-600 to-white bg-gradient-to-b pt-20 px-4 lg:px-0" style="direction: ltr;">

    <div>

        <div class="max-w-6xl flex ltr:flex-row rtl:flex-row-reverse items-right justify-end m-auto h-2 ">

        <ViewAllButton label="{$t('common.view-all')}" link="/" bgColor="bg-white" iconColor="bg-sky-500"/>


    </div>
    <div class="max-w-6xl flex flex-col m-auto h-14 ">

        <TopBorder title="{$t('common.magazines')}" textColor="text-white"/>


    </div>

    <div class="max-w-6xl m-auto flex flex-col items-center h-96 space-y-4">

        <h2 class="text-white text-md lg:text-2xl uppercase bg-sky-600">For the Month of January </h2>
        <img src="/img/magazine.png" class="h-80" alt="">

        <a href="/"
           class="text-sky-800 font-bold border border-sky-600 rounded px-2 transition duration-300 hover:shadow-sky-600 hover:shadow">{$t('common.download')}</a>


    </div>
    <BottomBorder borderColor="border-gray-300" bgColor="bg-gray-100"/>
    </div>
</section>