VeloxPay — Documentation

Multi-page fintech & digital banking landing template · Version 1.0.0

This guide covers setup, folder structure, how to edit text/colors/Tailwind config, and how to deploy to Vercel, Netlify, or cPanel.

Theme overview

VeloxPay is a production-ready static theme with light/dark modes, responsive layouts, and interactive UI — all powered by Tailwind CSS (CDN) and vanilla JavaScript. No build step is required for the default setup.

• Primary brand color: #1b63f0 (Brand 600)
• Secondary accent: #06b6d4 (Accent 500)
• Typography: Inter + Space Grotesk (Google Fonts)
• Theme storage key: veloxpay-theme

Requirements

• A modern browser (Chrome, Firefox, Edge, Safari)
• Internet access for Tailwind CDN + Google Fonts + Unsplash placeholders
• Optional: any static file server (VS Code Live Server, npx serve, nginx, etc.)

Folder structure overview

Keep this layout when editing or deploying — asset paths are relative to each HTML file.

VeloxPay/
├── index.html                 # Landing / home
├── about.html                 # Company & team
├── services.html              # Services detail (tabbed)
├── contact.html               # Contact form UI
├── assets/
│   ├── css/
│   │   └── style.css          # Custom overrides & design tokens
│   ├── js/
│   │   └── main.js            # Tailwind config + all interactions
│   └── images/                # Optional local images (placeholders used remotely)
└── documentation/
    └── index.html             # This setup guide

Quick start

1. Unzip the theme folder.
2. Open index.html in your browser, or start a local server from the theme root:

   # Node
   npx serve .
   
   # Python
   python -m http.server 8080

3. Visit http://localhost:3000 (or the port your server prints).

The theme uses the Tailwind Play CDN, so styles compile in the browser. For production builds, you may switch to the Tailwind CLI or a bundler later.

How to edit text

Content is plain HTML — open any page and change copy directly.

1. Open the page file (e.g. index.html, contact.html).
2. Find the section by HTML comment or heading (e.g. <!-- Hero -->, <h1>).
3. Replace the text between tags. Keep meaningful tags: headings, paragraphs, lists, labels.
4. Save and refresh the browser.

<!-- Hero headline -->
<h1 class="...">
  Your new headline here
</h1>

• Form labels: edit <label for="..."> text next to each field.
• Footer year: leave <span id="year"></span> empty — main.js fills it automatically.
• Testimonials / team: update names, roles, and quotes in place.

How to edit colors

Colors live in two places — keep them in sync.

1. Tailwind palette (utility classes)

File: assets/js/main.js → tailwind.config.theme.extend.colors

colors: {
  brand:  { 600: '#1b63f0', /* ... */ },   // primary blue
  accent: { 500: '#06b6d4', /* ... */ },   // cyan accent
  ink:    { 900: '#0f172a', /* ... */ }    // neutral text
}

After editing, hard-refresh the browser (Tailwind CDN recompiles on load).

2. CSS variables (custom components)

File: assets/css/style.css → :root

:root {
  --vp-brand-600: #1b63f0;
  --vp-accent-500: #06b6d4;
  --vp-ink-900: #0f172a;
  /* ... */
}

Buttons, FAQ, forms, and gradients use these variables — update both files for a full rebrand.

Brand name & logo

1. Search-replace Velox / Pay across all HTML files.
2. Update the <title> and meta descriptions.
3. Change the logo mark letter (the V span) if needed.
4. Add a favicon link in each page <head> if you have one.

Fonts

Replace the Google Fonts <link> in each page head, then update fontFamily in main.js and .font-display in style.css.

How to edit Tailwind configuration

The Tailwind Play CDN config lives in assets/js/main.js (loaded with defer). Edit tailwind.config to change colors, fonts, and shadows.

tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand:  { 50: '#eef7ff', /* ... */ 950: '#142456' },
        accent: { 50: '#ecfeff', /* ... */ 950: '#083344' },
        ink:    { 50: '#f8fafc', /* ... */ 950: '#020617' }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['"Space Grotesk"', 'Inter', 'sans-serif']
      },
      boxShadow: {
        glow: '0 0 40px rgba(51, 132, 251, 0.35)',
        card: '0 8px 30px rgba(2, 6, 23, 0.06)'
      }
    }
  }
};

• darkMode: 'class' — required for the light/dark toggle on <html>.
• Utility classes like bg-brand-600 or text-accent-400 read from this config.
• Do not use @apply in external CSS with the Play CDN — use plain CSS / variables in style.css.

Dark mode: the toggle button #themeToggle adds/removes dark on <html> and persists to localStorage under veloxpay-theme.

Pages

• index.html — Hero, marquee, features, how-it-works, pricing, testimonials, CTA form, FAQ, footer
• about.html — Story, values, team grid, office locations, CTA
• services.html — Accessible service tabs (keyboard arrows), capability grid, comparison strip
• contact.html — Full contact form UI, info cards, response times, mini-FAQ
• documentation/index.html — This buyer guide

