Finovo - HTML5 Finance & Fintech Template

1. Welcome & Finovo Overview

Thank you for purchasing Finovo! Finovo is a modern, responsive HTML5 finance and fintech landing page template designed specifically for financial SaaS products, digital banking concepts, cross-border payment platforms, wealth management, corporate cards, and investment funds.

2. Getting Started

Finovo is built as a pure static HTML5/CSS/JavaScript template. You do not need Node.js, npm, or any build tools to immediately view, customize, and deploy the template.

3. Folder Structure

When you unzip your purchase, you will find the Main Files/ folder. Inside, the project is structured cleanly and logically:

4. Opening the Template

You can open the template in any modern web browser using three easy methods:

1. Direct File Open: Double-click index.html in your file explorer to open it in Chrome, Firefox, Safari, or Edge.
2. VS Code Live Server (Recommended): Open the Main Files/ folder in VS Code, right-click index.html, and select "Open with Live Server".
3. Local Server (Python / Node / PHP):

   # Python 3
   python -m http.server 3000
   
   # Node.js npx serve
   npx serve .

5. HTML Pages Included (21 Pages)

Finovo includes 21 structured HTML pages covering standard landing, product, company, support, and authentication layouts:

6. Changing Logo & Brand Name

The brand logo is located inside the header of every HTML page. You can customize the logo text or replace it with an image logo:

