---
import Layout from "../layouts/Layout.astro";
import ContactForm from "../components/ContactForm.vue";
---
<Layout title="">
    <main>
        <div>
            <section class="container-fluid gradintBack">
				<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row gap-x-4 place-items-center">
					<div class="w-full">
						<img class="w-full " src="/img/image3.png" alt="">
					</div>
					<div class="flex flex-col w-full">
						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Discover Our Story</h1>
						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Nurturing Young Minds at Holywisdom Preschool</h2>
						<h3 class="text-xl text-justify pb-4">A testament to our Montessori-inspired vision, dedicated educators, and vibrant learning spaces. Your child's journey starts here!</h3>
						<div class="flex flex-row place-content-between">
							<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#FFFFFF] px-4 md:px-8 p-3 bg-[#3084b5] border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</button>
						</div>
					</div>
				</div>
			</section>
            <section class="container mx-auto px-4 my-10">
                <div class="">
                    <h1 class="text-2xl">Enter Our Virtual Preschool World!</h1>
                    <p>Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
                </div>
            </section>
            <section class="container mx-auto">
                <div>
                    <dialog id="formModal" class="max-w-2xl rounded-xl">
                        <form method="dialog" class="">
							<button class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">&#10008;</button>
                            <div class="">
								<ContactForm client:visible/>
							</div>
                        </form>
                    </dialog>
                </div>
            </section>
        </div>
    </main>
</Layout>
<style>
    .gradintBack {
        background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
    }
</style>