Copy URL
Embed Code
1
Download or Order Template
2
Read Documentation Project
3
Run Project on your website
themestemplate website themes website template blog themes blog template mulitpurpose themes mulitpurpose template astro template astrothemes featuredpremium jamstackthemes premiumthemes
New Astro Js Multipurpose Startup and Finance App Content Docs
A Themes project for astro js, multipurpose template for your startup , finance app and tech, business, blogs, and others.
When it comes to building a multipurpose project, the Financeapp Astro JS themes template stands out as an exceptional choice. Designed specifically with Astro JS, it ensures optimal SEO, speed, and performance for your website. This template is not just about functionality; it features a clean and elegant luxury design that enhances user experience while maintaining high aesthetic standards.
With its modular architecture, you can easily customize components to fit your specific needs, making it perfect for web developers looking to create tailored solutions. The lightweight nature of Astro JS means faster load times, which is crucial for retaining visitors and improving search engine rankings. Plus, the built-in best practices for SEO ensure that your site is not just visually appealing but also discoverable.
Incorporating the Financeapp template into your project means investing in a robust foundation that combines style and performance seamlessly. Whether you're developing a finance platform, a portfolio site, or any other web application, this template provides the versatility and sophistication you need to stand out in a competitive landscape.
Order Finance App Astro Js Themes - Order Now
Google Lighthouse Target Mobile Test Drive
Mobile Google Page Speed Test Drive
Desktop Google Page Speed Test Drive
How to install financeapp astro js multipurpose themes template
Option to change and update directly online via your GitHub repo. and get your site online.
git clone https://[email protected]/username/yourrepo.git
- change username
with your github username and change yourrepo
with your github repo project.Tips :
For image media storage, you can use public/img
then upload all your images there. Next you can simply use your image in front matter by entering a url like this /image/myimage.jpg
Now you need to update and config your website,for first you need to access on src/data open config.json files and change with your needed.
Learn Json Code by Example
"this_is_widget": "Input text or url and image CDN URL for Change and update area in here..."
Do not Change this_is_widget
You can update design and text on Input Text area
Other Example
"image": "You can insert URL CDN or Localimage in here.."
You can change title, description ,and others for your website.
JSON Files Example
{
"url": "insert your url domain in here",
"title": "Title for your website blog",
"description": "Description for your website and blog",
"favicon": "URL Image for favicon",
"image": "Image cover for twitter card and open graph url in here",
}
Implementation Complete Code
{
"url": "http://localhost:4321",
"title": "Finance App Themes",
"description": "Astro js finance app multipurpose themes template.",
"favicon": "/img/astrojs.svg",
"image": "/img/finance.webp",
"navbar": {
"title": "Finance App",
"image": "/img/coverfinanceapp.avif"
},
"nav_list": [
{
"nav": "Home",
"icon": "/img/icon/nav-home.svg",
"link": "/"
},
{
"nav": "About",
"icon": "/img/icon/nav-about.svg",
"link": "/about"
},
{
"nav": "Product",
"icon": "/img/icon/nav-product.svg",
"link": "/product"
},
{
"nav": "Blog",
"icon": "/img/icon/nav-blog.svg",
"link": "/blog"
},
{
"nav": "Order",
"icon": "/img/icon/nav-sto.svg",
"link": "https://creativitaz.gumroad.com/l/financestartup-astrojs"
},
{
"nav": "Contact",
"icon": "/img/icon/nav-contact.svg",
"link": "/contact"
}
],
"widget_blog": {
"title": "Our Lastest Posts",
"description": "Our blog post article update information",
"button": "Explore all Posts",
"link": "/blog"
},
"widget_product": {
"title": "Our Products",
"description": "Explore all our products list",
"button": "Explore all Products",
"link": "/product"
},
"nav_footer_title": "Finance App Financial Technologies.",
"social":
{
"facebook": "https://www.facebook.com",
"twitter": "https://www.twitter.com",
"youtube": "https://www.youtube.com",
"telegram": "Your Telegram url",
"linked": "linked url"
},
"nav_footer": [
{
"title": "Home",
"link": "/"
},
{
"title": "About",
"link": "/about"
},
{
"title": "Contact",
"link": "/contact"
}
],
"developer":
{
"name": "Creativitas",
"link": "https://www.fiverr.com/creativitas/"
},
"copyrights": "Finance App Financial Technologies."
}
Output Configuration JSON files
"navbar": {
"title": "Finance App",
"image": "/img/coverfinanceapp.avif"
},
"nav_list": [
{
"nav": "Home",
"icon": "/img/icon/nav-home.svg",
"link": "/"
},
{
"nav": "About",
"icon": "/img/icon/nav-about.svg",
"link": "/about"
},
{
"nav": "Product",
"icon": "/img/icon/nav-product.svg",
"link": "/product"
},
{
"nav": "Blog",
"icon": "/img/icon/nav-blog.svg",
"link": "/blog"
},
{
"nav": "Order",
"icon": "/img/icon/nav-sto.svg",
"link": "https://creativitaz.gumroad.com/l/financestartup-astrojs"
},
{
"nav": "Contact",
"icon": "/img/icon/nav-contact.svg",
"link": "/contact"
}
],
Navbar Ouput
For add new navbar you can copy and paste from example code, for example look like this..
{
"nav": "New nav",
"link": "icon image new nav in here"
"link": "Link url new nav in here"
},
complete implementation code
"nav_list": [
{
"nav": "Home",
"icon": "/img/icon/nav-home.svg",
"link": "/"
},
{
"nav": "About",
"icon": "/img/icon/nav-about.svg",
"link": "/about"
},
"nav_footer_title": "Finance App Financial Technologies.",
"social":
{
"facebook": "link your facebook",
"twitter": "link url your twitter",
"youtube": "link url youtube",
"telegram": "link url telegram",
"linked": "link your linked url"
},
"nav_footer": [
{
"title": "Home",
"link": "/"
},
{
"title": "About",
"link": "/about"
},
{
"title": "Contact",
"link": "/contact"
}
],
Footer Output
Widget Blog JSON files is for change title and description for widget blog section and blog page title description .
"widget_blog": {
"title": "Our Lastest Posts",
"description": "Our blog post article update information",
"button": "Explore all Posts",
"link": "/blog"
},
Widget Blog Output
Blog Page List Title and Description Output
Widget Product JSON files is for change title and description for widget product section and product page title description.
Json Code
"widget_product": {
"title": "Our Products",
"description": "Explore all our products list",
"button": "Explore all Products",
"link": "/product"
},
Output Product Widget
Output Product List Page
Now you can setup your home page by update src/data/home.json
Just change the Json input , and configure with you needed.
Json Code
{
"title": "Your Title",
"description": "Your Description",
"image": "URL image here",
"chart": [
{
"icon": "Icon image 1 here",
"title": "Title1 here",
"number": "Number 1 here"
},
{
"icon": "Icon image 2 here",
"title": "Title2 here",
"number": "Number 2 here"
},
{
"icon": "Icon image 3 here",
"title": "Title3 here",
"number": "Number 3 here"
},
{
"icon": "Icon image 4 here",
"title": "Title4 here",
"number": "Number 4 here"
}
],
"marquee": [
{
"text": "Text marquee 1 here.."
},
{
"text": "You can add new Text marquee here.."
},
{
"text": "You can add new Text marquee here.."
}
],
"intro":
{
"title": "Intro title here...",
"description": "Intro description here...",
"text": "Insert intro text here..",
"image": "insert url image intro here.."
},
"product":
{
"title": "Product title here..",
"description": "Product Description here...",
"text": "Text for product section...",
"button": "Button text product..",
"link": "/product"
},
"list": [
{
"title": "List 1 title",
"text": "List 1 text here...",
"image": "List 1 image url"
},
{
"title": "New list here..",
"text": "New List text here...",
"image": "New List image url"
},
{
"title": "Add New list here..",
"text": "Add New List text here...",
"image": "Add New List image url"
}
],
"section1":
{
"title": "Section 1 title here...",
"image": "Section 1 image URL here...",
"description": "Section 1 description here...",
"text": "Section 1 text here...",
"button": "Section 1 button text here...",
"link": "Section 1 button URL here..."
},
"section2":
{
"title": "Section 2 title here...",
"image": "Section 2 image URL here...",
"description": "Section 2 description here...",
"text": "Section 2 text here...",
"button": "Section 2 button text here...",
"link": "Section 2 button URL here..."
}
}
Implementation
{
"title": "The Renaissance of Banking",
"description": "Finance App was conceived to improve the stagnant economic system, by offering dynamic and sustainable financial solutions that holds people at its core.",
"image": "/img/coverfinanceapp.avif",
"chart": [
{
"icon": "/img/icon/banked.svg",
"title": "Banked",
"number": "1,200,000,000"
},
{
"icon": "/img/icon/unb.svg",
"title": "Unbanked",
"number": "1,700,000,000"
},
{
"icon": "/img/icon/mobile.svg",
"title": "Underbanked",
"number": "678,646,249"
},
{
"icon": "/img/icon/dns.svg",
"title": "Internet Users",
"number": "4,864,150,134"
}
],
"marquee": [
{
"text": "Inclusive financial technologies for collective progress"
},
{
"text": "Digital financing marketplace serving the People in realtime"
},
{
"text": "Building a responsive economic system according to the World's needs"
}
],
"intro":
{
"title": "INSPIRED BY PEOPLE",
"description": "Powered by Technology",
"text": "Finance App Economic System is built with multiple emerging technologies, bringing together our passion for People, with the goal to raise the global Social Economic standard.",
"image": "/img/intro_image.webp"
},
"product":
{
"title": "State of the Art Technologies",
"description": "FINANCEAPP FINANCIAL EVOLUTION",
"text": "Finance App is assembling the most advanced emerging technologies to create a financial services umbrella with user-friendly products that facilitate the delivery of quality financial services to everyone.",
"button": "Explore All Products",
"link": "/product"
},
"list": [
{
"title": "REGULATED",
"text": "Fully compliant",
"image": "/img/icon/safe.svg"
},
{
"title": "ACCESSIBLE",
"text": "Easy to use interface",
"image": "/img/icon/covered.svg"
},
{
"title": "GLOBAL",
"text": "Experience driven by passion",
"image": "/img/icon/hpf.svg"
},
{
"title": "SECURE",
"text": "Quantum-proof security",
"image": "/img/icon/cloud.svg"
},
{
"title": "COMMUNITY ORIENTED",
"text": "Where You come first",
"image": "/img/icon/surveillance.svg"
},
{
"title": "HIGH PERFORMANCE",
"image": "/img/icon/touch.svg",
"text": "8,000,000 TPS"
}
],
"section1":
{
"title": "Digital Securities Issuance Network",
"image": "/img/stoglobal.webp",
"description": "NEW GLOBAL ECOSYSTEM OF GLOBAL WEALTH",
"text": "Finance App Trading Ledger will instantly connect with the Second Market. A network of technology companies ahead of the game. We are sure the secondary market will become the first marketplace in the next few years, because the quality of the assets tends to be superior, as assets are easy to audit, trace performance, and own.",
"button": "Digital Securities Info",
"link": "/about"
},
"section2":
{
"title": "Unifying Global RegTech Sandboxes",
"image": "/img/stoeco.webp",
"description": "GLOBAL 360° BEST PRACTICE IN ONE PLACE",
"text": "Multi-Jurisdiction + Multi-Technology + Multi-Lingual interoperability, according to the most experienced organization and regulations. A global compliant framework from FinTech and RegTech Sandboxes from Europe, Oceania, Asia, America, and Africa.",
"button": "Unifying Global Info",
"link": "/contact"
}
}
Section widget for header area
Json Code
"title": "The Renaissance of Banking",
"description": "Finance App was conceived to improve the stagnant economic system, by offering dynamic and sustainable financial solutions that holds people at its core.",
"image": "/img/coverfinanceapp.avif",
"chart": [
{
"icon": "/img/icon/banked.svg",
"title": "Banked",
"number": "1,200,000,000"
},
{
"icon": "/img/icon/unb.svg",
"title": "Unbanked",
"number": "1,700,000,000"
},
{
"icon": "/img/icon/mobile.svg",
"title": "Underbanked",
"number": "678,646,249"
},
{
"icon": "/img/icon/dns.svg",
"title": "Internet Users",
"number": "4,864,150,134"
}
],
"marquee": [
{
"text": "Inclusive financial technologies for collective progress"
},
{
"text": "Digital financing marketplace serving the People in realtime"
},
{
"text": "Building a responsive economic system according to the World's needs"
}
],
Section for update intro area
Json Code
"intro":
{
"title": "INSPIRED BY PEOPLE",
"description": "Powered by Technology",
"text": "Finance App Economic System is built with multiple emerging technologies, bringing together our passion for People, with the goal to raise the global Social Economic standard.",
"image": "/img/intro_image.webp"
},
Section for update product area
Json Code
"product":
{
"title": "State of the Art Technologies",
"description": "FINANCEAPP FINANCIAL EVOLUTION",
"text": "Finance App is assembling the most advanced emerging technologies to create a financial services umbrella with user-friendly products that facilitate the delivery of quality financial services to everyone.",
"button": "Explore All Products",
"link": "/product"
},
Section for update list area
Json Code
"list": [
{
"title": "REGULATED",
"text": "Fully compliant",
"image": "/img/icon/safe.svg"
},
{
"title": "ACCESSIBLE",
"text": "Easy to use interface",
"image": "/img/icon/covered.svg"
},
{
"title": "GLOBAL",
"text": "Experience driven by passion",
"image": "/img/icon/hpf.svg"
},
{
"title": "SECURE",
"text": "Quantum-proof security",
"image": "/img/icon/cloud.svg"
},
{
"title": "COMMUNITY ORIENTED",
"text": "Where You come first",
"image": "/img/icon/surveillance.svg"
},
{
"title": "HIGH PERFORMANCE",
"image": "/img/icon/touch.svg",
"text": "8,000,000 TPS"
}
],
Section for update footer area
Json Code
"section1":
{
"title": "Digital Securities Issuance Network",
"image": "/img/stoglobal.webp",
"description": "NEW GLOBAL ECOSYSTEM OF GLOBAL WEALTH",
"text": "Finance App Trading Ledger will instantly connect with the Second Market. A network of technology companies ahead of the game. We are sure the secondary market will become the first marketplace in the next few years, because the quality of the assets tends to be superior, as assets are easy to audit, trace performance, and own.",
"button": "Digital Securities Info",
"link": "/about"
},
"section2":
{
"title": "Unifying Global RegTech Sandboxes",
"image": "/img/stoeco.webp",
"description": "GLOBAL 360° BEST PRACTICE IN ONE PLACE",
"text": "Multi-Jurisdiction + Multi-Technology + Multi-Lingual interoperability, according to the most experienced organization and regulations. A global compliant framework from FinTech and RegTech Sandboxes from Europe, Oceania, Asia, America, and Africa.",
"button": "Unifying Global Info",
"link": "/contact"
}
Just change the Json input , and configure with you needed.
You can update your about page, access on src/pages/about/index.md
Open with code editor , and update with you needed.
Output
Markdown Fontformatter
---
layout: ../../design/page/About.astro
title: "Title about page.."
description: "About page description here..."
image: "image url for about page"
pubDate: "insert publih date here"
---
Now you can write article with markdown format here...
Implementation
---
layout: ../../design/page/About.astro
title: "About Finance App Themes"
description: "Modern Astro JS Website themes template - finance app tech."
image: "/img/coverfinanceapp.avif"
pubDate: "2024-02-04"
---
The newest theme Astro JS, with the best and complete features,to build startups and financial applications, as well as your company profile using this multi-purpose finance app theme.
It's easy, use JSON data to set up - configure your site, and markdown files to write your articles and pages, including Auto SEO injections like meta tags, twitter cards, open graphs and more.
To make it easier to use this theme, we have prepared complete documentation that can help you build a modern website using Astro JS.
[Get Finance App themes now →](https://creativitaz.gumroad.com/l/financestartup-astrojs)
You can update your product page, access on src/pages/product
Open example markdown file with code editor , and update with you needed.
For create new product, you can copy from example product page, then rename the file with your product url , and then update article .
Output
Fontformatter
---
layout: ../../design/product/productpost.astro
title: "Title your services"
description: "Description for your services"
image: "URL image cover for services article.."
---
Now you can write article with markdown in here...
Implementation
---
layout: ../../design/product/productpost.astro
title: "Hybrid Finance"
description: "With banking penetration slipping, due to restricted branch opening hours, which nowadays, also keeps banks offering negative interest rates"
image: "/img/product/hybridfinance.webp"
---
### Hybrid Finance
With banking penetration slipping, due to restricted branch opening hours, which nowadays, also keeps banks offering negative interest rates, a new form of Community-based programmable wealth management is being built while you read this. Finance App also aims to be a center of active money market builders to distribute gains within the community, with both tangible real work assets and finance coding.
After you create a product page, your product articles will then be displayed on the product page list.
Output
Change Pagination Display
By default the product post list pagination will display 6 post articles, if you want to change the display of your articles then you can change it in src/pages/product/[...page].astro
On this code
return paginate(formattedPosts, {
pageSize: 6, // replace number 6 according to your needs
})
Change pageSize: 6
replace number 6 according to your needs .
Because we are using a pagination scheme, make sure the number of product posts article you have is more than the number of display posts in the pagination.
You can update your blog page, access on src/pages/blog
Open example markdown file with code editor , and update with you needed.
For create new product, you can copy from example product page, then rename the file with your blog url , and then update article .
Output
Fontformatter
---
layout: ../../design/blog/blogpost.astro
title: "Title for your blog article"
description: "Description article blog"
image: Image url in here...
pubDate: Input publish date
tags: ["your tag in here..", "tag1", "tag2"]
categories: ["categories in here.."]
---
Write your article content in here....
Implementation
---
layout: ../../design/blog/blogpost.astro
title: "Contactless Payment Getaways"
description: "In a world where pandemics could be a new standard, contact needs to be avoided more than ever"
image: "/img/blog/paymentgateway.webp"
pubDate: 2024-02-06
tags: ["getaways", "pos", "nfc", "bio", "identity"]
categories: ["payment"]
---
### Contactless Payment Getaways
In a world where pandemics could be a new standard, contact needs to be avoided more than ever. Moreover, there is enough plastic being used on the planet. Finance App is totally in favour of reducing the issuance of plastic cards, so our point of sale (PoS) systems will only need NFC, Wi-Fi, BT, or bio-identity to make the economy move forward.
After you have create blog article gallery pages, next your blog article will displaying on blog page list.
Output
Change Pagination Display
By default the blog post list pagination will display 6 post articles, if you want to change the display of your articles then you can change it in src/pages/blog/[...page].astro
On this code
return paginate(formattedPosts, {
pageSize: 6, // replace number 6 according to your needs
})
Change pageSize: 6
replace number 6 according to your needs .
Because we are using a pagination scheme, make sure the number of posts blog article you have is more than the number of display posts in the pagination.
You can update your contact page, access on src/pages/contact/index.md
Open with code editor , and update with you needed.
Output
Markdown Fontformatter
---
layout: ../../design/contact.astro
title: "Title for Contact page"
description: "Description about your Contact "
image: "URL image cover for contact page"
forms_id: "Your form id endpoint code"
pubDate: "input publish date"
---
Write your contact article in here....
Implementation
---
layout: ../../design/page/Contact.astro
title: "Contact Us"
description: "Contact Conceptual Art Photography"
image: "/img/coverfinanceapp.avif"
forms_id: https://formid/x/xxxxxxxx
pubDate: "2023-12-04"
---
If you need consultation and have a website project, then discuss with us to get the best solution for your website project.
With our team developers, you can choose your favorite web technology to build your project.
Static Site Generator - Astro Js, Eleventy 11ty , Jekyll , Gatsby Js, Next Js
Single Page App Web Concept - Angular, Svelte kit, Blazor WASM , React Js
Flatfile CMS no database run on PHP hosting - Bludit and Pico CMS
Python web tech - Full stack django with django admin or Static Flask
For get form id and how to setup contact form, you can read on our gumroad projects - Contact Page Section - Form Id
Before push your project, you need to add your domain.
For first you can open astro.config.mjs
and change site url with your domain name .
Json Code
export default defineConfig({
site: 'https://locahost:4321',
integrations: [preact(),sitemap()]
});
And open src/data/config.json
change url with your domain name.
Json Code
"url": "http://localhost:4321",
Change URL http://localhost:4321
with your domain name
Register and create an account on github
Next you can create new repo , check image
Name it your repo , then select your project for public or private, Then you can click create repo button.
Next, You need to following github command.
For first access your project using terminal , then copy and paste command script from github.
Example
git init
git add .
git commit -m "first commit for my astro website"
git remote add origin https://github.com/username/your-repo-name
git push -u origin master
Change username with your github username ,and change your-repo-name with your github repo
And you have successfully push your project on github repo.
Output
Next step, you need to register on modern static host provider for deploy your project and make your website live.
For deploy and make your website live, so you need to register on modern static host provider, for example, cloudflare , netlify or vercel.
If you have trouble you can contact our team dev - [email protected]
By default Astro js is great for performance and speed, and with the Astro Js project you can generate sitemap.xml automatically,.
Make sure you have your site's domain name set up at astro.config.mjs
Next you can register on google console - Regiser Now
Add new property and input your domain website - Next you can open on settings - and download Google HTML code.
Upload your Google HTML files in to public folder.
And click vertification on google search console.
Next you can add google dns too.. just copy and paste txt or cname record in to your domain panel - then vertification google dns.
Now we need to submit sitemap - Click on sitemap and add your sitemap with input sitemap.xml and rss.xml then click sent button.
Now we need to create robots.txt files, open on src/public folder, create new txt files name it with robots.txt
And copy this code in to your src/public/robost.txt
User-agent: *
Allow: /
Sitemap: https://<YOUR SITE>/sitemap-index.xml
Lastly you can Rebuild your site - or push prepared updates to your github repo.
If you want to work with CMS , so you can use headless git cms for best solutions.
Same like other cms, with headless cms we can update website and blog quickly.
Include with credential security for login on backend admin, make your website secure.
We can use netlify decap cms.
Credential login with google or github account
Dashboard area
Blog article post
Write your article or update page
You can build your backend headless cms with decap cms.
Or you can use headless cms for your dev local mode with Tina CMS
If you interest work with headless cms, so you can use our services for develope your backend headless cms admin for your project.
Thank You by using Astro Js Multipurpose Finance App Project.
And thanks alot for use financeapp astro js template, we hope this project can help you build modern web blog with SEO.
If you need help, you can contact our team developer .
If you have custom website project, you can hire our team - Hire Developer Now
Select your favorite technology and website blog themes template