<!-- Text & Icon Logo (Default) -->
<a href="index.html" class="flex items-center gap-3 font-extrabold text-xl sm:text-2xl tracking-tight text-[#18352d]">
  <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-[#18352d] text-white flex items-center justify-center shadow-md">
    <i class="fa-solid fa-chart-simple text-emerald-400"></i>
  </div>
  <span class="font-extrabold">Finovo</span>
</a>

<!-- Image Logo Replacement (Alternative) -->
<a href="index.html" class="block h-9 sm:h-10">
  <img src="assets/images/logo.png" alt="Your Brand" class="h-full w-auto object-contain">
</a>

7. Changing Text Content

All HTML files use clean, semantic tags and descriptive comments. Open any file in your text editor (VS Code, Sublime, etc.) and edit the content directly inside standard heading (<h1>, <h2>) and paragraph (<p>) tags.

8. Replacing Placeholder Images

The buyer package in Main Files/ uses placeholder assets (such as assets/images/placeholder.jpg and assets/images/placeholder.svg) for demo and preview imagery that is not bundled with the buyer package. Buyers should replace these placeholder assets with their own properly licensed brand photography and graphics.

9. Recommended Image Sizes Table

For optimal visual clarity and fast loading speeds across high-DPI retina displays, we recommend the following dimensions:

10. Changing Colors

Finovo's signature dark luxury palette is defined in Tailwind utility classes. Here is the primary color map:

11. Changing Fonts

Finovo loads two Google Fonts in the <head> of each HTML page:

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

To use a different Google Font (e.g. Inter or Poppins):

1. Update the Google Fonts link in the <head>.
2. In assets/css/style.css, update the default font definitions:

   * {
     font-family: 'Inter', sans-serif;
   }
   .font-editorial {
     font-family: 'Playfair Display', serif;
   }

12. Tailwind CSS Setup

Finovo is built using Tailwind CSS v3. All utility classes used across the template are pre-compiled into the production stylesheet assets/css/tailwind.css. You do not need to install Tailwind to use or modify the template.

13. Using the Existing Compiled CSS

The compiled stylesheet is located at assets/css/tailwind.css. Every HTML page links directly to it alongside the custom stylesheet:

<!-- In root pages (index.html, 404.html) -->
<link rel="stylesheet" href="assets/css/tailwind.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- In subpages (pages/*.html) -->
<link rel="stylesheet" href="../assets/css/tailwind.css">
<link rel="stylesheet" href="../assets/css/style.css">

14. Optional Tailwind Recompilation

The included assets/css/tailwind.css is already pre-compiled with all classes required across the template. You do not need to recompile Tailwind to use or modify Finovo.

If you optionally wish to recompile Tailwind to generate new arbitrary utility classes using tailwind.config.js, follow these steps:

1. Initialize npm and install Tailwind CSS v3:

   npm init -y
   npm install -D tailwindcss@3.4.17

2. Create a dedicated Tailwind input CSS file (for example, src/input.css) containing the standard Tailwind directives:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. Compile your custom Tailwind CSS into a target stylesheet using the Tailwind CLI:

   npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --minify --watch

15. Custom CSS (assets/css/style.css)

assets/css/style.css is a readable, unminified custom stylesheet that contains:

• Typography Definitions: Default font assignment (Plus Jakarta Sans) and editorial serif class (.font-editorial with Instrument Serif).
• Keyframe Animations: @keyframes softFadeUp (hero entrance), @keyframes drawChartStroke, @keyframes chartAreaRise, @keyframes chartDotPop, and @keyframes dotPulseLive (live sparkline drawing).
• Smooth FAQ Grid Accordion: CSS grid row expansion (.faq-answer-wrapper with grid-template-rows: 0fr -> 1fr) and 45-degree icon rotation (.faq-icon-rotate).
• Feature Card Scroll Reveal: Viewport reveal helper classes (.reveal-card and .reveal-card.is-revealed).
• Scrollbar Styling: Subtle custom scrollbar rules for webkit browsers.
• Accessibility Preference: @media (prefers-reduced-motion: reduce) rule that disables non-essential animations for users with motion sensitivity.

16. JavaScript (assets/js/main.js)

All interactive behaviors are powered by a single, modular vanilla JavaScript file: assets/js/main.js with zero jQuery dependencies. Key modules include:

• initTopBanner(): Dismisses the top announcement bar with a smooth slide-up animation.
• initMobileMenu(): Toggles the mobile drawer menu via #mobile-menu-btn and switches the hamburger icon.
• initHeaderScroll(): Adds a subtle box shadow to #main-header upon page scroll.
• initFaqAccordion(): Coordinates smooth single-open FAQ accordion expansion.
• initCountUp(): Animates statistics numbers via IntersectionObserver.
• initChartAnimation(): Triggers sparkline path drawing when scrolled into view.
• initRevealCards(): Gently reveals cards as they enter the viewport.
• initPaymentsCalculator(): Runs the interactive demo currency converter on payments.html.
• initPricingToggle(): Switches pricing amounts between Monthly and Annual billing on pricing.html.
• initFaqSearch(): Live filters FAQ questions by keyword input on faq.html.
• initBlogFilter(): Filters articles by category pill button on insights.html.
• initJobApplicationModal(): Handles open/close modal triggers on careers.html.

17. Navigation & Mobile Menu

The desktop header features a sticky navigation bar with backdrop blur. Navigation active states (such as bold font or primary green color) are cleanly declared per page in the HTML markup.

On mobile devices (< 1024px), navigation is toggled using the #mobile-menu-btn button, which reveals the slide-down container (#mobile-menu) and toggles the hamburger icon (#hamburger-icon) to a close mark (fa-xmark).

18. Animated Counters & Chart Reveals

Stat numbers (e.g. $14B+, 23k+) animate smoothly when scrolled into view using the .stat-counter class and data attributes:

<span class="stat-counter" data-target="14" data-prefix="$" data-suffix="B+">$14B+</span>
<span class="stat-counter" data-target="25000" data-prefix="$" data-format="comma">$25,000</span>

19. FAQ Accordion & Instant Search

The FAQ module in pages/faq.html features smooth CSS Grid-powered expanding/collapsing accordion items and live keyword filtering that dynamically shows matching questions as the user types in #faq-search-input.

20. Demo FX Currency Calculator

Located on pages/payments.html, the interactive demo calculator demonstrates currency conversion from USD to EUR. It reads the input amount from #calc-send-amount and calculates the estimated receive amount in #calc-receive-amount using a sample mid-market demo rate (fxRate = 0.924 in main.js).

21. Pricing Interval Switcher

On pages/pricing.html, the billing switcher toggles between Monthly (#btn-monthly) and Annual (#btn-annual) pricing, reading data-monthly and data-annual attributes on .plan-price elements with a subtle number transition.

22. Blog & Insights Category Filters

On pages/insights.html, filter pill buttons (with data-filter values such as all, treasury, cards, clearance) filter article cards smoothly based on their data-category attribute.

23. Help Center Search & Dynamic Pages

The 3-tier Help Center (pages/help.html, pages/help-category.html, pages/help-article.html) features live topic search and feedback trigger buttons on article guides.

24. Contact, Login & Signup Forms

All forms in Finovo are fully styled frontend demo forms with client-side field validation, clean loading states, and password visibility toggles. To connect them to your backend service, set the action and method attributes or integrate with Formspree, EmailJS, or your custom API.

25. Google Maps & Office Switcher

On pages/contact.html, the interactive office tab switcher lets users toggle between the three implemented global office hubs:

• Toronto HQ (Canada - #map-tab-toronto)
• London Hub (United Kingdom - #map-tab-london)
• Singapore Hub (Singapore - #map-tab-singapore)

Clicking a tab updates the active button state and updates the embedded Google Maps iframe (#google-maps-iframe) coordinates.

26. Favicons

Multi-resolution favicons are stored in assets/images/favicon/. To replace them with your brand icon, generate 16x16, 32x32, 96x96, 180x180 PNGs and favicon.ico and replace the corresponding files in that folder.

27. Responsive Design & Breakpoints

Finovo is built mobile-first and structured around Tailwind CSS standard responsive breakpoints:

• Mobile: < 640px (Stacked columns, touch-friendly navigation drawer)
• Tablet: 640px - 1024px (2-column grids, optimized padding)
• Desktop: 1024px - 1280px (3-column Bento layouts)
• Wide Desktop: > 1280px (Full container widths up to 1280px)

28. Deployment & Hosting

Because Finovo is a static HTML5 template, you can host it on any web server or CDN platform:

• Traditional Web Hosts: cPanel, Apache, NGINX (upload files from Main Files/ to your public_html/ directory).
• Cloud Platforms: Vercel, Netlify, Cloudflare Pages, GitHub Pages, AWS S3.

29. Asset Credits & Third-Party Libraries

• CSS Framework: Tailwind CSS (tailwindcss.com)
• Icons: Font Awesome 6 Free (fontawesome.com)
• Google Fonts: Plus Jakarta Sans & Instrument Serif (fonts.google.com)
• Maps & Location: Google Maps Embed (maps.google.com)

30. Support & Assistance

We are committed to providing helpful customer support for Finovo. Please review what is covered under standard ThemeForest item support below:

To request assistance or report a confirmed template bug, please contact us via our ThemeForest profile support tab or email. When reporting an issue, please provide:

1. The exact HTML page or file name where the issue appears.
2. A clear, detailed description of the unexpected behavior.
3. Your browser name, version, and operating system / device.
4. Screenshots or browser console error logs showing the issue.