Aplio
NuxtJs
Homepage V3

Customize Your Homepage V3

Customizing the homepage V3 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 pages/banking.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 HomepageThree 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 BankingHero, BankingDetails, MembersCounter, BankingServices, OnlineBanking, Counter, Marquee, Pricing, Team, CtaV3 and FaqV2 .

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.

BankingHero Section

To customize the data in the Hero section, you can modify the following properties in the components\HomepageThree\BankingHero.vue file in the pages/banking.vue and customize the following data:

<BankingHero
  subtitle="MONITOR YOUR MONEY"
  title="The future of business is being <br> shaped by aplio"
  paragraph="Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin, though it looks like it"
/>

Banking Details

To configure the Banking Details section, you need to make changes in the components/HomepageThree/BankingDetails.vue file.. Here are the instructions:

  • Images has been imported from the public folder. You can change them by changining the image path
import bannerLight from "../public/images/banking/banner.png"; import bannerDark
from "../public/images/banking/banner-dark.png"; import bannerDeviceLight from
"../public/images/banking/banner-device.png"; import bannerDeviceDark from
"../public/images/banking/banner-device-dark.png"; import bannerShapeOneLight
from "../public/images/banking/banner-shape-1.png"; import bannerShapeOneDark
from "../public/images/banking/banner-shape-1-dark.png"; import
bannerShapeTwoLight from "../public/images/banking/banner-shape-2.png"; import
bannerShapeTwoDark from "../public/images/banking/banner-shape-2-dark.png";

Banking Features

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

About Banking

To configure the About Banking section, you need to make changes in the components/HomepageThree/BankingServices.vue file.. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageThree/BankingServices.vue file:
<p className="section-tagline">ABOUT ONLINE BANKING</p>
 
<h2 className="mb-8">Incredibly easy and hassle-free online banking</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 changing the image path

    import baseImageLight from "../public/images/about/onlinePayment.png"; import
baseImageDark from "../public/images/about/onlinePayment-dark.png"; import
shapeImageLight from "../public/images/about/onlinePayment-shape.png"; import
shapeImageDark from "../public/images/about/onlinePayment-shape-dark.png";
  • Update Other items if necessary from this file.

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:
    <div class="">
       <p class="section-tagline">Our Pricing</p>
       <h1 v-if="fast">Choose the right plan for your business</h1>
       <h2 v-else>Choose the right plan for your business</h2>
       <p v-if="fast" class="max-lg:mb-10 mt-10 mb-12 max-w-[590px] mx-auto">
         Until recently, the prevailing view assumed lorem ipsum was born as
         a nonsense text. It‘s not Latin, though it looks like it
       </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 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, "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" } ] } ] ;

