import Header from "../Header/Header";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import style from "./BannerProduct.module.css";
import Calendly from "../Calendly/Calendly";

export default function BannerProduct() {
  return (
    <section className={style.out_box}>
      <div className={style.shape_box}>
        <div className={style.image_box}>
          <div className={style.header}>
            <ContentWrapper>
              <Header color={"#015C9F"} />
            </ContentWrapper>
          </div>
          <div className={style.box} style={{ color: "#00548E" }}>
            <h1>
              Redefining{" "}
              <span style={{ color: "#55A451" }}>
                Preschool Management Solutions
              </span>{" "}
              With AI
            </h1>
            <p style={{ margin: "10px 0" }}>
              Transform your preschool classroom with AI-driven personalized
              learning for every child.
            </p>
            <Calendly btnName="Get a Demo" />
          </div>
          <div className={style.banner_img_align}>
            <img
              src="./assets/home_platform.png"
              className={style.banner_img}
              alt="Preschool Management Solutions | Streamline Operations with aKadmy"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
