✨ THANK YOU!

ChatForge AI v1.0.0

Premium AI Chatbot Landing Page Template — 2026 Ready

priharshdesign@gmail.com

Support 24/7

🚀 Introduction

ChatForge AI is a premium Bootstrap 5.3 landing page template specifically designed for AI chatbot tools, SaaS platforms, and conversational AI startups.

AI Chatbots

GPT-4 ready, NLP focused

No-Code SaaS

Drag & drop builder vibe

Conversion Ready

20-30% higher CTA clicks

📋 Credits

Bootstrap 5.3 — Frontend framework
Remix Icon — Premium icons
Google Fonts (Inter, Manrope, JetBrains Mono)
AOS — Scroll animations

📁 File Structure

chatforge-ai/
📄 index.html
📁 assets/
📁 css/
📄 bootstrap.min.css
📄 remixicon.css
📄 style.css
📄 style.css ← MAIN CSS FILE
📁 js/
📄 bootstrap.bundle.min.js
📄 app.js
📁 images/
📁 scss/ (Optional - for developers)
📄 _variables.scss
📄 _header.scss, _features.scss, etc.
📄 documentation.html

⚡ Quick Start (5 Minutes)

1

Unzip folder

Extract `chatforge-ai.zip` to your computer

2

Open index.html

Edit with VS Code, Sublime, or any editor

3

Change colors

Edit `assets/scss/variables.scss` → `$primary:-/* /* ⚡ Change this to your brand color */`

4

Upload & Done!

Upload to server

🎨 Colors & Themes

🔵 Change Primary Color (EASIEST)

File: assets/scss/variables

CSS Variables

:root {
  --primary: #00D4FF;        /* ← Apna color yahan change karo */
  --primary-rgb: 0, 212, 255;  /* RGB values (same color) */
  --secondary: #6C63FF;      /* Secondary accent */
  --secondary-rgb: 108, 99, 255;
}

--primary: #00D4FF (Default)

--primary: #FF5733 (Orange)

--primary: #8E44AD (Purple)

--primary: #2ECC71 (Green)

🌓 Dark / Light Mode

🎯 Set Default Theme

File: index.html (line 5)

Dark Mode Default (Current)

<html lang="en" data-theme="dark">  /* 🌙 Dark mode */

Light Mode Default

<html lang="en" data-theme="light">  /* ☀️ Light mode */

Theme Toggle: Already included in header (Sun/Moon icon). Works automatically!

🧠 SCSS Variables (Advanced)

📁 File: `scss/_variables.scss`

SCSS Variables - Full Control

// ========================================
// 🎨 CORE VARIABLES - APNI MARZI
// ========================================

// ----- COLORS -----
$primary: #00D4FF;        // Primary brand color
$secondary: #6C63FF;      // Secondary accent
$accent: #39FF14;         // CTA accent

// ----- DARK THEME -----
$bg-dark: #0A0C10;        // Background
$bg-card: #12141A;        // Cards
$text-primary: #FFFFFF;   // Text

// ----- LIGHT THEME -----
$bg-light: #FFFFFF;
$bg-card-light: #F5F7FA;
$text-primary-light: #0A0C10;

// ----- SPACING -----
$space-2: 0.5rem;         // 8px - base unit
$space-4: 1rem;          // 16px
$space-8: 2rem;          // 32px

SCSS Compile Command:

sass --watch assets/scss/main.scss assets/css/style.css

Or use online compiler: https://www.sassmeister.com/

✏️ Content Editing

Text / Headings

Edit directly in index.html

<h1>Your Title</h1>
<p>Your description</p>

Images

Add to assets/images/ folder

<img src="assets/images/your-image.jpg">

Icons

Remix Icon library

<i class="ri-robot-line"></i>

💰 Pricing Plans

3 Plans Included:

Plan	Price	Best For	Badge
Free	$0/mo	Testing	—
Starter	$19/mo	Growing businesses	⭐ MOST POPULAR
Pro	$49/mo	Enterprise	—

Billing Toggle (Monthly/Annual):

<div class="billing-toggle">
  <div class="billing-option active">Monthly</div>
  <div class="toggle-switch" id="billingToggle"></div>
  <div class="billing-option">Annual <span class="billing-save">Save 20%</span></div>
</div>

❓ FAQ (Bootstrap Accordion)

Zero JavaScript needed! Bootstrap accordion handles everything.

FAQ Accordion Structure

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq1">
        <span class="accordion-icon"><i class="ri-question-line"></i></span>
        Your Question Here?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Your answer here...
      </div>
    </div>
  </div>
</div>

📊 Changelog

v1.0.0 Initial Release — Feb 2026

✅ First release on WrapMarket
✨ Premium AI Chatbot Landing Page
🎨 Dark/Light theme with toggle
💬 Live Chat Demo Section with typing animation
⚡ 4-Step "How It Works" timeline
💰 3 Pricing Cards with Most Popular badge
❓ Bootstrap Accordion FAQ (8 questions)
💎 Testimonials with avatars & stats
📱 Fully responsive (mobile perfect)
🚀 SCSS source files included
📘 Clean documentation

🆘 Support

PriHarsh Design

We're here to help you 24/7

priharshdesign@gmail.com Response within 24 hours

📋 Before Contacting Support:

✅ Check documentation first
✅ Include screenshot of issue
✅ Mention template version (v1.0.0)
✅ Describe steps to reproduce