---
import Layout from "../layouts/Layout.astro";
import ContactForm from '../components/ContactForm.vue';
---
<Layout title="Holy Wisdom Public School - Overview">
    <main>
        <div class="mb-16">
            <section class="container-fluid gradintBack">
				<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row  place-items-center">
					<div class="w-full">
						<!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> -->
						<img class="lg:max-w-2xl" src="public/img/school-bus.png" alt="">
					</div>
					<div class="flex flex-col w-full">
						<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">An ideal institution for Children’s Education in this area.</h2>
						<h3 class="text-xl text-justify pb-4">Discover essential details about our school's dress code and necessary supplies for students, ensuring preparedness and comfort throughout the school year.</h3>
						<div class="flex flex-row place-content-between">
							<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</button>
							<p class="text-base xl:text-lg font-bold">Or</p>
							<a href="/curriculum" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl  px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Let's Check</a>
						</div>
					</div>
				</div>
			</section>
            <section class="container mx-auto px-4">
                <div>
                    <h1 class="text-xl md:text-3xl pt-2">School Uniform</h1>
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="header">Category</th>
                                <th class="header">Item</th>
                                <th class="header">Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="5">Boys</td>
                                <td>Shirt</td>
                                <td>Canary Yellow T-Shirt with bottle green collar</td>
                            </tr>
                            <tr>
                                <td>Pants</td>
                                <td>Bottle green pant</td>
                            </tr>
                            <tr>
                                <td>Tie and Belt</td>
                                <td>Bottle green tie and belt</td>
                            </tr>
                            <tr>
                                <td>Footwear</td>
                                <td>Black boots and white socks</td>
                            </tr>
                            <tr>
                                <td>Winter Wear</td>
                                <td>Bottle green sweater</td>
                            </tr>
                            <tr>
                                <td rowspan="5">Girls</td>
                                <td>Shirt</td>
                                <td>Canary Yellow T-Shirt with bottle green collar</td>
                            </tr>
                            <tr>
                                <td>Skirt</td>
                                <td>Bottle green skirts</td>
                            </tr>
                            <tr>
                                <td>Tie and Belt</td>
                                <td>Bottle green tie and belt</td>
                            </tr>
                            <tr>
                                <td>Footwear</td>
                                <td>Black boots and white socks</td>
                            </tr>
                            <tr>
                                <td>Winter Wear</td>
                                <td>Bottle green cardigan</td>
                            </tr>
                            <tr>
                                <td rowspan="3">P.T. Dress</td>
                                <td>Shirt</td>
                                <td>Yellow T-Shirt</td>
                            </tr>
                            <tr>
                                <td>Pants</td>
                                <td>Navy blue pant</td>
                            </tr>
                            <tr>
                                <td>Footwear</td>
                                <td>White shoes and socks</td>
                            </tr>
                            <tr>
                                <td colspan="3"><strong>Note:</strong> Boys and girls' T-shirt, pants, skirt, P.T. dress, tie, belt, and batch price is 1,400 Rs. Black boots, white shoes, and socks will not be provided by the school.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <h1 class="text-xl md:text-3xl pt-2">School Car</h1>
                    <p>School buses / car are available for students. For this, you have to apply on the day of admission</p>
                    <h1 class="text-xl md:text-3xl pt-2">Materials Required</h1>
                    <p>All the books and notebooks, uniforms etc. are provided to the children by the school at fair price.</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%);
    } 
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    .table, .table th, .table td {
        border: 1.5px solid black;
    }
    .table th, .table td {
        padding: 4px;
        text-align: left;
    }
    .header {
        background-color: #f2f2f2;
    }
</style>
