fix-three pages

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

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;
 }

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}>
+          <div className={style.flex_box}>
-            <Grid item xs={12} md={8}>
+            <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>
+            </div>
-            <Grid item xs={12} md={4}>
+            <div className={style.flex_2}>
               <Box sx={{ background: "#DEF0FD", p: 3 }}>
                 <Typography>Get in Touch</Typography>
                 <ThreeFormFields formName="Blogs" />
               </Box>
-            </Grid>
+            </div>
-          </Grid>
+          </div>
         </ContentWrapper>
         <Footer page="INTERAKTO_CODING" />
       </Provider>

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%;
+  }
+}

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:

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}>
+      <Provider store={store}>
-      <BannerProduct />
+        <BannerProduct />
-      <ProductCapabilities />
+        <ProductCapabilities />
-      <ProductPlatform />
+        <ProductPlatform />
-      <div style={{ background: "#DEF0FD", marginTop: "100px" }}>
+        <div style={{ background: "#DEF0FD", marginTop: "100px" }}>
-        <img
+          <img
-          src="/assets/cloud_blue.webp"
+            src="/assets/cloud_blue.webp"
-          width={"100%"}
+            width={"100%"}
-          className={style.cloud_img}
+            className={style.cloud_img}
-        />
+          />
-        <div style={{ textAlign: "center" }}>
+          <div style={{ textAlign: "center" }}>
-          <h2 style={{ color: "#0348A8" }}>
+            <h2 style={{ color: "#0348A8" }}>
-            What Makes aKadmy the Top Kindergarten Management Solution?
+              What Makes aKadmy the Top Kindergarten Management Solution?
-          </h2>
+            </h2>
-          <p>
+            <p>
-            It's the power of AI, transforming everything from streamlining
+              It's the power of AI, transforming everything from streamlining
-            tasks to enhancing learning experiences.
+              tasks to enhancing learning experiences.
-          </p>
+            </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>
-            ))}
           </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>
+        <ContentWrapper>
-      <img src="/assets/product_curve.webp" width={"100%"} />
+          <div style={{ textAlign: "center", margin: "100px 0px 0px 0px" }}>
-      <div className={style.curve}>
+            <h2 style={{ color: "#0348A8" }}>
-        <FAQ
+              Powerful Tools for Transformative Learning
-          color1="#0348A8"
+            </h2>
-          color2={"#72B3FF"}
+            <br />
-          data={platformFaqs}
+            <div
-          prefix={"Curious? Find Answers Here"}
+              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>
+      </Provider>
-      <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>
     </>
   );
 }

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 {

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}>

src/components/ProductCapabilities/ProductCapabilities.module.css

@@ -48,7 +48,7 @@
 
 .normal {
   font-weight: 300;
-  margin-top: -8px;
+  margin-top: 8px;
 }
 
 .right_img {

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>

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;

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