About Aplio

Welcome to Aplio, the ultimate financial website template for a sleek and effective online presence. Tailored for financial professionals, Aplio combines modern design with powerful functionality. Engage your audience with intuitive layouts, seamless navigation, and interactive financial tools. Aplio is a simple, minimal and responsive financial template. It is well organized, well-formatted and named accordingly so it’s easy to change any and all of the design. Aplio is built with tailwind css. You can customize it very easily to fit your needs. To see live demo click on this link Aplio (opens in a new tab)

Getting Started

Get started by Downloading the site source codes.

What you'll need

Node.js (opens in a new tab) version 16.14 or above:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.

Start your site

After download the file, extract the zip file.
Enter the aplio-next folder. You will get two folder inside aplio and Documentation.
Inside the aplio folder. You will get all the development files.
To run the development server follow the following steps:

open Command prompt and navigate to the **aplio-next** folder. Then type the following codes:
cd aplio
npm install
npm run dev

The cd command changes the directory you're working with. In order to work with aplio-nextjs site, you'll need to navigate the terminal there.

The npm install command build all the necessary packages for the site.

The npm run dev command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/ (opens in a new tab).

Folder Structure

Aplio maintain nextjs 14.1.4 folder structure. Furthermore, We have use jsx to create the files. Full folder structure is given below:

