Prompt for Replit — “IBrandBiz Comparison” to match WebServicesPricing

Goal: Create a branded order form template named ibrandbiz_comparison based on WHMCS premium_comparison, styled to match the design cues of WebServicesPricing.tsx (Starter / Professional ★ Recommended / Business), without breaking WHMCS Smarty logic.

Inputs you have:

Zip of /templates/orderforms/premium_comparison (provided).

Brand palette:
#00CB51 green, #FF8B00 orange, #30342d dark-green, #231f20 dark-gray, #274b9b blue, #978752 olive, #6dc282 light-green, #ffffff white.

Reference layout cues from WebServicesPricing.tsx:

3 cards in a row, rounded corners

Big price number in brand green, small “/month” next to it

Small annual price line under it

Short paragraph intro per plan

Bulleted feature list with green check icons

Middle card has “★ Recommended” pill/badge

Primary CTA button in brand green

Domain search area with rounded inputs (46px)
(We are not hard-coding those marketing prices in the template—WHMCS fills prices. We only style.)

What to create

Create a new order form folder named ibrandbiz_comparison/ with the same files as premium_comparison but with our CSS/markup hooks:

Files to output (inside ibrandbiz_comparison/):

style.css (overhauled with IBrandBiz styling)

products.tpl (add harmless classes only)

viewcart.tpl (add harmless classes only)

configureproduct.tpl (add harmless classes only)

includes/sidebar-categories.tpl (optional: class hooks only if needed)

README.txt (install steps & what changed)

Tarball: ibrandbiz_comparison.tar.gz

Strict rules

✅ Keep all Smarty variables & loops intact (don’t rename/remove {foreach}, {$product}, etc.).

✅ No absolute WHMCS URLs; keep everything relative.

✅ No extra JS libraries; use WHMCS Bootstrap/JS only.

✅ Mobile responsive must remain solid.

❌ Do not insert site header/footer here (client theme already wraps it).

Minimal markup hooks (add classes only)

In these templates, do not remove anything—just add classes:

products.tpl

Add class="ibb-products" to the container that wraps the product grid.

Add class="product ibb-card" on the card root (it already has product).

Add class="product-header ibb-head" on the heading area.

Add class="product-title ibb-title" on the title text.

Add class="product-features ibb-feats" on the feature list <ul>.

Featured/Recommended plan

Leave WHMCS’s featured flag as-is. Add a class on the featured card root: featured.

Insert a non-breaking badge element inside the header if it’s not present yet:

<span class="ibb-badge" aria-hidden="true">★ Recommended</span>


(Only render for featured product; use an {if $product.isFeatured} guard if needed.)

Prices

Don’t touch price values—just wrap existing price/cycle in spans if they aren’t already:

<span class="ibb-price">{$product.pricing}</span>
<span class="ibb-cycle">{$product.billingcyclefriendly}</span>


If markup already separates them, just add ibb-price/ibb-cycle classes.

Buttons

Add class="btn btn-primary ibb-btn" to primary CTAs.

Ensure add-to-cart buttons retain original attributes.

viewcart.tpl / configureproduct.tpl

Add page wrappers: class="ibb-cart" and class="ibb-config".

Add class="ibb-summary" to the order summary panel.

CSS — put in ibrandbiz_comparison/style.css

Use the brand variables and mirror WebServicesPricing spacing:

:root{
  --ibb-green:#00CB51;
  --ibb-orange:#FF8B00;
  --ibb-dark-green:#30342d;
  --ibb-dark-gray:#231f20;
  --ibb-blue:#274b9b;
  --ibb-olive:#978752;
  --ibb-light:#6dc282;
  --ibb-white:#ffffff;
}

/* Layout spacing (mirrors TSX page padding) */
.ibb-products { margin-top: 8px; }
.panel, .card, .order-summary { border-radius: 14px; }

