G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed the GoHighLevel lead form and booking calendars

Browse Source 
/contact/ now uses the GHL "Dylan – Lead Form", and a new /contact/book/
page lets visitors pick the free intro call or the paid 1:1 and book it in
the matching GHL calendar. Both calendars load up front so switching tabs is
instant.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-14 13:43:35 -04:00
parent 16e36f5b4f
commit 75d8cbc7f7
7 changed files with 125 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/book.js
+21
View File
@@ -0,0 +1,21 @@
(function () {
var tabs = document.querySelectorAll('[data-call]');
var select = function (id, scroll) {
tabs.forEach(function (t) {
var on = t.getAttribute('data-call') === id;
t.setAttribute('aria-selected', String(on));
var panel = document.getElementById('cal-' + t.getAttribute('data-call'));
if (panel) { if (on) panel.removeAttribute('data-off'); else panel.setAttribute('data-off', ''); }
});
if (scroll) document.getElementById('schedule').scrollIntoView({ behavior: 'smooth', block: 'start' });
};
tabs.forEach(function (t) {
t.addEventListener('click', function () {
var id = t.getAttribute('data-call');
select(id, true);
try { history.replaceState(null, '', '#' + id); } catch (e) {}
});
});
var hash = location.hash.replace('#', '');
if (hash === 'free' || hash === 'vip') select(hash, false);
})();
static/assets/styles.css
+27
View File
@@ -1019,3 +1019,30 @@ h1, h2, h3, h4 { font-weight: 600; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.feature-press { position: relative; }
.fp-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
/* GoHighLevel embeds (lead form + booking calendars) */
.ghl-wrap { border-radius: 14px; overflow: hidden; background: #ffffff; }
.ghl-frame { display: block; width: 100%; border: 0; background: transparent; }
.ghl-wrap-form .ghl-frame { min-height: 460px; }
.ghl-wrap-cal { padding: 8px; }
.ghl-wrap-cal .ghl-frame { min-height: 720px; }
.ghl-card { gap: 20px; }
.calls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin: 56px auto 0; }
.call {
all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
padding: 32px; border-radius: 28px; border: 1px solid var(--bd);
background: linear-gradient(160deg, var(--glass), transparent 120%), var(--cloud); color: var(--ink);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.call:hover { transform: translateY(-2px); border-color: rgba(31, 183, 255, .45); }
.call:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.call[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 50px rgba(26, 127, 255, .18); }
.call-top { display: flex; justify-content: space-between; align-items: center; }
.call-top .ic { width: 44px; height: 44px; border-radius: 50%; }
.call-h { font-size: var(--text-heading); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.call-p { color: var(--slate); }
.call .btn { align-self: flex-start; margin-top: 6px; pointer-events: none; }
.cal-panel { max-width: 980px; margin: 0 auto; border-radius: 24px; }
@media (max-width: 760px) { .calls { grid-template-columns: 1fr; } .call { padding: 24px; } }
#schedule .wrap { position: relative; }
.cal-panel[data-off] { position: absolute; left: -10000px; top: 0; width: min(980px, 100%); visibility: hidden; pointer-events: none; }