Nexilo – Futuristic P2P Lending Website

Modern, responsive, cyber‑finance lending experience for borrowers and lenders. Built with HTML, CSS, and vanilla JS – no build tools needed.

Live site: https://hassan0703.github.io/Nexilo-Website---Frontend-Only-/

✨ Highlights

• Cyber‑finance aesthetic with glassmorphism, neon glows, particles, 3D tilt card, subtle parallax
• Fully responsive: mobile, tablet, desktop
• Complete borrower and lender flows (auth → calculators → earn → dashboards)
• Accessible glow toggle, reduced‑motion support, keyboard‑friendly interactions
• Zero build tooling – open in a browser or any static host

---

🧭 Pages & Features

1) Home – index.html

• Hero: “Your Future, Funded Today.” with CTAs
• Quick EMI Preview mini‑calculator (earn‑style UI with live labels)
• Sections: How it works, Why choose us, Popular products, Testimonials
• CTA + Glow toggle (Normal/Low) persisted via localStorage
• Lender section (bottom): “Earn More. Lend Smart.” with floating coins, animated network lines, animated counter, CTA to Earn page

2) Loan Products – loan-products.html

• Product cards with rates, limits, and Apply links

3) Loan Calculator – loan-calculator.html

• Themed sliders with live labels (Amount, Months, Rate)
• Outputs: Monthly EMI, Total Interest, Total Payment

4) Apply – apply.html

• Validated form with KYC upload (see js/form-validation.js placeholder)

5) Earn with Nexilo – earn-with-nexilo.html

• Hero with 3D card, “Become a Lender Today” CTA
• Why Lend cards, timeline, Earnings calculator (12% APR compounding monthly) with live labels
• Testimonials slider and final CTA

6) Auth – login.html, signup.html

• Cyberpunk auth UI with animated background, particles, glow focus, 3D tilt card
• Preloader, holographic shimmer, IntersectionObserver reveals
• Signup success modal: registration request sent (verification pending)

7) Dashboards

• Lender Dashboard – lender-dashboard.html
  • Top navbar, collapsible sidebar, overview cards, borrower requests (table), earnings vs investments chart placeholder, transactions, notifications
• Borrower Dashboard – borrower-dashboard.html
  • Top navbar, collapsible sidebar, overview cards with progress, My Loans table, repayment schedule (chart placeholder + list with Pay Now), quick Apply card, transactions, notifications

8) Company

• About – about.html
• Contact – contact.html

---

🎨 Visual System

• Earn theme:
  • Deep navy: #0a0f1f
  • Accent red: #e50914
  • Gold highlights: #ffd700
• Core site Tailwind overrides (per page headers): primary/accent set to #FF0033, navy #0D0D1A
• Auth theme variables in css/auth.css:
  • --color-accent, --accent-rgb, --glow-outer, --glow-inner
  • .a11y-lowglow class to reduce glow; respects prefers-reduced-motion

---

🧰 Code & Structure

Loan Website/
├─ index.html
├─ earn-with-nexilo.html
├─ loan-products.html
├─ loan-calculator.html
├─ apply.html
├─ about.html
├─ contact.html
├─ login.html
├─ signup.html
├─ lender-dashboard.html
├─ borrower-dashboard.html
├─ css/
│  ├─ style.css           # global utilities + neon helpers
│  ├─ auth.css            # cyberpunk/auth/particles/glow/3D card
│  └─ earn.css            # earn section/page, counters, sliders, coins
├─ js/
│  ├─ script.js           # nav, mobile menu, parallax, glow toggle
│  ├─ auth.js             # preloader, particles, reveals, tilt, signup modal
│  ├─ earn.js             # coins generator, counter animation, slider
│  ├─ emi-calculator.js   # EMI math + bindings for mini/full calculators
│  └─ form-validation.js  # apply form validation (placeholder)
├─ images/
│  ├─ nexilo-logo.png     # site logo (replace with your brand)
│  ├─ 2nd_logo.png        # optional alt logo
│  └─ loan-cards/, team/  # image sets
└─ assets/
   └─ nexilo-logo.svg     # SVG placeholder logo

---

📐 Calculators

EMI formula

EMI = [P × R × (1+R)^N] / [(1+R)^N – 1] – see js/emi-calculator.js.

Theming

• Mini and full calculators share the earn‑style UI (gold outputs, labeled sliders).
• Earn calculator (APR 12% monthly comp.) shows live amount/duration.

---

🔗 Navigation & Footer

• Header navigation includes Home, Products, Calculator, Apply, About, Contact, Earn, Login, Signup.
• The “Earn” link is added on Home and Earn pages; replicate the header block on other pages to show it globally if desired.
• Footer (Home) includes:
  • Tagline: “Empowering Your Financial Future.”
  • Quick Links + Earn page
  • Follow links with inline SVG icons (Twitter, LinkedIn, Facebook)

---

🛠️ Run Locally

Option A: Open index.html in your browser.

Option B: Use a local static server for best results

# Python
python3 -m http.server 5500
# open http://localhost:5500/index.html

# Node
npx http-server -p 5500

---

🧩 Customization

• Replace logo at images/nexilo-logo.png.
• Adjust glow strength via css/auth.css:
  • --glow-outer, --glow-inner or add .a11y-lowglow to <body>
• Tune Tailwind colors in inline config blocks on each page.
• Edit earn theme palette in css/earn.css.

---

♿ Accessibility

• Reduced motion via prefers-reduced-motion.
• High‑contrast/low‑glow via .a11y-lowglow and prefers-contrast: more.
• Focus-visible and keyboard‑friendly controls.

---

📸 Screenshots (optional)

Create images/screenshots/ and add:

home.png, earn.png, calculator.png, auth.png,
lender-dashboard.png, borrower-dashboard.png

---

📄 License

This repository is provided as‑is for demonstration and educational purposes. Add your license here.

---

🤝 Contact

For issues and collaboration, open an issue or email hassan4185767@gmail.com.