marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Instantly headline, ad-product sections, animated level cycler

Browse Source 
Hero now reads Advertise and earn instantly. New Branded Voice sections:
ad-format showcase (3 live, 3 soon) and free-vs-package member benefits.
The earn-deeper diagram cycles levels 1-3, lighting the paying generation
with its percent; chips are clickable, auto-advance respects reduced
motion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-04 13:35:43 -05:00
parent 8c8935fc15
commit 7bb1a78ca3
3 changed files with 144 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+107 -22
View File
@@ -35,7 +35,7 @@
<span class="streak" style="left:72%;animation-delay:3.4s"></span>
<span class="streak" style="left:86%;animation-delay:5.6s"></span>
<div class="wrap">
<h1>Advertise and earn.<br><em>Locked in code, not promises.</em></h1>
<h1>Advertise and earn instantly.<br><em>Locked in code, not promises.</em></h1>
<p class="lead">Buy real ad packages from 5 to 250 dollars. Every purchase settles through
a smart contract you can read yourself, and your earnings land in
<b>your own wallet</b> before the page even refreshes.</p>
@@ -138,7 +138,7 @@
<div class="wrap">
<div class="story">
<div>
<svg class="iso" viewBox="0 0 360 300" role="img" aria-label="Network of members connected to the settlement contract">
<svg class="iso" id="genViz" data-lvl="1" viewBox="0 0 360 320" role="img" aria-label="Your position at the top of a three-generation network; each level lights up the generation that pays you">
<defs>
<linearGradient id="cubeTop" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#43e8c3"/><stop offset="1" stop-color="#1c7c65"/>
@@ -148,25 +148,34 @@
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<g stroke="#1e4438" stroke-width="1.4" fill="none">
<path d="M180 150 L80 200 M180 150 L280 200 M180 150 L120 90 M180 150 L250 85 M80 200 L60 250 M80 200 L140 245 M280 200 L230 250 M280 200 L310 250"/>
</g>
<g class="edge e1"><path d="M180 92 L120 138 M180 92 L240 138" fill="none" stroke-width="1.6"/></g>
<g class="edge e2"><path d="M120 152 L75 205 M120 152 L150 205 M240 152 L210 205 M240 152 L285 205" fill="none" stroke-width="1.4"/></g>
<g class="edge e3"><path d="M75 219 L45 272 M75 219 L95 272 M150 219 L130 272 M150 219 L170 272 M210 219 L195 272 M210 219 L232 272 M285 219 L268 272 M285 219 L315 272" fill="none" stroke-width="1.2"/></g>
<g filter="url(#softGlow)">
<path d="M180 110 L215 130 L180 150 L145 130 Z" fill="url(#cubeTop)"/>
<path d="M145 130 L180 150 L180 190 L145 168 Z" fill="#0f4437"/>
<path d="M215 130 L180 150 L180 190 L215 168 Z" fill="#16604c"/>
<path d="M180 38 L212 56 L180 74 L148 56 Z" fill="url(#cubeTop)"/>
<path d="M148 56 L180 74 L180 110 L148 90 Z" fill="#0f4437"/>
<path d="M212 56 L180 74 L180 110 L212 90 Z" fill="#16604c"/>
</g>
<g fill="#0d2a22" stroke="#2e8a71" stroke-width="1.3">
<circle cx="120" cy="90" r="10"/><circle cx="250" cy="85" r="10"/>
<circle cx="80" cy="200" r="10"/><circle cx="280" cy="200" r="10"/>
<circle cx="60" cy="250" r="8"/><circle cx="140" cy="245" r="8"/>
<circle cx="230" cy="250" r="8"/><circle cx="310" cy="250" r="8"/>
<text id="vizPct" x="236" y="66" font-size="26" font-weight="700" fill="#43e8c3" font-family="Sora,sans-serif">50%</text>
<g class="gen g1">
<circle class="node-o" cx="120" cy="145" r="11"/><circle class="node-d" cx="120" cy="145" r="3.4"/>
<circle class="node-o" cx="240" cy="145" r="11"/><circle class="node-d" cx="240" cy="145" r="3.4"/>
</g>
<g fill="#43e8c3">
<circle cx="120" cy="90" r="3"/><circle cx="250" cy="85" r="3"/>
<circle cx="80" cy="200" r="3"/><circle cx="280" cy="200" r="3"/>
<circle cx="60" cy="250" r="2.4"/><circle cx="140" cy="245" r="2.4"/>
<circle cx="230" cy="250" r="2.4"/><circle cx="310" cy="250" r="2.4"/>
<g class="gen g2">
<circle class="node-o" cx="75" cy="212" r="9"/><circle class="node-d" cx="75" cy="212" r="2.8"/>
<circle class="node-o" cx="150" cy="212" r="9"/><circle class="node-d" cx="150" cy="212" r="2.8"/>
<circle class="node-o" cx="210" cy="212" r="9"/><circle class="node-d" cx="210" cy="212" r="2.8"/>
<circle class="node-o" cx="285" cy="212" r="9"/><circle class="node-d" cx="285" cy="212" r="2.8"/>
</g>
<g class="gen g3">
<circle class="node-o" cx="45" cy="280" r="7.5"/><circle class="node-d" cx="45" cy="280" r="2.3"/>
<circle class="node-o" cx="95" cy="280" r="7.5"/><circle class="node-d" cx="95" cy="280" r="2.3"/>
<circle class="node-o" cx="130" cy="280" r="7.5"/><circle class="node-d" cx="130" cy="280" r="2.3"/>
<circle class="node-o" cx="170" cy="280" r="7.5"/><circle class="node-d" cx="170" cy="280" r="2.3"/>
<circle class="node-o" cx="195" cy="280" r="7.5"/><circle class="node-d" cx="195" cy="280" r="2.3"/>
<circle class="node-o" cx="232" cy="280" r="7.5"/><circle class="node-d" cx="232" cy="280" r="2.3"/>
<circle class="node-o" cx="268" cy="280" r="7.5"/><circle class="node-d" cx="268" cy="280" r="2.3"/>
<circle class="node-o" cx="315" cy="280" r="7.5"/><circle class="node-d" cx="315" cy="280" r="2.3"/>
</g>
</svg>
</div>
@@ -174,11 +183,14 @@
<h2>Earn deeper as your people buy</h2>
<p class="muted">Levels unlock by performance, never by payment. Refer buyers, and their
shares of every future purchase route to you automatically.</p>
<div class="chips"><span class="chip-t on">Level 1: open</span><span class="chip-t">Level 2: 2 buyers</span><span class="chip-t">Level 3: 5 buyers</span></div>
<div class="chips">
<button class="chip-t on" data-lvl="1" type="button">Level 1: open</button>
<button class="chip-t" data-lvl="2" type="button">Level 2: 2 buyers</button>
<button class="chip-t" data-lvl="3" type="button">Level 3: 5 buyers</button>
</div>
<p class="muted" id="lvlDesc" style="min-height:72px">Level 1 is open to every member: your direct
referrals each pay you 50 percent of every package they ever buy, straight to your wallet.</p>
<ul class="checks">
<li>50 percent of every package your direct referrals ever buy</li>
<li>2 buyers of $20 or more unlock your 20 percent second level</li>
<li>5 buyers unlock your 10 percent third level</li>
<li>Unqualified shares visibly pass up to the next qualified person</li>
<li>Qualification never expires and can never be bought</li>
</ul>
@@ -187,6 +199,79 @@
</div>
</section>
<section>
<div class="wrap">
<div class="sectionhead">
<h2>Real ad inventory. Real eyeballs.</h2>
<p>This is not phantom traffic or empty impressions. The core formats run right now,
reaching members who are themselves marketers buying traffic.</p>
</div>
<div class="plates">
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M7 21h10M12 17v4"/></svg></div>
<h3>Display banners <span class="badge">live</span></h3>
<p>All standard sizes, live across our network, priced per impression. You pay for views, not guesses.</p>
</div>
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h9"/></svg></div>
<h3>Text ads <span class="badge">live</span></h3>
<p>A headline plus a support line, placed where members actually look. Also per impression, also live right now.</p>
</div>
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/><rect x="3" y="3" width="18" height="18" rx="3"/></svg></div>
<h3>Login ads <span class="badge">live</span></h3>
<p>Full attention at sign-in, priced per day. The member is already engaged before they do anything else.</p>
</div>
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><path d="M3 7l9 6 9-6"/><rect x="3" y="5" width="18" height="14" rx="2"/></svg></div>
<h3>Inbox ads <span class="badge amber">soon</span></h3>
<p>Delivered on-site, where members earn credits just for reading them.</p>
</div>
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="4.5"/></svg></div>
<h3>Featured rotation <span class="badge amber">soon</span></h3>
<p>Your link runs for 1, 2 or 7 days, and we show exactly how many links share the rotation before you buy.
The only rotator that tells you the dilution up front, because hiding it is a sucker move.</p>
</div>
<div class="platecard">
<div class="plate"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div>
<h3>Verified visits <span class="badge amber">soon</span></h3>
<p>A guaranteed count of verified unique human visits. No bots, no recycled clicks, just real visits you can count on.</p>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="sectionhead">
<h2>What you get as a member</h2>
<p>Free membership gets you in the door with a working account and the ability to earn
from day one. Buy any package and the real firepower unlocks.</p>
</div>
<div class="grid c2">
<div class="card">
<h3>Free membership includes</h3>
<ul class="checks">
<li>A member account and the live ledger</li>
<li>Your personal referral link, once payouts are switched on</li>
<li>Earnings from day one on your referrals' package purchases</li>
<li>Access to the member dashboard</li>
</ul>
</div>
<div class="card">
<h3>Any package adds</h3>
<ul class="checks">
<li>On-chain ad credits minted the moment you buy</li>
<li>Campaign manager with live stats per campaign</li>
<li>Real delivery numbers you can track</li>
<li>Packages of $20 or more count toward qualification</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="sectionhead">