LeadForge Demo

The Modern Lead Attribution Engine

Turning website traffic into qualified business leads with precision and clarity.

---

---

Overview

LeadForge is a high-fidelity landing page demo designed for a B2B SaaS environment. The goal of this project was to bridge the gap between complex lead data and intuitive user experience. It demonstrates a complete "Conversion Path"—from source attribution to pricing selection

---

architecture & Technical Highlights

Design System

60-30-10 Palette: Implemented a strictly professional color hierarchy using Slate and Blue-600.

Responsive "Pill" Navigation: A custom-engineered sticky navbar that transforms into a mobile-ready drawer using Radix UI primitives.

Bento Features Grid: Optimized for scannability, focusing on visual hierarchy to communicate value propositions quickly.

Core Components

Source Attribution: Interactive cards showing marketing channel tracking.

Dynamic Pricing: Psychologically optimized pricing tiers with "Most Popular" highlight logic.

Embedded Lead Capture: A high-performance contact form integrated into the global footer.

System Health: A live-styled "Systems Operational" indicator to simulate a production-ready environment.

🚀 Deployment & Local Setup

Installation

  Bash
  # Clone the repo
  git clone https://github.com/chrlesdev/leadforge-demo.git

# Install dependencies
  npm install

# Run development mode
  npm run dev

Build for Production

npm run build