Components

• .btn-primary, .btn-secondary, .btn-dark, .btn-accent, .btn-ghost
• .card-hover — lift on hover
• .nav-link — underline hover / active state
• .faq-item + .faq-trigger + .faq-panel
• .form-field, .form-label, .form-error, .form-success-banner
• .marquee-track — infinite logo strip
• .service-tab / .service-panel — tabbed services
• .form-spinner — submit loading state

Forms & JavaScript

Forms on the home and contact pages are validated client-side and simulated async (no backend). On submit they show a loading spinner, then a success alert banner and toast via window.VeloxPayToast.

To wire a real API:

1. Open assets/js/main.js.
2. Replace the setTimeout inside handleForm with a fetch() call to your endpoint.
3. Handle success/error responses and update the banner/error message.

Images

Visuals use high-quality Unsplash CDN placeholders with explicit width and height attributes to reduce layout shift. For production, download or replace them and point src to files under assets/images/.

<img
  src="assets/images/team-lead.jpg"
  width="600" height="750"
  alt="Portrait of team lead"
  loading="lazy"
/>

Deployment guide · Vercel

Vercel is ideal for static sites with automatic HTTPS and preview URLs.

Option A — Git integration (recommended)

1. Push the VeloxPay folder to a GitHub / GitLab / Bitbucket repo (repo root = theme root).
2. Go to vercel.com/new and import the repo.
3. Set Framework Preset to Other (or leave blank).
4. Leave Build Command empty and Output Directory as . (root).
5. Click Deploy. Your site gets a *.vercel.app URL.

Option B — Drag & drop

1. Open vercel.com/new.
2. Drag the entire VeloxPay folder onto the upload area.
3. Confirm project name and deploy.

# Optional: Vercel CLI
npm i -g vercel
cd VeloxPay
vercel
vercel --prod

Custom domain: Project → Settings → Domains → add your domain and follow DNS instructions.

Deployment guide · Netlify

Netlify supports drag-and-drop deploys and Git-based continuous deployment.

Option A — Drag & drop

1. Open app.netlify.com/drop.
2. Drag the VeloxPay folder onto the page.
3. Netlify assigns a *.netlify.app URL immediately.

Option B — Git integration

1. Push the theme to GitHub.
2. In Netlify: Add new site → Import an existing project.
3. Select the repo; set Build command to empty and Publish directory to ..
4. Deploy.

Option C — Netlify CLI

npm i -g netlify-cli
cd VeloxPay
netlify deploy --prod --dir .

Optional: add a netlify.toml at the theme root if you later switch to a Tailwind build.

# netlify.toml (optional — only if you add a build step later)
[build]
  publish = "."
  # command = "npm run build"

Deployment guide · cPanel

Use cPanel File Manager or FTP/SFTP to upload a static theme to shared hosting.

1. Zip the VeloxPay folder (or upload files individually).
2. Log in to cPanel → File Manager → open public_html (or a subfolder like public_html/veloxpay).
3. Upload the zip → right-click → Extract.
4. Confirm structure:

   public_html/
   ├── index.html
   ├── about.html
   ├── services.html
   ├── contact.html
   ├── assets/
   │   ├── css/style.css
   │   └── js/main.js
   └── documentation/index.html

5. Visit your domain (e.g. https://example.com/ or https://example.com/veloxpay/).

FTP / SFTP (optional)

• Use FileZilla, WinSCP, or cPanel’s FTP Accounts.
• Host: your domain · Protocol: SFTP (port 22) when available.
• Remote path: /public_html or your site subdirectory.
• Upload all files and folders, preserving the structure above.

Browser support

• Latest 2 versions of Chrome, Edge, Firefox, Safari
• Mobile: iOS Safari 14+, Chrome for Android
• Uses IntersectionObserver, localStorage, and CSS backdrop-filter

Credits

• Tailwind CSS
• Google Fonts — Inter & Space Grotesk
• Unsplash image placeholders
• Open-source icons via inline SVG (Heroicons-style paths)

Privacy Policy

This template does not collect or transmit personal data by default. Form submissions are simulated in the browser. When you connect the form to a backend, update this section to describe your data practices (storage, retention, processors, and user rights).

Terms of Service

Purchases of this template include a license to use it for personal and commercial projects, with attribution where required by the marketplace. Reselling the source as a competing template or theme store item is not permitted. Replace this copy with your own marketplace EULA when required.

Security

Keep the theme updated when you receive fixes. Do not commit API secrets into client-side JavaScript. If you add third-party scripts, review their integrity hashes and CSP. Report suspected template vulnerabilities to the purchase channel.

Support

For marketplace support, open a ticket with your license code and a clear description of the issue (browser, page URL, steps to reproduce). Typical turnaround is 1–2 business days.