Services

Service page Hero

To customize the Service Hero section, you can edit the code in the components/ServiceHero.jsx file. Here is the complete code for the Service Hero section:

"use client";
import Image from "next/image";
import { imageStyle } from "@/data/data";

const ServiceHero = () => {
  return (
    <section className="service-hero pt-9">
      <div className="container">
        <div className="row work-item-container align-items-center pb-7">
          <div className="col-lg-6">
            <div className="work-item">
              <div className="work-item-shape-wrapper">
                <div className="work-item-shape bg-primary-light">
                  <Image
                    src="/images/work/work-shap.svg"
                    alt="About Story images"
                    width={500}
                    height={500}
                    style={imageStyle}
                  />
                </div>
              </div>
              <div className="work-item-wraper">
                <div className="work-item-wraper-banner">
                  <Image
                    src="/images/service/service-header-banner.png"
                    alt="About Story images"
                    width={500}
                    height={500}
                    style={imageStyle}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <div className="work-item">
              <div className="work-content service-hero-content">
                <h1 className="service-title">
                  Services We provide for your Bussiness
                </h1>
                <p>
                  Discover how our services can grow your business. From digital
                  marketing to web development and design, our team delivers
                  tailored solutions to exceed your expectations.
                </p>

                <a href="#service-item" className="service-topTobottom">
                  <svg
                    width="45"
                    height="63"
                    viewBox="0 0 45 63"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M22.4375 1.87695L22.4375 55.5361"
                      stroke="#173641"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9.81641 42.9922L22.4371 55.5359L35.0579 42.9922"
                      stroke="#173641"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServiceHero;

You can modify the content and images within this code to customize the Service Hero section. Make the necessary changes according to your requirements and save the file.

Business Services

To customize the section header in the Services page, you can edit the code in the services/page.jsx file. Here are the instructions to make the necessary changes:

To customize the section header title and paragraph, locate the following code:

<SectionHeader
  title="Business Service"
  paragraph="Discover how our services can grow your business. From digital marketing to web development and design, our team delivers tailored solutions to exceed your expectations."
/>

Modify the title and paragraph values to update the section header content.

To add a new business service, you need to edit the serviceData object in the data/data.js file. Copy the following code block and paste it inside the serviceData array. Then, customize the values according to your new business service:


{
  id: 1,
  slug: "new-service",
  title: "New Service",
  paragraph: "This is a description of the new service.",
  image: "/images/service/service-item1.png",
  serviceInclude: [
  {
  id: 31,
  serviceIncludeItem: "New Service Item 1",
  },
  {
    id: 32,
    serviceIncludeItem: "New Service Item 2",
  },
  // Add more service include items if needed
  ],
  serviceDetails: "This is the detailed description of the new service.",
  serviceInfoTitle: "Information about the new service",
  serviceInfoDesc: "This section provides information about the new service.",
  serviceInfoItems: [
    {
      title: "Info Item 1",
      icon: "/images/service/service-details-icon-1.svg",
      details: "Details about info item 1.",
    },
    {
      title: "Info Item 2",
      icon: "/images/service/service-details-icon-2.svg",
      details: "Details about info item 2.",
    },
    // Add more service info items if needed
  ],
},

Save the services/page.jsx and data/data.js files after making the desired changes.

Case study

For the case study section, locate the following code in the services/page.jsx file:


<SectionHeader
  title="Feature Work & Case Study"
  paragraph="Explore our portfolio of successful projects and case studies to see how we've helped businesses like yours achieve their goals. Our work speaks for itself, and we're proud to showcase our expertise and achievements."
/>

Modify the title and paragraph values to update the case study section header content.
Save the services/page.jsx file after making the changes to the case study section.

Make sure to update the values according to your specific needs and save the files to see the changes reflected in the Services page.

Service Details Page

To customize the service title and descriptions in the Services page, you need to edit the serviceData object in the data/data.js. Here are the instructions to make the necessary changes:

Locate the following code block in the data/data.js file:

serviceInfoTitle: "Grow your business with our web development services",
serviceInfoDesc:
  "Want to be on top of the world? Check out this magnificent and chic diamond collection! These are the most unique and of course Chef’s favourite in Static Mania. Please click View More to explore all the mouth-watering variations.",

serviceInfoItems: [
  {
    title: "Transform your idea into a product",
    icon: "/images/service/service-details-icon-1.svg",
    details:
      "Want to be on top of the world? Check out this magnificent and chic diamond collection!These are the most unique and of course Chef’s favourite in Static Mania.",
  },
  // Add more object to add more service info
],

Edit the serviceInfoTitle and serviceInfoDesc to update the service information title and description.
To customize the service details with icons, modify the values inside the serviceInfoItems array. Each object within the array represents a service detail with the following properties:
- title: Title of the details information.
- icon: Icon of the details.
- details: Details of the service information.
Save the data/data.jsx file after making the changes to the service title, descriptions, and details.

Make sure to update the values according to your specific needs and save the file to see the changes reflected in the Services page.

About Page Job Page