126 lines
6.0 KiB
JavaScript
126 lines
6.0 KiB
JavaScript
import { features2 } from "@/data/features";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
export default function About8() {
|
|
return (
|
|
<section id="snippet-11" 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] max-sm:!mt-[-50px] !mt-[-80px] md:mx-[-20px] xl:mx-[-35px] items-center !mb-10 xl:!mb-14 lg:!mb-14 md:!mb-14">
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[80px]">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
className="rounded-[0.4rem]"
|
|
srcSet="/assets/img/photos/g12@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/g12.jpg"
|
|
width={293}
|
|
height={260}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-end !mt-[25px]">
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
className="rounded-[0.4rem]"
|
|
srcSet="/assets/img/photos/g13@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/g13.jpg"
|
|
width={293}
|
|
height={235}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<figure className="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5">
|
|
<Image
|
|
className="!rounded-[.4rem]"
|
|
srcSet="/assets/img/photos/g11@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/g11.jpg"
|
|
width={560}
|
|
height={285}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[80px]">
|
|
<h2 className="!text-[0.8rem] uppercase !text-[#1fc76f] !mb-3 !leading-[1.35] !tracking-[0.02rem]">
|
|
Who Are We?
|
|
</h2>
|
|
<h3 className="xl:!text-[2rem] !leading-[1.2] !text-[calc(1.325rem_+_0.9vw)] font-semibold !mb-5">
|
|
Company that believes in the power of creative strategy.
|
|
</h3>
|
|
<p className="!mb-6">
|
|
Cum sociis natoque penatibus et magnis dis parturient montes,
|
|
nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
|
|
egestas eget quam. Praesent commodo cursus magna, vel scelerisque
|
|
nisl consectetur et. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum
|
|
nulla sed.
|
|
</p>
|
|
<div className="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px]">
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<h3 className="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1">
|
|
99.7%
|
|
</h3>
|
|
<h5 className="!mb-0">Customer Satisfaction</h5>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<h3 className="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1">
|
|
12x
|
|
</h3>
|
|
<h5 className="!mb-0">Revenue Growth</h5>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-7 xl:!mb-9 lg:!mb-9 md:!mb-9">
|
|
{features2.map((column, index) => (
|
|
<div
|
|
key={index}
|
|
className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[30px]"
|
|
>
|
|
<div className="flex flex-row">
|
|
<div>
|
|
<div className="icon btn btn-block pointer-events-none btn-soft-primary !mr-4 !w-10 !h-10">
|
|
<span className="number text-[0.9rem] table-cell text-center align-middle font-bold mx-auto my-0">
|
|
{column.number}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>{column.title}</h3>
|
|
<p className="!mb-2">{column.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/*/.row */}
|
|
<div className="text-center">
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f]"
|
|
>
|
|
More Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|