About Page
About Page Hero
To customize the data in the Hero section, you can modify the following properties in the components\AboutPage\AboutHero.vue file. In the pages\about.vue and customize the following data:
<div class="container">
<div class="max-w-[948px] mx-auto text-center">
<p class="mb-4 font-medium uppercase">about company</p>
<h1 class="max-lg:mb-10 mb-10">
The future of business is being shaped by aplio
</h1>
<p class="max-lg:mb-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>
</div>About Details
To configure the Banking Details section, you need to make changes in the components\AboutPage\AboutUs.vue file.. Here are the instructions:
Images: To add Images got todata/AboutImages.jsonfile and update the following codes
export const AboutImages = [ { id: 1, image: "/images/about/about1.png", }, {
id: 2, image: "/images/about/about2.png", }, { id: 3, image:
"/images/about/about3.png", }, ];Details: To update about details, change the following data in thecomponents\AboutPage\AboutUs.vuefile.
<div className="max-md:col-span-full md:col-span-6">
<div className="max-w-[550px]">
<p className="section-tagline">Numbers</p>
<h2>More than 10 years experience in this industry</h2>
</div>
</div>
<div className="max-md:col-span-full md:col-span-6 max-w-[590px] py-10">
<p>
Lorem ipsum dolor sit amet consectetur. Nulla lobortis lacus nunc pulvinar amet. Id dignissim ipsum quis
varius. Accumsan ultricies dapibus rutrum parturient mauris at est habitasse.
<br />
<br />
Risus egestas neque. Nunc diam arcu purus egestas at dignissim nunc. In nec donec sed pretium donec eros
elementum. Nec bibendum vel odio convallis feugiat viverra rhoncus in risus. Pretium ante nibh morbi sed
consequat sem quam pharetra. Et cursus mattis senectus aliquet.
</p>
</div>Value Features
To configure the Payment Features section, you need to make changes in the components\AboutPage\ValueFeature.vue file and the data/AboutFeatureData.json file. Here are the instructions:
OnlineBanking
To configure the About Value section, you need to make changes in the components\HomepageThree\OnlineBanking.vue file.. Here are the instructions:
-
Section Title:
- Locate the following code in the
components\HomepageThree\OnlineBanking.vuefile:
- Locate the following code in the
<OnlineBanking
subTitle="Core Value"
title="The philosophy that underpins our organization."
/>
<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 changing the image path
<div class="relative flex max-md:justify-center justify-end items-center"> <figure v-motion-fadeUpAnimation> <NuxtImg sizes="1000" src="/images/about/onlinePayment.png" alt="banking image" class="dark:hidden max-w-[250px] lg:max-w-[320px] xl:max-w-[420px]" /> <NuxtImg sizes="1000" src="/images/about/onlinePayment-dark.png" alt="banking image" class="hidden dark:inline-block max-w-[250px] lg:max-w-[320px] xl:max-w-[420px]" /> </figure> <div v-motion-fadeFromLeftAnimation class="absolute left-0 right-auto bottom-8 top-auto max-w-[180px] md:max-w-[250px] xl:max-w-[344px]" > <NuxtImg sizes="1000" src="/images/about/onlinePayment-shape.png" alt="banking image" class="dark:hidden" /> <NuxtImg sizes="1000" src="/images/about/onlinePayment-shape-dark.png" alt="banking image" class="hidden dark:inline-block" /> </div> </div>
- Update Other items if necessary from this file.
Testimonial Slider
We have used swiper js to add slider option in testimonial value. All the testimonial data are automiticaly generated in this components\Shared\Testimonial\TestimonialSlider.vue file from data/TestimonialList.json file.
Team
To configure the Team section, you need to make changes in the components\HomepageThree\Team.vue file and the data/TestimonialList.json file. Here are the instructions:
-
Section Title:
- Locate the following code in the
components\HomepageThree\Team.vuefile:
<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
titleandparagraphprops 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.
- Locate the following code in the
Call To Action
To update the title of the Call to Action section in the components/shared/CallToAction.vue file, Now modify the following data to update CTA section. Here are the codes:
<div class="text-center mx-auto">
<h2
class="mb-5 max-lg:text-[32px] text-[48px] font-semibold"
v-html="title"
></h2>
<p class="max-lg:mt-6 mb-12 max-w-[400px] mx-auto">
By creating a custom Web design for your business, we can bring your
vision to life.
</p>
<NuxtLink to="/contact" class="btn"> Get Started Today </NuxtLink>
<ul
class="flex max-lg:flex-col max-lg:gap-5 items-center justify-between max-lg:mt-5 mt-20 max-w-[815px] mx-auto"
>
<li
class="flex items-center"
v-for="(option, i) in ctaListOption"
:key="i"
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="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=""
class="stroke-paragraph dark:stroke-primary"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<p>{{ option }}</p>
</li>
</ul>
</div>- Save the changes to the
components\HomepageTwo\CtaV2.vuefile.