Marketing Consultant Homepage Template

A warm, editorial homepage template for an independent marketing consultant, built with Bootstrap 6. It pairs a serif headline and an arched portrait with services, measurable results, an ROI calculator and a call booking form.

How it works

Everything sits inside .mc-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-control-checked-bg) to the brand forest green, so every btn-solid theme-primary, tab and checkbox follows the brand.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile. "Services" opens a .menu with menu-item-icon and menu-item-description. The script syncs aria-expanded on the toggler and closes the drawer after an in-page link.
• Hero: headline, two calls to action, a dl.mc-hero-stats row and .mc-portrait, an Unsplash photo with floating result cards (.mc-float).
• Services: nav nav-pills tabs (data-bs-toggle="tab") switch four .tab-pane panels, each with a checklist and .mc-price-card.
• Results: three .mc-case cards plus the .mc-roi calculator. Two Bootstrap 6 Range sliders (.form-range + .form-range-input) feed updateRoi() in script.js, which writes into the data-mc-result elements inside a polite live region.
• Process: a stepper md:stepper-horizontal inside .contains-inline, stacked on phones.
• Testimonials and FAQ: three .mc-quote cards and an exclusive accordion of <details name="mc-faq">.
• Booking: <form data-bs-validate novalidate> uses CSS-only validation. The "Preferred call date" field is a Bootstrap 6 Datepicker; the script sets data-bs-date-min (tomorrow) and data-bs-date-max (eight weeks out) relative to today. A valid submit shows a spinner, simulates the request and opens .mc-toast with Toast.getOrCreateInstance().

Customization

• Change --mc-forest, --mc-terra and --mc-cream on .mc-page in style.css to rebrand; the --bs-primary-* overrides beside them make Bootstrap buttons follow.
• Swap the fonts by editing --mc-serif and --bs-body-font-family, plus the Google Fonts URL.
• Adjust COST_PER_LEAD and CLOSE_RATE in script.js to match your own benchmarks; the ROI figures update instantly.
• Edit the min, max and step attributes on #mc-budget and #mc-deal to change slider ranges.
• Change the 56 in max.setDate(max.getDate() + 56) to open more or fewer weeks for bookings.
• Replace the setTimeout in the form submit handler with fetch() to your CRM or booking endpoint.
• Remove .mc-case-dark or .mc-quote-accent for uniform cards.
• The portraits come from Unsplash; replace them with your own photos.

Use cases

• Independent marketing consultants: a serif headline and arched portrait present you personally
• Service offers: pill tabs show four services with checklists and price cards
• Proving value: case-study results and an ROI calculator with sliders
• Booking calls: a process stepper, testimonials, FAQ and a form with a datepicker for the call date

Accessibility

A skip link jumps to #mc-main. Tabs use role="tab" with aria-selected, sliders have labels and <output> elements, and calculator results are announced via aria-live. The toast uses role="status", focus rings are visible in the brand terracotta, and smooth scrolling and transitions are disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice: btn-solid theme-primary replaces btn-primary, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown became Menu, form-select is now form-control on <select>, checkboxes are a bare .check, the accordion is native <details>, and validation uses data-bs-validate. Range, Datepicker and Stepper are new Bootstrap 6 components. The script imports Drawer and Toast as an ES module.