Lending Bazaar

• The website

  • Explain the whole network on one page: who is on each side and how money moves between them.
  • Show six kinds of product (home, personal and business loans, insurance, mutual funds, credit cards) in one place.
  • Prove trust with the partner logos, and give an agent one clear next step: Become an Agent.
  • Show the tools an agent would use once they join.

• The business

  • Two kinds of visitor ask different questions. An agent asks how they earn. A bank asks why it should trust the network.
  • After joining, three roles need their own screens: the agent, the employee who manages agents, and the admin.
  • Agents work from a phone in the field, so their screens must feel like an app. The admin works at a desk.
  • One site has to win both sides: the partners and the agents.

• The build

  • No framework, no build step and no package manager. I edit a file and refresh the browser.
  • Three apps and one website share a single stylesheet, so a change in one place must not break the others.
  • The site is deployed by uploading files over FTP, so the stylesheet needs a version number to get past browser caches.
  • The stack has to stay simple enough that anyone on the team can edit it.

• What I wanted to improve

  • One home page that explains the network in a single scroll and leads to Become an Agent.
  • Every screen a person would use after joining, in the right shape: phone width for agents and employees, desktop for admin.
  • One look (colors, type and buttons) across the website and all three apps.
  • Add a partner by dropping one logo file in a folder, with no code change.

What changed

How a visitor moves through it

Colors

• Royal blue

  #4361EE

  The main brand color: links, icons, the active menu item and the start of the button gradient

• Sky blue

  #25BEF3

  The second brand blue, used in the logo and in the end of the blue gradient

• Violet

  #7C3AED

  The end of the main button gradient

• Brand gradient

  Earnings cards, chart bars and the contact page hero

• Ink

  #0F172A

  Headings and dark text

• Muted gray

  #6B7280

  Secondary text and captions

• Soft white

  #F5F7FB

  The alternate section background

• Navy

  #0E1B5E

  The admin sidebar and the employee app accent

• Success

  #10B981

  Approved leads and positive numbers

• Warning

  #F59E0B

  Pending leads and star ratings

• Danger

  #EF4444

  Rejected leads and alerts

Design principles

• No decoration for its own sake

  The project's rules ban small label chips above headings, floating blobs and gradient overlays on sections. A section starts straight with its heading, and its background is plain white or soft white.

• One button system

  Every button on every page uses one base style: a pill with 15 pixel semi-bold text. The main button is a blue to violet gradient, the second choice is outlined, and a white version sits on dark or colored backgrounds. No section gets its own button.

• Numbers in one kind of strip

  Any row of statistics uses the same strip: an icon tile, a large number and a small label, separated by thin lines. The numbers count up the first time they are seen.

• Status has a color

  A lead is Processing (violet), Approved (green), Pending (amber) or Rejected (red), in the same small badge on the agent, employee and admin screens. Learn it once and it holds everywhere.

• Apps that look like apps

  The agent and employee screens sit in a 430 pixel column with a fixed top bar, a fixed bottom bar, large touch targets and a round Add button. On a laptop the column is centered in the window.

• A desk layout for the admin

  The admin panel uses the full width: a 240 pixel dark sidebar, summary cards on top, then charts and tables with search and filters.

• Motion with a reason

  Sections ease in as they scroll into view, numbers count up, the headline types out five words and the logo strip scrolls. Animation is switched off for visitors who ask their device for less motion.

Website, laptop

Website, phone

Agent app, phone

Employee app, phone

Admin panel, laptop

Components

• Number strip

  An icon tile, a large number and a label, repeated and separated by thin lines. It is used on the home page, the contact page and the dashboards.

• Status badge

  A small rounded label with a dot: Processing, Approved, Pending or Rejected. The same four colors appear in the agent, employee and admin screens.

• Stepper

  A row of numbered dots that turn into ticks as a person moves through registration (3 steps) or adding a lead (4 steps).

• Bottom bar with an Add button

  Five tabs, with Add raised in the middle, fixed to the bottom of the agent and employee screens.

• Admin table

  A header row, a person's initials in a round avatar, a badge and icon buttons for view, edit and delete, with paging underneath.

• 61

  PHP files

• 49

  Screens

• 6,343

  Lines of PHP

• 5,067

  Stylesheet lines

• 30

  Partner logos

• 0

  External scripts

• What it is built with

  PHP files that include each other, HTML5, one stylesheet of 5,067 lines, and about 230 lines of JavaScript in one block at the bottom of the footer file. Icons come from Font Awesome 6.5 and the fonts from Google Fonts, both loaded from their own servers. There is no framework, no build step and no package manager: I edit a file and refresh the browser, running on XAMPP. The site is uploaded to the host with FileZilla.

• How the pages fit together

  Each public page includes the shared header, its own sections and the shared footer. Each app has its own small shell instead: one file that opens the page and the phone-width frame, one for the bottom bar and one that closes the page. That keeps the apps from loading the website's header, footer or script.

• One stylesheet for four things

  The website, the agent app, the employee app and the admin panel all read css/Lending_style.css, in numbered sections: tokens, the button system, the website sections, the app frame and bottom bar, forms, status badges, cards, the admin sidebar and tables, and the contact page. The page loads it with a version number (?v=38) so that after an upload, browsers fetch the new file.