Team

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

  1. Section Title:

    • Locate the following code in the components/shared/Team.vue file:
    <div className="mb-12 text-center max-w-[475px] mx-auto">
  <p className="section-tagline">Our Team</p>
 
  <h2>Our leading, strong and creative team</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.

  2. Members Images

    • Open the data/teamData.json file.
    • Find the teamData.json array and modify it to include the client images you want to display.
    • Each object in the teamData.json array represents a client images for light and Dark version. You can add or remove objects as needed.
    • Update the proerties of each object with the path to the corresponding client image file.
    • Example
    teamData.json = [ { id: 1, name: "Cody Fisher", designation: "Lead Designer",
fbLink: "#", dribbleInLink: "#", gitHubLink: "#", linkedInLink: "#", image:
"/images/team/team1.png", details: "Lorem ipsum dolor sit amet consectetur.
Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate
curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", email:
"team@gmail.com", phone: "+3 230 705 5448", }, ];

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:
    { 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.json array and modify it to include the client images you want to display.
    • Each object in the ClientData.json 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.json = [ { 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", }, // Add more objects for additional
client images ];
    • Replace /images/client/group.svg, /images/client/group-dark.svg, etc. with the paths to your client image files.

FAQV2

To configure the Work Process section, you need to make changes in the components/HomepageThree/FaqV2.vue file and the data/FAQData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageThree/FaqV2.vue 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 data/FaqData.json file. Update them to add Faq's
[ { "id": 1, "slug": "cody-fisher", "name": "Cody Fisher", "designation": "Lead
Designer", "fbLink": "#", "dribbleInLink": "#", "gitHubLink": "#",
"linkedInLink": "#", "image": "/images/team/team1.png", "details": "Lorem ipsum
dolor sit amet consectetur. Nullam blandit dui gravida aliquam enim eu.
Adipiscing viverra vulputate curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" }, { "id": 2, "slug":
"kristin-coper", "name": "Kristin Coper", "designation": "Project Manager",
"fbLink": "#", "dribbleInLink": "#", "gitHubLink": "#", "linkedInLink": "#",
"image": "/images/team/team2.png", "details": "Lorem ipsum dolor sit amet
consectetur. Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra
vulputate curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" }, { "id": 3, "slug":
"guy-hawkins", "name": "Guy Hawkins", "designation": "Lead Designer", "fbLink":
"#", "dribbleInLink": "#", "gitHubLink": "#", "linkedInLink": "#", "image":
"/images/team/team3.png", "details": "Lorem ipsum dolor sit amet consectetur.
Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate
curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" }, { "id": 4, "slug":
"wade-wareen", "name": "Wade Wareen", "designation": "Designer", "fbLink": "#",
"dribbleInLink": "#", "gitHubLink": "#", "linkedInLink": "#", "image":
"/images/team/team4.png", "details": "Lorem ipsum dolor sit amet consectetur.
Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate
curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" }, { "id": 5, "slug":
"bessie-cooper", "name": "Bessie Cooper", "designation": "Product Manager",
"fbLink": "#", "dribbleInLink": "#", "gitHubLink": "#", "linkedInLink": "#",
"image": "/images/team/team5.png", "details": "Lorem ipsum dolor sit amet
consectetur. Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra
vulputate curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" }, { "id": 6, "slug":
"jacob-jones", "name": "Jacob Jones", "designation": "Art Director", "fbLink":
"#", "dribbleInLink": "#", "gitHubLink": "#", "linkedInLink": "#", "image":
"/images/team/team6.png", "details": "Lorem ipsum dolor sit amet consectetur.
Nullam blandit dui gravida aliquam enim eu. Adipiscing viverra vulputate
curabitur est.
<br />
<br />
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.
<br />
<br />
Neque ultrices nunc condimentum morbi risus tincidunt. Vel arcu lacus non
ornare. Porttitor in rhoncus magna augue adipiscing.", "email":
"team@gmail.com", "phone": "+3 230 705 5448" } ] ;

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

CtaV3

To update the title of the Call to Action section in the components\HomepageThree\CtaV3.vue file, Now modify the following data to update NewsLetter section. Here are the codes:

<section className="relative  pb-25 max-md:pb-25">
  <div className="container relative max-md:text-center">
    <div className="absolute left-1/2 -bottom-[442px] -translate-x-1/2  flex max-md:flex-col -z-10">
      <div className="max-md:hidden max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/20 blur-[145px]"></div>
      <div className="max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/25 -ml-[170px] max-md:ml-0 blur-[145px]"></div>
      <div className="max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/20 -ml-[170px] max-md:ml-0 blur-[145px]"></div>
    </div>
    <div>
      <div>
        <p className="section-tagline">Start Today</p>
      </div>
      <div className="grid grid-cols-12 grid-y-10 items-start">
        <div className="max-md:col-span-full md:col-span-6 lg:col-span-7">
          <h2 className="mb-5 text-[48px] font-semibold ">
            Start your free trial now!
          </h2>
          <p>
            By creating a custom Web design for your business, we can bring your
            vision to life.
          </p>
        </div>
        <div className="max-md:col-span-full md:col-span-6 lg:col-span-5 max-md:mt-5 ">
          <form>
            <div className="grid grid-cols-12 items-center max-lg:gap-y-5 lg:gap-x-6 ">
              <input
                type="text"
                placeholder="Enter your email"
                className="bg-transparent placeholder:text-light dark:placeholder:text-[#A1A49D] text-[#A1A49D] text-light focus:outline-none  leading-[1.75] border rounded-[60px] bg-white dark:bg-dark-200 dark:border-[#31332F] border-borderColour max-lg:col-span-full lg:col-span-8 h-full ps-5 max-lg:py-5 focus:border-primary dark:focus:border-primary duration-300 transition-all outline-none"
              />
              <button className="btn max-lg:col-span-full lg:col-span-4">
                Get Started
              </button>
            </div>
          </form>
          <ul className=" flex max-md:flex-col max-lg:gap-y-2.5 items-center max-lg:justify-between lg:gap-5 mt-6 ">
            <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>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
  1. Save the changes to the /components/HomepageThree/CtaV3.vue file.
Homepage V2Homepage V4