Growthus
Nextjs
Homepage

Customize Your Homepage

Customizing the homepage of GrowthUS is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the components folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the app/page.js folder. In this file, you will find all the necessary components for the homepage. Here is the code snippet:

Customize Sections

The majority of sections on the homepage are added through the components folder, and the data for these components is generated from the data/data.js folder.

In the components folder, you will find the individual components that make up the sections of the homepage. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, Client, BusinessSolution, WorkProcess, Community, Counter, Testimonials, and CallToAction.

On the other hand, the data required for these components is stored in the data/data.js file. This file contains the necessary information, such as the content, images, or any other data relevant to each section. It is imported into the respective component files to provide the required data for rendering.

By modifying the data in the data/data.js file, you can customize the content and details of each section on the homepage. Similarly, if you need to make changes to the design or functionality of a specific section, you can locate and modify the corresponding component file in the components folder.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the components/Hero.jsx file:

  • Title: To change the Hero title, locate the following code and update the text within the <motion.h1> tags:
<motion.h1>We Build Relationships that Drive Growth</motion.h1>
  • Description: To change the Hero description, find the following code and update the text within the <motion.p> tags:
<motion.p className="w-lg-75">
  At our agency, we believe in building strong relationships with
  our clients. Understanding your business goals, we can help you
  achieve success.
</motion.p>
  • Links: To modify the links on the buttons, locate the code for the buttons and update the href and button text accordingly:
<motion.a
  href="/contact"
  className="btn btn-primary me-sm-4 mb-4 mb-sm-0"
>
  Let’s Talk
</motion.a>
<motion.a href="/case-study" className="btn btn-outline">
  Check Our Work
</motion.a>
  • Ratings: To update the site ratings, find the code for the ratings and modify the text within the <motion.strong> tags:
Rated <motion.strong>4.8/5</motion.strong> from over <motion.strong>500+</motion.strong> reviews.
  • Images: To change the Hero images, you can replace the image files located in the specified paths (/images/hero/hero-shap.svg and /images/hero/hero-image.png). You can also adjust the width, height, and style attributes as per your requirements.
<motion.div className="hero-shape-wrapper position-absolute w-100 h-100">
  <motion.div className="hero-shape position-absolute bg-turquoise rounded-circle">
    <motion.img
      src="/images/hero/hero-shap.svg"
      alt="hero images"
      width={500}
      height={500}
      style={imageShapeStyle}
    />
  </motion.div>
</motion.div>
<motion.div className="hero-banner-image text-lg-start text-md-center text-xxl-center">
  <motion.img
    src="/images/hero/hero-image.png"
    alt="hero images"
    className="z-100"
    width={473}
    height={550}
    style={imageStyle}
  />
</motion.div>

Note: When making changes, ensure that the JSX syntax is maintained and that the modifications are within the appropriate tags and attributes.

Clients

To configure the Client section, you need to make changes in the components/Client.jsx file and the data/data.js file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/Client.jsx file:
    <SectionHeader
  title="Trusted by Top Brands"
  paragraph="We're proud to have worked with some of the biggest names in the industry"
/>
    • Update the title and paragraph props to set the desired title and description for the section. You can remove this code if you don't want to include a title or description.

  2. Client Images

    • Open the data/data.js file.
    • Find the ClientImageData array and modify it to include the client images you want to display.
    • Each object in the ClientImageData array represents a client image. You can add or remove objects as needed.
    • Update the images property of each object with the path to the corresponding client image file.
    • Example
      export const ClientImageData = [
    {
      id: 1,
      images: "/images/client/client-logo-1.svg",
    },
    {
      id: 2,
      images: "/images/client/client-logo-2.svg",
    },
    // Add more objects for additional client images
  ];
    • Replace /images/client/client-logo-1.svg, /images/client/client-logo-2.svg, etc. with the paths to your client image files.

Business Solution

To configure the Business Solution section, you need to make changes in the components/BusinessSolution/BusinessSolution.jsx file and the data/data.js file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/BusinessSolution/BusinessSolution.jsx file:
    <SectionHeader
  title="Solution for your Business"
  paragraph="Customized approaches to fit your unique business needs and goals."
/>
    • Update the title and paragraph props to set the desired title and description for the section. You can remove this code if you don't want to include a title or description.

  2. Business Solution Cards:

    • Open the data/data.js file.
    • Find the BusinessSolutionData array and modify it to include the business solution items you want to display.
    • Each object in the BusinessSolutionData array represents a business solution item. You can add or remove objects as needed.
    • Update the icon, title, and paragraph properties of each object with the desired values for the business solution item.
    • Example:
    export const BusinessSolutionData = [
   {
     id: 1,
     icon: "/images/service/services-icon-1.svg",
     title: "Strategies",
     paragraph:
       "Whether you're looking to increase your online visibility, drive more traffic to your website, or boost your sales, we have the expertise to create a plan that works for you.",
   },
   {
     id: 2,
     icon: "/images/service/services-icon-2.svg",
     title: "Analysis",
     paragraph:
       "We believe in data-driven decision making. That's why we conduct in-depth analysis to understand your business and identify key areas of improvement.",
   },
   // Add more objects for additional business solution items
 ];
    • Replace /images/service/services-icon-1.svg, /images/service/services-icon-2.svg, etc. with the paths to your business solution icon files. Note: Make sure the image files you reference for icons exist in the specified paths and are of the correct file format (e.g., SVG, PNG).

Work Process

