dwd-projects
/
new_akademy_landing
generated from dwd/boilarplate-astro-tailwind
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix-home,interakto,interakto coding,teenybeans page done

pull/6/head
Abhijeet Bagade 2025-06-11 17:29:29 +05:30
parent e40c477b4a
commit 7b01fe4aa2
15 changed files with 153 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Blogs/index.jsx
View File

@ -7,6 +7,7 @@ import Banner from "../Blog/Banner";
import Footer from "../Footer/Footer"; import Footer from "../Footer/Footer";
import { store } from "../redux/store"; import { store } from "../redux/store";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import style from "./index.module.css";
const Index = () => { const Index = () => {
window.scrollTo({ top: 0, behavior: "instant" }); window.scrollTo({ top: 0, behavior: "instant" });
const [data, setData] = useState([]); const [data, setData] = useState([]);
@ -28,31 +29,26 @@ const Index = () => {
return ( return (
<> <>
<Provider store={store}> <Provider store={store}>
<Banner data={newData} /> <Banner data={newData} />
<ContentWrapper> <ContentWrapper>
<h2 <h2
style={{ style={{
color: "#00548E", color: "#00548E",
marginBottom: "10px", marginBottom: "10px",
textAlign: "center", textAlign: "center",
}} }}
> >
Trending Blogs Trending Blogs
</h2> </h2>
<Grid <div className={style.flex_box}>
container {newData.map((Blog) => (
spacing={2} <div className={style.box_card}>
alignItems="center" <Card data={Blog} />
justifyContent={"center"} </div>
> ))}
{newData.map((Blog) => ( </div>
<Grid item xs={12} sm={6} md={4} lg={4} xl={4}> </ContentWrapper>
<Card data={Blog} /> <Footer page="INTERAKTO_CODING" />
</Grid>
))}
</Grid>
</ContentWrapper>
<Footer page="INTERAKTO_CODING" />
</Provider> </Provider>
</> </>
); );

9
src/components/Blogs/index.module.css Normal file
View File

@ -0,0 +1,9 @@
.flex_box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box_card {
width: 32.33%;
}

17
src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
View File

@ -3,7 +3,9 @@ import style from "./PhotoFlipCarousel.module.css";
import { GameContext } from "../../context/GameContext"; import { GameContext } from "../../context/GameContext";
function PhotoFlipCarousel({ theme, data, background, color, poster }) { function PhotoFlipCarousel({ theme, data, background, color, poster }) {
const { setGameLink } = useContext(GameContext); const { gameLink, setGameLink } = useContext(GameContext);
console.log("gameLink", gameLink);
useEffect(() => { useEffect(() => {
initialize(); initialize();
@ -140,11 +142,16 @@ function PhotoFlipCarousel({ theme, data, background, color, poster }) {
</video> </video>
) : ( ) : (
<> <>
{console.log("item.link", item.link)}
{item.link && ( {item.link && (
<a href={"/worksheet"} className={style.btn}> <a
<button onClick={() => setGameLink(item.link)}> href={`/interactive-learning-resources-for-preschool/worksheet?${item.link.replaceAll(
Try now "https://interaktogames.beanstalkedu.com/",
</button> ""
)}`}
className={style.btn}
>
<button>Try now</button>
</a> </a>
)} )}
</> </>

12
src/components/ContentWrapper/ContentWrapper.module.css
View File

@ -1,11 +1,11 @@
.container { .container {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.sub_container { .sub_container {
width: 80vw; width: 80vw;
max-width: 1200px; max-width: 1200px;
height: 100%; height: 100%;
} }

2
src/components/Footer/Footer.jsx
View File

@ -167,7 +167,7 @@ function Footer({
<a href="https://www.facebook.com/get.aKadmy/" target="_blank"> <a href="https://www.facebook.com/get.aKadmy/" target="_blank">
Facebook Facebook
</a> </a>
<a href="https://www.instagram.com/akadmy.app/" target="_blank"> <a href="https://www.instagram.com/akadmyapp/" target="_blank">
Instagram Instagram
</a> </a>
<a <a

14
src/components/Footer/Footer.module.css
View File

@ -17,7 +17,7 @@
.contact_box { .contact_box {
width: 100%; width: 100%;
min-height: 300px; min-height: 300px;
padding: 2rem; /* padding: 2rem; */
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -28,6 +28,7 @@
.contact_box .content_left { .contact_box .content_left {
width: 60%; width: 60%;
min-width: 200px; min-width: 200px;
padding: 2rem 0rem 2rem 2rem;
} }
.contact_box .content_left .line1 { .contact_box .content_left .line1 {
@ -50,7 +51,7 @@
.contact_box .content_right { .contact_box .content_right {
width: 32%; width: 32%;
min-width: 240px; min-width: 240px;
padding: 2rem 2rem 2rem 0rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -66,6 +67,15 @@
} }
} }
@media (max-width: 600px) {
.contact_box .content_left {
padding: 0.8rem;
}
.contact_box .content_right {
padding: 0.8rem;
}
}
.contact_box .content_right input { .contact_box .content_right input {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;

48
src/components/IntraktoCoding/IntraktoCoding.jsx
View File

@ -87,8 +87,8 @@ function IntraktoCoding() {
children through playful and engaging activities. Children as children through playful and engaging activities. Children as
young as 4 years old can create their own stories, games, and young as 4 years old can create their own stories, games, and
animations using the simple-to-use ScratchJr interface. . And as animations using the simple-to-use ScratchJr interface. . And as
it is a visual programming language, when children design all the it is a visual programming language, when children design all
while developing crucial problem-solving skills and logical the while developing crucial problem-solving skills and logical
thinking. Coding is all about learning to think creatively and thinking. Coding is all about learning to think creatively and
work collaboratively. work collaboratively.
</p> </p>
@ -113,18 +113,18 @@ function IntraktoCoding() {
<p>Our Coding Curriculum</p> <p>Our Coding Curriculum</p>
<h4>Why have a Coding Curriculum for Preschoolers?</h4> <h4>Why have a Coding Curriculum for Preschoolers?</h4>
<p className={style.secondary_color}> <p className={style.secondary_color}>
Our block-based programming approach, using ScratchJr , introduces Our block-based programming approach, using ScratchJr ,
coding as another language . With Scratch Children learn how to introduces coding as another language . With Scratch Children
write commands , create loops, and understand programming language learn how to write commands , create loops, and understand
from basic. Each lesson is designed so that completing it and programming language from basic. Each lesson is designed so that
moving on to the next level makes your child feel a sense of completing it and moving on to the next level makes your child
achievement at every step. feel a sense of achievement at every step.
</p> </p>
<div className={style.flex}> <div className={style.flex}>
{codingPreschoolers.map((item) => ( {codingPreschoolers.map((item) => (
<div className={style.preschoolCard}> <div className={style.preschoolCard}>
<img src={item.img} /> <img src={item.img} />
<h6>{item.title}</h6> <h4>{item.title}</h4>
<p>{item.description}</p> <p>{item.description}</p>
</div> </div>
))} ))}
@ -132,7 +132,9 @@ function IntraktoCoding() {
</div> </div>
<div className={`${style.flex}`}> <div className={`${style.flex}`}>
<div className={`${style.flex_1} ${style.mt} ${style.order_1}`}> <div className={`${style.flex_1} ${style.mt} ${style.order_1}`}>
<h4 className={style.primary_color}>The MIT-Based Curriculum</h4> <h4 className={style.primary_color}>
The MIT-Based Curriculum
</h4>
<p> <p>
interaKto Coding was established by the internationally interaKto Coding was established by the internationally
recognized Media Labs at MIT (Massachusetts Institute of recognized Media Labs at MIT (Massachusetts Institute of
@ -203,14 +205,14 @@ function IntraktoCoding() {
<ContentWrapper> <ContentWrapper>
<h4>Benefits of Coding Early</h4> <h4>Benefits of Coding Early</h4>
<p> <p>
Learning to code at an early age has numerous benefits beyond just Learning to code at an early age has numerous benefits beyond
computer literacy. Our program helps children develop essential just computer literacy. Our program helps children develop
life skills such as: essential life skills such as:
</p> </p>
<div className={style.flex}> <div className={style.flex}>
{skills.map((item) => ( {skills.map((item) => (
<div className={style.skills_card}> <div className={style.skills_card}>
<h6 className={style.primary_color}>{item.title}</h6> <h4 className={style.primary_color}>{item.title}</h4>
<p className={style.secondary_color}>{item.description}</p> <p className={style.secondary_color}>{item.description}</p>
</div> </div>
))} ))}
@ -286,10 +288,10 @@ function IntraktoCoding() {
> >
<ContentWrapper> <ContentWrapper>
<p className={style.primary_color}> How to Get Started</p> <p className={style.primary_color}> How to Get Started</p>
<h4 className={style.primary_color}>Ready to Begin? Here's How</h4> <h2 className={style.primary_color}>Ready to Begin? Here's How</h2>
<p className={style.seconadry_color}> <p className={style.seconadry_color}>
Enrolling in interaKto Coding is easy. Follow these simple steps to Enrolling in interaKto Coding is easy. Follow these simple steps
start your child’s coding journey: to start your child’s coding journey:
</p> </p>
<a href={"/pricing/akadmy-product-pricing"}> <a href={"/pricing/akadmy-product-pricing"}>
<button <button
@ -327,13 +329,13 @@ function IntraktoCoding() {
color: "white", color: "white",
}} }}
> >
<h6 style={{ marginTop: "18px", marginLeft: "60px" }}> <h4 style={{ marginTop: "18px", marginLeft: "60px" }}>
Step {index + 1} Step {index + 1}
</h6> </h4>
<div className={style.triangle_right}></div> <div className={style.triangle_right}></div>
</div> </div>
<div className={style.triangle_topright} /> <div className={style.triangle_topright} />
<h6 className={style.primary_color}>{item.title}</h6> <h4 className={style.primary_color}>{item.title}</h4>
<p>{item.description}</p> <p>{item.description}</p>
</div> </div>
))} ))}
@ -341,7 +343,11 @@ function IntraktoCoding() {
</ContentWrapper> </ContentWrapper>
</section> </section>
<FAQ color1={"#001F48"} color2={"#72B3FF"} data={faqsInterakto_coding} /> <FAQ
color1={"#001F48"}
color2={"#72B3FF"}
data={faqsInterakto_coding}
/>
<section className={style.section6}> <section className={style.section6}>
<ContentWrapper> <ContentWrapper>
<div className={style.section6__content}> <div className={style.section6__content}>

12
src/components/IntraktoCoding/IntraktoCoding.module.css
View File

@ -62,7 +62,7 @@
} }
.section4__content__1_line2 { .section4__content__1_line2 {
max-width: 300px !important; max-width: 330px !important;
} }
.section4__content_2 { .section4__content_2 {
@ -100,7 +100,7 @@
background: white; background: white;
border: 1px solid #01518c4d; border: 1px solid #01518c4d;
border-radius: 6px; border-radius: 6px;
padding: 30px; padding: 10px;
} }
.bottom_cloud { .bottom_cloud {
@ -109,11 +109,11 @@
} }
.skills_card { .skills_card {
width: 24%; width: 22%;
background: white; background: white;
border: 1px solid #01518c4d; border: 1px solid #01518c4d;
border-radius: 6px; border-radius: 6px;
padding: 30px; padding: 10px;
} }
.triangle_right { .triangle_right {
@ -145,7 +145,7 @@
margin-top: -80px; margin-top: -80px;
} }
.preschoolCard { .preschoolCard {
width: 48%; width: 45%;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
} }
.flex_1 { .flex_1 {
@ -161,7 +161,7 @@
bottom: -52px; bottom: -52px;
} }
.skills_card { .skills_card {
width: 49%; width: 46%;
margin-bottom: 16px; margin-bottom: 16px;
} }
.section4 p { .section4 p {

37
src/components/interaKto/InteraKto.jsx
View File

@ -13,7 +13,7 @@ import { Concept_explainer } from "../data/pageContent";
import ScrollToTop from "../ScrollToTop/ScrollToTop"; import ScrollToTop from "../ScrollToTop/ScrollToTop";
import { store } from "../redux/store"; import { store } from "../redux/store";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import GameProvider from '../context/GameContext'; import GameProvider from "../context/GameContext";
const array1 = [ const array1 = [
{ img: "/assets/WAU_1.png", title: "World Around Us" }, { img: "/assets/WAU_1.png", title: "World Around Us" },
{ img: "/assets/learning_area_1.png", title: "Language" }, { img: "/assets/learning_area_1.png", title: "Language" },
@ -55,7 +55,10 @@ function InteraKto() {
<a href={"/pricing/akadmy-product-pricing"}> <a href={"/pricing/akadmy-product-pricing"}>
<button className={style.section1__content_btn}> <button className={style.section1__content_btn}>
View Plans{" "} View Plans{" "}
<img src={'/assets/navigate_next.svg'} alt="navigate next icon" /> <img
src={"/assets/navigate_next.svg"}
alt="navigate next icon"
/>
</button> </button>
</a> </a>
</div> </div>
@ -102,7 +105,6 @@ function InteraKto() {
<div className={`${style.section2__card} ${style.card3}`}> <div className={`${style.section2__card} ${style.card3}`}>
<img <img
src="/assets/Interakto_math.webp" src="/assets/Interakto_math.webp"
width={"100%"}
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education" alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
/> />
<p className={style.title}>Mathematics</p> <p className={style.title}>Mathematics</p>
@ -136,9 +138,9 @@ function InteraKto() {
<p className={style.title}>Logical Thinking</p> <p className={style.title}>Logical Thinking</p>
<p className={style.description}> <p className={style.description}>
Interactive activities to develop critical thinking and Interactive activities to develop critical thinking and
problem-solving skills in young learners. These activities are problem-solving skills in young learners. These activities
designed to enhance their ability to reason and make decisions are designed to enhance their ability to reason and make
effectively. decisions effectively.
</p> </p>
</div> </div>
<div className={`${style.section2__card} ${style.card6}`}> <div className={`${style.section2__card} ${style.card6}`}>
@ -150,9 +152,10 @@ function InteraKto() {
/> />
<p className={style.title}>Coding with InteraKto</p> <p className={style.title}>Coding with InteraKto</p>
<p className={style.description}> <p className={style.description}>
Interactive activities that introduce young learners to basic Interactive activities that introduce young learners to
programming concepts, helping them develop logical thinking basic programming concepts, helping them develop logical
and problem-solving skills through engaging, hands-on tasks. thinking and problem-solving skills through engaging,
hands-on tasks.
</p> </p>
</div> </div>
<div className={` ${style.card_group}`}> <div className={` ${style.card_group}`}>
@ -295,12 +298,12 @@ function InteraKto() {
</div> </div>
<div className={style.section4__content_2}> <div className={style.section4__content_2}>
<GameProvider> <GameProvider>
<PhotoFlipCarousel <PhotoFlipCarousel
theme="INTERAKTO" theme="INTERAKTO"
data={select === 0 ? interaktoWorksheets : interaktoAudio} data={select === 0 ? interaktoWorksheets : interaktoAudio}
background={"#001F48"} background={"#001F48"}
color={"#DBFFEB"} color={"#DBFFEB"}
poster="/assets/AudioBookPlay.webp" poster="/assets/AudioBookPlay.webp"
/> />
</GameProvider> </GameProvider>
</div> </div>
@ -311,7 +314,9 @@ function InteraKto() {
<section className={style.section5}> <section className={style.section5}>
<ContentWrapper> <ContentWrapper>
<div className={style.section5__content}> <div className={style.section5__content}>
<p className={style.section5__content__line1}>Explore InteraKto</p> <p className={style.section5__content__line1}>
Explore InteraKto
</p>
<h2 className={style.section5__content__line2}> <h2 className={style.section5__content__line2}>
Concept Explainers That Engage Concept Explainers That Engage
</h2> </h2>

4
src/components/interaKto/InteraKto.module.css
View File

@ -5,6 +5,10 @@
/* --interakto-primary-color4: #afba28; */ /* --interakto-primary-color4: #afba28; */
} }
* {
box-sizing: border-box;
}
/* ///////////////// */ /* ///////////////// */
/* /// Section 1 /// */ /* /// Section 1 /// */

15
src/components/interaKto/Worksheets.jsx
View File

@ -1,20 +1,21 @@
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
import { useContext } from "react";
import { GameContext } from "../../context/GameContext";
export default function Index() { export default function Index() {
const { gameLink } = useContext(GameContext);
return ( return (
<div> <div>
<div style={{ position: "absolute", top: "12px", left: "10px" }}> <div style={{ position: "absolute", top: "12px", left: "10px" }}>
<a href={`/interactive-learning-resources-for-preschool`}> <a href={`/interactive-learning-resources-for-preschool`}>
<KeyboardBackspaceIcon fontSize="large" color="primary" /> <i class="fa fa-arrow-left fa-2x" aria-hidden="true"></i>
</a> </a>
</div> </div>
<div <div
style={{ height: "100vh", display: "flex", flexDirection: "column" }} style={{ height: "100vh", display: "flex", flexDirection: "column" }}
> >
<iframe src={gameLink} style={{ flex: 1, border: "none" }} /> <iframe
src={`https://interaktogames.beanstalkedu.com/${window.location.search.replace(
/^\?/,
""
)}`}
style={{ flex: 1, border: "none" }}
/>
</div> </div>
</div> </div>
); );

1
src/components/redux/purchaseSlice.js
View File

@ -275,7 +275,6 @@ export const purchaseSlice = createSlice({
builder.addCase(getPurchaseDetails.fulfilled, (state, action) => { builder.addCase(getPurchaseDetails.fulfilled, (state, action) => {
state.purchaseDetails = action.payload.data.data[0]; state.purchaseDetails = action.payload.data.data[0];
console.log("lookData", action.payload);
}); });
builder.addCase(getAllTeenybeansLanguages.fulfilled, (state, action) => { builder.addCase(getAllTeenybeansLanguages.fulfilled, (state, action) => {
state.teenybeansLanguages = action.payload.data; state.teenybeansLanguages = action.payload.data;

8
src/layouts/Layout.astro
View File

@ -56,6 +56,10 @@ console.log('Astro.props', newSchema1, newSchema2, newSchema3)
{newSchema3 && ( {newSchema3 && (
<script is:inline type="application/ld+json" set:html={newSchema3}/> <script is:inline type="application/ld+json" set:html={newSchema3}/>
)} --> )} -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head> </head>
<body> <body>
<slot /> <slot />
@ -86,6 +90,10 @@ console.log('Astro.props', newSchema1, newSchema2, newSchema3)
src: url(/src/assets/Inter.ttf); src: url(/src/assets/Inter.ttf);
} }
h1,h2,h3,h4,h5,h6 {
margin:0;
}
#root { #root {
padding: 0; padding: 0;
margin: 0; margin: 0;

4
src/pages/interactive-learning-resources-for-preschool.astro → src/pages/interactive-learning-resources-for-preschool/index.astro
View File

@ -1,6 +1,6 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../../layouts/Layout.astro";
import Interakto from "../components/interaKto/InteraKto"; import Interakto from "../../components/interaKto/InteraKto";
--- ---
<Layout <Layout

15
src/pages/interactive-learning-resources-for-preschool/worksheet.astro Normal file
View File

@ -0,0 +1,15 @@
---
import Layout from "../../layouts/Layout.astro";
import Worksheets from "../../components/interaKto/Worksheets";
---
<Layout
title = "Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
description = "Spark your child's curiosity with aKadmy’s playful, interactive preschool resources—designed to make early learning fun, engaging, and meaningful."
keywords = "Learning, aKadmy, Early Education, Preschool, Engaging, playful"
ogImage = "/assets/akademy_Logo.png"
ogUrl = "https://akadmyapp.com/interactive-learning-resources-for-preschool"
canonicalUrl = "https://akadmyapp.com/interactive-learning-resources-for-preschool"
>
<Worksheets client:only="react" />
</Layout>