• What the app screens run on

  Every name, amount and chart on the app screens is a sample row kept in the PHP file. There is no database and no check on who is signed in: the Login and Verify buttons are links to the dashboard, and the contact and newsletter forms only show a Sent message. The multi-step forms read their step from the address (add-lead.php?step=2). These screens are finished layouts, ready to be wired to real data.

How a page is put together

• A headline that types itself

  The hero finishes the sentence “Building India's Financial Infrastructure for …” with five words in turn (Everyone, Agents, Banks, NBFCs, India), typing and deleting each one with a blinking cursor.

• Numbers that count up

  A number marked with a few attributes counts from zero the first time half of it is on screen, shows Indian digit grouping (50,000) and stops at its target. The same code runs on the home and contact pages.

• Partner logos from a folder

  The scrolling strip reads every image in the Logo folder, skips the site's own logo and lists them twice for a seamless loop. Thirty partners show today: banks, finance companies, insurers and investing apps. Adding one is a file copy.

• A header that behaves

  A closable banner sits above the menu and the menu moves up when it is closed. After 60 pixels of scrolling the menu gets a shadow. Links to sections scroll smoothly, stopping 80 pixels short so the heading is not hidden, and the current section is highlighted in the menu as you scroll.

• A phone drawer

  On small screens the menu becomes a drawer with a dimmed overlay. It closes from the close button, the overlay, any link or the Escape key, locks page scrolling while open, and keeps its open state in an aria-expanded value for screen readers.

• Login with a code

  The agent login asks for a phone number, then shows code boxes. Typing moves to the next box, Backspace goes back, and a 30 second countdown gates Resend. The splash screen before it moves on by itself after 2.2 seconds.

• Registration and adding a lead in steps

  Registration has three steps and adding a lead has four, each with a stepper at the top that ticks off finished steps. Back and Next buttons move between steps.

• A contact page that answers questions

  A form with a label on every field, four quick contacts, a map of the head office and seven questions in an accordion that opens one at a time.

• An admin panel that folds on a phone

  The sidebar becomes a slide-in menu on small screens, opened with a menu button and closed by tapping outside it. The tables have search, filters for product, status, region and dates, and paging.

• What I ran

  The screens on this page come from the code running on a local PHP server on 4 October 2026, at laptop and phone widths. Two screens were left out of the capture because of flaws listed below: the agent welcome logo and the admin dashboard activity list.

• Found and not fixed

  Found while reading and capturing the code, and not changed. (1) The About Us and Careers menu links, and the Become an Agent button in the hero, point to ids that do not exist on the page. (2) The contact page numbers (5,000+ agents, 50+ partners, 20+ states) differ from the home page (50,000+, 120+, 28). (3) The app shells still ask for stylesheet version 8 while the website asks for 38, so the apps can show an old cached stylesheet after an update. (4) The admin Recent Activity list prints the color word instead of the message. (5) The logo in the admin sidebar and the agent welcome screen turns into a white box, because a filter meant for a transparent logo is applied to a JPEG with a white background. (6) The home page images are PNG files of 1.4 to 2.3 MB each, 11.5 MB for the hero and six cards together. (7) The app pages have no noindex tag.

• In place

  A title and description about India's financial distribution network, a keywords tag, robots set to index and follow, Open Graph and Twitter card tags with a title and description, the language set to English, one h1 with an h2 for each section, and a label on every section. Logo images have alt text made from the file name and fixed width and height, so the page does not jump while they load.

• Missing

  No sitemap and no robots.txt, no canonical link, no structured data, and no social share image. The contact page has no title of its own and shares the home page's. The app pages have no noindex tag. The big PNG images (11.5 MB for the hero and six cards) slow the first load.

What every page carries

• What the live site shows today

  On 2026-10-04 I asked lendingbazaar.in for each page. The home page answers. The contact page and all three apps return 404 there, and the live home page loads stylesheet version 4 where the code is at 38. I asked again for the home page and the contact page on 2026-10-07 and got the same answers. So the live site is an older, home-page-only version of this project.

What changed for visitors

• Building

  • Keep shared pieces in one place. One header, one footer, one app shell and one stylesheet kept four things consistent.
  • When a stylesheet is versioned by hand, every page that loads it must be updated together. Two shells still ask for version 8.
  • A link needs a target. Three menu and button links point to ids that are not on the page.
  • A filter that suits a transparent logo can turn a JPEG into a white box. Check each logo on its own background.

• Content

  • Every number must agree wherever it appears. The home and contact pages tell two different stories.
  • Sample data is fine for a prototype, but it must never print a color word where a message should be.

• What I'd improve

  • Add a backend and a database so the lead, earnings and admin screens use real data, with a real login.
  • Fix the dead links, the white logo box, the activity list and the mismatched numbers.
  • Convert the large PNG images to WebP and add a sitemap, canonical links, structured data and a share image.
  • Bump the stylesheet version in every shell together, or move to a file name that changes with the content.
  • Publish the contact page and the apps to the live site.

• What I built

  • The home page, the contact page and their shared header and footer.
  • The agent app (24 screens), the employee app (9) and the admin panel (14).
  • The design system: tokens, button system, number strips, status badges and the app frame.
  • All the JavaScript, with no libraries.

• Provided by others

  • The company, its product and its copy, including the numbers and testimonials.
  • The brand logo and the partner logos.
  • The domain and the hosting.