dwd-projects/holywisdompublicschool.com
1
0
Fork 0
generated from dwd/boilarplate-astro-tailwind
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
dev2 siliconpin
2024-06-29 16:13:35 +00:00
parent 5abf9a244b
commit 43ae68b359
59 changed files with 1335 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
src/pages/index.astro
View File

@@ -1,92 +1,275 @@
---
import Layout from '../layouts/Layout.astro';
import ContactForm from '../components/ContactForm.vue';
import SliderHomepage from '../components/SliderHomepage.vue';
import FAQ from '../components/FAQ.vue'
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="Welcome to Astro.">
<main>
<div class="pb-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="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="/img/image.png" alt=""> -->
<img class="lg:max-w-2xl" src="public/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>
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Conduct classroom sessions effortlessly and with assurance.</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>
<!-- <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>
<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 my-10">
<div class="flex flex-col xl:flex-row gap-x-10">
<div class="flex flex-col justify-center">
<h1 class="text-3xl">Enter Our Preschool World!</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!</p>
<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 ">
</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="public/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="public/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="public/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="public/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>
<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>
</section>
<section class="container mx-auto px-4 pt-10">
<div class="flex flex-col lg:flex-row gap-x-6 bg-[#47ae6a50] justify-center place-items-center rounded-2xl p-6">
<div class="flex">
<img class="w-full rounded-2xl" src="/img/maria.jpg" alt="">
<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>
<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>
<section class="container mx-auto px-4 ">
<div class="pt-6">
<h1 class="text-3xl">Legacy-Inspired Education</h1>
<p class="text-lg">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>
</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>
<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>
</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>
<style>
.gradintBack {
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
}
</style>