import React from "react";
import { FaShoppingCart } from "react-icons/fa";
import { GiShoppingCart } from "react-icons/gi";
import { Link } from "react-router-dom";
import LandingPage from "./landingPage";
import Footer from "../components/Elements/Footer";
import FAButton from '../components/Elements/FAButton';
import Navbar1 from '../components/Elements/Navbar1';

const AboutUs = () => {
    return (
        <>

         {/* Navbar */}
         <Navbar1/>

     <div className='main-container w-[1440px] h-[757px] relative mx-auto  my-0 bg-[#CFC5EB]'>
      <div className='w-[524px] h-[100%] bg-[url(../public/image/imagegedung.png)] bg-cover bg-no-repeat absolute top-0 left-[916px]' />
      <div className="w-[420px] h-[67.032px] font-['Fredoka_One'] text-[48px] font-normal leading-[58.08px] tracking-[2.4px] absolute top-1/4 left-1/2 text-center translate-x-[-154.76%] translate-y-0 whitespace-nowrap z-[3]">
        <span className="font-['Fredoka_One'] text-[48px] font-normal leading-[58.08px] text-[#000] tracking-[2.4px] relative text-center">
          About
        </span>
        <span className="font-['Fredoka_One'] mr-px text-[48px] font-normal leading-[58.08px] text-[#a496cb] tracking-[2.4px] relative text-center">
          ESKAYVIE
        </span>
      </div>
      <span className="flex w-[747px] h-[384px] items-center font-['Poppins'] text-[27px] font-normal leading-[40.5px] text-[#000] absolute top-[255px] left-[calc(50%-650px)] z-[4]">
        Eskayvie is a leading network company in Malaysia with a vision of
        'Healthier choice with Halal products.' Eskayvie has been offering a
        wide range of meaningfully differentiated, high-quality Halal products
        backed by science under its four core product lines: Nutrition &
        Wellness (Vitamins and dietary supplements), Beauty (AMARRA color
        cosmetics), Lifestyle (Functional beverages and foods), and Sunnah
        Wellness (ASHWA dietary supplements).
      </span>
    </div>

    <div className='main-container w-[1305px] h-[450px] relative mx-auto my-0 mt-32'>
      <div className='w-[595px] h-[450px] bg-[url(../public/image/photoeskayvie.png)] bg-cover bg-no-repeat absolute top-0 left-0 z-[3]' />
      <span className="flex h-[58px] justify-start items-center font-['Fredoka_One'] text-[48px] font-normal leading-[58px] text-[#000] tracking-[2.4px] absolute top-0 left-[calc(50%-31.5px)] text-left whitespace-nowrap z-[1]">
        Our History
      </span>
      <span className="flex w-[684px] h-[350px] items-center font-['Poppins'] text-[27px] font-normal leading-[40.5px] text-[#000] absolute top-[98px] left-[calc(50%-31.5px)] z-[2]">
        Founded on 19 May 2009 by Dr. Syid Ayob Mustafa Al-Qudri and Pn Kartika
        Wati Mohamed, Eskayvie is Malaysia's leading manufacturer in health,
        beauty, and wellness products. Eskayvie has also established two
        extensions that holds entrepreneurial upscaling close with a network of
        marketing masters and sales gurus in the Eskayvie Academy; as well as
        the Eskayvie Foundation which is passionate on community work.
      </span>
    </div>

    <div className='main-container w-[1322px] h-[561px] text-[0px] relative mx-auto my-0 mt-20'>
      <span className="block h-[58px] font-['Fredoka_One'] text-[48px] font-normal leading-[58px] text-[#000] tracking-[2.4px] relative justify-center whitespace-nowrap mt-0 mr-0 mb-0 ml-[440px]">
        Vision & Mission
      </span>
      <div className='w-[1322px] h-[439px] relative z-[16] mt-[50px] mr-0 mb-0 ml-0'>
        <div className='w-[682px] h-[439px] absolute top-0 left-[616px] overflow-hidden z-[16]'>
          <div className='w-[4245px] h-[424px] rounded-[15px] relative z-[17] mt-[5px] mr-0 mb-0 ml-[5px]'>
            <div className='w-[670px] h-[424px] rounded-[15px] absolute top-0 left-0 z-[18]'>
              <div className='w-[587px] h-[345px] text-[0px] relative z-20 mt-[39px] mr-0 mb-0 ml-[41px]'>
                <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[22] mt-0 mr-0 mb-0 ml-0">
                  Mission
                </span>
                <span className="flex w-[587px] h-[270px] items-center font-['Poppins'] text-[30px] font-normal leading-[45px] text-[#000] relative z-[21] mt-[37px] mr-0 mb-0 ml-0">
                  Enhancing quality of life, health, beauty and well-being
                  through the production of high quality products and services
                  oriented towards a continuous culture of innovation to achieve
                  mutual satisfaction and success, through :
                </span>
              </div>
              <div className='w-[670px] h-[424px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-0 left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[19]' />
            </div>
            
            <div className='w-[670px] h-[424px] rounded-[15px] absolute top-0 left-[1430px] z-[28]'>
              <div className='w-[587px] h-[315px] text-[0px] relative z-30 mt-[54px] mr-0 mb-0 ml-[41px]'>
                <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[32] mt-0 mr-0 mb-0 ml-0">
                  Mission 2
                </span>
                <span className="flex w-[587px] h-[237px] items-center font-['Poppins'] text-[29px] font-normal leading-[35px] text-[#000] relative z-[31] mt-[40px] mr-0 mb-0 ml-0">
                  Commitment to produce quality and knowledgeable entrepreneurs
                  whom will strive under this platform, increasing and
                  strengthening their personal economy through ongoing
                  comprehensive trainings at the Eskayvie Academy.
                </span>
              </div>
              <div className='w-[670px] h-[424px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-0 left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[29]' />
            </div>
            <div className='w-[670px] h-[424px] rounded-[15px] absolute top-0 left-[2145px] z-[33]'>
              <div className='w-[587px] h-[315px] text-[0px] relative z-[35] mt-[54px] mr-0 mb-0 ml-[41px]'>
                <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[37] mt-0 mr-0 mb-0 ml-0">
                  Mission 3
                </span>
                <span className="flex w-[587px] h-[237px] items-center font-['Poppins'] text-[29px] font-normal leading-[35px] text-[#000] relative z-[36] mt-[40px] mr-0 mb-0 ml-0">
                  Providing full commitment and dedication to provide the best
                  possible service and support in all aspects to meet the needs
                  and requirements of our customers, to ensure that ESKAYVIE
                  remains the top choice for improving quality of life.
                </span>
              </div>
              <div className='w-[670px] h-[424px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-0 left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[34]' />
            </div>
            <div className='w-[670px] h-[424px] rounded-[15px] absolute top-0 left-[2860px] z-[38]'>
              <div className='w-[587px] h-[315px] text-[0px] relative z-40 mt-[54px] mr-0 mb-0 ml-[41px]'>
                <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[42] mt-0 mr-0 mb-0 ml-0">
                  Mission 4
                </span>
                <span className="flex w-[587px] h-[237px] items-center font-['Poppins'] text-[29px] font-normal leading-[35px] text-[#000] relative z-[41] mt-[40px] mr-0 mb-0 ml-0">
                  Fostering a culture of self-improvement in an environment
                  conducive for ESKAYVIE employees to be more productive and
                  committed towards achieving a world-class mission of
                  excellence and succes.
                </span>
              </div>
              <div className='w-[670px] h-[424px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-0 left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[39]' />
            </div>
            <div className='w-[670px] h-[424px] rounded-[15px] absolute top-0 left-[3575px] z-[43]'>
              <div className='w-[587px] h-[242px] text-[0px] relative z-[45] mt-[54px] mr-0 mb-0 ml-[41px]'>
                <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[47] mt-0 mr-0 mb-0 ml-0">
                  Mission 5
                </span>
                <span className="flex w-[587px] h-[164px] items-center font-['Poppins'] text-[29px] font-normal leading-[35px] text-[#000] relative z-[46] mt-[40px] mr-0 mb-0 ml-0">
                  ESKAYVIE community belong in the concept of enriching their
                  lives through the establishment of the ESKAYVIE Foundation.
                </span>
              </div>
              <div className='w-[670px] h-[424px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-0 left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[44]' />
            </div>
          </div>
        </div>
        <div className='w-[550px] h-[424px] text-[0px] bg-[#fff] rounded-[15px] border-solid border-2 border-[#a999d4] absolute top-[5px] left-0 shadow-[2px_5px_10px_0_rgba(0,0,0,0.25)] z-[2]'>
          <span className="block h-[38px] font-['Poppins'] text-[40px] font-extrabold leading-[38px] text-[#000] tracking-[2px] relative text-left whitespace-nowrap z-[5] mt-[99px] mr-0 mb-0 ml-[44px]">
            Vision
          </span>
          <span className="flex w-[462px] h-[137px] items-center font-['Poppins'] text-[35px] font-normal leading-[52.5px] text-[#000] relative z-[4] mt-[52px] mr-0 mb-0 ml-[44px]">
            The vision of eskayvie is to strengthen the economy and health of
            the ummah.
          </span>
        </div>
        <div className='w-[1.51%] h-[7.74%] bg-[url(../assets/images/059e462d-e1c8-498c-b325-2e2191ff4404.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[45.1%] left-[44.48%] z-[7]' />
        <div className='w-[1.51%] h-[7.74%] bg-[url(../assets/images/2092baff-0d70-4f93-b378-4c5603b8bca2.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[46.24%] left-[98.49%] z-[8]' />
      </div>
      <div className='flex w-[134px] h-[14px] justify-between items-center relative z-[15] mt-0 mr-0 mb-0 ml-[889px]'>
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/137432a4-db11-457c-9770-4b96815704a6.png)] bg-cover bg-no-repeat rounded-[50%] relative z-10' />
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/0ee8e370-bfa8-4829-9d54-ad71bc15d122.png)] bg-cover bg-no-repeat rounded-[50%] relative z-[11]' />
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/881f8c38-b3c6-4375-bcb7-05dcfb85c8a0.png)] bg-cover bg-no-repeat rounded-[50%] relative z-[12]' />
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/8a3f7847-550e-412e-a5c6-15a3240a81e4.png)] bg-cover bg-no-repeat rounded-[50%] relative z-[13]' />
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/112752c0-6fe4-4d8c-8850-4e84ccebd22b.png)] bg-cover bg-no-repeat rounded-[50%] relative z-[14]' />
        <div className='w-[14px] h-[14px] shrink-0 bg-[url(../assets/images/72df0e6f-e845-4d4a-b752-680d29373da1.png)] bg-cover bg-no-repeat rounded-[50%] relative z-[15]' />
      </div>
    </div>

    <div className='main-container w-[1363px] h-[551px] rounded-[15px] relative mx-auto my-0'>
      <div className=' h-[447px] rounded-[15px] relative z-[1] mt-[51px] mr-0 mb-0 ml-[29px]'>
        <div className='w-1/2 h-full bg-[url(../public/image/eskayviedoc.png)] bg-cover bg-no-repeat rounded-[15px] relative top-1/2 left-1/2 -translate-x-[5%] -translate-y-[39%]  z-[5]' />
        <div className='w-[616px] h-[398px] text-[0px] absolute top-1/2 left-0 translate-x-0 translate-y-[-50.13%] z-[2]'>
          <span className="block h-[58px] font-['Fredoka_One'] text-[48px] font-normal leading-[58px] text-[#000] tracking-[2.4px] relative text-left whitespace-nowrap z-[3] mt-0 mr-0 mb-0 ml-0">
            Product Quality
          </span>
          <span className="flex w-[616px] h-[280px] items-center font-['Poppins'] text-[27px] font-normal leading-[40.5px] text-[#000] relative z-[4] mt-[60px] mr-0 mb-0 ml-0">
            Our commitment to quality ensures that each product is crafted to
            the highest standards, providing you with effective and reliable
            solutions for your health and wellness needs. With Eskayvie, you can
            trust in the quality of our products to support your journey towards
            a healthier lifestyle.
          </span>
        </div>
      </div>
      <div className='w-[1363px] h-[550px] bg-[#ece4ff] rounded-[15px] absolute top-0 left-1/2 translate-x-[-50%] translate-y-0' />
    </div>
    <div className="mb-10" />
       <Footer/>

        <FAButton/>
     </>
    )
}

export default AboutUs;