Split hero with booking-card mockup
Lead-generation hero for booking or scheduling products: headline plus dual CTA on the left, a live-feeling app mockup on the right. Swap the mockup content for whatever the product actually does; keep the two-button pattern (primary action plus a lower-commitment demo/tour link).
Live preview
open in new tab ↗<section class="cb-hero">
<div class="cb-hero-inner">
<div class="cb-hero-copy">
<h1>The better way to schedule your meetings</h1>
<p>A fully customizable scheduling tool for individuals, businesses taking calls, and teams who need people to actually show up.</p>
<div class="cb-hero-ctas">
<button class="cb-btn cb-btn-primary">Get started free</button>
<button class="cb-btn cb-btn-secondary">Book a demo</button>
</div>
<span class="cb-hero-note">No credit card required</span>
</div>
<div class="cb-hero-mockup">
<div class="cb-mockup-card">
<div class="cb-mockup-titlebar">
<span class="cb-mockup-avatar">JD</span>
<span class="cb-mockup-title">Intro Call</span>
</div>
<div class="cb-mockup-cal">
<div class="cb-mockup-cal-head">May 2026</div>
<div class="cb-mockup-cal-grid">
<span class="cb-day off">12</span><span class="cb-day off">13</span>
<span class="cb-day">14</span><span class="cb-day">15</span>
<span class="cb-day active">16</span><span class="cb-day">17</span>
<span class="cb-day off">18</span>
</div>
<div class="cb-mockup-slots">
<span class="cb-slot">9:00am</span>
<span class="cb-slot">10:30am</span>
<span class="cb-slot selected">1:00pm</span>
</div>
</div>
</div>
<div class="cb-hero-badges">
<span class="cb-badge">★★★★★ 4.9/5</span>
</div>
</div>
</div>
</section>Block id: cal-com-hero-split-booking-mockupvanilla · swap-content
More hero blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.