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] 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 = [
   {