To configure the Work Process section, you need to make changes in the components/WorkProcess/WorkProcess.jsx file and the data/data.js file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/WorkProcess/WorkProcess.jsx file:
    <SectionHeader
   title="Our Work Process"
   paragraph="Our structured and transparent work process ensures high-quality work on time and within budget. Let us help you achieve your business goals."
 />
    • Update the title and paragraph props to set the desired title and description for the section. You can remove this code if you don't want to include a title or description.

  2. Work Process Items:

    • Open the data/data.js file.
    • Find the WorkProcessData array and modify it to include the work process items you want to display.
    • Each object in the WorkProcessData array represents a work process item. You can add or remove objects as needed.
    • Update the title, paragraph, and image properties of each object with the desired values for the work process item.
    • If you want to display the "Happy user section over the image, set the user property to true, and provide a value for userCount. Set sale and payment to false.
    • If you want to display the "Sale Info" section over the image, set the sale property to true, and provide values for currentSale, previousSale, and SaleIncrease. Set user and payment to false.
    • If you want to display the "Payment Info" section over the image, set the payment property to true, and provide values for paymentAmount and paymentDate. Set sale and user to false.
    • Example:
    export const WorkProcessData = [
    {
      id: 1,
      title: "Create your web masterpiece",
      paragraph:
        "Your website is the cornerstone of your online presence. At our agency, we specialize in creating web masterpieces that stand out from the crowd. Our team of expert designers and developers will work closely with you to create a website that not only looks great but also performs at its best. Let us help you bring your vision to life and create a web masterpiece that represents your brand in the best possible light.",
      image: "/images/work/work-bg-1.png",
      user: true,
      userCount: 380,
      sale: false,
      payment: false,
    },
    {
      id: 2,
      title: "Create your web masterpiece",
      paragraph:
        "Your website is the cornerstone of your online presence. At our agency, we specialize in creating web masterpieces that stand out from the crowd. Our team of expert designers and developers will work closely with you to create a website that not only looks great but also performs at its best. Let us help you bring your vision to life and create a web masterpiece that represents your brand in the best possible light.",
      image: "/images/work/work-bg-2.png",
      user: false,
      sale: true,
      currentSale: 38.4,
      previousSale: 34,
      SaleIncrease: 4.5,
      payment: false,
    },
    {
      id: 3,
      title: "Handover the final good result.",
      paragraph:
        "Your website is the cornerstone of your online presence. At our agency, we specialize in creating web masterpieces that stand out from the crowd. Our team of expert designers and developers will work closely with you to create a website that not only looks great but also performs at its best. Let us help you bring your vision to life and create a web masterpiece that represents your brand in the best possible light.",
      image: "/images/work/work-bg-3.png",
      user: false,
      sale: false,
      payment: true,
      paymentAmount: 450,
      paymentDate: "24th May",
    },
  ];
    • Replace /images/work/work-bg-1.png, /images/work/work-bg-2.png, etc. with the paths to your work process item images.

Note: Make sure the image files you reference for the work process items exist in the specified paths and are of the correct file format (e.g., PNG, JPEG).

Counter

To edit the counter options in the components/Counter.jsx file, you need to modify the counterData array in the data/data.js file. Here are the steps:

  1. Open the data/data.js file.
  2. Locate the counterData array.
  3. Modify the objects in the counterData array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • number: The number to be displayed by the counter.
    • text: The name or description of the counter item.
  5. Update the number and text properties with your desired values for each counter option. 6.Example:
export const counterData = [
  {
    id: 1,
    number: "100",
    text: "Project Done",
  },
  {
    id: 2,
    number: "50",
    text: "Happy Client",
  },
  {
    id: 3,
    number: "10",
    text: "Years Experiences",
  },
];
  1. Save the changes to the data/data.js file.

After updating the counterData array, the counter options in the components/Counter.jsx file will reflect the new values you provided.

Testimonials

To configure the testimonials section in the component/WorkProcess/WorkProcess.jsx file, you need to update the TestimonialData array in the data/data.js file. Here are the steps:

  1. Open the data/data.js file.
  2. Locate the TestimonialData array.
  3. Modify the objects in the TestimonialData array to set the desired testimonials.
  4. Each object represents a testimonial with the following properties:
    • id: Unique identifier for the testimonial.
    • author: The author of the testimonial.
    • designation: The designation of the author.
    • paragraph: The testimonial provided by the author.
    • rating: The rating given by the author.
    • ratingImage: The image representing the rating.
    • authorImage: The image of the testimonial provider.
    • emoji: The emoji associated with the testimonial.
  5. Update the properties with your desired values for each testimonial.
  6. Example:
export const TestimonialData = [
  {
    id: 1,
    author: "Sabo Masties",
    designation: "Founder of DevsCred",
    paragraph:
      "Suggests that the top planners spend most of their time engaged in analysis and are concerned with the industry.",
    rating: 4,
    ratingImage: "/images/testimonial/star.svg",
    authorImage: "/images/testimonial/testimonial-thumb-1.png",
    emoji: "/images/testimonial/icon-love.svg",
  },
  // Add more testimonials as needed...
];
  1. Save the changes to the data/data.js file.

After updating the TestimonialData array, the testimonials section in the component/WorkProcess/WorkProcess.jsx file will reflect the new testimonial data you provided.

Call to Action

To update the title of the Call to Action section in the pages/page.js file, you can modify the title prop of the CallToAction component. Here are the steps:

  1. Open the pages/page.js file.
  2. Locate the CallToAction component.
  3. Update the title prop with your desired title.
  4. Example:
<CallToAction
  title={
    <>
      <span>New Title Here </span> <br />
      <span>Let’s Grow your Business.</span>
    </>
  }
/>

In this example, the title has been changed to "New Title Here".

  1. Save the changes to the pages/page.js file.

After updating the title prop, the Call to Action section in the page will display the new title you provided.

FooterAbout Page