Aplio
NextJs
Homepage

Customize Your Homepage

Customizing the homepage of Aplio 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/**.json 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, Services, Counter, Vision, Solution, Integartion, Faq, Testimonial, HomeBlog , and HomeCta.

On the other hand, the data required for these components is stored in the data/**.json 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/**.json 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/home-1/Hero.jsx file:

  • Hero Tagline : To change the Hero title, locate the following code and update the text within the p tags:
<p className=" mb-8 font-medium uppercase">50k+ Trusted Businesses</p>
  • Title: To change the Hero title, locate the following code and update the text within the <h1> tags:
<h1 className="mb-12 max-md:mb-8">
  Make your
  <span className="font-playfair italic inline-block px-5 border-2 rounded-[88px] pt-0.5 pb-2.5 leading-none border-paragraph bg-[#D9D9D900] dark:border-[#F0F3EA]">
    Finance
  </span>
  more efficient.
</h1>
  • Description: To change the Hero description, find the following code and update the text within the <p> tags:
<p className="w-lg-75">
  Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not Latin, though it looks like it
</p>
  • Images: Images ahs been imported from the public folder. To change the Hero images, you can replace the image files located in the specified paths (../public/images/hero/hero-circle.png and ../public/images/hero/hero-circle-dark.png). .
import heroCircleLight from "../public/images/hero/hero-circle.png";
import heroCircleDark from "../public/images/hero/hero-circle-dark.png";
import heroPolicyLight from "../public/images/hero/hero-policy.png";
import heroPolicyDark from "../public/images/hero/hero-policy-dark.png";
import heroRatingLight from "../public/images/hero/hero-rating.png";
import heroRatingDark from "../public/images/hero/hero-rating-dark.png";
import heroChartLight from "../public/images/hero/hero-chart.png";
import heroChartDark from "../public/images/hero/hero-chart-dark.png";

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/shared/Clients.jsx file and the data/clientData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/shared/Clients.jsx file:
    {sectionTitle && (
 <div className=" text-center max-w-[550px] px-10px mx-auto max-lg:px-2.5">
   <h2 className="mb-10">The world&rsquo;s best companies trust aplio.</h2>
   <p className="text-light mb-15">Trusted by thousands of companies across 50+ countries</p>
 </div>
)}
    • 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. By default sectionTitle, and border props is set true. if you don't want to show it, pass the false value through props in the page.js.

  2. Client Images

    • Open the data/clientData.json file.
    • Find the ClientData array and modify it to include the client images you want to display.
    • Each object in the ClientData array represents a client images for light and Dark version. You can add or remove objects as needed.
    • Update the imageLight and `imageDark property of each object with the path to the corresponding client image file.
    • Example
      {
"ClientData": [
 {
   "id": 1,
   "imageLight": "/images/clients/group.svg",
   "imageDark": "/images/clients/group-dark.svg"
 },
 {
   "id": 2,
   "imageLight": "/images/clients/infinity.svg",
   "imageDark": "/images/clients/infinity-dark.svg"
 },
 {
   "id": 3,
   "imageLight": "/images/clients/artifact.svg",
   "imageDark": "/images/clients/artifact-dark.svg"
 },
 {
   "id": 4,
   "imageLight": "/images/clients/caudile.svg",
   "imageDark": "/images/clients/caudile-dark.svg"
 },
 {
   "id": 5,
   "imageLight": "/images/clients/axeptio.svg",
   "imageDark": "/images/clients/axeptio-dark.svg"
 },
 {
   "id": 6,
   "imageLight": "/images/clients/mfinity.svg",
   "imageDark": "/images/clients/mfinity-dark.svg"
 }
]
}
    • Replace /images/client/group.svg, /images/client/group-dark.svg, etc. with the paths to your client image files.

Services

To configure the service section, you need to make changes in the components/shared/Services.jsx file and the data/serviceData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/shared/Services.jsx file:
    {sectionDetails && (
   <div className="mb-12">
     <p className="section-tagline max-lg:text-center">Our Services</p>
     <div className="block max-lg:text-center lg:flex">
       <h2 className=" max-lg:mb-5">
         The world&rsquo;s best companies <br />
         trust aplio.
       </h2>
       <p className="max-w-[520px] lg:ml-auto">
         Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not
         Latin, though it looks like it
       </p>
     </div>
   </div>
 )}
    • Update the tagline, titleandparagraphprops to set the desired, tagline title and description for the section. You can remove this code if you don't want to include a title or description. By defaultsectionDetailsprops is set true. if you don't want to show it, pass the falsevalue through props in thepage.js`.

  2. service Cards:

    • Open the data/serviceData.json file.
    • Find the ServiceData array and modify it to include the service items you want to display.
    • Each object in the ServiceData array represents a service item. You can add or remove objects as needed.
    • Update the properties of each object with the desired values for the service item.
    • Example:
   {
  "ServiceData": [
    {
      "id": 1,
      "slug": "investment-bank",
      "title": "Investment Banks",
      "excerpt": "Until recently, the prevailing view asumed lorem ipsum was born as nonsense text.",
      "iconLight": "/images/services/investment.svg",
      "iconDark": "/images/services/investment-dark.svg",
      "featureImage": "/images/services/service-single1.png",
      "videoLink": "https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
      "serviceDetails": "Lorem ipsum dolor sit amet consectetur. Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate curabitur est. Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceExpectation": "Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceExpectationList": [
        {
          "item": "It’s scalable and secure"
        },
        {
          "item": "Artificial Intelligence Feature"
        },
        {
          "item": "Offline version available"
        }
      ],
      "serviceQualifications": "Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceQualificationsList": [
        {
          "item": "It’s scalable and secure"
        },
        {
          "item": "Artificial Intelligence Feature"
        },
        {
          "item": "Offline version available"
        }
      ]
    },
    {
      "id": 2,
      "slug": "sales",
      "title": "Sales & Trading",
      "excerpt": "Until recently, the prevailing view asumed lorem ipsum was born as nonsense text.",
      "iconLight": "/images/services/sales.svg",
      "iconDark": "/images/services/sales-dark.svg",
      "featureImage": "/images/services/service-single1.png",
      "videoLink": "https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
      "serviceDetails": "Lorem ipsum dolor sit amet consectetur. Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate curabitur est. Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceExpectation": "Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceExpectationList": [
        {
          "item": "It’s scalable and secure"
        },
        {
          "item": "Artificial Intelligence Feature"
        },
        {
          "item": "Offline version available"
        }
      ],
      "serviceQualifications": "Morbi lorem proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue adipiscing.",
      "serviceQualificationsList": [
        {
          "item": "It’s scalable and secure"
        },
        {
          "item": "Artificial Intelligence Feature"
        },
        {
          "item": "Offline version available"
        }
      ]
    }
  ]
}

Counter

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

  1. Open the data/counterData.json 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.
    • rightIcon: The rightIcon to be displayed beside the counter number.
    • 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:
{
  "CounterData": [
    {
      "id": 1,
      "number": "60",
      "rightIcon": "%",
      "text": "Project Completed"
    },
    {
      "id": 2,
      "number": "30",
      "rightIcon": "+",
      "text": "Team Members"
    },
    {
      "id": 3,
      "number": "40",
      "rightIcon": "K",
      "text": "Satisfied Clients"
    }
  ]
}
  1. Save the changes to the data/counterData.json file.

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

Vision

To configure the Work Process section, you need to make changes in the components/home-1/Vision.jsx file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-1/Vision.jsx file:
   <p className="section-tagline">Data Integrations</p>
 
    <h2 className="mb-8">A strong vision is crucial for the analysis of wealth.</h2>
    <p className="mb-11">
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After
      magazine.
    </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

     import visionImageOneLight from "@/public/images/vision/vision-image.png";
 import visionImageOneDark from "@/public/images/vision/vision-image.png";
 import visionImage2Light from "@/public/images/vision/vision-image-1.png";
 import visionImage2Dark from "@/public/images/vision/vision-image-dark-1.png";
 import visionImage3Light from "@/public/images/vision/vision-image-2.png";
 import visionImage3Dark from "@/public/images/vision/vision-image-dark-2.png";

Solution

To configure the Work Process section, you need to make changes in the components/home-1/Solution.jsx file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-1/Solution.jsx file:
  <p className="section-tagline">Strong Solutions</p>
 
  <h2 className="mb-8">Ensure strong solutions are available at all times</h2>
  <p className="mb-11">
    Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not Latin
    though it looks like nothing.
  </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

     import solutionImage from "@/public/images/solution/solution.png";
 import solutionImageDark from "@/public/images/solution/solution-dark.png";
 import solutionImage1 from "@/public/images/solution/solution-shape1.png";
 import solutionImage1Dark from "@/public/images/solution/solution-shape1-dark.png";
 import solutionImage2 from "@/public/images/solution/solution-shape2.png";
 import solutionImage2Dark from "@/public/images/solution/solution-shape2-dark.png";
 import solution3Image from "@/public/images/solution/solution-shape3.png";
 import solutionImage3Dark from "@/public/images/solution/solution-shape3-dark.png";

Integration

To configure the Work Process section, you need to make changes in the components/home-1/Integration.jsx file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-1/Integration.jsx file:
  <p className="section-tagline">Top Integration</p>
 
  <h2 className="mb-8">Make productivity easier with 50+ Integrations</h2>
  <p className="mb-10">
    Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not Latin
    though it looks like nothing.
  </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

     <Image
   src="images/twitter.svg"
   alt="value image"
   className="inline-block"
   width={40}
   height={40}
 />

FAQ

To configure the Work Process section, you need to make changes in the components/home-1/Faq.jsx file and the data/faqData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-1/Faq.jsx file:
  <div>
    <p className="section-tagline">Faq&rsquo;s</p>
 
    <h2 className="mb-8">
      Frequently Asked <br />
      Question
    </h2>
    <p>
      Neque accumsan dolor nullam commodo. Odio massa nisi ullamcorper suspendisse amet amet. Aenean suspendisse
      eget est pulvinar. Fames eget eget nascetur ornare
    </p>
  </div>
  1. FAQData: all the faq data are in the FaqData array in faqData.json file. Update them to add Faq's
{
  "FAQData": [
    {
      "id": 1,
      "type": ["general", "changelog"],
      "question": "What is a business agency?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    },
    {
      "id": 2,
      "type": ["general"],
      "question": "What services does a business agency provide?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    },
    {
      "id": 3,
      "type": ["general", "changelog"],
      "question": "How often should I update my website?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    },
    {
      "id": 4,
      "type": ["general", "terms"],
      "question": "How do subscriptions work?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    },
    {
      "id": 5,
      "type": ["changelog", "terms"],
      "question": "What other services are you compatible with?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    },
    {
      "id": 6,
      "type": ["general", "terms"],
      "question": "What other services are you compatible with?",
      "answer": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin."
    }
  ]
}

Note: Only general type faq will be shown in the home page

Testimonials

To configure the testimonials section in the component/shared/Testimonial.jsx file, you need to update the TestimonialData array in the data/testimonial.json file. Here are the steps:

  1. Open the data/testimonial.json 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.
  • logoLight: Company logo for the light version.
  • logoDark: Company logo for the dark version.
  • author: The author of the testimonial.
  • designation: The designation of the author.
  • testimonial: The testimonial provided by the author.
  • rating: The rating given by the author.
  • image: The image of the testimonial provider.
  1. Update the properties with your desired values for each testimonial.
  2. Example:
 
{
  "TestimonialData": [
    {
      "id": 1,
      "logoLight": "/images/testimonial/bodygroup.svg",
      "logoDark": "/images/testimonial/bodygroup-dark.svg",
      "testimonial": "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin though it looks like it, and it actually says nothing.",
      "rating": 4,
      "date": "Feb 03, 2024",
      "author": {
        "name": "Robert Frost",
        "designation": "Lead Developer",
        "image": "/images/testimonial/avatar1.png"
      }
    }
  ]
}
  1. Save the changes to the data/testimonial.json file.

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

Home Blog

Data in this section is generated from blogs. Create blogs and the data will always be shown here. See more on this link (opens in a new tab).

Home Cta

To update the title of the Call to Action section in the components/home-1/Cta.jsx file, NOw modify the following data to updata CTA section. Here are the codes:

<div className=" text-center   mx-auto">
<h2 className="mb-5 text-[48px] font-semibold">
  Start Your Free <br />
  Trial Today.
</h2>
<p className="mb-12 max-w-[400px] mx-auto">
  By creating a custom Web design for your business, we can bring your vision to life.
</p>
<link
  href="/contact"
  className="btn"
>
  Get Started Today
</link>
<ul className=" flex max-md:flex-col max-md:gap-5 items-center justify-between mt-20 max-w-[815px] mx-auto">
  <li className="flex items-center">
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="mr-3"
    >
      <path
        d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
        stroke=""
        className="stroke-paragraph dark:stroke-primary"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
    <p>No Credit Card Required</p>
  </li>
  <li className="flex items-center">
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="mr-3"
    >
      <path
        d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
        stroke=""
        className="stroke-paragraph dark:stroke-primary"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
    <p>Free For 30 Day Trial.</p>
  </li>
  <li className="flex items-center">
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="mr-3"
    >
      <path
        d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
        stroke=""
        className="stroke-paragraph dark:stroke-primary"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
    <p>Money Back Guarente.</p>
  </li>
</ul>
</div>
  1. Save the changes to the components/home-1/Cta.js file.

Animation

The animation effects in this section are achieved using the framer-motion animation library. If you want to modify the animation, follow the instructions below.

All the animation is added in the data/animate.js file.

    export const fadeUpAnimation = {
      initial: { opacity: 0, y: 100 },
      animate: {
        opacity: 1,
        y: 0,
        transition: {
          duration: 0.5,
        },
      },
    }

The animation code for the hero text involves the use of the variants object, which defines the initial and target states of the animation. The animation is applied to the opacity and y properties to control the opacity and vertical position of the text.

If you want the text to animate from left/right instead of top/bottom, you can change the y property to x. Additionally, you can adjust the duration and delay of the animation by modifying the duration and delay values, respectively.

Now, To add this content folow the steps:

  • import useRef and *useWhileInView

  import useWhileInView from '@/hooks/useWhileInView'
  import { useRef } from 'react'
  • Now use the use ref and assign it inside the components into a varaible like this:
  const ref = useRef(null)
  const controlAnimation = useWhileInView(ref)
  • Finally, use it on the item where you want to add.
  <motion.div
    ref={ref}
    initial="initial"
    animate={controlAnimation}
    variants={fadeUpAnimation}
  >
 
  Your content here
  </motion.div>
AnimationsHomepage V2