Aplio
├─ app
│   |── layout.js
|   |── page.jsx
|   |── not-found.jsx
|   |── globals.css
|   |── favicon.ico
|   └── about
│       |── page.jsx
|   └── blog
|       |── page.jsx
|       └── [slug]
|            |── page.jsx
|   └── blog-list
|       |── page.jsx
|   └── career
|       |── page.jsx
|       └── [slug]
|            |── page.jsx
|   └── categories
|       └── [category]
|            |── page.jsx
|   └── contact
|       |── page.jsx
|   └── faq
|       |── page.jsx
|   └── forget-password
|       |── page.jsx
|   └── home-2
|       |── page.jsx
|   └── home-3
|       |── page.jsx
|   └── home-4
|       |── page.jsx
|   └── home-5
|       |── page.jsx
|   └── home-6
|       |── page.jsx
|   └── home-7
|       |── page.jsx
|   └── home-8
|       |── page.jsx
|   └── integration
|       |── page.jsx
|   └── login
|       |── page.jsx
|   └── price
|       |── page.jsx
|   └── privacy
|       |── page.jsx
|   └── request-demo
|       |── page.jsx
|   └── services
|       |── page.js
|       └── [slug]
|            |── page.jsx
|   └── signup
|       |── page.jsx
|   └── tags
|       └── [tag]
|            |── page.jsx
|   └── teams
|       |── page.js
|       └── [id]
|            |── page.jsx
|   └── terms
|       |── page.jsx
|   └── testimonial
|       |── page.jsx
|
|── components
|   └── about
|       |── AboutCoreValue.jsx
|       |── AboutDetails.jsx
|       |── CoreValueAnimation.jsx
|   └── animation
|       |── FadeUpAnimation.jsx
|       |── FadeUpOneByOneAnimation.jsx
|   └── blogs
|       |── BlogItems.jsx
|       |── BlogGrid.jsx
|       |── BLogList.jsx
|       |── BlogSearch.jsx
|       |── BlogSidebar.jsx
|       |── RecentNews.jsx
|   └── career
|       |── CareerDetails.jsx
|       |── CareerList.jsx
|   └── contact
|       |── ContactInfo.jsx
|   └── faq
|       |── FaqFilter.jsx
|   └── home-1
|       |── Cta.jsx
|       |── Faq.jsx
|       |── Hero.jsx
|       |── HeroContent.jsx
|       |── Integration.jsx
|       |── IntegrationAnimation.jsx
|       |── Questions.jsx
|       |── Solution.jsx
|       |── SolutionAnimation.jsx
|       |── Vision.jsx
|       |── VisionAnimation.jsx
|   └── home-2
|       |── Blog.jsx
|       |── CoreFeature.jsx
|       |── Hero.jsx
|       |── Rating.jsx
|       |── WhyUs.jsx
|   └── home-3
|       |── AboutBanking.jsx
|       |── AboutBankingAnimation.jsx
|       |── BankingDetails.jsx
|   └── home-4
|       |── DataIntegration.jsx
|       |── FAQWithLeftText.jsx
|       |── Feature.jsx
|       |── Hero.jsx
|       |── ProcessInstallation.jsx
|       |── ServiceCardWithLeftText.jsx
|       |── ShareClientMarquee.jsx
|       |── TopIntegration.jsx
|       |── CustomFAQ.jsx
|   └── home-5
|       |── EasyStepFeature.jsx
|       |── Hero.jsx
|       |── HostingFeature.jsx
|       |── MarqueeHomeFivePage.jsx
|       |── PricingFeature.jsx
|       |── TrustedCompany.jsx
|   └── home-6
|       |── Approach.jsx
|       |── ChatbotChat.jsx
|       |── HostingFeature.jsx
|       |── ChatControl.jsx
|       |── Feature.jsx
|       |── Hero.jsx
|       |── Integration.jsx
|   └── home-7
|       |── AboutCrypto.jsx
|       |── CryptoMarket.jsx
|       |── Hero.jsx
|       |── ProcessInstallation.jsx
|       |── Services.jsx
|       |── TabContent.jsx
|       |── TimeLine.jsx
|       |── TimeLineCard.jsx
|       |── Timer.jsx
|   └── home-8
|       |── GetStart.jsx
|       |── Hero.jsx
|       |── Integgration.jsx
|       |── RobustFeature.jsx
|       |── Steps.jsx
|   └── icons
|       |── HeroLine1.jsx
|       |── HeroLine2.jsx
|       |── HeroLine3.jsx
|       |── HeroLine4.jsx
|       |── TestmonialBg.jsx
|       |── VisionLine1.jsx
|       |── VisionLine2.jsx
|       |── VisionLine3.jsx
|       |── VisionLine4.jsx
|   └── Navbar
|       |── Navbar.jsx
|       |── PrimaryNavbar.jsx
|       |── SecondaryNavbar.jsx
|       |── SearchOption.jsx
|       |── Topbar.jsx
|   └── Price
|       |── PriceChoose.jsx
|   └── Service
|       |── ServiceContent.jsx
|   └── shared
|       |── CallToAction.jsx
|       |── CallToActionV2.jsx
|       |── Clients.jsx
|       |── ContactForm.jsx
|       |── Counter.jsx
|       |── Faq.jsx
|       |── FaqBackground.jsx
|       |── FaqItem.jsx
|       |── FaQuestion.jsx
|       |── FinancialBLog.jsx
|       |── Members.jsx
|       |── MembersCounter.jsx
|       |── NewsLetter.jsx
|       |── NewsLetterV2.jsx
|       |── PageHero.jsx
|       |── Pagination.jsx
|       |── PaymentFeatures.jsx
|       |── Pricing.jsx
|       |── PricingBackground.jsx
|       |── PricingCard.jsx
|       |── PricingCards.jsx
|       |── PricingCardsV2.jsx
|       |── Rating.jsx
|       |── ServiceBoxes.jsx
|       |── Services.jsx
|       |── SwiperSlider.jsx
|       |── TeamBackground.jsx
|       |── TeamMembers.jsx
|       |── Testimonial.jsx
|       |── TestimonialV2.jsx
|       |── TestimonialSlider.jsx
|   └── team
|       |── TeamMember.jsx
|       |── TeamMemberAnimation.jsx
|   └── Testimonial
|       |── TestimonialSingle.jsx
|   └── theme
|       |── ThemeSwitcher.jsx
|   └── Footer
|       |── Footer.jsx
|       |── FooterV2.jsx
├─ content
|   └── privacy
|       |── privacy.md
|   └── terms
|       |── terms.md
|   └── career
|       |── business-administrator.md & other career page's Markdown files
|   └── blogs
|       |── Top-investment-solution.md & other blog page's Markdown files
├─ data
│   |── svgImages.js
│   |── animation.js
│   |── footer.js
│   |── aboutFeaturesData.json
│   |── bankingService.json
│   |── clientData.json
│   |── counterData.json
│   |── faqData.json
│   |── integrationData.json
│   |── navbar.json
│   |── paymentFeaturesData.json
│   |── pricing.json
│   |── serviceData.json
│   |── testimonial.json
├─ hooks
|   └── useWhileInView.jsx
├─ public
|   |── Base Images
|   └── Images
|       |── All image files
├─ scss
|   └── Style Related SASS Files
├─ utils
|   └── cn.js
|   └── getMarkDownContent.js
|   └── getMarkDownData.js
|   └── CounterAnimation.js
|   └── providers.js
├─ jsconfig.json
├─ next.config.js
├─ package.json
├─ postcss.congig.js
├─ README.md
├─ tailwind.config.js

Thanks Create a New Page