Customize Your Homepage V2

Customizing the homepage V2 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/home-2/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, PaymentRating, CoreFeature, WhyUs, PaymentFeatures, MembersCounter, Pricing, Clients, FinancialBlog and CtaV2.

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-2/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-4 font-medium uppercase">Digital Payment Solution</p>

Title: To change the Hero title, locate the following code and update the text within the <h1> tags:

<h1 className="mb-10">
  Smart
  <span className="font-playfair italic inline-block px-5  pt-0.5 pb-2.5 leading-none"> Payment </span>
  solution for your Business
</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 has been imported from the public folder. To change the Hero images, you can replace the image files located in the specified paths.

import PaymentImage from "../public/images/payment/payment-hero.png";
import PaymentImageDark from "../public/images/payment/payment-hero-dark.png";
import PaymentImageDevice from "../public/images/payment/payment-hero-device.png";
import PaymentImageDeviceDark from "../public/images/payment/payment-hero-device-dark.png";

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

Payment Rating

To configure the Payment Rating section, you need to make changes in the components/home-2/Rating.jsx file. Here are the instructions:

Section Title:
- Locate the following code in the components/home-2/Rating.jsx file:

   <div className="max-lg:col-span-full lg:col-span-5 lg:max-w-[425px] pl-12 max-lg:text-center max-lg:pl-0 max-lg:py-12">
      <h2 className=" mb-8">
        Thousands of <br />
        users have faith in us
      </h2>
      <p>Boost your insights that help you to grow business</p>
    </div>

Update the section as you need.

Payment Ratings: Go to components/home-2/Rating.jsx file. now you will get PaymentRatingData datas, change the values to update the section.

 const PaymentRatingData = [
   {
     id: 1,
     rating: 4.7,
     name: "Capterra",
     desc: "Top Customer Fulfilment",
   },
   {
     id: 2,
     rating: 4.6,
     name: "Capterra",
     desc: "Best Payment Software",
   },
   {
     id: 3,
     rating: 4.9,
     name: "Trustpilot",
     desc: "Top Payment Company",
   },
 ];

Core Features

To configure the Core Features section, you need to make changes in the components/home-2/CoreFeature.jsx file . Here are the instructions:

Section Title:
- Locate the following code in the components/home-2/CoreFeature.jsx file:

  <div className="mb-12 text-center max-w-[575px] mx-auto">
    <p className="section-tagline">Core Features</p>
 
    <h2>Features that help you run your business</h2>
  </div>

Update the section as you need.

Features: Go to components/home-2/CoreFeature.jsx file. now you will get CoreFeatures datas, change the values to update the section.