/* Cards (3-up like WebServicesPricing) */
.products .product {
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.products .product .product-header,
.products .product .ibb-head {
  background: var(--ibb-dark-green);
  color: #fff;
  padding: 18px 20px;
}
.products .product .product-title,
.products .product .ibb-title { 
  font-weight: 700; letter-spacing: .2px;
}

/* Price like TSX (big green + small /month) */
.products .product .price,
.products .product .ibb-price {
  display: inline-block;
  font-size: 32px;
  font-weight: 800;
  color: var(--ibb-green);
  margin: 12px 6px 2px 0;
}
.products .product .price-cycle,
.products .product .ibb-cycle {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #8acfa5;
}

/* Feature list with dashed separators + green checks */
.products .product .product-features,
.products .product .ibb-feats { padding: 14px 20px; }
.products .product .product-features li { 
  padding: 6px 0; 
  border-bottom: 1px dashed rgba(0,0,0,.08);
  display:flex; gap:8px; align-items:flex-start;
}
.products .product .product-features li:last-child { border-bottom: 0; }
.products .product .product-features li:before {
  content: "✓";
  color: var(--ibb-green);
  font-weight: 900;
  margin-top: 1px;
}

/* Primary CTAs */
.products .product .btn,
.products .product .btn-order,
.products .product .ibb-btn {
  background: var(--ibb-green) !important;
  border-color: var(--ibb-green) !important;
  color: #fff !important;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
.products .product .btn:hover { filter: brightness(.93); }

/* “★ Recommended” pill like TSX */
.products .product.featured .product-header { 
  background: linear-gradient(135deg, var(--ibb-green), #28d86f);
}
.products .product.featured .ibb-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ibb-green);
  color: #fff; 
  padding: 6px 12px; 
  border-radius: 999px;
  font-weight: 700; font-size: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.products .product.featured::after {
  /* Diagonal orange ribbon also allowed */
  content: "Recommended";
  position: absolute; top: 12px; right: -36px;
  transform: rotate(35deg);
  background: var(--ibb-orange); color: #fff;
  padding: 4px 48px; font-weight: 800; font-size: 11px;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

/* Domain search (rounded 46px like TSX) */
#frmDomainChecker .form-control { border-radius: 12px; height: 46px; }
#frmDomainChecker .btn { 
  border-radius: 12px; height: 46px;
  background: var(--ibb-green) !important; border-color: var(--ibb-green) !important;
}

/* Cart sidebar header in dark green */
#orderSummary { 
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06); 
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
#orderSummary .panel-heading { 
  background: var(--ibb-dark-green); 
  color: #fff; 
  border-radius: 14px 14px 0 0;
}

/* Alerts and forms */
.alert { border-radius: 10px; }
input.form-control, select.form-select, textarea.form-control { border-radius: 10px; }

/* Mobile polish */
@media (max-width: 767.98px){
  .products .product { margin-bottom: 14px; }
}


Note: The annual pricing line shown on WebServicesPricing should not be hard-coded here—WHMCS will show billing cycles based on product configuration. Our CSS just gives it the look.

Packaging & Install Steps (write these into README.txt)

Output the folder ibrandbiz_comparison/ and archive ibrandbiz_comparison.tar.gz.

Deploy path on server:
/public_html/portal/templates/orderforms/ibrandbiz_comparison/

WHMCS Admin → System Settings → General → Ordering

Default Order Form Template = ibrandbiz_comparison

Save → Utilities → System Cleanup → Empty Template Cache

Test https://portal.ibrandbiz.com/cart.php (desktop + mobile).

Acceptance Criteria

3 plan cards match spacing & hierarchy from WebServicesPricing.tsx.

Featured plan shows green gradient header + ★ pill and/or orange ribbon.

Big green price, small cycle text; CTAs use brand green.

Domain search inputs 46px rounded.

No Smarty/JS errors; fully responsive.

Notes for SN (so we’re aligned)

We’re only styling the order form; the actual plan names, features, and prices come from the WHMCS products we’re about to create (Starter / Professional / Business).

To place Professional in the middle and mark as featured: in WHMCS, set sort order and toggle “Featured” on that product.

If you want small “blurb” lines like the TSX cards (“Perfect for single-site projects…”), put that copy in each product’s Description—WHMCS renders it in the card; our CSS styles it.

Once Replit returns ibrandbiz_comparison.tar.gz, upload/extract to /templates/orderforms/, pick it in Ordering, clear cache, and hit /cart.php.