master
Suvodip Ghosh 2023-02-17 21:58:52 +05:30
parent 7d4b68b55b
commit 593a9bbdb2
6 changed files with 94 additions and 33 deletions

View File

@ -94,11 +94,11 @@
<h2 class="text-justify text-2xl ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
<div class="grid place-items-center w-auto ">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="drop-shadow-2xl" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="drop-shadow-2xl" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="drop-shadow-2xl" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="drop-shadow-2xl" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="drop-shadow-2xl" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div>
</div>
<div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
@ -134,44 +134,50 @@
</a>
</section>
<section class="container mx-auto mt-16 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 ">
<div class="grid"></div>
<div class="grid py-10 px-4">
<h1 class="hero-text text-blue-700" style="font-family:Quicksand">Skill Up with Us & <br>
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 place-items-center">
<div class="grid">
<img class="p-16" src="/img/skill-up.png" alt="">
</div>
<div class="grid py-10 px-4 h-fit">
<h1 class="hero-text text-blue-700 leading-tight font-semibold" style="font-family:Quicksand">Skill Up with Us & <br>
<span class="text-color-1">to Be a superhero at your Preschool</span></h1>
<h1 class="text-xl md:text-2xl text-color-2 pt-6">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
<div class="flex py-4"><button class="text-white bg-blue-700 p-2 text-2xl rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Know More</button></div>
<h1 class="text-xl md:text-2xl text-color-2 pt-2">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
<div class="flex py-4"><a target="_blank" href="https://atheneumglobal.education/"><button class="text-white bg-blue-700 py-2 px-4 text-2xl rounded-tl-lg rounded-br-lg h-fit" style="font-family:Quicksand">Know More</button></a></div>
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="flex justify-center text-color-1 font-bold hero-text py-16 px-4">Download Report Card Format</div>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 place-items-center text-center gap-y-16 gap-x-8 px-4 " >
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card1.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 2-3</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative">
<img class="" src="/img/report-card1.png" alt="">
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70">Years 2-3</h1>
<a href="/img/report-card1.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 3-4</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt="">
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 3-4</h1>
<a href="/img/report-card2.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 4-5</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt="">
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 4-5</h1>
<a href="/img/report-card3.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 5-6</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt="">
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 5-6</h1>
<a href="/img/report-card4.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
</div>
</div>
</section>
<section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
<h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
<div class="grid">
<div class="grid h-fit">
<div class="text-justify text-color-2">
<p class="py-8 font-20px">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).</p>
<img src="/img/legends.png" alt="" class="p-8">
<img src="/img/legends.png" alt="" class="">
</div>
</div>
<div class="grid ">
<div class="flex relative justify-center text-xs ">
<div class="grid">
<div class="flex relative justify-center text-xs">
@ -209,7 +215,7 @@
<h1 class="text-lg md:text-2xl lg:text-4xl" >New Interventions in Preschool Education</h1>
<h1 class="text-sm lg:text-2xl" >Check Out what new interventions are going to be implemented <br> in Preschool education system</h1>
<div class="md:py-2">
<button class="text-blue-700 bg-white text-center w-fit p-1 px-2 lg:text-2xl rounded-tl-xl rounded-br-xl" >Discover Now</button>
<a target="_blank" href="/whats-new"><button class="text-blue-700 bg-white text-center w-fit py-1 px-4 lg:text-lg rounded-tl-xl rounded-br-xl" >Discover Now</button></a>
</div>
</div>
</div>

View File

@ -1,5 +1,5 @@
<template>
<div class="">
<div class="" style="font-family: 'Quicksand', sans-serif;">
<div>
<!-- This Event is Round The Corner -->
<section class="bg3 shadow-2xl container-fluid h-fit">

View File

@ -20,7 +20,7 @@
<a href="/lesson-plan/dailyplan">Lesson Plan</a>
</div>
</div>
<a href="/occassion">Occassion</a>
<a href="/occasion">Occasion</a>
<a href="/themes">Themes</a>
<a href="/blog">Blog</a>
</div>
@ -54,9 +54,6 @@
</div>
</div>
</main>
<script is:inline>
function openMobileMenu() {
var element = document.getElementById("mobileMenu");

View File

@ -8,7 +8,7 @@
<p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit rounded-3xl py-4 cursor-none" src="/img/price1.png" alt="">
<img class="w-fit h-fit rounded-3xl cursor-none" src="/img/price1.png" alt="">
</div>
</div>
</section>
@ -78,7 +78,7 @@
<div class="flex flex-col lg:flex-row place-items-center justify-center">
<div class="flex flex-col justify-center md:px-28 lg:px-0">
<div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
<h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700">Talk to Us ></h1>
<h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700 font-semibold">Talk to Us ></h1>
<h1 class="text-xl lg:text-2xl lg:w-96">If you want to know which plan works for you the best, write to us and well get back to you with best advice</h1>
</div>
<!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
@ -104,7 +104,7 @@
<div class="form-group form-check mb-6"><input v-model="flag" type="checkbox" value="whatsapp" class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
<label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
</div>
<button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact us</button>
<button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
</div>
<div v-else>
<h2 class="text-center py-40 text-4xl">Thank You!</h2>
@ -256,13 +256,13 @@ padding:0;}
width: 100%;
}
.box1 {
width: 100%;
width: 90%;
height: 550px;
/* padding: 25px; */
border: 1px solid #FFA25F;
}
.box2 {
width: 100%;
width: 90%;
height: 550px;
/* padding: 25px; */
border: 1px solid #9B00FA;

View File

@ -0,0 +1,58 @@
---
import Layout from "../../layouts/Layout.astro";
import Menu from "../../components/Menu.astro";
const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?filter[status][_eq]=published');
const data = await response.json();
const occassion = data.data;
const thisOccasionID = data.data[0].id;
const csResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + thisOccasionID);
const csRespJson = await csResp.json();
const csRespData = csRespJson.data.reverse().slice(0, 4);
import Footer from "../../components/Footer.vue";
---
<Layout title="TeenyBeans Occassion">
<Menu/>
<!-- hero section -->
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
<div class="flex flex-col w-full justify-center">
<div >
<h1 class="text-blue-700 hero-text font-bold">Occasion Based Resources <br> <span class="text-color-1" >{occassion[0].occasson_title}</span></h1>
<div class="flex h2-text text-color-1 font-semibold pt-8">{occassion[0].occassion_text }</div>
<div class="flex text-justify font-20px text-color-2 pt-4">{occassion[0].occassion_details }</div>
</div>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[0].occassion} alt={occassion[0].occassion_text }>
</div>
</div>
</section> <!-- hero section Ends -->
<!-- Celebration Stories -->
<section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{occassion[0].celebretion_stories_text}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4">
{csRespData.map((data) =>
<div class="flex bg-gray-200 rotate-6 gap-8 ">
<div class="flex -rotate-6 relative"><img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{data.title}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{data.text}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry &#62;&#62; </a></span>
</div>
</div>
)}
</div>
</section>
<h2>{thisOccasionID}</h2>
<Footer/>
<main></main>
</Layout>