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

work in every pages

pull/1/head
dev sp 2023-12-16 15:42:46 +00:00
parent fa618afc81
commit 204bbf6c15
20 changed files with 550 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -19,6 +19,7 @@
"flowbite": "^1.7.0",
"flowbite-typography": "^1.0.3",
"shiki": "^0.14.3",
"swiper": "^9.0.3",
"tailwind-scrollbar": "^3.0.4",
"tailwindcss": "^3.2.4",
"vite-plugin-pwa": "^0.16.4",
@ -26,6 +27,6 @@
"workbox-window": "^7.0.0"
},
"devDependencies": {
"daisyui": "^4.4.19"
"daisyui": "^4.4.20"
}
}

55
public/assets/faq.json Normal file
View File

@ -0,0 +1,55 @@
{
"faqs": [
{
"questionNumber": 1,
"question": "What is the age range for enrollment at Holywisdom Public School?",
"answer": "Our preschool welcomes children aged 1 to 3 for enrollment."
},
{
"questionNumber": 2,
"question": "What makes Holywisdom's curriculum unique?",
"answer": "Our curriculum is designed to foster a love for learning through a child-centric approach, emphasizing creativity, social development, and a well-rounded education."
},
{
"questionNumber": 3,
"question": "How can I schedule a tour of the preschool?",
"answer": "You can schedule a tour by [insert contact information or directing to the online scheduling system]."
},
{
"questionNumber": 4,
"question": "What is the student-to-teacher ratio in the classrooms?",
"answer": "We maintain a low student-to-teacher ratio to ensure personalized attention and a supportive learning environment."
},
{
"questionNumber": 5,
"question": "Is there a specific admissions process, and how can I apply?",
"answer": "Our admissions process includes [outline key steps]. You can apply by [insert application details]."
},
{
"questionNumber": 6,
"question": "What is the daily schedule like for preschoolers?",
"answer": "The daily schedule includes a balance of structured learning, playtime, creative activities, and rest to provide a comprehensive early education experience."
},
{
"questionNumber": 7,
"question": "Are there extracurricular activities offered at Holywisdom?",
"answer": "Yes, we offer [list extracurricular activities] to enrich the learning experience."
},
{
"questionNumber": 8,
"question": "How does Holywisdom ensure the safety and security of the children?",
"answer": "We have stringent safety protocols, including [insert safety measures], to ensure the well-being of every child."
},
{
"questionNumber": 9,
"question": "What is the approach to discipline and behavior management?",
"answer": "Our approach focuses on positive reinforcement, communication, and teaching self-discipline in a nurturing environment."
},
{
"questionNumber": 10,
"question": "How does Holywisdom encourage parent involvement?",
"answer": "We encourage parent involvement through fostering a strong partnership between home and school."
}
]
}

BIN
public/img/faq.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 780 KiB

BIN
public/img/school1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
public/img/school2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
public/img/school2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
public/img/school3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
public/img/school4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 KiB

71
src/components/ContactForm.astro
View File

@ -1,71 +0,0 @@
<main>
<div id="contactForm" class="flex flex-col justify-center w-full">
<form id="formSection" action="">
<p class="text-2xl">Write your Qurie</p>
<div class="py-3">
<label for="name">Name:<span class=text-red-500>*</span></label>
<input id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
<input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div class="py-3">
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
<input id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
<textarea id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
</div>
<div class="">
<input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
</div>
</form>
<div class="flex" id="thankYouSection" style="display: none;">
<h1 class="text-center text-black text-4xl">Thank You</h1>
</div>
</div>
</main>
<script is:inline>
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
const formSection = document.getElementById('formSection');
const thankYouSection = document.getElementById('thankYouSection');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const phoneInput = document.getElementById('phone');
const messageInput = document.getElementById('message');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
const formData = {
name: nameInput.value,
email: emailInput.value,
mobile: phoneInput.value,
message: messageInput.value
};
console.log("Form Data", formData)
const url = 'https://api8.siliconpin.com/items/hps_contact';
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
if (response.ok) {
console.log('Form data submitted successfully');
formSection.style.display = 'none';
thankYouSection.style.display = 'block';
} else {
console.error('Failed to submit form data');
}
} catch (error) {
console.error('An error occurred:', error);
}
});
});
</script>

