import CounterUp from "../components/elements/CounterUp"
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import BrandSlider2 from "../components/slider/BrandSlider2"
import Link from "next/link"
import MermsRecentBlog from "../components/sections/MermsRecentBlog";
import MermsWhyChooseUs from "../components/sections/MermsWhyChooseUs";
export default function Home() {

    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                    {/* ABOUT-2
			============================================= */}
                    <section id="about-2" className="rel inner-page-hero about-section division">
                        {/* ABOUT-2 TITLE */}
                        <div className="container">
                            <div className="row">
                                <div className="col-md-11 col-lg-10 col-xl-9">
                                    <div className="about-2-title mb-60">
                                        {/* Title */}
                                        <h2 className="s-52 w-700 mb-30">We provide solutions for your creative ideas</h2>
                                        {/* Text */}
                                        <p className="mb-0">An enim nullam tempor sapien gravida donec pretium ipsum porta justo
                                            integer and purus velna vitae auctor integer undo congue diam purus pretium and ligula
                                            tempor primis libero at tempus, blandit and cursus varius magnis at sapien egestas
                                            purus vitae purus an ipsum
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>	  {/* END ABOUT-2 TITLE */}
                        {/* ABOUT-2 IMAGES */}
                        <div className="container-fluid">
                            <div className="row">
                                {/* IMAGES-1 */}
                                <div className="col-md-5">
                                    <div className="text-end">
                                        {/* IMAGE-1 */}
                                        <div className="about-2-img a-2-1 r-12">
                                            <img className="img-fluid" src="/images/a2-1.jpg" alt="about-image" />
                                        </div>
                                        {/* IMAGE-2 */}
                                        <div className="about-2-img a-2-2 r-12">
                                            <img className="img-fluid" src="/images/a2-2.jpg" alt="about-image" />
                                        </div>
                                    </div>
                                </div>	{/* END IMAGES-1 */}
                                {/* IMAGES-2 */}
                                <div className="col-md-7">
                                    {/* IMAGE-3 */}
                                    <div className="about-2-img a-2-3 r-12">
                                        <img className="img-fluid" src="/images/a2-3.jpg" alt="about-image" />
                                    </div>
                                    <div className="row">
                                        {/* TEXT */}
                                        <div className="col-md-7 col-lg-6">
                                            <div className="a2-txt bg--black-400 pattern-01 bg--fixed color--white r-12">
                                                {/* Icon */}
                                                <div className="a2-txt-quote ico-40 o-20">
                                                    <span className="flaticon-quote" />
                                                </div>
                                                {/* Text */}
                                                <p>Nullam tempor pretium a gravida donec congue ipsum porta justo integer dolor
                                                    odio auctor a neque suscipit an ipsum integer congue purus at pretium turpis
                                                    egestas and volute laoreet quaerat
                                                </p>
                                                {/* Author */}
                                                <p className="a2-txt-author">Charlie Cheever <span>CEO &amp; CO-FOUNDER</span></p>
                                            </div>
                                        </div>
                                        {/* IMAGE-4 */}
                                        <div className="col-md-5 col-lg-6">
                                            <div className="about-2-img a-2-4 r-12">
                                                <img className="img-fluid" src="/images/a2-4.jpg" alt="about-image" />
                                            </div>
                                        </div>
                                    </div>	 {/* End row */}
                                </div>	{/* END IMAGES-2 */}
                            </div>	 {/* End row */}
                        </div>	  {/* END ABOUT-2 IMAGES */}
                    </section>	{/* END ABOUT-2 */}
                    {/* ABOUT-3
			============================================= */}


                    <section className="bg--04 bg--fixed py-100 ct-01 content-section division">
                        <div className="container">
                            <div className="row d-flex align-items-center">
                                {/* TEXT BLOCK */}
                                <div className="col-md-6 order-last order-md-2">
                                    <div className="txt-block left-column wow fadeInRight">
                                        {/* Section ID */}
                                        <span className="section-id">our Team at MERMS</span>
                                        {/* Title */}
                                        <h2 className="s-50 w-700">Henry Adams</h2>
                                        {/* Text */}
                                        <p className="p-lg">"Sodales tempor sapien diam purus ipsum quaerat and volute fusce
                                            a congue laoreet turpis neque diam auctor turpis vitae dolor magna luctus placerat
                                            neque ipsum fusce cursus ligula cursus purus vitae purus and ipsum suscipit. Nemo
                                            ipsam cubilia donec turpis undo egestas ipsum a purus sapien ultrice aliquam lacus
                                            and quaerat an ipsum augue turpis sapien cursus congue augue"
                                        </p>
                                    </div>
                                </div>	{/* END TEXT BLOCK */}
                                {/* IMAGE BLOCK */}
                                <div className="col-md-6 order-first order-md-2">
                                    <div className="img-block j-img video-preview right-column wow fadeInLeft">
                                        {/* Play Icon */}
                                        <VideoPopup style={2} />
                                        {/* Preview Image */}
                                        <img className="img-fluid r-20" src="/images/img-17.jpg" alt="video-preview" />
                                    </div>
                                </div>
                            </div>    {/* End row */}
                        </div>	   {/* End container */}
                    </section>	{/* END TEXT CONTENT */}
                    {/* FEATURES-11
			============================================= */}
                    <section id="features-11" className="py-100 features-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
                            <div className="row justify-content-center">
                                <div className="col-md-10 col-lg-9">
                                    <div className="section-title mb-70">
                                        {/* Title */}
                                        <h2 className="s-50 w-700">We make your business gain more revenue at a glance</h2>
                                        {/* Text */}
                                        <p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
                                    </div>
                                </div>
                            </div>
                            {/* FEATURES-11 WRAPPER */}
                            <div className="fbox-wrapper">
                                <div className="row row-cols-1 row-cols-md-2 rows-3">
                                    {/* FEATURE BOX #1 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-1 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-graphics color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">Market Research</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #1 */}
                                    {/* FEATURE BOX #2 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-2 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-idea color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">User Experience</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #2 */}
                                    {/* FEATURE BOX #3 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-3 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-graphic color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">Digital Marketing</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #3 */}
                                    {/* FEATURE BOX #4 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-4 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-wireframe color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">Web Development</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #4 */}
                                    {/* FEATURE BOX #5 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-5 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-trophy color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">Brand Design Identity</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #5 */}
                                    {/* FEATURE BOX #6 */}
                                    <div className="col">
                                        <div className="fbox-11 fb-6 wow fadeInUp">
                                            {/* Icon */}
                                            <div className="fbox-ico-wrap">
                                                <div className="fbox-ico ico-50">
                                                    <div className="shape-ico">
                                                        {/* Vector Icon */}
                                                        <span className="flaticon-search-engine-1 color--theme" />
                                                        {/* Shape */}
                                                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>	{/* End Icon */}
                                            {/* Text */}
                                            <div className="fbox-txt">
                                                <h6 className="s-22 w-700">SEO &amp; SMM Services</h6>
                                                <p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
                                                    tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
                                                </p>
                                            </div>
                                        </div>
                                    </div>	{/* END FEATURE BOX #6 */}
                                </div>  {/* End row */}
                            </div>	{/* END FEATURES-11 WRAPPER */}
                        </div>     {/* End container */}
                    </section>	{/* END FEATURES-11 */}
                    {/* DIVIDER LINE */}
                    <hr className="divider" />
                    {/* BRANDS-1
			============================================= */}

                    <MermsWhyChooseUs />
                    <MermsRecentBlog />
                    <hr className="divider" />
                </div>

            </Layout>
        </>
    )
}