From 7b01fe4aa26841c0e8ec3ab78ec77f3ba5dfa352 Mon Sep 17 00:00:00 2001
From: Abhijeet Bagade <abhijeetbagade001@gmail.com>
Date: Wed, 11 Jun 2025 17:29:29 +0530
Subject: [PATCH 1/3] fix-home,interakto,interakto coding,teenybeans page done

---
 src/components/Blogs/index.jsx                | 48 +++++++++----------
 src/components/Blogs/index.module.css         |  9 ++++
 .../PhotoFlipCarousel/PhotoFlipCarousel.jsx   | 17 +++++--
 .../ContentWrapper/ContentWrapper.module.css  | 12 ++---
 src/components/Footer/Footer.jsx              |  2 +-
 src/components/Footer/Footer.module.css       | 14 +++++-
 .../IntraktoCoding/IntraktoCoding.jsx         | 48 +++++++++++--------
 .../IntraktoCoding/IntraktoCoding.module.css  | 12 ++---
 src/components/interaKto/InteraKto.jsx        | 37 +++++++-------
 src/components/interaKto/InteraKto.module.css |  4 ++
 src/components/interaKto/Worksheets.jsx       | 15 +++---
 src/components/redux/purchaseSlice.js         |  1 -
 src/layouts/Layout.astro                      |  8 ++++
 .../index.astro}                              |  4 +-
 .../worksheet.astro                           | 15 ++++++
 15 files changed, 153 insertions(+), 93 deletions(-)
 create mode 100644 src/components/Blogs/index.module.css
 rename src/pages/{interactive-learning-resources-for-preschool.astro => interactive-learning-resources-for-preschool/index.astro} (84%)
 create mode 100644 src/pages/interactive-learning-resources-for-preschool/worksheet.astro

diff --git a/src/components/Blogs/index.jsx b/src/components/Blogs/index.jsx
index 97ec336..05c1499 100644
--- a/src/components/Blogs/index.jsx
+++ b/src/components/Blogs/index.jsx
@@ -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>
     </>
   );
diff --git a/src/components/Blogs/index.module.css b/src/components/Blogs/index.module.css
new file mode 100644
index 0000000..1d6318c
--- /dev/null
+++ b/src/components/Blogs/index.module.css
@@ -0,0 +1,9 @@
+.flex_box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.box_card {
+  width: 32.33%;
+}
diff --git a/src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx b/src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
index cadddd5..82921cd 100644
--- a/src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
+++ b/src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
@@ -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>
                 )}
               </>
diff --git a/src/components/ContentWrapper/ContentWrapper.module.css b/src/components/ContentWrapper/ContentWrapper.module.css
index b8b163f..2d16f5f 100644
--- a/src/components/ContentWrapper/ContentWrapper.module.css
+++ b/src/components/ContentWrapper/ContentWrapper.module.css
@@ -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%;
 }
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 7a1787c..3e66c61 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -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
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 6d1a485..a8d4014 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -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;
diff --git a/src/components/IntraktoCoding/IntraktoCoding.jsx b/src/components/IntraktoCoding/IntraktoCoding.jsx
index ea65b41..8e1386e 100644
--- a/src/components/IntraktoCoding/IntraktoCoding.jsx
+++ b/src/components/IntraktoCoding/IntraktoCoding.jsx
@@ -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}>
diff --git a/src/components/IntraktoCoding/IntraktoCoding.module.css b/src/components/IntraktoCoding/IntraktoCoding.module.css
index ac4236d..c71d51e 100644
--- a/src/components/IntraktoCoding/IntraktoCoding.module.css
+++ b/src/components/IntraktoCoding/IntraktoCoding.module.css
@@ -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 {
diff --git a/src/components/interaKto/InteraKto.jsx b/src/components/interaKto/InteraKto.jsx
index 6e2809e..81930fc 100644
--- a/src/components/interaKto/InteraKto.jsx
+++ b/src/components/interaKto/InteraKto.jsx
@@ -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>
diff --git a/src/components/interaKto/InteraKto.module.css b/src/components/interaKto/InteraKto.module.css
index 186eb2a..7372113 100644
--- a/src/components/interaKto/InteraKto.module.css
+++ b/src/components/interaKto/InteraKto.module.css
@@ -5,6 +5,10 @@
   /* --interakto-primary-color4: #afba28; */
 }
 
+* {
+  box-sizing: border-box;
+}
+
 /* ///////////////// */
 /* /// Section 1 /// */
 
diff --git a/src/components/interaKto/Worksheets.jsx b/src/components/interaKto/Worksheets.jsx
index 337b065..0325c78 100644
--- a/src/components/interaKto/Worksheets.jsx
+++ b/src/components/interaKto/Worksheets.jsx
@@ -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>
   );