68
src/components/ContactForm.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div id="contactForm" class="flex flex-col justify-center w-full">
<form @submit="saveFormData" id="formSection" action="">
<div v-if="userQurie">
<p class="text-2xl">Write your Qurie</p>
<div class="py-3">
<label for="name">Name:<span class=text-red-500>*</span></label>
<input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
<input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div class="py-3">
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
<input v-model="email" id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
<textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
</div>
<div class="">
<button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button>
</div>
</div>
<div v-else class="flex" >
<h1 class="text-center text-black text-4xl p-16">Thank You</h1>
</div>
</form>
</div>
</template>
<script>
export default{
data(){
return{
name: "",
phone: "",
email: "",
message: "",
userQurie: true,
}
},
methods:{
saveFormData(e){
e.preventDefault();
let formData = {
name: this.name,
mobile: this.phone,
email: this.email,
message: this.message
}
fetch(`https://api8.siliconpin.com/items/hps_contact`,
{
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
console.log("Saved Form Data")
})
this.userQurie = false;
}
}
}
</script>

92
src/components/FAQ.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div>
<section class="mt-16">
<div class="flex flex-col lg:flex-row place-content-between gap-x-4">
<div class="flex flex-col w-full">
<h1 class="text-[#47ae6a] hero-text font-bold">Frequently Asked <span class="text-[#3084b5]">Questions</span> </h1>
<div class="grid h-fit" v-for="data in faqData" :key="data.questionNumber">
<details>
<summary>
<div class="flex inline-flex cursor-pointer">{{ data.question }}</div>
</summary>
<div v-html="data.answer"></div>
</details>
</div>
</div>
<div class="flex justify-center place-items-center">
<img class="max-w-lg rounded-full border-2 shadow-xl" src="/img/faq.jpg" alt="">
</div>
</div>
</section>
</div>
</template>
<script>
export default{
data(){
return{
faqData: "",
}
},
mounted(){
fetch(`/assets/faq.json`)
.then(response => response.json())
.then(data => {
this.faqData = data.faqs
console.log(this.faqData)
})
}
}
</script>
<style>
.bg3 {
background: linear-gradient(0deg, rgb(226, 239, 255) 0%, rgba(255, 255, 255) 40%);}
@media screen and (min-width: 1500px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 1499px) {
.hero-text {
font-size: 40px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 30px;
}
}
.text-color-1 {
color: #7c4c23;
}
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .75em 0;
font-size: 17px;
width: 100%;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .75em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px;
}
</style>

9
src/components/MainHeader.astro
View File

@ -10,13 +10,18 @@
</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/curriculum">Curriculum</a></li>
<!-- <li><a href="#">Solutions</a></li> -->
<!-- <li><a href="#">Products</a></li> -->
<!-- <li><a href="#">Services</a></li> -->
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><button class="login-button">Login</button></li>
<li><button class="join-button">Join</button></li>
<li><a href="/login">Login</a></li>
<li><a href="/sign-up">Signup</a></li>
<!-- <li><button class="login-button">Login</button></li>
<li><button class="join-button">Join</button></li> -->
</ul>
</nav>
</div>

83
src/components/Slider.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<div>
<div class="">
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
pagination
:scrollbar="{ draggable: true }"
:autoplay=" { delay: 2500, disableOnInteraction: false}"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide> <img class="" src="/img/school1.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school2.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school3.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school4.jpg" alt="" /></swiper-slide>
</swiper>
</div>
</div>
</template>
<style>
.slider-width {
width: 350px;
}
</style>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
// Import Swiper styles
import 'swiper/css';
// const swiper = new Swiper('.swiper', {
// autoplay: {
// delay: 5000,
// },
// });
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
};
},
data() {
return {
page: null,
lessonplan:null,
isLoading: true,
}
},
mounted: function () {
fetch('https://management.beanstalkedu.com/items/lesson_plan')
.then(response => response.json())
.then(data => {
this.lessonplan = data.data
// this.isLoading = false
// console.log(this.lessonplan)
// return this.page[0].id
})
},
};
</script>

