generated from dwd/boilarplate-astro-tailwind
382 lines
14 KiB
JavaScript
382 lines
14 KiB
JavaScript
import React from "react";
|
||
import FAQ from "../FAQ/FAQ";
|
||
import Footer from "../Footer/Footer";
|
||
import PhotoFlipCarousel from "../Carousel/PhotoFlipCarousel/PhotoFlipCarousel";
|
||
import { faqsInterakto_coding } from "../data/faqs";
|
||
import ScrollToTop from "../ScrollToTop/ScrollToTop";
|
||
import IntraktoCodingBanner from "../IntraktoCodingBanner/IntraktoCoding";
|
||
import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
|
||
import style from "./IntraktoCoding.module.css";
|
||
import { interaktoWorksheets } from "../data/photoFileData";
|
||
import TestimonialCarousal from "../../components/TestimonialCarousal/TestimonialCarousal";
|
||
import { interaktoCodingTestimonial } from "../data/pageContent";
|
||
import { store } from "../redux/store";
|
||
import { Provider } from "react-redux";
|
||
const codingPreschoolers = [
|
||
{
|
||
img: "/assets/Curriculum_1.png",
|
||
title: "Interactive Learning",
|
||
description:
|
||
"Engage with digital tools that bring stories and characters to life.",
|
||
},
|
||
{
|
||
img: "/assets/Curriculum_2.png",
|
||
title: "Project-Based Learning",
|
||
description:
|
||
"Create personalized projects that reinforce each lesson's objectives",
|
||
},
|
||
{
|
||
img: "/assets/Curriculum_3.png",
|
||
title: "Step Wise Instruction",
|
||
description:
|
||
"Simple, clear instructions that even the youngest learners can follow",
|
||
},
|
||
];
|
||
|
||
const skills = [
|
||
{
|
||
title: "Problem-Solving",
|
||
description: "Learn how to break down complex tasks into manageable steps.",
|
||
},
|
||
{
|
||
title: "Creativity",
|
||
description: "Design and build unique projects from scratch.",
|
||
},
|
||
{
|
||
title: "Collaboration",
|
||
description:
|
||
"Work together on group projects, learning to communicate and share ideas.",
|
||
},
|
||
{
|
||
title: "Confidence",
|
||
description:
|
||
"Celebrate successes and learn from mistakes in a supportive environment.",
|
||
},
|
||
];
|
||
|
||
const setUp = [
|
||
{
|
||
title: "Sign Up",
|
||
description: "Click the 'Enroll Now' button and choose interaKto Coding.",
|
||
},
|
||
{
|
||
title: "Choose Your Program",
|
||
description: "Select the best Plan according to your needs.",
|
||
},
|
||
{
|
||
title: "Start Learning",
|
||
description: "Access our online platform and start the first lesson today.",
|
||
},
|
||
];
|
||
|
||
function IntraktoCoding() {
|
||
return (
|
||
<>
|
||
<Provider store={store}>
|
||
<ScrollToTop />
|
||
<IntraktoCodingBanner />
|
||
<ContentWrapper>
|
||
<div className={`${style.flex}`}>
|
||
<div className={`${style.flex_1} ${style.mt}`}>
|
||
<h4 className={style.primary_color}>
|
||
Why Coding for Preschoolers?
|
||
</h4>
|
||
<p>
|
||
We believe that learning should start early. With interaKto you
|
||
can introduce young children to the basics of coding. It engages
|
||
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
|
||
thinking. Coding is all about learning to think creatively and
|
||
work collaboratively.
|
||
</p>
|
||
</div>
|
||
<div className={style.flex_1} style={{ margin: "auto 0px" }}>
|
||
<img
|
||
src="/assets/children.webp"
|
||
width={"100%"}
|
||
alt="Child Using Interakto Coding Worksheet"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</ContentWrapper>
|
||
<div style={{ background: "#F1F2FF", marginTop: "100px" }}>
|
||
<img
|
||
src="/assets/Cloud.webp"
|
||
width={"100%"}
|
||
className={style.cloud_img}
|
||
/>
|
||
<ContentWrapper>
|
||
<div className={`${style.primary_color} ${style.text_center}`}>
|
||
<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.
|
||
</p>
|
||
<div className={style.flex}>
|
||
{codingPreschoolers.map((item) => (
|
||
<div className={style.preschoolCard}>
|
||
<img src={item.img} />
|
||
<h4>{item.title}</h4>
|
||
<p>{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</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>
|
||
<p>
|
||
interaKto Coding was established by the internationally
|
||
recognized Media Labs at MIT (Massachusetts Institute of
|
||
Technology), a leader in computer science and technology. Our
|
||
program is successful and scientifically proven since it is
|
||
based on the most recent research in early childhood coding
|
||
education.
|
||
</p>
|
||
<br />
|
||
<a href={"/pricing/akadmy-product-pricing"}>
|
||
<button className={style.btn}>
|
||
Get Started <i class="fa fa-arrow-right" />
|
||
</button>
|
||
</a>
|
||
</div>
|
||
<div
|
||
className={`${style.flex_1} ${style.order_2}`}
|
||
style={{ margin: "auto 0px" }}
|
||
>
|
||
<img
|
||
src="/assets/MIT-Based.webp"
|
||
width={"100%"}
|
||
alt="Child Using Interakto Coding Worksheet"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className={`${style.flex}`}>
|
||
<div className={style.flex_1} style={{ margin: "auto 0px" }}>
|
||
<img
|
||
src="/assets/Jr-Interface.webp"
|
||
width={"100%"}
|
||
alt="Child Using Interakto Coding Worksheet"
|
||
/>
|
||
</div>
|
||
<div className={`${style.flex_1} ${style.mt}`}>
|
||
<h4 className={style.primary_color}>Scratch Jr Interface</h4>
|
||
<p>
|
||
We use the Scratch Jr interface to make our curriculum
|
||
accessible to young learners associated with our Teeny Beans
|
||
partner centers around the world . Young children can learn
|
||
about coding ideas and hone their problem-solving abilities in
|
||
an engaging and dynamic manner by using the Scratch Jr.
|
||
platform.
|
||
</p>
|
||
<br />
|
||
<a href={"/pricing/akadmy-product-pricing"}>
|
||
<button className={style.btn}>
|
||
Get Started <i class="fa fa-arrow-right" />
|
||
</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</ContentWrapper>
|
||
|
||
<div
|
||
style={{
|
||
textAlign: "center",
|
||
backgroundImage:
|
||
"linear-gradient(to right, #b39bf5, #a1b5ee, #97c4ea)",
|
||
paddingTop: "60px",
|
||
color: "white",
|
||
paddingBottom: "360px",
|
||
marginTop: "80px",
|
||
position: "relative",
|
||
marginBottom: "200px",
|
||
}}
|
||
>
|
||
<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:
|
||
</p>
|
||
<div className={style.flex}>
|
||
{skills.map((item) => (
|
||
<div className={style.skills_card}>
|
||
<h4 className={style.primary_color}>{item.title}</h4>
|
||
<p className={style.secondary_color}>{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ marginBottom: "-300px" }}>
|
||
<img
|
||
src="/assets/on_cloud.webp"
|
||
width={"300px"}
|
||
alt="Teacher Managing Interakto Coding Tools on aKadmy"
|
||
/>
|
||
</div>
|
||
</ContentWrapper>
|
||
<div className={style.bottom_cloud}>
|
||
<img
|
||
src="/assets/cloud_bg.svg"
|
||
width={"100%"}
|
||
alt="Teacher Managing Interakto Coding Tools on aKadmy"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section className={style.section4}>
|
||
<ContentWrapper>
|
||
<div className={style.section4__content}>
|
||
<div className={style.section4__content_1}>
|
||
<p
|
||
className={`${style.section4__content__1_line1} ${style.primary_color}`}
|
||
>
|
||
Success Stories
|
||
</p>
|
||
<h2
|
||
className={`${style.section4__content__1_line2} ${style.primary_color}`}
|
||
>
|
||
See What Our Students Have Created
|
||
</h2>
|
||
<p className={style.secondary_color}>
|
||
From their first animated story to more complex projects, our
|
||
students are achieving amazing things. Here are just a few
|
||
examples of what your child can accomplish with interaKto
|
||
Coding.
|
||
</p>
|
||
<br />
|
||
</div>
|
||
<div className={style.section4__content_2}>
|
||
<video
|
||
width={"100%"}
|
||
height="auto"
|
||
poster="/assets/community_helper.webp"
|
||
controls
|
||
controlsList="nodownload"
|
||
>
|
||
<source
|
||
src={
|
||
"https://bscdn.sgp1.digitaloceanspaces.com/school_owner/videos/02/InteraktoProj13ComHelpers.mp4"
|
||
}
|
||
type="video/mp4"
|
||
/>
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</ContentWrapper>
|
||
</section>
|
||
|
||
<section
|
||
style={{
|
||
backgroundColor: "#F1F2FF",
|
||
textAlign: "center",
|
||
padding: "30px 0px",
|
||
margin: "100px 0px",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<ContentWrapper>
|
||
<p className={style.primary_color}> How to Get Started</p>
|
||
<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:
|
||
</p>
|
||
<a href={"/pricing/akadmy-product-pricing"}>
|
||
<button
|
||
style={{
|
||
background: "#001F48",
|
||
color: "white",
|
||
borderRadius: "10px",
|
||
marginTop: "20px",
|
||
}}
|
||
>
|
||
Get Started <i class="fa fa-arrow-right" />
|
||
</button>
|
||
</a>
|
||
<div className={style.flex}>
|
||
{setUp.map((item, index) => (
|
||
<div
|
||
style={{
|
||
width: "300px",
|
||
background: "white",
|
||
height: "300px",
|
||
margin: "0 auto",
|
||
border: "1px solid #0476BB80",
|
||
borderRadius: "10px",
|
||
marginBottom: "30px",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: "200px",
|
||
marginLeft: "-40px",
|
||
backgroundImage:
|
||
"linear-gradient(to right, #b39bf5, #a1b5ee, #97c4ea)",
|
||
marginTop: "30px",
|
||
display: "flex",
|
||
color: "white",
|
||
}}
|
||
>
|
||
<h4 style={{ marginTop: "18px", marginLeft: "60px" }}>
|
||
Step {index + 1}
|
||
</h4>
|
||
<div className={style.triangle_right}></div>
|
||
</div>
|
||
<div className={style.triangle_topright} />
|
||
<h4 className={style.primary_color}>{item.title}</h4>
|
||
<p>{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</ContentWrapper>
|
||
</section>
|
||
|
||
<FAQ
|
||
color1={"#001F48"}
|
||
color2={"#72B3FF"}
|
||
data={faqsInterakto_coding}
|
||
/>
|
||
<section className={style.section6}>
|
||
<ContentWrapper>
|
||
<div className={style.section6__content}>
|
||
<div className={style.section6__content_left}>
|
||
<p className={`{style.line1} ${style.primary_color}`}>
|
||
Testimonials
|
||
</p>
|
||
<h2 className={`${style.line2} ${style.primary_color}`}>
|
||
Hear From Happy Parents
|
||
<br /> and Educators
|
||
</h2>
|
||
<br />
|
||
<p className={style.secondary_color}>
|
||
Don't just take our word for it—see what others
|
||
<br /> are saying about the impact of interaKto Coding
|
||
<br /> on their children.
|
||
</p>
|
||
</div>
|
||
<div className={style.section6__content_right}>
|
||
<TestimonialCarousal data={interaktoCodingTestimonial} />
|
||
</div>
|
||
</div>
|
||
</ContentWrapper>
|
||
</section>
|
||
<Footer page="INTERAKTO_COADING" contact={true} />
|
||
</Provider>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default IntraktoCoding;
|