marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Angle squeeze pages: fit headline, video and CTA above the fold

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-01 09:40:07 -05:00
parent 71ba633ac5
commit dcc8202efb
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/join.js
+8 -4
View File
@@ -150,10 +150,14 @@
document.documentElement.setAttribute('data-squeeze','1');
var s=document.createElement('section');
s.className='hero wrap';
s.innerHTML='<h1 style="margin-top:10px">'+a.h+'</h1>'+
'<div class="video-card" style="max-width:860px;margin:22px auto 0">'+
'<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div>'+
'<div class="hero-actions" style="margin-top:26px"><a id="hookCta" class="btn btn-primary" style="font-size:19px;padding:16px 34px;font-weight:800" href="'+location.pathname+(new URLSearchParams(location.search).get('direct')==='1'?'?direct=1':'')+'">Show me how it works →</a></div>'+
// Headline, video and button must all sit above the fold: the video is
// sized from the viewport height (nav + headline + button ≈ 360px), and
// the card shrinks to fit it rather than holding the full-page 860px width.
s.style.padding='16px 0 28px';
s.innerHTML='<h1 style="font-size:clamp(30px,4.4vw,54px);letter-spacing:-1.5px;line-height:1.02;margin:0 auto 12px">'+a.h+'</h1>'+
'<div class="video-card" style="width:fit-content;max-width:min(860px,100%);margin:0 auto">'+
'<video id="hookPlayer" class="video-frame" style="display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 360px);min-height:180px;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div>'+
'<div class="hero-actions" style="margin-top:16px"><a id="hookCta" class="btn btn-primary" style="font-size:18px;padding:14px 30px;font-weight:800" href="'+location.pathname+(new URLSearchParams(location.search).get('direct')==='1'?'?direct=1':'')+'">Show me how it works →</a></div>'+
'<div class="micro" style="margin-top:14px">Independent team training resource • Participation involves risk • No income is guaranteed</div>';
main.appendChild(s);
var hp=document.getElementById('hookPlayer'),cta=document.getElementById('hookCta');