<script>
    import {fade} from 'svelte/transition';
    import Filter from "$lib/components/matches/Filter.svelte";
    import Fixture from "$lib/components/matches/Fixture.svelte";

    let fixtures = [
        {},
        {},
        {},
        {},
        {},
        {},
    ];

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


    <section class=" w-full from-blue-950 to-blue-800 bg-gradient-to-l py-5">

        <Filter/>

        <div class="  grid grid-cols-12 px-5 ">

            <div class="col-span-2  flex flex-row justify-center items-center">
                <img src="/img/future.png" alt="" class="h-full w-32">

            </div>

            <div class="col-span-8 mt-6">

                {#each fixtures as fixture}
                    <Fixture/>
                {/each}

            </div>


            <div class="col-span-2 flex flex-row justify-center items-center">
                <img src="/img/atalan.png" alt="" class="h-full w-32">
            </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>

    </section>

</div>
