import Image from "next/image"
import team from "../../../public/team.png"
import back from "../../../public/back.png"
import map from "../../../public/map.png"
import bg from "../../../public/managementbg.png"

export default async function Home() {

  return (
    <main className="flex flex-col w-full h-full bg-bg-1 scroll-x-hidden" >
      <div style={{backgroundImage: `url(${bg.src})`}} className="flex flex-col items-center justify-center h-96 bg-cover bg-center px-8">
        <span className="text-neutral-50 text-4xl lg:text-5xl font-[4] max-w-lg text-center py-8"> یه تایتل جذاب در سایز بزرگ و در دو خط</span>
        <span className="text-neutral-50 font-[5] max-w-lg text-center text-justify">  اولین و تنها تولید کننده ی آلیاژهای منیزیم به صورت شمش و بیلت در سال ۱۳۹۶ در استان قم واقع در شهرک صنعتی شکوهیه شروع بع به به فعالیت نمود. </span>
      </div>
      <div className="flex flex-col lg:flex-row justify-between items-center font-[5] my-20 px-8 lg:px-28">
        <div>
          <p className="text-neutral-800 pb-4 lg:pb-0"> لورم ایپیسوم</p>
          <span className="font-[4] text-3xl"> تیم حرفه ای ما</span>
        </div>
        <span className="text-neutral-800 max-w-2xl pt-8 lg:pt-0">
        اولین و تنها تولید کننده ی آلیاژهای منیزیم به صورت شمش و بیلت در سال ۱۳۹۶ در استان قم واقع در شهرک صنعتی شکوهیه شروع به فعالیت نمود. هدف از ایجاد و راه اندازی این شرکت ،تامین آلیاژهای منیزیمی صنعت
        </span>
      </div>
      <div className="flex justify-center">
        <div className="grid lg:grid-cols-4 bg-zinc-50 max-w-fit ">
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={back} />
            <div className=" flex flex-col text-zinc-900 font-[5] absolute bottom-0 w-full h-full items-center justify-center">
              <span className="text-2xl font-[4] "> ۴۰۰+</span>
              <span className=""> مشتری بین الملل </span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={team} />
            <div className=" flex flex-col font-[5] m-4 absolute bottom-0 right-0">
              <span className="text-neutral-50 "> علی حاج محمدی</span>
              <span className=" text-neutral-50 text-sm"> پشتیبانی فنی</span>
            </div>
          </div>
          <div className="relative">
            <Image alt="" src={back} />
            <div className=" flex flex-col text-zinc-900 font-[5] absolute bottom-0 w-full h-full items-center justify-center">
              <span className="text-2xl font-[4] "> ۲۰+</span>
              <span className=""> سال تجربه موفق</span>
            </div>
          </div>        
        </div>
      </div>
      <div className="flex font-[5] justify-between px-32 py-28">
        <div className="flex flex-col">
          <span className="text-neutral-800 pb-2"> در ارتباط باشید</span>
          <span className="font-[4] text-4xl"> تماس با ما</span>
          <div className="flex  mt-12">
            <div className="flex flex-col items-center">
              <div className="bg-zinc-200 p-4 rounded-full">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6665 27.3334H9.33317C5.33317 27.3334 2.6665 25.3334 2.6665 20.6667V11.3334C2.6665 6.66675 5.33317 4.66675 9.33317 4.66675H22.6665C26.6665 4.66675 29.3332 6.66675 29.3332 11.3334V20.6667C29.3332 25.3334 26.6665 27.3334 22.6665 27.3334Z" stroke="#18181B" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                  <path opacity="0.4" d="M22.6668 12L18.4935 15.3333C17.1202 16.4267 14.8668 16.4267 13.4935 15.3333L9.3335 12" stroke="#18181B" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span className="py-4"> example@gmail.com</span>
              <span className="text-neutral-600 text-sm"> ایمیل</span>
            </div>
            <div className="flex flex-col items-center mx-16">
              <div className="bg-zinc-200 p-4 rounded-full">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.4" d="M15.9998 17.9067C18.2973 17.9067 20.1598 16.0442 20.1598 13.7467C20.1598 11.4492 18.2973 9.58667 15.9998 9.58667C13.7023 9.58667 11.8398 11.4492 11.8398 13.7467C11.8398 16.0442 13.7023 17.9067 15.9998 17.9067Z" stroke="#18181B" stroke-width="1.5"/>
                  <path d="M4.8266 11.3201C7.45327 -0.226582 24.5599 -0.213249 27.1733 11.3334C28.7066 18.1068 24.4933 23.8401 20.7999 27.3868C18.1199 29.9734 13.8799 29.9734 11.1866 27.3868C7.5066 23.8401 3.29327 18.0934 4.8266 11.3201Z" stroke="#18181B" stroke-width="1.5"/>
                </svg>
              </div>
              <span className="py-4"> ایران، قم</span>
              <span className="text-neutral-600 text-sm"> موقعیت شرکت</span>
            </div>
            <div className="flex flex-col items-center">
              <div className="bg-zinc-200 p-4 rounded-full">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M29.2932 24.4401C29.2932 24.9201 29.1865 25.4134 28.9598 25.8934C28.7332 26.3734 28.4398 26.8267 28.0532 27.2534C27.3998 27.9734 26.6798 28.4934 25.8665 28.8267C25.0665 29.1601 24.1998 29.3334 23.2665 29.3334C21.9065 29.3334 20.4532 29.0134 18.9198 28.3601C17.3865 27.7067 15.8532 26.8267 14.3332 25.7201C12.7998 24.6001 11.3465 23.3601 9.95984 21.9867C8.5865 20.6001 7.3465 19.1467 6.23984 17.6267C5.1465 16.1067 4.2665 14.5867 3.6265 13.0801C2.9865 11.5601 2.6665 10.1067 2.6665 8.72008C2.6665 7.81341 2.8265 6.94675 3.1465 6.14675C3.4665 5.33341 3.97317 4.58675 4.67984 3.92008C5.53317 3.08008 6.4665 2.66675 7.45317 2.66675C7.8265 2.66675 8.19984 2.74675 8.53317 2.90675C8.87984 3.06675 9.1865 3.30675 9.4265 3.65341L12.5198 8.01342C12.7598 8.34675 12.9332 8.65341 13.0532 8.94675C13.1732 9.22675 13.2398 9.50675 13.2398 9.76008C13.2398 10.0801 13.1465 10.4001 12.9598 10.7067C12.7865 11.0134 12.5332 11.3334 12.2132 11.6534L11.1998 12.7067C11.0532 12.8534 10.9865 13.0267 10.9865 13.2401C10.9865 13.3467 10.9998 13.4401 11.0265 13.5467C11.0665 13.6534 11.1065 13.7334 11.1332 13.8134C11.3732 14.2534 11.7865 14.8267 12.3732 15.5201C12.9732 16.2134 13.6132 16.9201 14.3065 17.6267C15.0265 18.3334 15.7198 18.9867 16.4265 19.5867C17.1198 20.1734 17.6932 20.5734 18.1465 20.8134C18.2132 20.8401 18.2932 20.8801 18.3865 20.9201C18.4932 20.9601 18.5998 20.9734 18.7198 20.9734C18.9465 20.9734 19.1198 20.8934 19.2665 20.7467L20.2798 19.7467C20.6132 19.4134 20.9332 19.1601 21.2398 19.0001C21.5465 18.8134 21.8532 18.7201 22.1865 18.7201C22.4398 18.7201 22.7065 18.7734 22.9998 18.8934C23.2932 19.0134 23.5998 19.1867 23.9332 19.4134L28.3465 22.5467C28.6932 22.7867 28.9332 23.0667 29.0798 23.4001C29.2132 23.7334 29.2932 24.0667 29.2932 24.4401Z" stroke="#18181B" stroke-width="1.5" stroke-miterlimit="10"/>
                </svg>
              </div>
              <span className="py-4"> ۰۲۱-۴۳۴۵۸۷۵۰</span>
              <span className="text-neutral-600 text-sm"> شماره تماس</span>
            </div>
          </div>

        </div>
        <div>
          <Image alt="" src={map} />
        </div>
      </div>
      
    </main>
  )
}