83
src/components/SliderHomepage.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<div>
<div class="">
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
pagination
:scrollbar="{ draggable: true }"
:autoplay=" { delay: 2500, disableOnInteraction: false}"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide> <img class="" src="/img/school1.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school2.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school3.jpg" alt="" /></swiper-slide>
<swiper-slide> <img class="" src="/img/school4.jpg" alt="" /></swiper-slide>
</swiper>
</div>
</div>
</template>
<style>
.slider-width {
width: 350px;
}
</style>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
// Import Swiper styles
import 'swiper/css';
// const swiper = new Swiper('.swiper', {
// autoplay: {
// delay: 5000,
// },
// });
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
};
},
data() {
return {
page: null,
lessonplan:null,
isLoading: true,
}
},
mounted: function () {
fetch('https://management.beanstalkedu.com/items/lesson_plan')
.then(response => response.json())
.then(data => {
this.lessonplan = data.data
// this.isLoading = false
// console.log(this.lessonplan)
// return this.page[0].id
})
},
};
</script>

15
src/pages/about.astro
View File

@ -1,5 +1,6 @@
---
import Layout from "../layouts/Layout.astro";
import ContactForm from "../components/ContactForm.vue";
---
<Layout title="">
<main>
@ -14,7 +15,7 @@ import Layout from "../layouts/Layout.astro";
<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">
<a href="#" 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</a>
<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>
@ -25,6 +26,18 @@ import Layout from "../layouts/Layout.astro";
<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>

62
src/pages/curriculum.astro Normal file
View File

@ -0,0 +1,62 @@
---
import Layout from "../layouts/Layout.astro";
import Slider from "../components/Slider.vue";
---
<Layout title="">
<main>
<div>
<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-3xl" src="/img/school2.png" alt="">
</div>
<div class="flex flex-col w-full">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Preschool Learning at Holywisdom</h1>
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Discovering Bright Beginnings: Holywisdom's Engaging Preschool Curriculum</h2>
<h3 class="text-xl text-justify pb-4">Thoughtfully structured and tiered learning resources, influenced by Maria Montessori's principles, tailored to highlight your expertise as an educator. Meticulously designed for seamless integration in both conventional classrooms and homeschooling settings.</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 pt-16">
<div class="">
<h1 class="text-xl md:text-3xl">Curriculum</h1>
<p>Welcome to Holywisdom Public School's Curriculum Page! At Holywisdom, we believe in providing a nurturing and enriching learning experience for your child. Our curriculum is designed to foster a love for learning, encourage creativity, and lay the foundation for a well-rounded education.</p>
<h1 class="text-xl md:text-3xl pt-2">Our Approach</h1>
<p>We follow a child-centric approach to education at Holywisdom, recognizing that each child is unique and learns at their own pace. Our experienced educators create a supportive and engaging environment where curiosity is encouraged, and every child feels valued.</p>
<div class="flex flex-col xl:flex-row gap-x-4">
<div>
<h1 class="text-xl md:text-3xl pt-2">Key Focus Areas</h1>
<h2 class="text-lg md:text-2xl"> 1. Early Literacy and Numeracy:</h2>
<p class="text-base text-justify"> Introduction to letters, numbers, and basic literacy skills through interactive and play-based activities.</p>
<h2 class="text-lg md:text-2xl"> 2. Social and Emotional Development:</h2>
<p class="text-base text-justify"> Activities promoting teamwork, communication, and emotional well-being to develop strong social skills.</p>
<h2 class="text-lg md:text-2xl"> 3. Creative Arts:</h2>
<p class="text-base text-justify"> Exploration of creativity through art, music, and imaginative play, fostering self-expression and confidence.</p>
<h2 class="text-lg md:text-2xl"> 4. Physical Development:</h2>
<p class="text-base text-justify"> Fun and age-appropriate physical activities to enhance motor skills and promote a healthy lifestyle.</p>
<h2 class="text-lg md:text-2xl"> 5. Nature and Science Exploration:</h2>
<p class="text-base text-justify"> Hands-on experiences to spark curiosity about the world, introducing basic science concepts and appreciation for nature.</p>
</div>
<div>
<Slider client:visible />
</div>
</div>
<h1 class="text-xl md:text-3xl pt-2">Daily Schedule</h1>
<p>Our daily schedule at Holywisdom is thoughtfully crafted to provide a balance of structured learning, free play, and rest. This ensures that your child receives a comprehensive and enjoyable early education experience.</p>
<h1 class="text-xl md:text-3xl pt-2">Parental Involvement</h1>
<p>We encourage parental involvement at Holywisdom and believe that collaboration between educators and parents is essential for a child's holistic development. Regular updates, parent-teacher conferences, and special events foster a strong partnership between home and school. Join us at Holywisdom Public School as we embark on an exciting journey of early childhood education together. If you have any questions or would like more information about our curriculum, feel free to reach out. We're here to support you and your child every step of the way</p>
</div>
</section>
</div>
</main>
</Layout>
<style>
.gradintBack {
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
}
</style>

