Build “IBB Order Form Preview” (standalone)

Goal: Create a fully responsive standalone order page that visually matches the IBrandBiz brand and our WebServicesPricing layout (Starter / Professional ★ Recommended / Business). This is for preview only (no WHMCS/Smarty). After sign-off, we’ll port styles into WHMCS.

Design references

Look & feel: DashboardTemplatePage + WebServicesPricing.tsx

Header: dark bar, white nav links, green CTAs

Pricing cards: rounded 16px, dark-green header, big green price, small cycle text, feature list with green checks, Professional is ★ Recommended

Domain search bar at top (rounded 12px, 46px high)

Right column “Order Summary” card with dark-green header

Tech constraints (to match WHMCS environment later)

Use Bootstrap 3.4.1 and Font Awesome 5.x (same as WHMCS Six)

Use only vanilla JS (no React/Vue)

No external build steps

File tree to produce
ibb-orderform-preview/
  index.html
  css/
    styles.css
  js/
    app.js          (tiny; only for toggling featured & faking add-to-cart)
  img/
    preview.png     (300x200 screenshot for docs)
  README.md         (what to copy into WHMCS later)
  WHMCS-port-notes.md (selector mapping & integration steps)
  ibrandbiz-orderform-preview.zip

Brand palette (use CSS variables)
: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;
}

index.html (sections to include)

Head

Title: “IBrandBiz – Order Web Hosting”

Load Bootstrap 3.4.1 & Font Awesome 5.x via CDN

Load css/styles.css

Load Google Font Inter (regular/500/700)

Header / Navbar

Dark header (--ibb-dark-gray) with logo (use https://ibrandbiz.com/assets/logo-reverse.png), links: Home, Pricing, Store (dropdown: Web Hosting, Register Domain, Transfer Domain), Knowledgebase, Support

Right side buttons: “Sign in” (outline light), “Create account” (btn-primary)

Domain Search

Large rounded input (“Search your domain name”), “Search” button (green), “Transfer” secondary

Products grid (3 cards)

Each card shows:

Title: Starter / Professional / Business

Short blurb

Big price $12.00 and small /month next to it

Feature list with green checkmarks

CTA “Choose Plan” (btn-primary)

Professional card:

Has ★ Recommended pill centered above header and an optional diagonal orange ribbon

Slight elevation/scale to stand out

Order Summary (right column on desktop; below on mobile)

Dark green header, gray body with list items and total

“Continue” button (btn-primary)

Footer

Dark background, © IBrandBiz YEAR, Privacy, Terms, Contact

Use a container with a Bootstrap row:

col-md-8 for products

col-md-4 for summary

styles.css (key rules)

Apply variables above

Header/navbar:

.navbar, .topbar { background: var(--ibb-dark-gray); }

White nav links; hover reduces opacity; don’t turn all <a> into buttons

Buttons:

.btn-primary { background: var(--ibb-green); border-color: var(--ibb-green); }

Rounded 12px on primary CTAs

Domain search:

Input/btn height 46px, radius 12px

Cards:

.product with border-radius 16px, subtle shadow, 1px light border

.product-header dark-green background, white text, 18px padding

.price font-size 32px bold green; .cycle 12px, semi-bold, pale green

Feature list: dashed separators; each item prepended with green ✓

Featured (Professional):

.product.featured .product-header { background: linear-gradient(135deg, var(--ibb-green), #28d86f); }

.product.featured .badge-pill centered pill “★ Recommended”

Optional diagonal orange ribbon via ::after

Order summary:

Rounded 14px, shadow; header dark-green, white text

Fully responsive; use Bootstrap breakpoints; stack summary under products on mobile

app.js (tiny behaviors)

On “Choose Plan” clicks, update fake order summary list + total

Toggle featured state if needed for demo

No heavy logic

README.md (preview instructions)

Open index.html in Replit webview

What each section demonstrates

Screenshot saved as img/preview.png

WHMCS-port-notes.md (critical mapping)

Explain EXACTLY how to port after approval:

What to copy into WHMCS

Copy only the CSS rules from css/styles.css into the WHMCS orderform’s style.css at
/portal/templates/orderforms/ibrandbiz_comparison/style.css.

Do not copy header/footer HTML — client theme already wraps it.

Class hooks to add in WHMCS templates (no logic changes):

In products.tpl:

Add class="ibb-products" to the grid container

On card root add class="product ibb-card"

On header add class="product-header ibb-head"

On title add class="product-title ibb-title"

On feature UL add class="product-features ibb-feats"

For featured product (if {if $product.isFeatured}), include <span class="badge-pill">★ Recommended</span>

In viewcart.tpl:

Add class="ibb-cart" to the page wrapper

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

In configureproduct.tpl:

Add class="ibb-config"

What to leave to WHMCS

Prices, cycles, product names/descriptions, add-to-cart behavior — do not hard code in templates

Assets alignment

WHMCS ships Bootstrap 3.4.1/FontAwesome via Six → our selectors should not conflict with .navbar, .panel, etc.

After copy

WHMCS Admin → System Settings → General → Ordering → Default Order Form Template = ibrandbiz_comparison

Utilities → System → System Cleanup → Empty Template Cache

Test /cart.php (desktop + mobile)

Acceptance

Preview page visually matches our brand (cards, pill/ribbon, domain bar, summary)

Port notes are complete enough to replicate in WHMCS without breaking Smarty

No JS frameworks; clean Bootstrap 3 classes

Output the project and attach ibrandbiz-orderform-preview.zip.