diff --git a/src/components/redux/purchaseSlice.js b/src/components/redux/purchaseSlice.js
index 4139693..8cba29e 100644
--- a/src/components/redux/purchaseSlice.js
+++ b/src/components/redux/purchaseSlice.js
@@ -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;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index aac1db3..f270a18 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -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;
diff --git a/src/pages/interactive-learning-resources-for-preschool.astro b/src/pages/interactive-learning-resources-for-preschool/index.astro
similarity index 84%
rename from src/pages/interactive-learning-resources-for-preschool.astro
rename to src/pages/interactive-learning-resources-for-preschool/index.astro
index ce0e148..295a920 100644
--- a/src/pages/interactive-learning-resources-for-preschool.astro
+++ b/src/pages/interactive-learning-resources-for-preschool/index.astro
@@ -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 
diff --git a/src/pages/interactive-learning-resources-for-preschool/worksheet.astro b/src/pages/interactive-learning-resources-for-preschool/worksheet.astro
new file mode 100644
index 0000000..ffd605d
--- /dev/null
+++ b/src/pages/interactive-learning-resources-for-preschool/worksheet.astro
@@ -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>
-- 
2.34.1


From 1a445dfa7f59ca59f685b5430beeee22f8e06dce Mon Sep 17 00:00:00 2001
From: Abhijeet Bagade <abhijeetbagade001@gmail.com>
Date: Wed, 11 Jun 2025 20:40:40 +0530
Subject: [PATCH 2/3] fix-three pages

---
 .../BannerLearningSolutionTab.jsx             |   4 +-
 .../BannerLearningSolutions.module.css        |   2 +-
 src/components/Blogs/SingleBlog.jsx           |  13 +-
 src/components/Blogs/index.module.css         |  30 ++++
 .../InteractionTabs/InteractionTabs.jsx       |   2 +-
 src/components/Product/Product.jsx            | 154 +++++++++---------
 src/components/Product/Product.module.css     |   4 +-
 .../ProductCapabilities.jsx                   |   2 +-
 .../ProductCapabilities.module.css            |   2 +-
 src/components/form/ThreeFormFields.jsx       |   1 +
 .../form/ThreeFormFields.module.css           |   2 +-
 .../toddlers/GroupSection/GroupSection.jsx    |   1 +
 12 files changed, 125 insertions(+), 92 deletions(-)

