import React from "react";
import digitalMarketing from "../assets/digitalMarketing.png";
import socialmediamarketing from "../assets/socialmediamarketing.png";
import WebDev from "../assets/WebDev.png";
import creativeDesign from "../assets/creativeDesign.png";
import seo from "../assets/seo.jpg";
import gAds from "../assets/gAds.jpg"
import localMapSearch from "../assets/localMapSearch.jpg"
import navigation from "../assets/navigation.png"

const Services = () => {
  return (
    <div className="bg-[#faedb9]  h-full pb-10 ">
      {/* Title */}
      <h2 class="mb-1 text-4xl font-extrabold text-center leading-tight text-gray-900">
        Services
      </h2>

      {/* card for larger size */}
      <div className="hidden sm:grid sm:grid-cols-2 sm:gap-y-4 sm:gap-x-4  md:gap-y-12 md:gap-x-12 xl:gap-y-12 xl:gap-x-8  sm:p-4 md:p-8 place-items-center ">
        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img
                src="https://cdn3d.iconscout.com/3d/free/thumb/free-social-media-marketing-with-whatsapp-4409954-3679262.png?f=webp"
                alt=""
                srcset=""
              />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Whatsapp Marketing
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={digitalMarketing} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Digital marketing
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={socialmediamarketing} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Social media marketing
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={WebDev} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Website Development
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={creativeDesign} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Website Development
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={seo} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                SEO Services
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={gAds} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
                Google Ads
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="  relative flex w-full max-w-[24rem] lg:max-w-[33rem] flex-row rounded bg-white bg-clip-border text-gray-700 shadow-md">
          <div className="relative m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-white bg-clip-border text-gray-700">
            <div className="flex justify-center items-center h-full">
              <img src={navigation} alt="" srcset="" />
            </div>
          </div>
          <div className="p-2">
            <div className="p-6 rounded-lg">
              <h6 className="mb-4 block font-sans font-semibold text-2xl leading-relaxed tracking-normal text-pink-500 antialiased">
              Local Google Map SEO
              </h6>
              <p class="mb-8 block font-sans text-base font-normal leading-relaxed text-black antialiased">
                Schedule Your Service in advanced With Us And Get It Done In
                Time.
              </p>
              <div to="/servicing" className="inline-block" href="#">
                <a href="#_" class="relative inline-block text-lg group">
                  <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                    <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                    <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                    <span class="relative">Book Now</span>
                  </span>
                  <span
                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                    data-rounded="rounded-lg"
                  ></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* end card for larger size */}

      {/* ///////////////// */}

      {/*small size screen*/}
      <div className="sm:hidden grid grid-cols-2 gap-6 p-4 500:p-6 500:gap-16 font-semibold">
        {/* card1 */}

        <div to="/servicing" className="rounded-lg  flex flex-col bg-cover">
          <div className="flex justify-center">
            <div class="relative top-[10%] flex-shrink-0 w-20 h-20 mt-2  bg-red-600 border border-white text-red-500 rounded-full inline-flex items-center justify-center">
              <img
                className="w-14 h-14"
                src={digitalMarketing}
                alt=""
                srcset=""
              />
            </div>
          </div>

          <div className="bg-white rounded-b-lg text-center p-2">Servicing</div>
        </div>
        {/* card2 */}
        <div to="/modification" className="rounded-lg bg-cover flex flex-col">
          <div className="flex justify-center">
            <div class="relative top-[10%] flex-shrink-0 w-20 h-20 mt-2  bg-red-600 border border-white text-red-500 rounded-full inline-flex items-center justify-center">
              <img
                className="w-14 h-14"
                src={digitalMarketing}
                alt=""
                srcset=""
              />
            </div>
          </div>

          <div className="bg-white rounded-b-lg text-center p-2">
            Modification
          </div>
        </div>
        {/* card3 */}
        <div to="/spares" className="rounded-lg bg-cover flex flex-col">
          <div className="flex justify-center">
            <div class="relative top-[10%] flex-shrink-0 w-20 h-20 mt-2  bg-red-600 border border-white text-red-500 rounded-full inline-flex items-center justify-center">
              <img
                className="w-14 h-14"
                src={digitalMarketing}
                alt=""
                srcset=""
              />
            </div>
          </div>

          <div className="bg-white rounded-b-lg text-center p-2">
            Spare Parts
          </div>
        </div>
        {/* card4 */}
        <div to="/accessories" className="rounded-lg bg-cover flex flex-col">
          <div className="flex justify-center">
            <div class="relative top-[10%] flex-shrink-0 w-20 h-20 mt-2  bg-red-600 border border-white text-red-500 rounded-full inline-flex items-center justify-center">
              <img
                className="w-14 h-14"
                src={digitalMarketing}
                alt=""
                srcset=""
              />
            </div>
          </div>

          <div className="bg-white rounded-b-lg text-center p-2">
            Accessories
          </div>
        </div>
      </div>
    </div>
  );
};

export default Services;