mip-website/pages/page/cooperationsales.js

import React from "react";
import AppContainer from "../appContainer";

import circle from "../../public/resource/cooperationsales/circle.svg";
import envelop from "../../public/resource/cooperationsales/envelop.svg";
import person from "../../public/resource/cooperationsales/person.svg";
import darsad from "../../public/resource/cooperationsales/darsad.svg";
import cart from "../../public/resource/cooperationsales/cart.svg";
import path from "../../public/resource/cooperationsales/path.svg";
// import cartmo from "../../public/resource/cooperationsales/CartMo.svg";

const CooperationSales = () => {
  return (
    <AppContainer>
      <div className="bg-[#014258] lg:h-[450px] ">
        <div className="contentSales contentSalesMobile ">
          <div className="contentSales2"></div>
          <div className="contentSales3">
            this is svg area
            {/* <img src ={cartmo} alt="" /> */}
          </div>
          
          <h1 className="text-white text-lg font-bold  lg:text-[28px] font-extrabold text-center pt-8 xl:pt-16">
            همکاری در فروش سهام
          </h1>
          <p className="text-white w-[85%] md:w-[60%] text-sm lg:text-[22px] font-medium leading-[1.8rem] lg:w-[42%] xl:w-[40%] mx-auto text-center lg:leading-8 xl:leading-10	py-2 lg:py-4">
            با ثبت نام در سامانه خرید سهام، کد معرف شما ایجاد و قابل اشتراک
            گذاری می شود. کد معرف یکتای خود را با دوستان خود به اشتراک بگذارید
            تا آنها با کد شما ثبت نام کنند. به این ترتیب{" "}
            <span className="font-bold text-sm lg:text-[22px]">
              سود 3 درصدی
            </span>{" "}
            را از طریق سرمایه گذاری دوستان خود، کسب نمایید
          </p>

          <div className="pb-4 lg:mb-0">
            <button className="bg-[#57C5C6] text-lg lg:text-[22px] font-black	 border-0 outline-0 text-white flex py-[0.6rem] px-[2.6rem] rounded-[10px] m-auto text-center  ">
              شروع همکاری
            </button>
          </div>
        </div>
      </div>

      {/* second part  */}
      {/* laptop */}
      <div className="my-16">
        <h3 className="text-[#3C3C3C] text-lg font-extrabold	 lg:text-[28px] lg:font-bold mt-8 text-center	">
          فرایند همکاری در فروش سهام
        </h3>

        <div className="process flex justify-center items-center flex-row-reverse	  lg:mt-16">
          {/**box 1**/}
          <div className=" flex items-center flex-row-reverse  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents ">
                <img src={circle} alt="back" />
                <div className="mt-6 lg:w-[62%] xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    ارسال کد معرف برای دوستان خود
                  </p>
                </div>
              </div>

              <div class="absolute lg:left-[60px] xl:left-[72px] top-[-13px] mt-4">
                <img
                  src={envelop}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>
          <div className=" mt-[-80px]  lg:ml-[-90px] lg:mr-[-64px] xl:ml-[-111px] xl:mr-[-72px]">
            <img src={path} alt="path" />
          </div>
          {/** box2 **/}
          <div className=" flex items-center flex-row-reverse  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents lg:w-[3rem] xl:w-full ">
                <img src={circle} alt="back" />
                <div className="mt-6  lg:w-[62%] xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    ثبت نام دوستان شما با کد معرف شما
                  </p>
                </div>
              </div>

              <div class="absolute lg:left-[75px] xl:left-[88px] top-[-13px] mt-4 	">
                <img
                  src={person}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>
          <div className="lg:mr-[-84px]  lg:ml-[-66px]  mt-[-136px] xl:mr-[-98px]  xl:ml-[-81px] rotate-180">
            <img src={path} alt="path" />
          </div>
          {/** box3 **/}
          <div className=" flex items-center flex-row-reverse  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents lg:w-[3rem] xl:w-full ">
                <img src={circle} alt="back" />
                <div className="mt-6  lg:w-[62%] xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    خرید سهام توسط دوستان شما
                  </p>
                </div>
              </div>

              <div class="absolute  lg:left-[44px] lg:top-[-9px] xl:left-[58px] xl:top-[-13px] mt-4 ">
                <img
                  src={cart}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>
          <div className="lg:mr-[-54px]  lg:ml-[-71px] xl:mr-[-72px] mt-[-80px] xl:ml-[-94px]">
            <img src={path} alt="path" />
          </div>
          {/** box4 **/}
          <div className=" flex items-center flex-row-reverse  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents ">
                <img src={circle} alt="back" />
                <div className="mt-6  lg:w-[62%]  xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    دریافت سود 3 درصد معرف خرید
                  </p>
                </div>
              </div>

              <div class="absolute lg:left-[50px] xl:left-[66px] top-[-13px] mt-4">
                <img
                  src={darsad}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>
        </div>

        {/* mobile proces */}
        <div className="processMobile flex flex-column justify-center items-center mt-14">
          {/**box 1**/}
          <div className=" flex items-center flex-row-reverse  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents ">
                <img src={circle} alt="back" />
                <div className="mt-6  w-[55%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    ارسال کد معرف برای دوستان خود
                  </p>
                </div>
              </div>

              <div class="absolute left-[55px]  top-[-13px] mt-4">
                <img
                  src={envelop}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>

          {/** box2 **/}
          <div className=" flex items-center flex-row-reverse  pt-8 ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents lg:w-[3rem] xl:w-full ">
                <img src={circle} alt="back" />
                <div className="mt-6 w-[55%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    ثبت نام دوستان شما با کد معرف شما
                  </p>
                </div>
              </div>

              <div class="absolute  left-[70px] top-[-13px] mt-4 	">
                <img
                  src={person}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>

          {/** box3 **/}
          <div className=" flex items-center flex-row-reverse pt-8  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents lg:w-[3rem] xl:w-full ">
                <img src={circle} alt="back" />
                <div className="mt-6 w-[55%] xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    خرید سهام توسط دوستان شما
                  </p>
                </div>
              </div>

              <div class="absolute  left-[39px]  top-[-13px] mt-4 ">
                <img
                  src={cart}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>

          {/** box4 **/}
          <div className=" flex items-center flex-row-reverse pt-8  ">
            <div className="relative flex flex-column justify-center items-center">
              <div className="img contents ">
                <img src={circle} alt="back" />
                <div className="mt-6 w-[55%]  xl:w-[57%] text-center">
                  <p className="lg:text-base xl:text-lg font-bold text-[#014258] ">
                    دریافت سود 3 درصد معرف خرید
                  </p>
                </div>
              </div>

              <div class="absolute left-[55px]  top-[-13px] mt-4">
                <img
                  src={darsad}
                  alt="back"
                  className="lg:w-[2.5rem] xl:w-full"
                />
              </div>
            </div>
          </div>
        </div>
        {/* end mobile process */}
      </div>
    </AppContainer>
  );
};

export default CooperationSales;