Aplio
NuxtJs
Homepage V2

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 components/HomepageTwo/index.vue 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 PaymentHero, Rating, PaymentCoreFeature, WhyUs, PaymentFeatures, MembersCounter, Pricing, Clients, BlogsV2 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.

PaymentHero Section

To customize the data in the Hero section, you can modify the following properties in the components/HomepageTwo/PaymentHero.vue 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 vue 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.vue file and the data/PaymentRatingData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-2/Rating.vue 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.

  1. Payment Ratings: Go to data/PaymentRatingData.json file. now you will get PaymentRatingData.json datas, change the values to update the section.

    [ { "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/HomepageTwo/paymentCoreFeature.vue file and the data/PaymentFeatureData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageTwo/paymentCoreFeature.vue 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.

  1. PaymentFeatures: Go to data/PaymentFeatureData.json file. now you will get paymentCoreFeatures .json, change the values to update the section.

    [ { "id": 1, "iconLight": "/images/payment/paymentFeature.svg", "iconDark":
"/images/payment/paymentFeature-dark.svg", "title": "Useful Features",
"desc": "The prevailing view asumed lorem ipsum was born as nonsense text."
}, { "id": 2, "iconLight": "/images/payment/payementSecure.svg", "iconDark":
"/images/payment/payementSecure-dark.svg", "title": "100% Secure", "desc":
"The prevailing view asumed lorem ipsum was born as nonsense text." }, {
"id": 3, "iconLight": "/images/payment/paymentCashback.svg", "iconDark":
"/images/payment/paymentCashback-dark.svg", "title": "Cashback Program",
"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/HomepageTwo/WhyUs.vue file.. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageTwo/WhyUs.vue 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.

  1. 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.vue file and the data/PaymentFeatureData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the page/payment.vue file. Now import PaymentFeaturesData from data/PaymentFeatureData.json.Then inside feature add the PaymentFeaturesData to add features. Also ad sectionTag and sectionTitle like the following codes to update section title and tagline.:
<div class="mb-12 text-center max-w-[575px] mx-auto">
        <p class="section-tagline">More Features</p>
 
        <h2>Managing your money has never been easier</h2>
 </div>
  • Update the section as you need.

Members Counter

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

  1. Section Title:

    • Locate the following code in the components/shared/MembersCounter.vue 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.

  1. 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.vue file and the data/PricingData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/shared/Pricing.vue 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.

  2. Pricing Value

    • Open the data/PricingData.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
    [ { "id": 1, "type": ["general", "changelog"], "open": true, "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"], "open": true, "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"], "open": false, "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"], "open": false, "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"], "open": false, "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." } ] ;

Clients

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

  1. Section Title:

    • Locate the following code in the components/shared/Clients.vue file:
    <div class="container overflow-hidden max-lg:!px-0">
   <div class="text-center max-w-[550px] px-[10px] mx-auto max-lg:px-2.5">
     <h2 class="mb-10">The world's best companies trust aplio.</h2>
     <p class="text-light mb-15">
       Trusted by thousands of companies across 50+ countries
     </p>
   </div>

  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
    [ { "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.

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.vue 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>
  1. Save the changes to the components/HomepageTwo/Cta.vue file.
HomepageHomepage V3