20
src/pages/index.astro
View File

@ -1,6 +1,8 @@
---
import Layout from '../layouts/Layout.astro';
import ContactForm from '../components/ContactForm.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.">
@ -24,9 +26,14 @@ import ContactForm from '../components/ContactForm.astro';
</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 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>
</div>
<div>
<SliderHomepage client:visible />
</div>
</div>
</section>
<section class="container mx-auto px-4 ">
@ -60,13 +67,16 @@ import ContactForm from '../components/ContactForm.astro';
<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>
<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 />
<ContactForm client:visible/>
</div>
</form>
</dialog>

24
src/pages/login.astro Normal file
View File

@ -0,0 +1,24 @@
<main>
<div class="content">
<section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
<div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
<img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
<form action="" class="p-6">
<input v-model="name" id="name" name="name" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<input v-model="name" id="name" name="name" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
<button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
</form>
<p class="">Not Registerd? <a href="/sign-up" class="text-[#FFFFFF] font-bold">Register Now</a></p>
</div>
</section>
</div>
</main>
<style>
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

29
src/pages/sign-up.astro Normal file
View File

@ -0,0 +1,29 @@
<main>
<div class="content">
<section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
<div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
<img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
<form action="" class="p-6 space-y-4">
<input v-model="name" id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<input v-model="name" id="name" name="name" type="text" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<input v-model="name" id="name" name="name" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<input v-model="name" id="name" name="name" type="password" placeholder="New Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<input v-model="name" id="name" name="name" type="password" placeholder="Confirm Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
<button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
</form>
<div class="flex flex-col place-content-between float-left">
<p class="">Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
<p class="">Continue Without <a href="/" class="text-[#3084b5] font-bold">Login</a></p>
</div>
</div>
</section>
</div>
</main>
<style>
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

20
yarn.lock
View File

@ -2280,10 +2280,10 @@ culori@^3:
resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
daisyui@^4.4.19:
version "4.4.19"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.4.19.tgz#90187e2ce5c914e774bb174a13f446aac7f555ad"
integrity sha512-IjOLWwnndD4N7Ut5CDxbUsaVtbqXPeVHM92IcgxGFxpuOd3CCKW/PAXZH6JoBTHFRaN57vB9XqEhdWm5yC+bPA==
daisyui@^4.4.20:
version "4.4.20"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.4.20.tgz#3f010eb3d1fc7b4b5824524d27a07adea6e4578d"
integrity sha512-AR2fuFVVLHVTdbkV+XWAqjtymEoxXksrsEMkdzPQo2wANtWjSXuODUzePNade64gJ0Y2CdQtiQkaZI7fWcp13g==
dependencies:
css-selector-tokenizer "^0.8"
culori "^3"
@ -5328,6 +5328,11 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
ssr-window@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
stdin-discarder@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz#22b3e400393a8e28ebf53f9958f3880622efde21"
@ -5518,6 +5523,13 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
swiper@^9.0.3:
version "9.4.1"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.4.1.tgz#2f48bcd6ab4b4fcf4ae93eaee53980531d42fd42"
integrity sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==
dependencies:
ssr-window "^4.0.2"
synckit@^0.8.0, synckit@^0.8.4:
version "0.8.5"
resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"