@ -1,13 +1,529 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import SliderLessonplan from "../components/SliderLessonplan.vue";
import Roundchart from "../components/Roundchart.vue";
import Homepage from "../components/Homepage.vue";
const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
import Footer from "../components/Footer.vue";
---
<Layout title="Welcome to Teenybeans">
<Menu/>
<Homepage client:visible/>
<main>
<div class="" style="font-family: quicksand;">
<section class="bg3 shadow-2xl container-fluid h-fit">
<div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
<div class="flex flex-col justify-center">
<h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Speak with Us</button></a></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 text-white shadow-2xl px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>
</div>
</div>
<div class="flex w-full justify-end place-items-end">
<img class="h-fit " src="/img/homepage1c.png" alt="">
</div>
</div>
</section>
<div class="container-fluid mt-10">
<div class="container mx-auto px-4 xl:px-24 font-20px text-justify">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world.</div>
</div>
<section class="container mx-auto xl:px-24">
<div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="mt-10 px-4 font-20px pb-20 px-6">
<p class="text-justify text-color-2">Enrich every learning experience with your preschool’
<div class="mt-4"></div>
<p class="text-justify text-color-2">Plan your play school curriculum with us and give the highest quality service and receive enormous enrollments in return. Your success has no bounds with the correct preschool curriculum provided by our right guidance and support.</p>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
<div class="grid grid-rows-1 md:grid-rows-2 place-items-center my-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 place-items-center">
<div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/audio-books"><img class="flex inline-flex" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/worksheets"><img class="flex inline-flex" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/videos"><img class="flex inline-flex" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 place-items-center">
<div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/occassion"><img class="flex inline-flex" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/themes"><img class="flex inline-flex" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div>
</div>
</section>
<SliderLessonplan client:visible/>
<section class="container mx-auto px-4 xl:px-24 bg-gray-200">
<div class="flex flex-row place-content-between">
<div class="flex flex-col justify-center ">
<h2 class="text-color-1 hero-text font-bold 2xl:w-8/12">Discover our Worksheets for Preschoolers</h2>
<button class="bg-blue-700 text-white text-lg rounded-tl-lg rounded-br-lg shadow-xl w-fit px-6 py-2">Discover All</button>
</div>
<div class="flex ">
<img class="w-80" src="/img/fire-fighter.png" alt=""/>
</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-4">
<div class="grid">
<div class="text-justify text-color-2">
<p class="py-8 font-20px">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
<p class="py-8 font-20px">The play school Curriculum will add elegance to your preschool’
<p class="py-8 font-20px">The British kindergarten curriculum will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
</div>
</div>
<div class="grid ">
<img src="/img/legends.png" alt="" class="p-8">
<div class="flex relative justify-center text-xs ">
<div class="grid">
<div class="flex relative justify-center text-xs">
<img class="" src="/img/frame1.png" alt="">
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Literacy</abbr>
</p>
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Comunication <br>& Language</abbr>
</p>
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Mathematics</abbr>
</p>
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Understanding <br> the World </abbr>
</p>
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Physical <br> Development </abbr>
</p>
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Expressive Arts<br> & Desgine </abbr>
</p>
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Preschool, Social <br>& Emotional <br>Development</abbr>
</p>
</div>
</div>
</div>
<h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
<p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
<div class="pl-8"><button class="bg-blue-700 text-white px-4 shadow-2xl py-2 rounded-tl-lg rounded-br-lg text-lg">Discover All</button></div>
</div>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24 mt-8 xl:mt-16">
<div class="flex flex-col lg:flex-row place-content-between gap-y-16">
<a href="/educators">
<div class="flex rotate1 rounded-xl place-items-center">
<div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/teacherb.png" alt=""></div>
<h1 class=" pl-8 text-2xl w-80">Teeny Beans for Educators & Teachers</h1>
</div>
</a>
<a href="/administrators">
<div class="flex rotate1 rounded-xl place-items-center">
<div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/ownersb.png" alt=""></div>
<h1 class=" pl-8 text-2xl w-80">Teeny Beans for Owners & Administrators</h1>
</div>
</a>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24">
<h1 class="hero-text text-center text-blue-700 py-20">What people are Saying!</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/sudha-gosavi.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Sudha Mangesh Gosavi" </h1>
<p class="text-color-2 font-20px">I'm very thankful to Teeny Beans, because when I planned to open a preschool in Nagpur, I was very confused about how to start and what to do and things were going very messy. When I found Teeny Beans, I was completely happy since there was no royalty, no deposit, and no franchise fee, but I received complete help to open my preschool.
<br>
<strong>
<br>Stepping Stones International Preschool
<br>Director
</strong>
</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/nirmal-singh.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Nirmal Singh" </h1>
<p class="text-color-2 font-20px">As many other preschool service providers do not give us an opportunity to create our own brand, Teeny Beans does. Building our own brand is beneficial for us in the long run as we are not only targeting preschool education but also high-level eucation (secondary) in the long run. It’
<br> <strong class=""> <br>Dakshya International Preschool
<br>Director</strong>
</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/sharmistha-mishra.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Sharmistha Mishra" </h1>
<p class="text-color-2 font-20px">Being a beginner in this business, I was a bit tense about opening up the PRE-SCHOOL. But the continuous support and guidance regarding the whole training process, benefits, selection of area, pre-advertising, etc., made me confident and satisfied to start with it.
<br> <strong> <br>NEST International Preschool
<br>Founder and Director
</strong>
</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/jane-martina.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Ms. Jane Martina" </h1>
<p class="text-color-2 font-20px">You need the right partner to support you in establishing your school. Teeny Beans was extremely supportive, right from choosing the teaching aids, play items, and furniture, and they said that a friendly ambiance is much more preferred than a very expensive outlook. "You need to trust your partner. Every communication was very supportive, even when you doubted yourself. Teeny beans were giving options."
<br> <strong>
<br>Chinchilla International Preschool
<br>Founder and Director
</strong>
</p>
</div>
</div>
</div>
</section>
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit ">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
{faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) =>
<details>
<summary>
<div class="flex inline-flex cursor-pointer" v-if="faqHome"> { data.title }</div>
</summary>
<div set:html="data.content"></div>
</details>
)}
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
</div>
</main>
<Footer/>
</Layout>
<style >
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .75em 0;
font-size: 16px;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .80em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px;
}
.slider-width {
width: 350px;
}
.block-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.block-content__button {
color: #1d4ed8;
text-decoration: underline;
}
.position {
position: relative;
width: 100%;
bottom: 0px;
}
@media screen and (min-width: 1500px) {
.h2-text {
font-size: 30px;
}
}
@media screen and (max-width: 1499px) {
.h2-text {
font-size: 24px;
}
}
@media screen and (max-width: 1199px) {
.h2-text {
font-size: 20px;
}
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
.load-wraper{
position: relative;
height: 100%;
width: 100%;
background-color: rgb(211,211,211);
z-index: 44;
overflow: hidden;
border-radius: 5px;
}
.activity{
position: absolute;
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
animation: loading 1s infinite;
z-index: 45;
}
@keyframes loading {
0%{
left: -45%;
}
100%{
left: 100%;
}
}
.literacy {
top: 110px;
transform: rotate(25deg);
}
.comunication {
transform: rotate(80deg);
/* left: 360px; */
top: 170px;
}
.mathematics {
transform: rotate(-50deg);
top: 373px;
}
.world {
transform: rotate(-10deg);
top: 420px;
}
.physical {
transform: rotate(44deg);
top: 340px;
}
.expressive {
transform: rotate(-90deg);
top: 225px;
}
.preschool {
transform: rotate(-35deg);
top: 95px;
}
.border0 {
border-color: #F2F2F2;
border-width: 20px;
border-radius: 20px;
}
.border0:hover {
border-color: #FCFCFC;
border-width: 20px;
border-radius: 20px;
}
.background {
background-color: #F2F2F2;
}
.background:hover {
background-color: #FCFCFC;
}
/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
content: "▶";
position: absolute;
top: 1rem;
left: 0.8rem;
transform: rotate(0);
transform-origin: center;
transition: 0.2s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
transition: 0.45s transform ease;
}
/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
position: relative;
z-index: 10;
}
@keyframes details-show {
from {
margin-bottom: -80%;
opacity: 0;
transform: translateY(-100%);
}
}
details > *:not(summary) {
animation: details-show 500ms ease-in-out;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
color: transparent;
overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }
/* # Style 2 # */
details.style2 summary::before {
content: "×
font-size: 2rem;
line-height: 1rem;
transform: rotate(-45deg);
top: 1.2rem;
left: 0.5rem;
}
details[open].style2 > summary:before {
transform: rotate(90deg);
color: rgb(0, 0, 0) !important;
transition: color ease 2s, transform ease 1s;
}
/* # Style 3 # */
details .moon-new { display: inline; }
details .moon-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }
/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { margin: 0; padding-bottom: 10px; }
p:last-child { padding: 0; }
details {
max-width: 800px;
box-sizing: border-box;
margin-top: 5px;
background: rgb(255, 255, 255);
}
summary {
border: 4px solid transparent;
outline: none;
padding: 8px;
display: block;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details[open] summary,
summary:hover {
color: #1e293b;
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
color: #1e293b;
}
.content {
padding: 10px;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
}
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
}
.text-color-1 {
color: #7C4C23;
font-family: 'Quicksand';
}
.text-color-2 {
color: #333333;
font-family: 'Quicksand';
}
.font-20px {
font-size: 18px;
}
.h1-text {
font-size: 30px;
}
@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;
}
}
</style>
Suvodip Ghosh