generated from dwd/boilarplate-astro-tailwind
Akademy Landing MPA
This commit is contained in:
375
src/components/IntraktoCoding/IntraktoCoding.jsx
Normal file
375
src/components/IntraktoCoding/IntraktoCoding.jsx
Normal file
@@ -0,0 +1,375 @@
|
||||
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} />
|
||||
<h6>{item.title}</h6>
|
||||
<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}>
|
||||
<h6 className={style.primary_color}>{item.title}</h6>
|
||||
<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>
|
||||
<h4 className={style.primary_color}>Ready to Begin? Here's How</h4>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
<h6 style={{ marginTop: "18px", marginLeft: "60px" }}>
|
||||
Step {index + 1}
|
||||
</h6>
|
||||
<div className={style.triangle_right}></div>
|
||||
</div>
|
||||
<div className={style.triangle_topright} />
|
||||
<h6 className={style.primary_color}>{item.title}</h6>
|
||||
<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;
|
||||
Reference in New Issue
Block a user