<script>
    import {fade} from 'svelte/transition';
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";

</script>
<div in:fade={{ duration: 300, delay: 0 }} class="bg-gray-100">


    <section class=" w-full  bg-gray-100 pt-20 mb-10 bg-[url('/img/media/header-bg.jpg')] bg-cover  h-106">

        <div class="w-full h-full  bg-[url('/img/about/header-back-drop.webp')] bg-cover bg-center">

        </div>


        <div class="relative max-w-6xl m-auto flex flex-col h-92 space-y-20 bottom-72 text-center ">
            <div class=" h-32  m-auto text-white text-left  ">

                <a href="/">
                    <p class="text-6xl uppercase font-bold  hover:underline">

                        Afghanistan TEST SQUAD ANNOUNCED FOR THE TOUR OF NEW ZEALAND
                    </p>

                    <p class="text-xl mt-6 tracking-wide">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam amet
                        asperiores,
                        assumenda atque deleniti distinctio dolor, dolore ducimus impedit, iste pariatur quae
                        reprehenderit
                        sequi totam velit voluptate voluptatem.
                    </p>
                    <p class="text-sm text-white mt-3 font-bold tracking-wider"> 23 DECEMBER 2022</p>
                </a>

            </div>


        </div>
    </section>

    <section class=" w-full     bg-gray-100 py-20">
        <div class=" max-w-6xl m-auto">

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

                <ViewAllButton label="View All" link="/" bgColor="bg-red-600" iconColor="bg-sky-500"
                               textColor="text-white"/>


            </div>
            <TopBorder title="Latest  News" textColor="text-sky-600"/>


            <div class="grid grid-cols-3 gap-2 h-100 mt-4">

                <div class="col-span-2 border border-red  bg-[url('/img/media/news1.jpg')] bg-cover bg-center">
                    <div class="relative w-full h-full  bg-[url('/img/media/news-gradient.png')] bg-cover bg-center">

                        <div class="absolute bottom-0 py-4 px-4">
                            <a href="/">
                                <p class="text-white text-4xl font-bold tracking-wide">
                                    Schedule confirmed for Afghanistan Team White-Ball
                                    Tour of Bangladesh
                                </p>
                                <p class="text-white line-clamp-2 my-3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eius excepturi
                                    fugiat
                                    id pariatur veritatis voluptas? Autem consectetur itaque omnis placeat veritatis.
                                    Accusantium cumque id in magnam quidem similique voluptates! Lorem ipsum dolor sit
                                    amet,
                                    consectetur adipisicing elit. Autem corporis delectus in incidunt quam quos ratione
                                    recusandae. Accusamus aperiam aut incidunt magnam perferendis. Ad amet consequuntur,
                                    earum inventore maiores maxime.
                                </p>

                                <span class="text-sky-500">23 DECEMBER 2022</span>
                            </a>

                        </div>

                    </div>

                </div>
                <div class="col-span-1 border border-red bg-[url('/img/media/news2.jpg')] bg-cover bg-center">
                    <div class="relative w-full h-full  bg-[url('/img/media/news-gradient.png')] bg-cover bg-center">

                        <div class="absolute bottom-0 py-4 px-4">
                            <a href="/">
                                <p class="text-white text-2xl font-bold">
                                    Rashid Khan During CWC
                                    Event with Fans | Episode
                                    Four
                                </p>
                                <p class="text-white line-clamp-2 my-3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eius excepturi fugiat
                                    id pariatur veritatis voluptas? Autem consectetur itaque omnis placeat veritatis.
                                    Accusantium cumque id in magnam quidem similique voluptates! Lorem ipsum dolor sit amet,
                                    consectetur adipisicing elit. Autem corporis delectus in incidunt quam quos ratione
                                    recusandae. Accusamus aperiam aut incidunt magnam perferendis. Ad amet consequuntur,
                                    earum inventore maiores maxime.
                                </p>
                                <span class="text-sky-500">23 DECEMBER 2022</span>
                            </a>

                        </div>


                    </div>
                </div>

            </div>
            <div class="grid grid-cols-3 gap-2  mt-2">

                <div class="h-full ">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men in the
                            2023 IPL Auction
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news4.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men’s Test squad
                            announced for the tour of
                            Pakistan
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction in the
                            2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan name squad for
                            Men’s ODI tour of South Africa

                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men in the
                            2023 IPL Auction
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan name squad for
                            Men’s ODI tour of South Africa

                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>

                <div class="h-full ">
                    <div class="bg-[url('/img/media/news4.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men’s Test squad
                            announced for the tour of
                            Pakistan
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction in the
                            2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold">
                            23 December 2022
                        </span>

                    </div>
                </div>

            </div>

            <div class="flex flex-row justify-center py-4">
                <a href="/" class="mt-4 text-white bg-sky-500 px-4">View More</a>
            </div>
        </div>

    </section>

</div>