---
import Layout from "../layouts/Layout.astro";
import Blog from "../components/Blog.vue";


---

<Layout  title="Welcome to Astro.">
    <main>
        <section>
            <div >
                <ul>
                    <Blog client:visible/>
                  </ul>
            </div>
        </section>
        <div class="grid grid-cols-1 md:grid-cols-2 place-items-center gap-8">
            <div class="grid"><img class="rounded-xl shadow-2xl" src="/img/person4.png" alt=""></div>
            <div class="grid"><img class="rounded-xl shadow-2xl relative" src="/img/person3.png" alt="">
                <p class="absolute">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos eius earum nostrum, ducimus commodi dicta corrupti delectus aliquid dolor consequuntur expedita fugiat eos doloremque natus minima culpa, quod hic quidem.</p>
            </div>
        </div>
        
        <section class="container mx-auto">
            <div>
                <h1 class="text-4xl text-center p-6 text-red-800">Worksheets</h1>
                <p class="text-2xl text-blue-700">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, laudantium dicta asperiores et repellat quas, architecto, eum ipsa autem sit deleniti maxime repellendus alias similique quo mollitia delectus voluptas commodi.</p>
                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 my-24 gap-16 place-items-center">
                    <div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
                        <img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person1.png" alt="">
                    </div>
                    <button class="rotate-6 rounded-br-3xl rounded-tl-3xl">Know More</button>
                    <div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
                        <img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person2.png" alt="">
                    </div>
                    <div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
                        <img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person3.png" alt="">
                    </div>
                    <div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
                        <img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person4.png" alt="">
                    </div>
                </div>
            </div>
        </section>
        
    </main>
</Layout>

<script>
    // let apiLink = "https://management.beanstalkedu.com/items/worksheet_menu"
    // fetch (apiLink)
    // .then(x => x.json())
    // .then(y => document.getElementById("demo").innerHTML = y.data[2].file);
</script>