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;