About Page
About Page Hero
To customize the data in the Hero section, you can modify the following properties in the components/shared/PageHero.jsx file. In the app/about/page.jsx and customize the following data:
<PageHero
subtitle="ABOUT COMPANY"
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"
/>About Details
To configure the Banking Details section, you need to make changes in the components/about/AboutDetails.jsx file.. Here are the instructions:
Images: To add Images go tocomponents/about/AboutDetails.jsxfile and update the followinng codes
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/about/AboutDetails.jsxfile.
<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>About Features
To configure the Payment Features section, you need to make changes in the components/shared/PaymentFeatures.jsx file and the data/aboutFeaturesData.json file. Here are the instructions:
-
Section Title:
- Locate the following code in the
page/home-2.jsxfile. Now importAboutFeaturesDatafromdata/aboutFeaturesData.json.Then inside feature add theAboutFeaturesDatato add features. Also adsectionTagandsectionTitlelike the followin codes to update setion ttiel and tagline. You should also add spaccing props value to add spacing:
- Locate the following code in the
<PaymentFeatures
features={AboutFeaturesData}
sectionTag={"OUR VALUE"}
sectionTitle={"Our business is steered by our core values"}
spacing={"max-md:py-25 py-150"}
/>- Update the section as you need.
About Value
To configure the About Value section, you need to make changes in the components/about/AboutCoreValue.jsx file.. Here are the instructions:
-
Section Title:
- Locate the following code in the
components/about/AboutCoreValue.jsxfile:
- Locate the following code in the
<p className="section-tagline">Core Value</p>
<h2 className="mb-8">The philosophy that underpins our organization.</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
<div className="relative flex items-center justify-end max-md:justify-center"> <motion.img src="/images/about/onlinePayment.png" alt="banking image" className="max-w-[250px] dark:hidden lg:max-w-[320px] xl:max-w-[420px]" ref={ref} initial="initial" animate={controlAnimation} variants={fadeUpAnimation} /> <motion.img src="/images/about/onlinePayment-dark.png" alt="banking image" className="hidden max-w-[250px] dark:inline-block lg:max-w-[320px] xl:max-w-[420px]" ref={ref} initial="initial" animate={controlAnimation} variants={fadeUpAnimation} /> <div className="absolute bottom-8 left-0 right-auto top-auto max-w-[180px] md:max-w-[250px] xl:max-w-[344px] "> <motion.img src="/images/about/onlinePayment-shape.png" alt="banking image" className="dark:hidden" ref={ref2} initial="initial" animate={controlAnimation2} variants={fadeFromRightAnimation} /> <motion.img src="/images/about/onlinePayment-shape-dark.png" alt="banking image" className="hidden dark:inline-block " ref={ref2} initial="initial" animate={controlAnimation2} variants={fadeFromRightAnimation} /> </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/TestimonialSlider.jsx file from data/testimonial.json file.
Team Members
To configure the Team Members section, you need to make changes in the components/shared/TeamMembers.jsx file and the data/testimonial.json file. Here are the instructions:
-
Section Title:
- Locate the following code in the
components/shared/TeamMembers.jsxfile:
<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.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.jsfile.