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

Add scan-to-join QR code under the hero CTA

Browse Source 
Self-hosted SVG QR (CSP-safe) pointing at /start?utm_source=qr, so
scanned visits appear as their own "qr" source row in admin analytics.
Sits between the CTA and "See the Strategy" on mobile for the
show-your-phone recruiting flow; centered below the buttons on desktop.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-13 14:38:59 -05:00
parent 481423368b
commit 5a916bf12d
3 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<body> <body>
<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small id="brandProgram">RM Circle Premium</small></span></div><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="#strategy">How it works</a><a class="btn btn-secondary" href="/training">Training</a><a class="btn btn-primary" href="/start">Get Started</a></div></header> <header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small id="brandProgram">RM Circle Premium</small></span></div><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="#strategy">How it works</a><a class="btn btn-secondary" href="/training">Training</a><a class="btn btn-primary" href="/start">Get Started</a></div></header>
<main> <main>
<section class="hero wrap"><div class="eyebrow">Premium • Polygon • Team Duplication</div><h1 id="bridgeHeadline"><span class="gold">Get Your 2.</span><br>Help Your 2 Get Their 2.</h1><p id="bridgeSubheadline">A team-first strategy built around qualification, depth, and duplication.</p><div class="hero-actions"><a class="btn btn-primary" href="/start">Show Me the Current Team Placement →</a><a class="btn btn-secondary" href="#strategy">See the Strategy</a></div><div class="micro">Independent team training resource • Participation involves risk • No income is guaranteed</div> <section class="hero wrap"><div class="eyebrow">Premium • Polygon • Team Duplication</div><h1 id="bridgeHeadline"><span class="gold">Get Your 2.</span><br>Help Your 2 Get Their 2.</h1><p id="bridgeSubheadline">A team-first strategy built around qualification, depth, and duplication.</p><div class="hero-actions"><a class="btn btn-primary" href="/start">Show Me the Current Team Placement →</a><div class="qr-cta"><img src="/qr-start.svg" width="106" height="106" alt="QR code — scan to open the getting-started page with the current team sponsor"><span>Scan to get started<br><small>opens the current team placement</small></span></div><a class="btn btn-secondary" href="#strategy">See the Strategy</a></div><div class="micro">Independent team training resource • Participation involves risk • No income is guaranteed</div>
<figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section> <figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section>
<section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card" style="max-width:880px;margin:0 auto"><iframe class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" width="880" height="495" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section> <section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card" style="max-width:880px;margin:0 auto"><iframe class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" width="880" height="495" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section>
<section id="strategy" class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">The strategy</div><h2>Simple enough to duplicate.</h2><p>The goal is not endless personal recruiting. Each position gets two directs, retires that referral link, then helps the next two positions repeat the process.</p></div><div class="grid-3"><article class="card"><div class="card-icon">2</div><h3>Get exactly two</h3><p>Use your position's link until two direct positions are placed beneath you and your position is qualified.</p></article><article class="card"><div class="card-icon">↘</div><h3>Move the effort down</h3><p>Retire the qualified link. Help each of your two directs use their links until they each have two.</p></article><article class="card"><div class="card-icon">↑</div><h3>Upgrade responsibly</h3><p>Use earned POL to advance when practical. Active builders may also choose to self-fund, but only within their own risk tolerance.</p></article></div></div></section> <section id="strategy" class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">The strategy</div><h2>Simple enough to duplicate.</h2><p>The goal is not endless personal recruiting. Each position gets two directs, retires that referral link, then helps the next two positions repeat the process.</p></div><div class="grid-3"><article class="card"><div class="card-icon">2</div><h3>Get exactly two</h3><p>Use your position's link until two direct positions are placed beneath you and your position is qualified.</p></article><article class="card"><div class="card-icon">↘</div><h3>Move the effort down</h3><p>Retire the qualified link. Help each of your two directs use their links until they each have two.</p></article><article class="card"><div class="card-icon">↑</div><h3>Upgrade responsibly</h3><p>Use earned POL to advance when practical. Active builders may also choose to self-fund, but only within their own risk tolerance.</p></article></div></div></section>
public/qr-start.svg
+2
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

public/styles.css
+8
View File
@@ -106,3 +106,11 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
.q-no{background:rgba(174,189,202,.08);color:var(--muted);border:1px solid #33506a} .q-no{background:rgba(174,189,202,.08);color:var(--muted);border:1px solid #33506a}
.mtp-card{position:relative} .mtp-card{position:relative}
.mtp-qmark{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f7d173);color:#152033;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4)} .mtp-qmark{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f7d173);color:#152033;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* Hero QR — between the buttons on mobile (show-your-phone flow), tucked after them on desktop */
.qr-cta{display:flex;align-items:center;gap:12px;text-align:left}
.qr-cta img{background:#fff;padding:7px;border-radius:12px;display:block;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.qr-cta span{font-size:13px;font-weight:800;line-height:1.45}
.qr-cta small{color:var(--muted);font-weight:600}
@media(min-width:561px){.hero-actions{align-items:center}.qr-cta{order:3;flex-basis:100%;justify-content:center;margin-top:8px}}
@media(max-width:560px){.qr-cta{justify-content:center}}