Aplio
NextJs
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 app/home-3/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 PageHero, BankingDetails, MembersCounter, AboutBanking, FaqFullLayout, Counter, Clients, Pricing, TeamMembers and NewsLetter.

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/shared/PageHero.jsx file in the app/home-3/page.jsx and customize the following data:

<PageHero
  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/home-3/BankingDetails.jsx 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.jsx file and the data/bankingServicesData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the page/home-2.jsx file. Now import BankingServicesData from data/bankingServicesData.json.Then inside feature add the BankingServicesData to add features. Also ad sectionTag and sectionTitle like the followin codes to update setion title and tagline.:
  <PaymentFeatures
    features={BankingServicesData}
    sectionTag={"Our Services"}
    sectionTitle={"The world's best companies trust aplio."}
  />
  • Update the section as you need.

About Banking

To configure the About Banking section, you need to make changes in the components/home-3/AboutBanking.jsx file.. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-3/AboutBanking.jsx 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 changining 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/MembersCoushared/MembersCounternter.jsx file. Here are the instructions:

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

  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.
  1. add border={false} as the prop value in the app/home-3/page.jsx file to remove border.

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:

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

  2. 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"
     }
   ]
 }
]
}

Team Members

To configure the Team Members section, you need to make changes in the components/shared/TeamMembers.jsx file and the data/team.jsonfile. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/shared/TeamMembers.jsx 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/team.json file.
    • Find the teamData array and modify it to include the client images you want to display.
    • Each object in the teamData 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": [
 {
   "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.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.

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

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

FAQ

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

  1. Section Title:

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

NewsLetter

To update the title of the Call to Action section in the components/shared/NewsLetter.jsx file, Now modify the following data to updata 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/shared/NewsLetter.js file.
Homepage V2Homepage V4