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 21.5.0 or above:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
Start your site
Run the development server:
open Command prompt
cd aplio-nuxt
npm install
npm run devThe cd command changes the directory you're working with. In order to work with aplio-nuxtjs 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 nuxtjs v3.13.0 folder structure. Furthermore, We have use vue to create the files. Full folder structure is geven below:
Aplio Nuxt
├─ layouts
│ |── default.vue
|
|─ pages
| └── blog
│ |── index.vue
| |── [slug].vue
| └── career
│ |── index.vue
| |── [slug].vue
| └── categories
| |── [categories].vue
| └── services
| |── index.vue
| |── [slug].vue
| └── tags
| |── [slug].vue
| └── team
| |── index.vue
| |── [id].vue
| └── about.vue
| └── analytics.vue
| └── banking.vue
| └── blog-list.vue
| └── contact.vue
| └── faq.vue
| └── forget-password.vue
| └── hosting.vue
| └── index.vue
| └── integration.vue
| └── login.vue
| └── payment.vue
| └── price.vue
| └── privacy.vue
| └── request-demo.vue
| └── signup.vue
| └── terms.vue
| └── testimonial.vue
|
├─ content
| └── blog
| |── Top-investment-solution.md & other blog page's Markdown files
| └── career
| |── business-administrator.md & other career page's Markdown files
| └── privacy
| |── privacy.md
| └── terms
| |── terms.md
|
|── components
| └── AboutPage
| |── AboutHero.vue
| |── AboutUs.vue
| |── ValueFeature.vue
| └── BlogPage
| |── BlogFeature.vue
| |── BlogGrid.vue
| |── BLogList.vue
| |── BlogSidebar.vue
| └── CareerPage
| |── CareerBanner.vue
| |── CareerPosition.vue
| |── ContactInfo.vue
| └── HomepageOne
| |── Faq.vue
| |── Hero.vue
| |── Integration.vue
| |── IntegrationAnimation.vue
| |── Solution.vue
| |── Vision.vue
| └── HomepageTwo
| |── BlogV2.vue
| |── CtaV2.vue
| |── PaymentCoreFeature.vue
| |── PaymentHero.vue
| |── Rating.vue
| |── WhyUs.vue
| └── HomepageThree
| |── BankingDetails.vue
| |── BankingHero.vue
| |── BankingServices.vue
| |── CtaV3.vue
| |── FaqV2.vue
| |── OnlineBanking.vue
| |── Team.vue
| └── HomepageFour
| |── AnalyticsHero.vue
| |── DataIntegration.vue
| |── FAQWithLeftText.vue
| |── Feature.vue
| |── Process.vue
| |── ServiceCardWithLeftText.vue
| |── TopIntegration.vue
| └── HomepageFive
| |── ClientV5.vue
| |── EasyStepFeature.vue
| |── HeroHosting.vue
| |── HostingFeature.vue
| └── icons
| └── hostingSvg
| |── HostingBgInnerShapeSvg.vue
| |── HostingBgSvg.vue
| |── HostingCercleSvg.vue
| |── StarBgSvg.vue
| |── StarSvg.vue
| └── Pricing
| |── PricingSvg1.vue
| └── SocialSvg
| └── FooterSvg
| |── behance.vue
| |── Facebook.vue
| |── Github.vue
| |── Linkedin.vue
| |── DribbleIcon.vue
| |── FaceBookColorIcon.vue
| |── FaceBookIcon.vue
| |── GithubIcon.vue
| |── GoogleColorIcon.vue
| |── LinkdineIconIcon.vue
| └── WhyUsSvg
| |── ArtificialSvg.vue
| |── OfflineSvg.vue
| |── ScalableSvg.vue
| |── AnalyticsHeroBgSvg.vue
| |── AnalyticsHeroMobileBgSvg.vue
| |── AtTheRedSvg.vue
| |── CtaBgSvg1.vue
| |── CtaBgSvg2.vue
| |── CtaBgSvg3.vue
| |── DotSvg.vue
| |── EmailSvg.vue
| |── FaqBgSvg1.vue
| |── FaqBgSvg2.vue
| |── HeroBgSvg1.vue
| |── HeroBgSvg2.vue
| |── HeroBgSvg3.vue
| |── HeroBgSvg4.vue
| |── HeroSvg.vue
| |── PhoneSvg.vue
| |── SearchIconSvg.vue
| |── TelePhoneSvg.vue
| |── VisionLine1.vue
| |── VisionLine2.vue
| |── VisionLine3.vue
| |── VisionLine4.vue
| └── Navbar
| |── PrimaryNavbar.vue
| |── SecondaryNavbar.vue
| |── SearchOption.vue
| |── TopNav.vue
| └── IntegrationPage
| |── CardIntegration.vue
| |── HeroIntegration.vue
| └── ServicesPage
| |── SingleService.vue
| └── Shared
| └── Testimonial
| |── RatingStar.vue
| |── SwiperSlider.vue
| |── Testimonial.vue
| |── TestimonialSlider.vue
| |── TestimonialV2.vue
| |── Blog.vue
| |── BlogItems.vue
| |── Clients.vue
| |── Counter.vue
| |── Cta.vue
| |── FaqItem.vue
| |── Marquee.vue
| |── MemberCounter.vue
| |── OurTeam.vue
| |── PageHero.vue
| |── Pagination.vue
| |── PaymentFeatures.vue
| |── Pricing.vue
| |── Services.vue
| |── SingleTeam.vue
| |── TeamContact.vue
| |── WhyChoicesFirstFeature.vue
| |── Accordion.vue
| |── Footer.vue
| |── LogInPage.vue
| |── NotFound.vue
| |── RequestDemoContact.vue
| |── SignUpPage.vue
| |── ThemeSwitcher.vue
├─ data
│ |── data.ts
│ |── FadeUpOneByOneAnimation.vue
├─ public
| |── Base Images
| └── Images
| |── All image files
├─ scss
| └── Style Related SASS Files
├─ utils
| └── CounterAnimation.vue
├─ .gitignore
├─ error.vue
├─ nuxt.config.ts
| └── All Animation nuxt.config.ts file
├─ package-lock.json
├─ package.json
├─ README.md
├─ tailwind.config.ts
├─ tsconfig.json