generated from dwd/boilarplate-astro-tailwind
340 lines
15 KiB
JavaScript
340 lines
15 KiB
JavaScript
import React, { useState } from "react";
|
|
import Header from "../Header/Header";
|
|
import ToggleButton from "../ToggleButton/ToggleButton";
|
|
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
|
import FAQ from "../FAQ/FAQ";
|
|
import Footer from "../Footer/Footer";
|
|
import style from "./InteraKto.module.css";
|
|
import PhotoFlipCarousel from "../Carousel/PhotoFlipCarousel/PhotoFlipCarousel";
|
|
import { faqsInterakto } from "../data/faqs";
|
|
import { interaktoAudio, interaktoWorksheets } from "../data/photoFileData";
|
|
import LearningResources from "../LearningResources/LearningResources";
|
|
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";
|
|
const array1 = [
|
|
{ img: "/assets/WAU_1.png", title: "World Around Us" },
|
|
{ img: "/assets/learning_area_1.png", title: "Language" },
|
|
{ img: "/assets/maths_1.png", title: "Mathematics" },
|
|
{ img: "/assets/celebration_1.png", title: "Celebrations" },
|
|
];
|
|
|
|
const array2 = [
|
|
{ img: "/assets/WAU_2.png", title: "World Around Us" },
|
|
{ img: "/assets/learning_area_2.png", title: "Language" },
|
|
{ img: "/assets/maths_2.png", title: "Mathematics" },
|
|
{ img: "/assets/celebration_2.png", title: "Celebrations" },
|
|
];
|
|
|
|
function InteraKto() {
|
|
const [select, setSelect] = useState(0);
|
|
return (
|
|
<>
|
|
<Provider store={store}>
|
|
{/* <ScrollToTop /> */}
|
|
<section className={style.section1}>
|
|
<ContentWrapper>
|
|
<Header color={"#0348A8"} />
|
|
<div className={style.section1__container}>
|
|
<div className={style.section1__content}>
|
|
<p className={style.section1__content__line1}>
|
|
Introducing InteraKto
|
|
</p>
|
|
<h1 className={style.section1__content__line2}>
|
|
AI-Powered Learning, Redefined.
|
|
</h1>
|
|
<p className={style.section1__content__line3}>
|
|
An innovative platform that leverages AI to deliver
|
|
personalized, interactive learning experiences, blending
|
|
traditional education with cutting-edge technology for dynamic
|
|
and impactful results.
|
|
</p>
|
|
<div style={{ zIndex: 999999 }}>
|
|
<a href={"/pricing/akadmy-product-pricing"}>
|
|
<button className={style.section1__content_btn}>
|
|
View Plans{" "}
|
|
<img
|
|
src={"/assets/navigate_next.svg"}
|
|
alt="navigate next icon"
|
|
/>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentWrapper>
|
|
</section>
|
|
<div className={style.section1__bg_1}></div>
|
|
<div className={style.section1__bg_2}></div>
|
|
|
|
<section className={style.section2}>
|
|
<ContentWrapper>
|
|
<div className={style.section2__content}>
|
|
<p className={style.section2__content__line1}>
|
|
Why kids grow with interaKto
|
|
</p>
|
|
<h2 className={style.section2__content__line2}>
|
|
Science Powering The Technology
|
|
</h2>
|
|
{/* TODO: Integrate Carousels */}
|
|
<div className={style.section2__cards_container}>
|
|
<div className={`${style.section2__card} ${style.card1}`}>
|
|
<img
|
|
src="/assets/Interakto_Understanding_world.webp"
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Understanding the world</p>
|
|
<p className={style.description}>
|
|
Teaches young learners about geography, nature, and science
|
|
through engaging, interactive worksheets.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card2}`}>
|
|
<img
|
|
src="/assets/interakto_literacy.webp"
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Language & Literacy</p>
|
|
<p className={style.description}>
|
|
Offers interactive activities to build reading, writing, and
|
|
communication skills for young learners.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card3}`}>
|
|
<img
|
|
src="/assets/Interakto_math.webp"
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Mathematics</p>
|
|
<p className={style.description}>
|
|
Provides interactive worksheets to teach basic math concepts
|
|
like counting and arithmetic to young learners.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card4}`}>
|
|
<img
|
|
src="/assets/Interakto_Celebrations.webp"
|
|
width={"100%"}
|
|
style={{ maxWidth: "300px", margin: "0 auto" }}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Celebrating Celebrations</p>
|
|
<p className={style.description}>
|
|
Interactive activities that help young learners explore and
|
|
appreciate various cultural and traditional celebrations.
|
|
These activities are designed to be both educational and
|
|
engaging, allowing children to understand and celebrate
|
|
diversity.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card5}`}>
|
|
<img
|
|
src="/assets/Interakto_Thinking.webp"
|
|
width={"100%"}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card6}`}>
|
|
<img
|
|
src="/assets/Interakto_coding.webp"
|
|
width={"100%"}
|
|
style={{ maxWidth: "300px", margin: "0 auto" }}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
<div className={` ${style.card_group}`}>
|
|
<div className={`${style.section2__card} ${style.card7}`}>
|
|
<img
|
|
src="/assets/Problem_Solving.webp"
|
|
height={"100%"}
|
|
className={`${style.img}`}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Problem Solving </p>
|
|
<p className={style.description}>
|
|
interactive activities that boost critical thinking and
|
|
decision-making skills, guiding young learners to tackle
|
|
challenges effectively.
|
|
</p>
|
|
</div>
|
|
<div className={`${style.section2__card} ${style.card8}`}>
|
|
<img
|
|
src="/assets/Interakto_Perseverance.webp"
|
|
height={"100%"}
|
|
className={`${style.img}`}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
/>
|
|
<p className={style.title}>Perseverance </p>
|
|
<p className={style.description}>
|
|
Activities that encourage young learners to stay committed
|
|
to tasks, even when they face challenges, helping them
|
|
develop resilience and determination.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentWrapper>
|
|
</section>
|
|
|
|
<section className={style.section3}>
|
|
{/* <ContentWrapper> */}
|
|
<div className={style.section3__container}>
|
|
<div className={style.section3__content}>
|
|
<p className={style.section3__content__line1}>Learning Areas</p>
|
|
<h2 className={style.section3__content__line2}>
|
|
Learning Areas Reinforced
|
|
</h2>
|
|
<div className={style.marquee_container}>
|
|
<div className={style.marquee}>
|
|
<div className={style.marquee__content1}>
|
|
{array1.map((item) => (
|
|
<div className={style.marquee__box}>
|
|
<img
|
|
src={item.img}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
width={"26px"}
|
|
/>
|
|
<b>{item.title}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={style.marquee__content2}>
|
|
{array1.map((item) => (
|
|
<div className={style.marquee__box}>
|
|
<img
|
|
src={item.img}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
width={"26px"}
|
|
/>
|
|
<b>{item.title}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={style.marquee_container}>
|
|
<div className={style.marquee2}>
|
|
<div className={style.marquee__content1}>
|
|
{array2.map((item) => (
|
|
<div className={style.marquee__box}>
|
|
<img
|
|
src={item.img}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
width={"26px"}
|
|
/>
|
|
<b>{item.title}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={style.marquee__content2}>
|
|
{array2.map((item) => (
|
|
<div className={style.marquee__box}>
|
|
<img
|
|
src={item.img}
|
|
alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
|
|
width={"26px"}
|
|
/>
|
|
<b>{item.title}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* </ContentWrapper> */}
|
|
</section>
|
|
|
|
<section className={style.section4}>
|
|
<ContentWrapper>
|
|
<div className={style.section4__content}>
|
|
<div className={style.section4__content_1}>
|
|
<p className={style.section4__content__1_line1}>
|
|
Explore interaKto
|
|
</p>
|
|
<h2 className={style.section4__content__1_line2}>
|
|
Every interaKtion delivers learning
|
|
</h2>
|
|
<ToggleButton
|
|
setSelect={setSelect}
|
|
data={["WORKSHEETS", "AUDIO BOOKS"]}
|
|
discription={[
|
|
"InteraKto worksheets are interactive tools for engaging young learners in subjects like literacy, math, and science.",
|
|
"Enhance literacy by providing an engaging way for young learners to listen to stories and develop language skills.",
|
|
]}
|
|
url={[
|
|
"/pricing/akadmy-platform-pricing",
|
|
"/pricing/akadmy-product-pricing",
|
|
]}
|
|
onchange={() => {}}
|
|
style={{
|
|
marginTop: "1rem",
|
|
color: "#D2F1FF",
|
|
backgroundColor: "#6295D9",
|
|
selectedBtnTextColor: "#DBFFEB",
|
|
selectedBtnBgColor: "#001F48",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={style.section4__content_2}>
|
|
<GameProvider>
|
|
<PhotoFlipCarousel
|
|
theme="INTERAKTO"
|
|
data={select === 0 ? interaktoWorksheets : interaktoAudio}
|
|
background={"#001F48"}
|
|
color={"#DBFFEB"}
|
|
poster="/assets/AudioBookPlay.webp"
|
|
/>
|
|
</GameProvider>
|
|
</div>
|
|
</div>
|
|
</ContentWrapper>
|
|
</section>
|
|
|
|
<section className={style.section5}>
|
|
<ContentWrapper>
|
|
<div className={style.section5__content}>
|
|
<p className={style.section5__content__line1}>
|
|
Explore InteraKto
|
|
</p>
|
|
<h2 className={style.section5__content__line2}>
|
|
Concept Explainers That Engage
|
|
</h2>
|
|
<LearningResources
|
|
data={Concept_explainer}
|
|
color1="#001F48"
|
|
color2="#DBFFEB"
|
|
/>
|
|
</div>
|
|
</ContentWrapper>
|
|
</section>
|
|
|
|
<FAQ color1={"#001F48"} color2={"#72B3FF"} data={faqsInterakto} />
|
|
<Footer page="INTERAKTO" />
|
|
</Provider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default InteraKto;
|