"use client";
  
import React from "react";
import Link from "next/link";
import Image from "next/image";

const UiUxDesignService: React.FC = () => {
  return (
    <>
      <div className="services-area multi-service-box pt-100 pb-70 bg-f1f8fb">
        <div className="container">
          <div className="row">
            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/web-ui-design/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/web-ui.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    Web UI Design
                  </h3>
                  <p>
                    Development with the use of symfony framework
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/mobile-app-design/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/mobile-app.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    Mobile App Design
                  </h3>
                  <p>
                    We produce innovative concept-based designs
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/branding-design/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/branding.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    Branding Design
                  </h3>
                  <p>
                    A well-designed user interface pays for itself and more
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/print-media-design/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/print-media.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    Print Media Design
                  </h3>
                  <p>
                    The help of effective print media design services
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/psd-to-html/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/psd-html.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    PSD to HTML
                  </h3>
                  <p>
                    We converted PSD to HTML design with pixel perfect
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/responsive-design/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/responsive.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    Responsive Design
                  </h3>
                  <p>
                    The content moves freely across all screen resolutions
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6">
              <Link href="/service/ui-ux-design/3d-animation/">
                <div className="single-services-box service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design/3d-animation.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>
                    3D Animation
                  </h3>
                  <p>
                    We create a 3D animation or presentation design
                  </p>

                  <span className="read-more-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>
                </div>
              </Link>
            </div>

          </div>
        </div>

        <div className="circle-shape2">
          <Image
            src="/img/shape/circle-shape2.png"
            alt="image"
            width={350}
            height={520}
          />
        </div>
        <div className="lines">
          <div className="line"></div>
          <div className="line"></div>
          <div className="line"></div>
          <div className="line"></div>
          <div className="line"></div>
        </div>
      </div>
    </>
  );
};

export default UiUxDesignService;