IBrandBiz Custom Order Form Template - Installation Guide
=========================================================

OVERVIEW
--------
This is a custom WHMCS order form template named "ibrandbiz_comparison" 
that matches the design of IBrandBiz WebServicesPricing page with:
- 3-column product grid layout
- Big green pricing with small cycle text
- Featured plan with "★ Recommended" badge and orange ribbon
- IBrandBiz brand colors and styling
- Fully responsive mobile design

FILES INCLUDED
--------------
- style.css                      (IBrandBiz brand styling)
- products.tpl                   (Product grid with pricing cards)
- viewcart.tpl                   (Shopping cart page)
- configureproduct.tpl          (Product configuration)
- includes/sidebar-categories.tpl (Category navigation)
- README.txt                     (This file)

BRAND COLORS USED
-----------------
- Green: #00CB51 (primary buttons, prices, CTAs)
- Orange: #FF8B00 (recommended ribbon)
- Dark Green: #30342d (card headers, order summary)
- Dark Gray: #231f20
- Blue: #274b9b
- Olive: #978752
- Light Green: #6dc282
- White: #ffffff

INSTALLATION STEPS
------------------

1. UPLOAD TEMPLATE FILES
   Upload the entire /ibrandbiz_comparison/ folder to:
   
   /home/ibrandbiz/public_html/portal/templates/orderforms/ibrandbiz_comparison/

   Your directory structure should look like:
   /templates/orderforms/ibrandbiz_comparison/
   ├── style.css
   ├── products.tpl
   ├── viewcart.tpl
   ├── configureproduct.tpl
   ├── includes/
   │   └── sidebar-categories.tpl
   └── README.txt

2. ACTIVATE IN WHMCS ADMIN
   - Login to WHMCS Admin Area
   - Go to: System Settings → General Settings → Ordering tab
   - Find "Default Order Form Template"
   - Select "ibrandbiz_comparison" from dropdown
   - Click "Save Changes"

3. CLEAR TEMPLATE CACHE
   - Go to: Utilities → System → System Cleanup
   - Check "Empty Template Cache"
   - Click "Run System Cleanup"

4. CONFIGURE PRODUCTS (Important!)
   To match the WebServicesPricing design:
   
   a) Create 3 products: Starter, Professional, Business
   
   b) Set sort order to display them left-to-right:
      - Starter: Sort Order = 1
      - Professional: Sort Order = 2
      - Business: Sort Order = 3
   
   c) Mark "Professional" as Featured:
      - Edit Professional product
      - Check "Featured" checkbox
      - This adds the green gradient + "★ Recommended" badge
   
   d) Add product descriptions (shows below price):
      - Starter: "Perfect for single-site projects & personal sites"
      - Professional: "Everything you need for a professional online presence"
      - Business: "Advanced features for growing & mission-critical businesses"
   
   e) Add features as separate lines in the product description or 
      use Product Add-ons/Config Options. The template will display 
      them with green checkmarks.

5. VERIFY INSTALLATION
   - Visit: https://portal.ibrandbiz.com/cart.php
   - Check desktop view (3 cards in a row)
   - Check mobile view (stacked cards, responsive)
   - Verify Featured plan shows both badge and ribbon

DESIGN FEATURES
---------------
✓ 3-column responsive grid matching WebServicesPricing.tsx
✓ Large green price (32px) with small cycle text
✓ Featured plan: green gradient header + pill badge + orange ribbon
✓ Feature lists with green checkmarks and dashed borders
✓ Rounded corners: 16px cards, 12px buttons, 10px inputs
✓ Domain search bar: 46px height, rounded inputs
✓ Cart sidebar: dark green header
✓ Mobile optimized with collapsible navigation

CUSTOMIZATION NOTES
-------------------
- All Smarty variables preserved - template works with any WHMCS product
- No hard-coded prices - WHMCS populates all pricing dynamically
- Annual pricing displays automatically based on billing cycles
- Template inherits site theme's header/footer automatically

TROUBLESHOOTING
---------------

Issue: Products not showing in 3 columns
→ Clear browser cache (Ctrl+F5)
→ Clear WHMCS template cache
→ Verify style.css loaded in browser inspector

Issue: Featured badge not appearing
→ Ensure product marked as "Featured" in WHMCS admin
→ Check product sort order (middle position recommended)

Issue: Prices not displaying
→ Verify product has pricing configured for at least one billing cycle
→ Check product is visible and active

Issue: Mobile layout broken
→ Ensure Bootstrap CSS loading from parent theme
→ Test with different mobile devices/viewports

SUPPORT
-------
For theme issues or customization:
- Email: info@ibrandbiz.com
- Phone: +1 (346) 530-8908

TECHNICAL NOTES
---------------
- Based on WHMCS premium_comparison template structure
- Compatible with WHMCS 7.0+
- Uses standard WHMCS Smarty variables
- Bootstrap 3/4 compatible
- No JavaScript dependencies
- Fully accessible (ARIA labels included)

MATCHING COMPONENTS
-------------------
This order form pairs with:
- IBrandBiz WHMCS Client Theme (/templates/ibrandbiz/)
- WebServicesPricing page design
- IBrandBiz brand identity system

CHANGELOG
---------
v1.0 - Initial release
- Created custom comparison layout
- Implemented IBrandBiz brand styling
- Added featured product badges
- Mobile responsive design
