A conversion-focused freelancer homepage built with Bootstrap 6 for an independent copywriter, with services, a four-step process, fixed-price packages, a live price estimator, a review carousel, an FAQ and a discovery call booking form.
How it works
The page root .hb-page pins data-bs-theme="light", while the hero header .hb-top and the reviews section switch to data-bs-theme="dark". The --bs-primary-* role tokens are re-mapped to the lime brand color.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">on small screens. The script keepsaria-expandedon.hb-togglerin sync with the drawer events and closes it after an in-page link. - Hero: headline with the tilted
.hb-hlhighlight, two calls to action, anavatar-stackwith rating, and.hb-visual: a framed photo with two floating cards. The availability card (data-hb-opening) is computed inscript.jsas the first Monday at least two weeks away, so the date never goes stale. - Services: four
.hb-servicecards. - Process: a Bootstrap 6
stepperinside a.contains-inlinewrapper (md:stepper-horizontalgoes horizontal in a wide wrapper) plus a guarantee banner. - Packages: three
.hb-plancards with.hb-plan-featuredin the middle, then.hb-estimator: two Bootstrap 6 Range sliders whose values the script multiplies byHB_PAGE_RATEandHB_EMAIL_RATE, announcing the total in a polite live region. - Reviews: stats and a Bootstrap 6 scroll-snap
carousel. - FAQ: an exclusive
<details name="hb-faq">accordion withaccordion-gap. - Booking:
<form data-bs-validate novalidate>with a Combobox for the service and a Datepicker whose earliest date is the computed next opening. On submit the script flags invalid fields, simulates the request and shows#hb-toast.
Customization
- Change
--hb-forest,--hb-limeand--hb-creamin.hb-page(style.css) to rebrand, and update the--bs-primary-*overrides beside them. - Set your own rates in
HB_PAGE_RATEandHB_EMAIL_RATE, and your booking lead time inHB_LEAD_WEEKS, at the top ofscript.js. - Edit the
.hb-plancards or remove.hb-plan-featuredto make all packages equal. - Replace the
setTimeoutin the submit handler withfetch()to your form service or CRM endpoint. - Add a slide by copying a
.carousel-itemand adding a matching indicator button with the nextdata-bs-slide-tovalue.
All photos come from Unsplash; replace them with your own portrait and client photos.
Accessibility
A skip link jumps to #hb-main. The drawer is a native <dialog> with a labelled close button, the carousel has aria-roledescription and labelled controls, the estimator result uses aria-live, and form errors use invalid-feedback. The toast is role="status", focus rings use the lime brand color, and hover lifts and smooth scrolling are disabled under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). For Bootstrap 5 developers: buttons use btn-solid theme-primary, the navbar uses a Drawer instead of navbar-collapse, the accordion is native <details>, and validation uses data-bs-validate. Range, Combobox, Datepicker and Stepper are new Bootstrap 6 components. The Combobox has no reset method, so the chosen service stays after the form resets.
