50 lines
1.8 KiB
JavaScript
50 lines
1.8 KiB
JavaScript
import { services } from "@/data/services";
|
|
import React from "react";
|
|
|
|
export default function Features2() {
|
|
return (
|
|
<section id="snippet-2" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2 className="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">
|
|
What We Do?
|
|
</h2>
|
|
<h3 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-9">
|
|
The service we offer is specifically designed to meet your needs.
|
|
</h3>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
<div className="flex flex-wrap mx-[-15px] md:mx-[-20px] !mt-[-40px]">
|
|
{services.map((elm, i) => (
|
|
<div
|
|
key={i}
|
|
className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full"
|
|
>
|
|
<div
|
|
className={`icon btn btn-block btn-lg ${elm.btnClass} pointer-events-none !mb-5`}
|
|
>
|
|
<i className={elm.iconClass} />
|
|
</div>
|
|
<h4>{elm.title}</h4>
|
|
<p className="!mb-3">{elm.description}</p>
|
|
<a
|
|
href="#"
|
|
className="more hover !text-[#fab758] focus:!text-[#fab758] hover:!text-[#fab758]"
|
|
>
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|