generated from dwd/boilarplate-astro-tailwind
all work from f
This commit is contained in:
dev sp
@@ -1,85 +1,82 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import MainHeader from '../components/MainHeader.vue';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import ContactForm from '../components/ContactForm.astro';
|
||||
---
|
||||
|
||||
<!-- An AI powered British Preschool Curriculum -->
|
||||
<Layout title="Welcome to Astro.">
|
||||
<MainHeader />
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<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="w-full">
|
||||
<img class="lg:max-w-2xl" src="/img/image.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>
|
||||
<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="#" 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 my-10">
|
||||
<div class="">
|
||||
<h1 class="text-3xl">Enter Our 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 px-4 ">
|
||||
<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>
|
||||
</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="">
|
||||
</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>
|
||||
<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>
|
||||
</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">✘</button>
|
||||
<div class="">
|
||||
<ContactForm />
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user