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

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

@ -7,6 +7,7 @@ import Banner from "../Blog/Banner";
import Footer from "../Footer/Footer";
import { store } from "../redux/store";
import { Provider } from "react-redux";
import style from "./index.module.css";
const Index = () => {
window.scrollTo({ top: 0, behavior: "instant" });
const [data, setData] = useState([]);
@ -18,7 +19,7 @@ const Index = () => {
.then((result) => {
result.json().then((res) => {
setData(res.data.reverse());
});
});
})
.catch((error) => {
// toast.error("Could not process data, please try again later!");
@ -28,31 +29,26 @@ const Index = () => {
return (
<>
<Provider store={store}>
<Banner data={newData} />
<ContentWrapper>
<h2
style={{
color: "#00548E",
marginBottom: "10px",
textAlign: "center",
}}
>
Trending Blogs
</h2>
<Grid
container
spacing={2}
alignItems="center"
justifyContent={"center"}
>
{newData.map((Blog) => (
<Grid item xs={12} sm={6} md={4} lg={4} xl={4}>
<Card data={Blog} />
</Grid>
))}
</Grid>
</ContentWrapper>
<Footer page="INTERAKTO_CODING" />
<Banner data={newData} />
<ContentWrapper>
<h2
style={{
color: "#00548E",
marginBottom: "10px",
textAlign: "center",
}}
>
Trending Blogs
</h2>
<div className={style.flex_box}>
{newData.map((Blog) => (
<div className={style.box_card}>
<Card data={Blog} />
</div>
))}
</div>
</ContentWrapper>
<Footer page="INTERAKTO_CODING" />
</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";
function PhotoFlipCarousel({ theme, data, background, color, poster }) {
const { setGameLink } = useContext(GameContext);
const { gameLink, setGameLink } = useContext(GameContext);
console.log("gameLink", gameLink);
useEffect(() => {
initialize();
@ -140,11 +142,16 @@ function PhotoFlipCarousel({ theme, data, background, color, poster }) {
</video>
) : (
<>
{console.log("item.link", item.link)}
{item.link && (
<a href={"/worksheet"} className={style.btn}>
<button onClick={() => setGameLink(item.link)}>
Try now
</button>
<a
href={`/interactive-learning-resources-for-preschool/worksheet?${item.link.replaceAll(
"https://interaktogames.beanstalkedu.com/",
""
)}`}
className={style.btn}
>
<button>Try now</button>
</a>
)}
</>

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

@ -1,11 +1,11 @@
.container {
height: 100%;
display: flex;
justify-content: center;
height: 100%;
display: flex;
justify-content: center;
}
.sub_container {
width: 80vw;
max-width: 1200px;
height: 100%;
width: 80vw;
max-width: 1200px;
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">
Facebook
</a>
<a href="https://www.instagram.com/akadmy.app/" target="_blank">
<a href="https://www.instagram.com/akadmyapp/" target="_blank">
Instagram
</a>
<a

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

@ -17,7 +17,7 @@
.contact_box {
width: 100%;
min-height: 300px;
padding: 2rem;
/* padding: 2rem; */
border-radius: 10px;
display: flex;
justify-content: space-between;
@ -28,6 +28,7 @@
.contact_box .content_left {
width: 60%;
min-width: 200px;
padding: 2rem 0rem 2rem 2rem;
}
.contact_box .content_left .line1 {
@ -50,7 +51,7 @@
.contact_box .content_right {
width: 32%;
min-width: 240px;
padding: 2rem 2rem 2rem 0rem;
display: flex;
flex-direction: column;
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 {
width: 100%;
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
young as 4 years old can create their own stories, games, and
animations using the simple-to-use ScratchJr interface. . And as
it is a visual programming language, when children design all the
while developing crucial problem-solving skills and logical
it is a visual programming language, when children design all
the while developing crucial problem-solving skills and logical
thinking. Coding is all about learning to think creatively and
work collaboratively.
</p>
@ -113,18 +113,18 @@ function IntraktoCoding() {
<p>Our Coding Curriculum</p>
<h4>Why have a Coding Curriculum for Preschoolers?</h4>
<p className={style.secondary_color}>
Our block-based programming approach, using ScratchJr , introduces
coding as another language . With Scratch Children learn how to
write commands , create loops, and understand programming language
from basic. Each lesson is designed so that completing it and
moving on to the next level makes your child feel a sense of
achievement at every step.
Our block-based programming approach, using ScratchJr ,
introduces coding as another language . With Scratch Children
learn how to write commands , create loops, and understand
programming language from basic. Each lesson is designed so that
completing it and moving on to the next level makes your child
feel a sense of achievement at every step.
</p>
<div className={style.flex}>
{codingPreschoolers.map((item) => (
<div className={style.preschoolCard}>
<img src={item.img} />
<h6>{item.title}</h6>
<h4>{item.title}</h4>
<p>{item.description}</p>
</div>
))}
@ -132,7 +132,9 @@ function IntraktoCoding() {
</div>
<div className={`${style.flex}`}>
<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>
interaKto Coding was established by the internationally
recognized Media Labs at MIT (Massachusetts Institute of
@ -203,14 +205,14 @@ function IntraktoCoding() {
<ContentWrapper>
<h4>Benefits of Coding Early</h4>
<p>
Learning to code at an early age has numerous benefits beyond just
computer literacy. Our program helps children develop essential
life skills such as:
Learning to code at an early age has numerous benefits beyond
just computer literacy. Our program helps children develop
essential life skills such as:
</p>
<div className={style.flex}>
{skills.map((item) => (
<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>
</div>
))}
@ -286,10 +288,10 @@ function IntraktoCoding() {
>
<ContentWrapper>
<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}>
Enrolling in interaKto Coding is easy. Follow these simple steps to
start your child’s coding journey:
Enrolling in interaKto Coding is easy. Follow these simple steps
to start your child’s coding journey:
</p>
<a href={"/pricing/akadmy-product-pricing"}>
<button
@ -327,13 +329,13 @@ function IntraktoCoding() {
color: "white",
}}
>
<h6 style={{ marginTop: "18px", marginLeft: "60px" }}>
<h4 style={{ marginTop: "18px", marginLeft: "60px" }}>
Step {index + 1}
</h6>
</h4>
<div className={style.triangle_right}></div>
</div>
<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>
</div>
))}
@ -341,7 +343,11 @@ function IntraktoCoding() {
</ContentWrapper>
</section>
<FAQ color1={"#001F48"} color2={"#72B3FF"} data={faqsInterakto_coding} />
<FAQ
color1={"#001F48"}
color2={"#72B3FF"}
data={faqsInterakto_coding}
/>
<section className={style.section6}>
<ContentWrapper>
<div className={style.section6__content}>

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

@ -62,7 +62,7 @@
}
.section4__content__1_line2 {
max-width: 300px !important;
max-width: 330px !important;
}
.section4__content_2 {
@ -100,7 +100,7 @@
background: white;
border: 1px solid #01518c4d;
border-radius: 6px;
padding: 30px;
padding: 10px;
}
.bottom_cloud {
@ -109,11 +109,11 @@
}
.skills_card {
width: 24%;
width: 22%;
background: white;
border: 1px solid #01518c4d;
border-radius: 6px;
padding: 30px;
padding: 10px;
}
.triangle_right {
@ -145,7 +145,7 @@
margin-top: -80px;
}
.preschoolCard {
width: 48%;
width: 45%;
margin: 0 auto 30px auto;
}
.flex_1 {
@ -161,7 +161,7 @@
bottom: -52px;
}
.skills_card {
width: 49%;
width: 46%;
margin-bottom: 16px;
}
.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 { store } from "../redux/store";
import { Provider } from "react-redux";
import GameProvider from '../context/GameContext';
import GameProvider from "../context/GameContext";
const array1 = [
{ img: "/assets/WAU_1.png", title: "World Around Us" },
{ img: "/assets/learning_area_1.png", title: "Language" },
@ -55,7 +55,10 @@ function InteraKto() {
<a href={"/pricing/akadmy-product-pricing"}>
<button className={style.section1__content_btn}>
View Plans{" "}
<img src={'/assets/navigate_next.svg'} alt="navigate next icon" />
<img
src={"/assets/navigate_next.svg"}
alt="navigate next icon"
/>
</button>
</a>
</div>
@ -102,7 +105,6 @@ function InteraKto() {
<div className={`${style.section2__card} ${style.card3}`}>
<img
src="/assets/Interakto_math.webp"
width={"100%"}
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
/>
<p className={style.title}>Mathematics</p>
@ -136,9 +138,9 @@ function InteraKto() {
<p className={style.title}>Logical Thinking</p>
<p className={style.description}>
Interactive activities to develop critical thinking and
problem-solving skills in young learners. These activities are
designed to enhance their ability to reason and make decisions
effectively.
problem-solving skills in young learners. These activities
are designed to enhance their ability to reason and make
decisions effectively.
</p>
</div>
<div className={`${style.section2__card} ${style.card6}`}>
@ -150,9 +152,10 @@ function InteraKto() {
/>
<p className={style.title}>Coding with InteraKto</p>
<p className={style.description}>
Interactive activities that introduce young learners to basic
programming concepts, helping them develop logical thinking
and problem-solving skills through engaging, hands-on tasks.
Interactive activities that introduce young learners to
basic programming concepts, helping them develop logical
thinking and problem-solving skills through engaging,
hands-on tasks.
</p>
</div>
<div className={` ${style.card_group}`}>
@ -295,12 +298,12 @@ function InteraKto() {
</div>
<div className={style.section4__content_2}>
<GameProvider>
<PhotoFlipCarousel
theme="INTERAKTO"
data={select === 0 ? interaktoWorksheets : interaktoAudio}
background={"#001F48"}
color={"#DBFFEB"}
poster="/assets/AudioBookPlay.webp"
<PhotoFlipCarousel
theme="INTERAKTO"
data={select === 0 ? interaktoWorksheets : interaktoAudio}
background={"#001F48"}
color={"#DBFFEB"}
poster="/assets/AudioBookPlay.webp"
/>
</GameProvider>
</div>
@ -311,7 +314,9 @@ function InteraKto() {
<section className={style.section5}>
<ContentWrapper>
<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}>
Concept Explainers That Engage
</h2>

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

@ -5,6 +5,10 @@
/* --interakto-primary-color4: #afba28; */
}
* {
box-sizing: border-box;
}
/* ///////////////// */
/* /// 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() {
const { gameLink } = useContext(GameContext);
return (
<div>
<div style={{ position: "absolute", top: "12px", left: "10px" }}>
<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>
</div>
<div
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>
);

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

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

8
src/layouts/Layout.astro
View File

@ -56,6 +56,10 @@ console.log('Astro.props', newSchema1, newSchema2, newSchema3)
{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>
<body>
<slot />
@ -86,6 +90,10 @@ console.log('Astro.props', newSchema1, newSchema2, newSchema3)
src: url(/src/assets/Inter.ttf);
}
h1,h2,h3,h4,h5,h6 {
margin:0;
}
#root {
padding: 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 Interakto from "../components/interaKto/InteraKto";
import Layout from "../../layouts/Layout.astro";
import Interakto from "../../components/interaKto/InteraKto";
---
<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>