---
import Layout from "../layouts/Layout.astro";
import ContactForm from "../components/ContactForm.vue";
import SliderHomepage from "../components/SliderHomepage.vue";
import FAQ from "../components/FAQ.vue";
---

<!-- An AI powered British Preschool Curriculum -->
<Layout title="Holy Wisdom Public School">
	<main>
		<div class="pb-16">
			<section class="container-fluid gradintBack">
				<div
					class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
				>
					<div class="w-full">
						<img class="w-full xl:max-w-2xl" src="/img/school-image-4.png" alt=""
						/>
					</div>
					<div class="flex flex-col w-full">
						<!-- <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">A Montessori-inspired Preschool Curriculum</h1> -->
						<h1
							class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]"
						>
							HOLY WISDOM PUBLIC SCHOOL
						</h1>
						<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Conduct classroom sessions effortlessly and with assurance.</h2> -->
						<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">
							Carefully organized and tiered educational
							materials, inspired by the principles of Maria
							Montessori, designed to showcase your excellence as
							an instructor. Strategically crafted for effective
							implementation in both traditional classrooms and
							homeschool environments.
						</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>
				<!-- grid grid-cols-1 md:grid-cols-2 -->
			</section>
			<section class="container mx-auto px-4 mt-16 mb-10 2xl:-mb-16">
				
				<div class="flex flex-col md:flex-row justify-center gap-4">
					<div class="w-full md:w-2/3">
						<img class="" src="/img/curri.jpg" alt="" />
					</div>
					<div class="w-full flex flex-col gap-4">
						<h1 class="text-3xl">Explore Holy Wisdom Public School <hr></h1>
						<p class="text-justify text-lg">Welcome to Holy Wisdom Public School! Here, we help your little ones start their learning journey with curiosity and joy. Our curriculum is designed to make learning fun and engaging, and we celebrate exciting events like Saraswati Puja, Independence Day, Netaji’s Birthday, Children’s Day, School Foundation Day, and Annual Sports Competitions. We are dedicated to creating a warm and supportive environment where every child feels cared for and encouraged to explore. Join us and watch your child grow, learn, and thrive in a place where their happiness and development come first.</p>
						<div><a href="/curriculum" class="text-lg rounded-lg text-white shadow-2xl p-2 bg-[#3084b5] border-2 border-[#3084b5]">Discover Now</a></div>
					</div>
					
				</div>
			</section>
			<section class="container mx-auto px-4 mb-10">
				<div class="flex flex-col xl:flex-row gap-6">
					<div class="flex flex-col justify-center gap-4">
						<h1 class="text-3xl">Enter Our Preschool World! <hr></h1>
						<p class="text-justify text-lg"> 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!
						<div><a href="/admission" class="text-lg rounded-lg text-white shadow-2xl p-2 bg-[#3084b5] border-2 border-[#3084b5]">Discover Now</a></div>
						</p>
					</div>
					<div>
						<SliderHomepage client:visible />
					</div>
				</div>
			</section>
			<section class="container mx-auto px-4">
				<div class="pt-6">
					<h1 class="text-3xl">Legacy-Inspired Education <hr></h1>
					<p class="text-lg text-justify">
						At Holywisdom Public School, we are dedicated to
						following the Maria Montessori method and draw
						inspiration from the visionary Iswar Chandra Vidyasagar.
						Our educational philosophy aligns with their principles,
						creating an environment that honors the individuality of
						each child and nurtures their natural development. We
						believe in fostering a love for learning that lasts a
						lifetime, embodying the ideals envisioned by Maria
						Montessori and Iswar Chandra Vidyasagar.
					</p>
				</div>
			</section>
			<section class="container mx-auto px-4 mt-6">
				<h1 class="text-3xl mb-6">Why Choose Holy Wisdom Public School? <hr></h1>
				<div class="flex flex-col-reverse lg:flex-row gap-6 justify-center">
					<div class="w-full">
						<p class="text-justify ">Holy Wisdom Public School offers a comprehensive educational experience with a strong emphasis on academic excellence, ethical values, and holistic development. The school is equipped with modern facilities, ensuring a safe and nurturing environment for students. With a dedicated faculty and a curriculum that balances academics with extracurricular activities, students are prepared for future challenges while also being encouraged to engage in community service and social responsibility.</p>
					</div>
					<div>
						<div class="w-full">
							<img class="drop-shadow-2xl" src="/img/school56.png" alt="" />
						</div>
					</div>
				</div>
			</section>
			<section class="container mx-auto px-4">
				<h1 class="text-2xl">Comprehensive and Engaging Educational Programs for Kids <hr></h1>
				<p class="text-justify">Our educational programs for kids are designed to provide engaging, interactive, and fun learning experiences that spark curiosity and foster a love for learning from an early age. We offer a wide range of activities and curriculum tailored to support the holistic development of children, including critical thinking, creativity, social skills, and emotional intelligence. With a focus on hands-on learning and real-world applications, our programs inspire young minds to explore, discover, and reach their full potential.</p>
				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-8">
					<div class="box w-full relative max-w-2xl mx-auto h-auto">
						<div class="imgBx">
							<img src="/img/school10.jpg" alt="image" />
						</div>
						<div class="content">
							<h2>Nursery <hr></h2>
							<p class="text-justify leading-9">Our Nursery program builds on the foundational skills and introduces structured learning to your child, which includes early literacy and numeracy.</p>
						</div>
					</div>
					<div class="box w-full relative max-w-2xl mx-auto h-auto">
						<div class="imgBx">
							<img src="/img/school9.jpg" alt="image" />
						</div>
						<div class="content">
							<h2>KG-1 <hr></h2>
							<p class="text-justify leading-9">Our KG-1 program prepares your child for formal schooling with a more integrated preschool curriculum focusing on language and cognitive skills.</p>
						</div>
					</div>
					<div class="box w-full relative max-w-2xl mx-auto h-auto">
						<div class="imgBx">
							<img src="/img/school8.jpg" alt="image" />
						</div>
						<div class="content">
							<h2>KG-2 <hr></h2>
							<p class="text-justify leading-9">Our KG-2 program refines your child’s academic, social, and creative abilities and ensures that your child is perfectly ready for formal schooling.</p>
						</div>
					</div>
					<div class="box w-full relative max-w-2xl mx-auto h-auto">
						<div class="imgBx">
							<img src="/img/school_7.jpg" alt="image" />
						</div>
						<div class="content">
							<h2>Standard 1-4 <hr></h2>
							<p class="text-justify leading-9">Our Standard 1-4 program refines your child’s academic, social, and creative abilities and ensures that your child is perfectly ready for formal schooling.</p>
						</div>
					</div>
				</div>
			</section>
			<section class="container mx-auto px-4  mt-16">
				<div class="flex flex-col-reverse lg:flex-row gap-x-6 bg-[#47ae6a50] justify-center place-items-center rounded-2xl p-6">
					<div class="flex flex-col w-fit">
						<h1 class="text-3xl"> Vidyasagar's Educational Ideals </h1>
						<p class="text-justify text-lg pb-4"> Iswar Chandra Vidyasagar, a trailblazing educator, believed that education should not only impart knowledge but also instill moral values and character. He championed the idea that education must be accessible to everyone, breaking down societal barriers. Vidyasagar's vision emphasized holistic development and the importance of educating girls, recognizing the pivotal role they play in societal progress. His enduring legacy inspires us to provide inclusive and values-driven education for children, empowering them to become responsible and compassionate individuals.
						</p>
						<a
							href="/vidyasagar"
							class="bg-blue-700 w-fit text-white px-6 py-2.5 rounded-lg hover:scale-105 hover:shadow-lg duration-500"
							>Read More >></a
						>
					</div>
					<div class="flex">
						<img class="w-full rounded-2xl" src="/img/pundit1.jpg" alt="" />
					</div>
				</div>
				<div class="flex flex-col lg:flex-row gap-x-6 bg-[#47ae6a50] justify-center place-items-center rounded-2xl p-6 mt-10">
					<div class="flex">
						<img class="w-full rounded-2xl" src="/img/maria.jpg" alt="" />
					</div>
					<div class="flex flex-col w-fit">
						<h1 class="text-3xl">Cultivating Curiosity in Every Child</h1>
						<p class="text-justify text-lg pb-4"> Maria Montessori, the founder of the Montessori method, emphasized the profound importance of understanding and respecting children. She believed that children are inherently curious, capable, and possess an innate desire to learn. Montessori emphasized providing an environment that allows children to explore and discover at their own pace, fostering independence, creativity, and a love for learning. In her words, "Free the child's potential, and you will transform him into the world." Montessori education is built on the premise of nurturing the natural development of each child, recognizing their unique abilities and potential.
						</p>
						<a href="/montessori" class="bg-blue-700 w-fit text-white px-6 py-2.5 rounded-lg hover:scale-105 hover:shadow-lg duration-500" >Read More >></a>
					</div>
				</div>
			</section>

			<div class="container mx-auto px-4">
				<FAQ client:visible />
			</div>
			<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>

	<style>
		.gradintBack {
			background: linear-gradient(
				0deg,
				rgb(71, 174, 106) 0%,
				rgba(255, 255, 255) 40%
			);
		}
		.box {
			position: relative;
			width: 300px;
			height: 200px;
			background: #000;
			box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
		}

		.box .imgBx {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.box .imgBx img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: 0.5s;
		}

		.box:hover .imgBx img {
			opacity: 0;
		}

		.box .content {
			position: absolute;
			bottom: 0px;
			/* left: 10%; */
			width: 100%;
			height: 40px;
			background: #fff;
			transition: 0.5s;
			overflow: hidden;
			padding: 12px;
			box-sizing: border-box;
			text-align: center;
		}

		.box:hover .content {
			width: 100%;
			height: 100%;
			bottom: 0;
			left: 0;
		}

		.box .content h2 {
			margin: 0;
			padding: 0;
			font-size: 20px;
		}

		.box .content p {
			/* margin: 10px 0 0; */
			padding: 0;
			opacity: 0;
			line-height: 1.2em;
			transition: 0.5s;
			text-align: justify;
		}

		.box:hover .content p {
			opacity: 1;
			transition-delay: 0.5s;
		}
	</style>
</Layout>