diff --git a/src/components/BannerLearningSolutions/BannerLearningSolutionTab.jsx b/src/components/BannerLearningSolutions/BannerLearningSolutionTab.jsx
index c149f98..91ddad4 100644
--- a/src/components/BannerLearningSolutions/BannerLearningSolutionTab.jsx
+++ b/src/components/BannerLearningSolutions/BannerLearningSolutionTab.jsx
@@ -5,7 +5,7 @@ import style from "./BannerLearningSolutions.module.css";
 const Card = ({ data }) => {
   return (
     <div className={style.banner_img_align}>
-      <h6
+      <p
         style={{
           color: "#310B8E",
           maxWidth: "400px",
@@ -14,7 +14,7 @@ const Card = ({ data }) => {
         }}
       >
         {data.content}
-      </h6>
+      </p>
       <p style={{ color: "#2E0590" }}>{data.subcontent}</p>
       <a href={"/pricing/akadmy-product-pricing"}>
         <button
diff --git a/src/components/BannerLearningSolutions/BannerLearningSolutions.module.css b/src/components/BannerLearningSolutions/BannerLearningSolutions.module.css
index c225253..fe3025d 100644
--- a/src/components/BannerLearningSolutions/BannerLearningSolutions.module.css
+++ b/src/components/BannerLearningSolutions/BannerLearningSolutions.module.css
@@ -45,7 +45,7 @@
 .active_content {
   background-color: #4909d6;
   color: white;
-  padding: 4px 40px;
+  padding: 4px 30px;
   border-radius: 30px;
   border: 6px solid white;
 }
diff --git a/src/components/Blogs/SingleBlog.jsx b/src/components/Blogs/SingleBlog.jsx
index 4711d63..16555f9 100644
--- a/src/components/Blogs/SingleBlog.jsx
+++ b/src/components/Blogs/SingleBlog.jsx
@@ -6,6 +6,7 @@ import Footer from "../Footer/Footer";
 import ThreeFormFields from "../form/ThreeFormFields";
 import { store } from "../redux/store";
 import { Provider } from "react-redux";
+import style from "./index.module.css";
 
 const Blog = (props) => {
   window.scrollTo({ top: 0, behavior: "instant" });
@@ -15,8 +16,8 @@ const Blog = (props) => {
       <Provider store={store}>
         <ContentWrapper>
           <Header color={"#015C9F"} />
-          <Grid container color={"#0348A8"} spacing={2}>
-            <Grid item xs={12} md={8}>
+          <div className={style.flex_box}>
+            <div className={style.flex_1}>
               {props.blog?.title && <h1>{props.blog?.title}</h1>}
               <Typography variant="body2" my={0.6}>
                 Published On: {props.blog?.date} | 5 min Read
@@ -38,14 +39,14 @@ const Blog = (props) => {
                   />
                 </Typography>
               )}
-            </Grid>
-            <Grid item xs={12} md={4}>
+            </div>
+            <div className={style.flex_2}>
               <Box sx={{ background: "#DEF0FD", p: 3 }}>
                 <Typography>Get in Touch</Typography>
                 <ThreeFormFields formName="Blogs" />
               </Box>
-            </Grid>
-          </Grid>
+            </div>
+          </div>
         </ContentWrapper>
         <Footer page="INTERAKTO_CODING" />
       </Provider>
diff --git a/src/components/Blogs/index.module.css b/src/components/Blogs/index.module.css
index 1d6318c..c318b84 100644
--- a/src/components/Blogs/index.module.css
+++ b/src/components/Blogs/index.module.css
@@ -4,6 +4,36 @@
   justify-content: space-between;
 }
 
+.flex_1 {
+  width: 68%;
+}
+
+.flex_2 {
+  width: 28%;
+}
+
 .box_card {
   width: 32.33%;
 }
+
+@media (max-width: 900px) {
+  .flex_box {
+    flex-direction: column;
+  }
+  .box_card {
+    width: 49%;
+  }
+  .flex_1 {
+    width: 100%;
+  }
+
+  .flex_2 {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .box_card {
+    width: 100%;
+  }
+}
diff --git a/src/components/InteractionTabs/InteractionTabs.jsx b/src/components/InteractionTabs/InteractionTabs.jsx
index fbcb049..9a58213 100644
--- a/src/components/InteractionTabs/InteractionTabs.jsx
+++ b/src/components/InteractionTabs/InteractionTabs.jsx
@@ -61,7 +61,7 @@ export default function InteractionTabs() {
         {array.map((item) => (
           <img
             src={item.img}
-            width={"55px"}
+            width={"35px"}
             style={{
               border: item.title === select.title ? "3px solid #0348A8" : null,
               boxShadow:
diff --git a/src/components/Product/Product.jsx b/src/components/Product/Product.jsx
index 1c20b71..ef2bb8c 100644
--- a/src/components/Product/Product.jsx
+++ b/src/components/Product/Product.jsx
@@ -6,7 +6,7 @@ import Footer from "../Footer/Footer";
 import { platformFaqs } from "../data/faqs";
 import VerticalAutoCarousel from "../VerticalAutoCarousel/VerticalAutoCarousel";
 import style from "./Product.module.css";
-import InteractionTabs from "../InteractionTabs/InteractionTabs"; 
+import InteractionTabs from "../InteractionTabs/InteractionTabs";
 import ContentWrapper from "../ContentWrapper/ContentWrapper";
 import { store } from "../redux/store";
 import { Provider } from "react-redux";
@@ -32,85 +32,85 @@ export default function Product() {
   ];
   return (
     <>
-    <Provider store={store}>
-      <BannerProduct />
-      <ProductCapabilities />
-      <ProductPlatform />
-      <div style={{ background: "#DEF0FD", marginTop: "100px" }}>
-        <img
-          src="/assets/cloud_blue.webp"
-          width={"100%"}
-          className={style.cloud_img}
-        />
-        <div style={{ textAlign: "center" }}>
-          <h2 style={{ color: "#0348A8" }}>
-            What Makes aKadmy the Top Kindergarten Management Solution?
-          </h2>
-          <p>
-            It's the power of AI, transforming everything from streamlining
-            tasks to enhancing learning experiences.
-          </p>
-        </div>
-        <VerticalAutoCarousel />
-        <div style={{ textAlign: "center", marginTop: "60px" }}>
-          <h2 style={{ color: "#0348A8" }}>
-            Say Hello to Your Learning Buddy – aKadmy Sprite!
-          </h2>
-          <p
-            style={{
-              maxWidth: "660px",
-              padding: "0px 40px",
-              margin: "0px auto",
-            }}
-          >
-            Make each lesson engaging and enjoyable with aKadmy Sprite. Select
-            your perfect match and unlock a world of interactive learning!
-          </p>
-        </div>
-        <br />
-        <InteractionTabs />
-      </div>
-      <ContentWrapper>
-        <div style={{ textAlign: "center", margin: "100px 0px 0px 0px" }}>
-          <h2 style={{ color: "#0348A8" }}>
-            Powerful Tools for Transformative Learning
-          </h2>
-          <br />
-          <div
-            style={{
-              display: "flex",
-              flexWrap: "wrap",
-              justifyContent: "space-between",
-            }}
-          >
-            {support.map((item) => (
-              <div className={style.card}>
-                <h6 style={{ color: "#0348A8", marginBottom: "6px" }}>
-                  {item.title}
-                </h6>
-                <p style={{ height: 110 }}>{item.description}</p>
-              </div>
-            ))}
+      <Provider store={store}>
+        <BannerProduct />
+        <ProductCapabilities />
+        <ProductPlatform />
+        <div style={{ background: "#DEF0FD", marginTop: "100px" }}>
+          <img
+            src="/assets/cloud_blue.webp"
+            width={"100%"}
+            className={style.cloud_img}
+          />
+          <div style={{ textAlign: "center" }}>
+            <h2 style={{ color: "#0348A8" }}>
+              What Makes aKadmy the Top Kindergarten Management Solution?
+            </h2>
+            <p>
+              It's the power of AI, transforming everything from streamlining
+              tasks to enhancing learning experiences.
+            </p>
           </div>
+          <VerticalAutoCarousel />
+          <div style={{ textAlign: "center", marginTop: "60px" }}>
+            <h2 style={{ color: "#0348A8" }}>
+              Say Hello to Your Learning Buddy – aKadmy Sprite!
+            </h2>
+            <p
+              style={{
+                maxWidth: "660px",
+                padding: "0px 40px",
+                margin: "0px auto",
+              }}
+            >
+              Make each lesson engaging and enjoyable with aKadmy Sprite. Select
+              your perfect match and unlock a world of interactive learning!
+            </p>
+          </div>
+          <br />
+          <InteractionTabs />
         </div>
-      </ContentWrapper>
-      <img src="/assets/product_curve.webp" width={"100%"} />
-      <div className={style.curve}>
-        <FAQ
-          color1="#0348A8"
-          color2={"#72B3FF"}
-          data={platformFaqs}
-          prefix={"Curious? Find Answers Here"}
+        <ContentWrapper>
+          <div style={{ textAlign: "center", margin: "100px 0px 0px 0px" }}>
+            <h2 style={{ color: "#0348A8" }}>
+              Powerful Tools for Transformative Learning
+            </h2>
+            <br />
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+              }}
+            >
+              {support.map((item) => (
+                <div className={style.card}>
+                  <h4 style={{ color: "#0348A8", marginBottom: "6px" }}>
+                    {item.title}
+                  </h4>
+                  <p style={{ height: 110 }}>{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </ContentWrapper>
+        <img src="/assets/product_curve.webp" width={"100%"} />
+        <div className={style.curve}>
+          <FAQ
+            color1="#0348A8"
+            color2={"#72B3FF"}
+            data={platformFaqs}
+            prefix={"Curious? Find Answers Here"}
+          />
+        </div>
+        <Footer
+          page="AKADEMY_B2C"
+          title="Transform Early Education with aKadmy"
+          description1="Empower teachers, engage parents, and watch little learners thrive with the power of AI in early education."
+          description2="Create a foundation for lifelong success and growth."
+          description3="Get Started Today!"
         />
-      </div>
-      <Footer
-        page="AKADEMY_B2C"
-        title="Transform Early Education with aKadmy"
-        description1="Empower teachers, engage parents, and watch little learners thrive with the power of AI in early education."
-        description2="Create a foundation for lifelong success and growth."
-        description3="Get Started Today!"
-      />
-    </Provider>
+      </Provider>
     </>
   );
 }
diff --git a/src/components/Product/Product.module.css b/src/components/Product/Product.module.css
index 5d1e7fc..2b3f312 100644
--- a/src/components/Product/Product.module.css
+++ b/src/components/Product/Product.module.css
@@ -5,9 +5,9 @@
 .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin: 10px;
-  padding: 40px 14px;
+  padding: 40px 10px;
   border-radius: 10px;
-  width: 30%;
+  width: 29%;
 }
 
 .curve {
diff --git a/src/components/ProductCapabilities/ProductCapabilities.jsx b/src/components/ProductCapabilities/ProductCapabilities.jsx
index 8eb7922..70e8ea8 100644
--- a/src/components/ProductCapabilities/ProductCapabilities.jsx
+++ b/src/components/ProductCapabilities/ProductCapabilities.jsx
@@ -15,7 +15,7 @@ const LeftTab = ({ ToggleState, index, title, info, img }) => {
             alt="Preschool Management Solutions | Streamline Operations with aKadmy"
           />
         ) : null}
-        <h6>{title}</h6>
+        <h4>{title}</h4>
         {ToggleState === index ? <p className={style.normal}>{info}</p> : null}
       </div>
       <div className={style.imgPart1}>
diff --git a/src/components/ProductCapabilities/ProductCapabilities.module.css b/src/components/ProductCapabilities/ProductCapabilities.module.css
index 44ac153..4d805b7 100644
--- a/src/components/ProductCapabilities/ProductCapabilities.module.css
+++ b/src/components/ProductCapabilities/ProductCapabilities.module.css
@@ -48,7 +48,7 @@
 
 .normal {
   font-weight: 300;
-  margin-top: -8px;
+  margin-top: 8px;
 }
 
 .right_img {
diff --git a/src/components/form/ThreeFormFields.jsx b/src/components/form/ThreeFormFields.jsx
index 91647d9..92754da 100644
--- a/src/components/form/ThreeFormFields.jsx
+++ b/src/components/form/ThreeFormFields.jsx
@@ -223,6 +223,7 @@ const ThreeFormFields = (props) => {
               value={message}
               onChange={(e) => setMessage(e.target.value)}
             />
+            <br />
             <button type="submit" className="btn">
               submit
             </button>
diff --git a/src/components/form/ThreeFormFields.module.css b/src/components/form/ThreeFormFields.module.css
index c16657f..e32b830 100644
--- a/src/components/form/ThreeFormFields.module.css
+++ b/src/components/form/ThreeFormFields.module.css
@@ -2,7 +2,7 @@
 textarea {
   width: 100%;
   max-width: 400px;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0rem;
   font-size: 0.8rem;
   font-weight: 600;
   border-radius: 3px;
diff --git a/src/components/toddlers/GroupSection/GroupSection.jsx b/src/components/toddlers/GroupSection/GroupSection.jsx
index 68f6d1f..6675b6c 100644
--- a/src/components/toddlers/GroupSection/GroupSection.jsx
+++ b/src/components/toddlers/GroupSection/GroupSection.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import style from "./GroupSection.module.css";
 import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
 
 const data = [
   {
-- 
2.34.1


From d9d56130d94b3107568fb0f545224940ee985714 Mon Sep 17 00:00:00 2001
From: Abhijeet Bagade <abhijeetbagade001@gmail.com>
Date: Thu, 12 Jun 2025 15:16:31 +0530
Subject: [PATCH 3/3] fix-remaing pages

---
 src/components/About/index.jsx                | 114 ++++++++++++++++++
 src/components/About/index.module.css         |  64 ++++++++++
 src/components/Contact/index.jsx              | 103 ++++++++++++++++
 src/components/Contact/index.module.css       |  53 ++++++++
 src/components/TermCondition/index.jsx        |  58 +++++++++
 src/components/TermCondition/index.module.css |  31 +++++
 src/components/redux/purchaseSlice.js         |   2 +-
 src/layouts/Layout.astro                      |   2 +-
 src/pages/_404.astro                          |  12 ++
 src/pages/about-us.astro                      |  18 +++
 src/pages/contact-us.astro                    |  18 +++
 src/pages/term-and-conditions.astro           |  18 +++
 12 files changed, 491 insertions(+), 2 deletions(-)
 create mode 100644 src/components/About/index.jsx
 create mode 100644 src/components/About/index.module.css
 create mode 100644 src/components/Contact/index.jsx
 create mode 100644 src/components/Contact/index.module.css
 create mode 100644 src/components/TermCondition/index.jsx
 create mode 100644 src/components/TermCondition/index.module.css
 create mode 100644 src/pages/_404.astro
 create mode 100644 src/pages/about-us.astro
 create mode 100644 src/pages/contact-us.astro
 create mode 100644 src/pages/term-and-conditions.astro

diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx
new file mode 100644
index 0000000..7fb701b
--- /dev/null
+++ b/src/components/About/index.jsx
@@ -0,0 +1,114 @@
+import { Provider } from "react-redux";
+import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
+import Footer from "../../components/Footer/Footer";
+import Header from "../../components/Header/Header";
+import style from "./index.module.css";
+import { store } from "../redux/store";
+
+export default function Index() {
+  window.scrollTo({ top: 0, behavior: "instant" });
+  return (
+    <Provider store={store}>
+      <section className={style.color}>
+        <div className={style.image_box}>
+          <ContentWrapper>
+            <Header color={"#015C9F"} />
+            <div className={style.box}>
+              <h2>About Us</h2>
+              <p>
+                At aKadmy, we are dedicated to revolutionizing early childhood
+                education by providing schools and educators with cutting-edge
+                tools designed to enhance teaching and learning experiences. As
+                a Malaysian-developed platform, we take pride in offering
+                solutions that cater to the unique needs of educators,
+                particularly in international schools and early childhood
+                institutions.
+              </p>
+              <p>
+                Our platform is crafted to support early childhood practitioners
+                by offering a comprehensive suite of resources that streamline
+                lesson planning, enrich classroom activities, and foster
+                meaningful student engagement. With an intuitive interface and
+                high-quality educational content, aKadmy empowers teachers to
+                deliver world-class education that nurtures creativity, critical
+                thinking, and problem-solving in young learners.
+              </p>
+            </div>
+          </ContentWrapper>
+        </div>
+        <div className={style.curve}>
+          <img src="/assets/about_us_curve.webp" width={"100%"} />
+        </div>
+        <ContentWrapper>
+          <div className={`${style.flex}`}>
+            <div className={`${style.flex_1} ${style.mt}`}>
+              <h4>Driving Impact in Early Childhood Education</h4>
+              <p>
+                Through our partnership with Beanstalkedu, a global leader in
+                early education, aKadmy is able to offer premium educational
+                content that reflects the latest in pedagogical innovation and
+                global best practices. This collaboration allows us to blend
+                international standards with the unique cultural insights of
+                Malaysia, making our platform highly adaptable for diverse
+                learning environments across the globe.
+              </p>
+            </div>
+            <div className={style.flex_1}>
+              <img
+                src="/assets/about_1.webp"
+                width={"100%"}
+                alt="About aKadmy | Transforming Early Education with AI Solutions"
+              />
+            </div>
+          </div>
+        </ContentWrapper>
+        <div className={style.image_box}>
+          <ContentWrapper>
+            <div className={style.center}>
+              <h2>Our Mission and Vision</h2>
+              <br />
+              <p>
+                Our mission is to support schools and educators by providing a
+                holistic digital solution that not only simplifies day-to-day
+                teaching but also elevates the quality of education offered in
+                early childhood settings. Whether you're an international school
+                looking to enhance your curriculum or a teacher seeking
+                innovative resources, aKadmy provides the tools and content to
+                help you succeed.
+              </p>
+              <p>
+                As we continue to expand globally, aKadmy remains committed to
+                fostering strong partnerships with schools, educators, and
+                institutions, ensuring that every child has access to
+                high-quality, engaging, and effective learning experiences.
+              </p>
+            </div>
+          </ContentWrapper>
+        </div>
+        <ContentWrapper>
+          <div className={`${style.flex}`}>
+            <div className={style.flex_1}>
+              <img
+                src="/assets/about_1.webp"
+                width={"100%"}
+                alt="About aKadmy | Transforming Early Education with AI Solutions"
+              />
+            </div>
+            <div className={`${style.flex_1} ${style.mt}`}>
+              <h4>What we do</h4>
+              <p>
+                Together with <b>Beanstalkedu</b> and our educational partners,
+                we are building a future where every child can thrive in an
+                environment that is both inspiring and supportive.
+              </p>
+            </div>
+          </div>
+        </ContentWrapper>
+        <br />
+        <br />
+        <br />
+        <Footer page="AKADEMY_B2C" contact={true} />
+      </section>
+    </Provider>
+  );
+}
diff --git a/src/components/About/index.module.css b/src/components/About/index.module.css
new file mode 100644
index 0000000..baa40bb
--- /dev/null
+++ b/src/components/About/index.module.css
@@ -0,0 +1,64 @@
+.image_box {
+  background-image: linear-gradient(to right, #eff4ff, #d4f5fe, #dae4fe);
+  padding-bottom: 30px;
+}
+
+.box {
+  text-align: center;
+  padding-top: 100px;
+  height: 600px;
+}
+
+.curve {
+  margin-top: -120px;
+}
+
+.color {
+  color: #00548e;
+  width: 100%;
+}
+
+.box h2 {
+  padding: 20px 0px;
+}
+
+.flex {
+  display: flex;
+  margin: 40px 0;
+  position: relative;
+  z-index: 2;
+}
+
+.flex_1 {
+  flex: 1;
+}
+
+.center {
+  text-align: center;
+  padding: 80px 0;
+}
+
+.mt {
+  margin-top: 80px;
+}
+
+@media only screen and (max-width: 900px) {
+  .curve {
+    margin-top: -60px;
+  }
+  .flex {
+    display: block;
+  }
+  .mt {
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .box {
+    height: 740px;
+  }
+  .curve {
+    margin-top: -30px;
+  }
+}
diff --git a/src/components/Contact/index.jsx b/src/components/Contact/index.jsx
new file mode 100644
index 0000000..8e5be85
--- /dev/null
+++ b/src/components/Contact/index.jsx
@@ -0,0 +1,103 @@
+import { Box } from "@mui/material";
+import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
+import Footer from "../../components/Footer/Footer";
+import Header from "../../components/Header/Header";
+import ThreeFormFields from "../../components/form/ThreeFormFields";
+import style from "./index.module.css";
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+import FAQ from "../../components/FAQ/FAQ";
+import { conatctFaqs } from "../../components/data/faqs";
+import { Provider } from "react-redux";
+import { store } from "../redux/store";
+
+export default function Index() {
+  window.scrollTo({ top: 0, behavior: "instant" });
+  return (
+    <Provider store={store}>
+      <section className={style.section}>
+        <ContentWrapper>
+          <Header color={"#015C9F"} />
+          <div className={style.box}>
+            <h1>
+              We’d Love to Hear From You!
+              <br /> Contact Us
+            </h1>
+            <p>
+              Whether you have a question about our services, need assistance,
+              or just want to share your
+              <br /> thoughts, we’re here to listen.
+            </p>
+          </div>
+        </ContentWrapper>
+      </section>
+      <ContentWrapper>
+        {" "}
+        <div className={`${style.flex}`}>
+          <div className={`${style.flex_1} ${style.mt}`}>
+            <h4>Contact Information</h4>
+            <p>
+              Fill up the form and our team will get back to you within
+              <br /> 24 hours.
+              <br />
+              <EmailOutlinedIcon fontSize="small" />
+              &nbsp; Email: hello@akadmyapp.com
+            </p>
+            <br />
+          </div>
+          <div className={style.flex_1}>
+            <Box boxShadow={1} maxWidth={400} ml={"auto"} p={4}>
+              <b>Get in Touch</b>
+              <p>You can reach us anytime</p>
+              <ThreeFormFields formName="Contact" />
+            </Box>
+          </div>
+        </div>
+        <br />
+        <br />
+        <div className={`${style.flex}`}>
+          <div className={`${style.flex_1}`}>
+            <div>
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3984.090385602562!2d101.690635!3d3.070521!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zM8KwMDQnMTMuOSJOIDEwMcKwNDEnMjYuMyJF!5e0!3m2!1sen!2sin!4v1725867001750!5m2!1sen!2sin"
+                className={style.iframe_width}
+                loading="lazy"
+              />
+            </div>
+          </div>
+          <div className={`${style.flex_1}`} style={{ marginTop: "auto" }}>
+            <br />
+            <h4>Our Location</h4>
+            <p style={{ maxWidth: 400 }}>
+              Come visit us! Use the map below to easily find our location.
+              Whether you're planning a visit or just need directions, the map
+              will guide you right to our doorstep.
+              <div style={{ display: "flex", marginTop: "6px" }}>
+                <div>
+                  <LocationOnIcon sx={{ mt: 6 }} />
+                </div>
+                &nbsp;&nbsp;&nbsp;
+                <div>
+                  Address: Buzzapp Technologies Sdn Bhd,
+                  <br /> 38, 3rd Floor, Jalan Radin Anum,
+                  <br /> Bandar Baru Sri Petaling,
+                  <br /> Kuala Lumpur, Wilayah Persekutuan, 57000
+                  <br /> Malaysia
+                </div>
+              </div>
+            </p>
+            <br />
+            <br />
+          </div>
+        </div>
+      </ContentWrapper>
+      <FAQ color1="#0348A8" color2={"#72B3FF"} data={conatctFaqs} />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <Footer page="AKADEMY_B2C" contact={true} />
+    </Provider>
+  );
+}
diff --git a/src/components/Contact/index.module.css b/src/components/Contact/index.module.css
new file mode 100644
index 0000000..059b819
--- /dev/null
+++ b/src/components/Contact/index.module.css
@@ -0,0 +1,53 @@
+.section {
+  width: 100%;
+  overflow: hidden;
+  background-image: linear-gradient(to right, #eff4ff, #d4f5fe, #dae4fe);
+  padding-bottom: 30px;
+}
+
+.box {
+  text-align: center;
+  color: #00548e;
+  padding-top: 100px;
+  height: 500px;
+}
+
+.color {
+  color: #00548e;
+  padding-top: 30px;
+}
+
+.box h1 {
+  padding: 20px 0px;
+}
+
+.flex {
+  display: flex;
+  margin: 40px 0;
+  position: relative;
+  z-index: 2;
+  color: #00548e;
+}
+
+.flex_1 {
+  flex: 1;
+}
+
+.mt {
+  margin-top: 80px;
+}
+
+.iframe_width {
+  width: 90%;
+  height: 460px;
+}
+
+@media only screen and (max-width: 600px) {
+  .flex {
+    display: block;
+  }
+  .iframe_width {
+    width: 100%;
+    height: 360px;
+  }
+}
diff --git a/src/components/TermCondition/index.jsx b/src/components/TermCondition/index.jsx
new file mode 100644
index 0000000..0479427
--- /dev/null
+++ b/src/components/TermCondition/index.jsx
@@ -0,0 +1,58 @@
+import ContentWrapper from "../ContentWrapper/ContentWrapper";
+import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+import { data } from "../../components/data/termConditions";
+import style from "./index.module.css";
+import { Provider } from "react-redux";
+import { store } from "../redux/store";
+
+export default function Index() {
+  window.scrollTo({ top: 0, behavior: "instant" });
+  return (
+    <Provider store={store}>
+      <section className={style.out_box}>
+        <div className={style.image_box}>
+          <ContentWrapper>
+            <Header color={"#015C9F"} />
+            <div className={style.box}>
+              <img src="/assets/tc.webp" />
+              <h2>Terms & Conditions</h2>
+              <p>
+                All the products and services are provided by aKadmy. These
+                Terms of Use ("Terms") govern your use of aKadmy’s website,
+                apps, and other products and services ("Services"). Some of our
+                Services are software that can be downloaded on a computer,
+                tablet, phone or any other device, you agree that we may update
+                our software automatically at any point of time, that these
+                Terms will apply to such updates. By using our Services, you
+                agree to be bound by these Terms, including the policies
+                referenced in them. If you do not agree to these Terms, please
+                refrain from using the Website or our suite of products.
+              </p>
+            </div>
+          </ContentWrapper>
+        </div>
+      </section>
+      <ContentWrapper>
+        {data.map((item) => (
+          <div className={style.color}>
+            <h4>{item.title}</h4>
+            {item.content.map((item) => (
+              <p style={{ paddingTop: "10px" }}>{item}</p>
+            ))}
+            <ul>{item.points && item.points.map((item) => <li>{item}</li>)}</ul>
+          </div>
+        ))}
+      </ContentWrapper>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <Footer page="AKADEMY_B2C" contact={true} />
+    </Provider>
+  );
+}
diff --git a/src/components/TermCondition/index.module.css b/src/components/TermCondition/index.module.css
new file mode 100644
index 0000000..ca20208
--- /dev/null
+++ b/src/components/TermCondition/index.module.css
@@ -0,0 +1,31 @@
+.out_box {
+  width: 100%;
+  overflow: hidden;
+}
+
+.image_box {
+  width: 100%;
+  background-image: linear-gradient(to right, #eff4ff, #d4f5fe, #dae4fe);
+  padding-bottom: 30px;
+}
+
+.box {
+  text-align: center;
+  color: #00548e;
+  padding-top: 100px;
+}
+
+.color {
+  color: #00548e;
+  padding-top: 30px;
+}
+
+.box h2 {
+  padding: 20px 0px;
+}
+
+@media only screen and (max-width: 600px) {
+  .box {
+    padding-top: 10px;
+  }
+}
diff --git a/src/components/redux/purchaseSlice.js b/src/components/redux/purchaseSlice.js
index 8cba29e..9b41de2 100644
--- a/src/components/redux/purchaseSlice.js
+++ b/src/components/redux/purchaseSlice.js
@@ -274,7 +274,7 @@ export const purchaseSlice = createSlice({
     });
 
     builder.addCase(getPurchaseDetails.fulfilled, (state, action) => {
-      state.purchaseDetails = action.payload.data.data[0];
+      state.purchaseDetails = action.payload.data;
     });
     builder.addCase(getAllTeenybeansLanguages.fulfilled, (state, action) => {
       state.teenybeansLanguages = action.payload.data;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f270a18..ea05b2a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -29,7 +29,7 @@ console.log('Astro.props', newSchema1, newSchema2, newSchema3)
 </script>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/assets/akademy-logo.png" />
     <meta name="google-site-verification" content="ULrPGBKj6_niSC1FkjuvDdM985OysHCWlzhTAKwra68" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
diff --git a/src/pages/_404.astro b/src/pages/_404.astro
new file mode 100644
index 0000000..4d565c9
--- /dev/null
+++ b/src/pages/_404.astro
@@ -0,0 +1,12 @@
+---
+import Layout from "../layouts/Layout.astro";
+import HomePage from "../components/Home/Home.jsx";
+
+
+---
+
+<Layout >
+    <HomePage client:only="react" />
+</Layout>
+
+
diff --git a/src/pages/about-us.astro b/src/pages/about-us.astro
new file mode 100644
index 0000000..5003031
--- /dev/null
+++ b/src/pages/about-us.astro
@@ -0,0 +1,18 @@
+---
+import Layout from "../layouts/Layout.astro";
+import About from "../components/About/index.jsx";
+
+---
+
+<Layout 
+    title = "About aKadmy | Transforming Early Education with AI Solutions"
+    description = "Learn how aKadmy empowers preschools with AI-driven tools, enhancing education and streamlining management. Join us in transforming early childhood learning."
+    canonicalUrl = "https://akadmyapp.com/about-us"
+    keywords = "Learning, aKadmy, Early Education, Preschool, Engaging, playful"
+    ogImage = "/assets/akademy_Logo.png"
+    ogUrl = "https://akadmyapp.com"
+>
+    <About client:only="react" />
+</Layout>
+
+
diff --git a/src/pages/contact-us.astro b/src/pages/contact-us.astro
new file mode 100644
index 0000000..f7c3e62
--- /dev/null
+++ b/src/pages/contact-us.astro
@@ -0,0 +1,18 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Contact from "../components/Contact/index.jsx";
+
+---
+
+<Layout 
+    title = "Learn more about aKadmy | We're Here to Support You"
+    description = "Have questions? Reach out to aKadmy for personalized support and discover how our solutions can elevate your preschool's education experience."
+    canonicalUrl = "https://akadmyapp.com/contact-us"
+    keywords = "Learning, aKadmy, Early Education, Preschool, Engaging, playful"
+    ogImage = "/assets/akademy_Logo.png"
+    ogUrl = "https://akadmyapp.com"
+>
+    <Contact client:only="react" />
+</Layout>
+
+
diff --git a/src/pages/term-and-conditions.astro b/src/pages/term-and-conditions.astro
new file mode 100644
index 0000000..3377b17
--- /dev/null
+++ b/src/pages/term-and-conditions.astro
@@ -0,0 +1,18 @@
+---
+import Layout from "../layouts/Layout.astro";
+import TermCondition from "../components/TermCondition/index.jsx";
+
+---
+
+<Layout 
+    title = "aKadmy Terms and Conditions | Your Trust, Our Commitment"
+    description = "aKadmy Terms and Conditions | Your Trust, Our Commitment"
+    canonicalUrl = "https://akadmyapp.com/term-and-conditions"
+    keywords = "Learning, aKadmy, Early Education, Preschool, Engaging, playful"
+    ogImage = "/assets/akademy_Logo.png"
+    ogUrl = "https://akadmyapp.com"
+>
+    <TermCondition client:only="react" />
+</Layout>
+
+
-- 
2.34.1