const CoreFeatures = [
{
 id: 1,
 title: "Useful Features",
 iconLight: "/images/payment/invoice.svg",
 iconDark: "/images/payment/invoice-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
{
 id: 2,
 title: "Insights and Reports",
 iconLight: "/images/payment/insight.svg",
 iconDark: "/images/payment/insight-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
{
 id: 3,
 title: "Managing Inventory",
 iconLight: "/images/payment/inventory.svg",
 iconDark: "/images/payment/inventory-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
{
 id: 4,
 title: "Organized Expense",
 iconLight: "/images/payment/expens.svg",
 iconDark: "/images/payment/expens-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
{
 id: 5,
 title: "Organize Receipts",
 iconLight: "/images/payment/receipts.svg",
 iconDark: "/images/payment/receipts-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
{
 id: 6,
 title: "Mobile App",
 iconLight: "/images/payment/app.svg",
 iconDark: "/images/payment/app-dark.svg",
 desc: "The prevailing view asumed lorem ipsum was born as nonsense text.",
},
];

Why Us

To configure the Why Us section, you need to make changes in the components/home-2/WhyUs.jsx file.. Here are the instructions:

Section Title:
- Locate the following code in the components/home-2/WhyUs.jsx file:

   <p className="section-tagline">WHY CHOOSE US</p>
 
    <h2 className="mb-8">
      Control the flow of
      <br />
      money easily
    </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.

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

import WHyUsLight from "../public/images/payment/whyUs-bg.png";
import WHyUsDark from "../public/images/payment/whyUs-bg-dark.png";
import WHyUsImageLight from "../public/images/payment/whyUs-image.png";
import WHyUsImageDark from "../public/images/payment/whyUs-image-dark.png";
import possibilitiesBaseLight from "../public/images/payment/explore.png";
import possibilitiesBaseDark from "../public/images/payment/explore-dark.png";
import possibilitiesExpenseLight from "../public/images/payment/expense-dark.png";
import possibilitiesExpenseDark from "../public/images/payment/expense-dark.png";
import possibilitiesSummeryLight from "../public/images/payment/summery.png";
import possibilitiesSummeryDark from "../public/images/payment/summery-dark.png";
import possibilitiesPaymentLight from "../public/images/payment/payment.png";
import possibilitiesPaymentDark from "../public/images/payment/payment-dark.png";

Payment Features

To configure the Payment Features section, you need to make changes in the components/shared/PaymentFeatures.jsx file and the data/paymentFeaturesData.json file. Here are the instructions:

Section Title:
- Locate the following code in the page/home-2.jsx file. Now import PaymentFeaturesData from data/paymentFeaturesData.json.Then inside feature add the PaymentFeaturesData to add features. Also ad sectionTag and sectionTitle like the followin codes to update setion ttiel and tagline.:

  <PaymentFeatures
    features={PaymentFeaturesData}
    sectionTag={"MORE FEATURES"}
    sectionTitle={"Managing your money has never been easier"}
  />

Update the section as you need.

Members Counter

To configure the Work MembersCounter section, you need to make changes in the components/shared/MembersCounter.jsx file. Here are the instructions:

Section Title:
- Locate the following code in the components/shared/MembersCounter.jsx file:

  <div className="max-w-[550px]">
    <p className="section-tagline">Numbers</p>
    <h2>More than 10 years experience in this industry</h2>
  </div>

Update the section as you need.

Counter Value: Now import CounterAnimation from @/utils/counterAnimation and puss a value in the number attribute like the following.
```
 <CounterAnimation number={95} />
```

Update the section and save.

Pricing

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

Section Title:
- Locate the following code in the components/shared/Pricing.jsx file:
```
{sectionTtile && (
 <div>
   <p className="section-tagline ">Our Pricing</p>
   <h2>Choose the right plan for your business</h2>
 </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 props is set true and spacing props is given a value. if you don't want to show it, pass the false value through props in the page.js. Also, you can change the spacing value to set a new spacing on top.

Pricing Value

Open the data/pricing.json file.
Find the PricingData array and modify it to include the price you want to display.
Each object in the PricingData array represents a price for light and Dark version. You can add or remove objects as needed.
Update properties of each object with the path to the corresponding price file.
Example

{
"PricingData": [
 {
   "id": 1,
   "featured": false,
   "title": "Basic",
   "desc": "The prevailing view assumed lorem ipsum was born as a nonsense text.",
   "priceMonthly": "19.00",
   "priceYearly": "230.00",
   "save": "",
   "priceList": [
     {
       "name": "Track income & expenses"
     },
     {
       "name": "Send custom invoices & quotes"
     },
     {
       "name": "Connect your bank"
     },
     {
       "name": "Insights & reports"
     }
   ]
 },
 {
   "id": 2,
   "featured": true,
   "title": "Standard",
   "desc": "The prevailing view assumed lorem ipsum was born as a nonsense text.",
   "priceMonthly": "32.00",
   "priceYearly": "350.00",
   "save": "40%",
   "priceList": [
     {
       "name": "Track income & expenses"
     },
     {
       "name": "Send custom invoices & quotes"
     },
     {
       "name": "Connect your bank"
     },
     {
       "name": "Insights & reports"
     }
   ]
 },
 {
   "id": 3,
   "featured": false,
   "title": "Premium",
   "desc": "The prevailing view assumed lorem ipsum was born as a nonsense text.",
   "priceMonthly": "48.00",
   "priceYearly": "530.00",
   "save": "",
   "priceList": [
     {
       "name": "Track income & expenses"
     },
     {
       "name": "Send custom invoices & quotes"
     },
     {
       "name": "Connect your bank"
     },
     {
       "name": "Insights & reports"
     }
   ]
 }
]
}

Clients

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

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.

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.

Now Go to home-2/page.jsx file and add the follwoing value in Clients to remove spacing and section title.

<Clients
  sectionTitle={false}
  spacing={"0 0"}
/>

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).

CTA V2

To update the title of the Call to Action section in the components/shared/CallToAction.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 best payment <br />
    experience now!
  </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-lg:flex-col max-lg: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>

Save the changes to the components/shared/CallToAction.js file.

Homepage Homepage V3