From 8c8935fc15cf8be21b1b0c2a36ca8691b7315825 Mon Sep 17 00:00:00 2001 From: martbost Date: Fri, 4 Sep 2026 13:26:28 -0500 Subject: [PATCH] Landing rebuilt to Marty's picked reference (Behance 243562211) Mint-monochrome discipline on near-black, neon light-trail hero with falling streaks, glowing icon plates (custom SVG, no emoji), ledger mockup flanked by feature items, isometric network illustration, capsule nav, pricing tiles, ghost wordmark footer. Topo-contour ground texture. Co-Authored-By: Claude Fable 5 --- public/assets/common.js | 2 +- public/assets/home.js | 25 ++-- public/assets/site.css | 266 +++++++++++++++++++++++------------- public/index.html | 294 ++++++++++++++++++++++++++++------------ 4 files changed, 396 insertions(+), 191 deletions(-) diff --git a/public/assets/common.js b/public/assets/common.js index 3b0b4c9..63c87c1 100644 --- a/public/assets/common.js +++ b/public/assets/common.js @@ -42,7 +42,7 @@ window.IAP = (function () { document.body.prepend(b); } const a = nav.querySelector('[data-p="' + active + '"]'); - if (a) a.style.color = 'var(--ink)'; + if (a) a.className = 'active'; refreshNavWallet(); } async function refreshNavWallet() { diff --git a/public/assets/home.js b/public/assets/home.js index ad65e59..efbfe82 100644 --- a/public/assets/home.js +++ b/public/assets/home.js @@ -13,20 +13,23 @@ async function loadLadder() { const { products } = await (await fetch('/api/catalog')).json(); - const tb = document.querySelector('#ladder tbody'); - tb.innerHTML = ''; + const wrap = document.getElementById('tiles'); + wrap.innerHTML = ''; const NAMES = { 1: 'Micro', 2: 'Activation', 3: 'Builder', 4: 'Growth', 5: 'Leader' }; for (const p of products) { - const tr = document.createElement('tr'); - tr.innerHTML = '' + (NAMES[p.id] || 'Package ' + p.id) + '' - + '' + IAP.fmtUsd(p.priceCents) + '' - + '' + p.creditAmount.toLocaleString() + '' - + '' + (p.costWei ? IAP.fmtPol(p.costWei) + ' POL' : 'paused') + '' - + ''; - tb.appendChild(tr); + const bonus = p.creditAmount - p.priceCents; // credits above 1cr/cent = bulk bonus + const div = document.createElement('div'); + div.className = 'tile' + (p.priceCents === 5000 ? ' hot' : ''); + div.innerHTML = '
' + (NAMES[p.id] || 'Package ' + p.id) + '
' + + '
$' + Math.round(p.priceCents / 100) + '
' + + '
' + p.creditAmount.toLocaleString() + ' credits
' + + '
' + (bonus > 0 ? '+' + bonus.toLocaleString() + ' bonus credits' : ' ') + '
' + + '
' + (p.costWei ? IAP.fmtPol(p.costWei) + ' POL right now' : 'paused') + '
' + + ''; + wrap.appendChild(div); } - tb.querySelectorAll('button[data-id]').forEach(b => b.addEventListener('click', () => buyPack(b))); + wrap.querySelectorAll('button[data-id]').forEach(b => b.addEventListener('click', () => buyPack(b))); } async function buyPack(btn) { try { diff --git a/public/assets/site.css b/public/assets/site.css index f41eb59..d08080f 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -1,131 +1,215 @@ -/* InstantAdPay visual system v2 — "commercial ad-network polish x DeFi flash". - Refs: Adsterra/PropellerAds (dual-audience hero, real-number counters, - format showcase) x DeFi landing patterns (aurora glows, glass cards, - bento grids, ticker heartbeat). Dark luxe ground; mint = money in motion; - amber gradient = action. Display face: Sora. */ +/* InstantAdPay visual system v4 — built to Marty's picked reference + (Behance 243562211 "ChainLock"): near-black ground, ONE neon-mint accent, + sweeping light-trail hero, glowing icon plates, mockup-anchored sections, + ghost wordmark footer. Discipline over decoration. */ :root{ - --ground:#070b16; --panel:rgba(19,28,48,.66); --panel-solid:#131c30; - --line:rgba(126,144,186,.16); --line-strong:rgba(126,144,186,.32); - --ink:#eef2fb; --muted:#8b9ab5; - --mint:#3de8a8; --mint-dim:#1c5b44; --mint-soft:rgba(61,232,168,.1); - --amber:#ffb238; --amber2:#ff7a45; --amber-ink:#160f04; - --violet:#8b6cf6; --cyan:#5cc8ee; --bad:#ff8f7d; + --ground:#040807; --ground2:#071009; + --panel:rgba(16,28,24,.55); --panel-solid:#0b1512; + --line:rgba(84,150,128,.16); --line-strong:rgba(84,150,128,.36); + --ink:#eef7f3; --muted:#8ba69c; + --mint:#43e8c3; --mint-hi:#8ffbe3; --mint-ink:#03211a; + --mint-soft:rgba(67,232,195,.09); --bad:#ff8f7d; --mono:"Consolas","JetBrains Mono",monospace; --disp:"Sora","Segoe UI",system-ui,sans-serif; - --radius:16px; + --radius:18px; } *{box-sizing:border-box} -body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,sans-serif;overflow-x:hidden} -/* aurora ground: two blurred glow fields, fixed behind everything */ -body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; - background: - radial-gradient(560px 420px at 82% -6%, rgba(139,108,246,.22), transparent 65%), - radial-gradient(640px 460px at -8% 34%, rgba(61,232,168,.13), transparent 65%), - radial-gradient(520px 420px at 58% 108%, rgba(255,122,69,.10), transparent 65%);} +html{scroll-behavior:smooth} +body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.65 "Segoe UI",system-ui,sans-serif;overflow-x:hidden} +/* topo-contour ground texture, very faint */ +body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; + background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2343e8c3' stroke-opacity='.05'%3E%3Cpath d='M60 280c40-90 160-130 220-90s60 150 160 150 120-90 120-90'/%3E%3Cpath d='M40 340c60-110 190-160 260-110s60 170 180 170'/%3E%3Cpath d='M20 400c80-130 220-190 300-130s60 190 200 190'/%3E%3Cpath d='M80 220c30-70 130-100 180-70s50 120 130 120 100-70 100-70'/%3E%3C/g%3E%3C/svg%3E")} a{color:var(--mint);text-decoration:none} a:hover{text-decoration:underline} -.wrap{max-width:1060px;margin:0 auto;padding:0 20px} -h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em} -/* nav */ -nav{border-bottom:1px solid var(--line);background:rgba(7,11,22,.72);backdrop-filter:blur(14px); - -webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:10} -nav .wrap{display:flex;align-items:center;gap:22px;min-height:62px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} +.wrap{max-width:1100px;margin:0 auto;padding:0 22px} +h1,h2,h3{font-family:var(--disp);letter-spacing:-.015em} +/* ── nav: capsule pill ─────────────────────────────── */ +nav{position:sticky;top:0;z-index:10;background:rgba(4,8,7,.7);backdrop-filter:blur(16px); + -webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} +nav .wrap{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px} .logo{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--ink)} -.logo b{background:linear-gradient(100deg,var(--amber),var(--amber2));-webkit-background-clip:text;background-clip:text;color:transparent} -nav .links{display:flex;gap:20px;font-size:14.5px;flex:1;flex-wrap:wrap} -nav a{color:var(--muted)} -nav a:hover{color:var(--ink);text-decoration:none} -#navWallet{font-size:13.5px} -.rehearsal{background:linear-gradient(90deg,#2c2150,#1c3050);color:#c9b8f7;text-align:center;font-size:13px;padding:7px 12px} -.rehearsal b{color:#eadfff} -/* buttons */ -.btn{display:inline-block;background:linear-gradient(100deg,var(--amber),var(--amber2));color:var(--amber-ink); - border:0;border-radius:999px;padding:13px 26px;font-weight:800;font-size:15.5px;cursor:pointer;font-family:var(--disp); - box-shadow:0 6px 24px rgba(255,150,60,.28);transition:transform .15s ease,box-shadow .15s ease} -.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,150,60,.4);text-decoration:none} -.btn.sec{background:transparent;color:var(--mint);border:1.5px solid var(--mint);box-shadow:none} -.btn.sec:hover{box-shadow:0 6px 22px rgba(61,232,168,.22)} -.btn.small{padding:8px 16px;font-size:13.5px} +.logo b{color:var(--mint)} +nav .links{display:flex;gap:4px;flex:1;flex-wrap:wrap;background:rgba(16,28,24,.7);border:1px solid var(--line); + border-radius:999px;padding:5px 8px;width:fit-content;flex:0 1 auto;margin:0 auto} +nav .links a{color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px} +nav .links a:hover{color:var(--ink);text-decoration:none} +nav .links a.active{color:var(--mint);background:rgba(67,232,195,.1)} +#navWallet{font-size:13px;margin-left:auto} +.rehearsal{background:rgba(67,232,195,.07);border-bottom:1px solid var(--line);color:var(--muted); + text-align:center;font-size:12.5px;padding:7px 12px} +.rehearsal b{color:var(--mint)} +/* ── buttons ───────────────────────────────────────── */ +.btn{display:inline-block;background:var(--mint);color:var(--mint-ink);border:0;border-radius:999px; + padding:13px 26px;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--disp); + box-shadow:0 4px 30px rgba(67,232,195,.35);transition:transform .16s ease,box-shadow .16s ease,background .16s ease} +.btn:hover{transform:translateY(-2px);background:var(--mint-hi);box-shadow:0 8px 44px rgba(67,232,195,.5);text-decoration:none} +.btn.sec{background:transparent;color:var(--mint);border:1px solid rgba(67,232,195,.6);box-shadow:none} +.btn.sec:hover{background:rgba(67,232,195,.08);box-shadow:0 4px 26px rgba(67,232,195,.2)} +.btn.small{padding:8px 17px;font-size:13px} .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} -/* hero */ -.hero{padding:76px 0 40px} -.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin:0 0 14px} -.hero h1{font-size:clamp(32px,5.6vw,58px);font-weight:800;line-height:1.06;margin:0 0 18px;max-width:720px;text-wrap:balance} -.hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--mint),var(--cyan) 55%,var(--violet)); - -webkit-background-clip:text;background-clip:text;color:transparent} -.hero p.lead{color:var(--muted);font-size:19px;max-width:600px;margin:0 0 30px} +/* ── hero: centered, light-trail set-piece ─────────── */ +.hero{position:relative;text-align:center;padding:120px 0 84px;overflow:visible} +.hero h1{font-size:clamp(36px,5.4vw,62px);font-weight:700;line-height:1.08;margin:0 auto 18px;max-width:820px;text-wrap:balance} +.hero h1 em{font-style:normal;color:var(--mint)} +.hero p.lead{color:var(--muted);font-size:17.5px;max-width:600px;margin:0 auto 32px} .hero p.lead b{color:var(--ink)} -/* live counter band — real chain numbers only */ -.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:38px 0 8px} +.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} +/* neon arcs behind the hero text */ +.arcs{position:absolute;inset:-40px 0 0 0;z-index:-1;pointer-events:none} +.arcs svg{width:100%;height:100%;overflow:visible} +.arc{fill:none;stroke:url(#arcGrad);stroke-width:5;stroke-linecap:round;filter:url(#arcGlow)} +.arc2{fill:none;stroke:url(#arcGrad);stroke-width:3;stroke-linecap:round;filter:url(#arcGlow);opacity:.8} +/* falling glow streaks */ +.streak{position:absolute;top:-140px;width:1.5px;height:110px;pointer-events:none; + background:linear-gradient(180deg,transparent,rgba(143,251,227,.8));border-radius:2px;opacity:0} +@media(prefers-reduced-motion:no-preference){ + .streak{animation:fall 7s linear infinite} + @keyframes fall{0%{transform:translateY(0);opacity:0}12%{opacity:.7}55%{opacity:.5}75%{transform:translateY(72vh);opacity:0}100%{transform:translateY(72vh);opacity:0}} +} +/* ── counters ──────────────────────────────────────── */ +.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:60px auto 0;max-width:900px} @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}} -.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px; - backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} -.stat .n{font-family:var(--disp);font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mint)} -.stat .l{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px} -.stat .sub{font-size:11.5px;color:var(--muted)} -/* cards / grids */ -.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 16px; - backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} -.card:hover{border-color:var(--line-strong)} -.grid{display:grid;gap:16px} -@media(min-width:760px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}} -h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:52px 0 16px;text-wrap:balance} -h3{font-size:17px;margin:0 0 8px;font-weight:700} +.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 12px;text-align:center} +.stat .n{font-family:var(--disp);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--mint)} +.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:3px} +/* ── sections ──────────────────────────────────────── */ +section{padding:64px 0 8px} +.sectionhead{text-align:center;max-width:640px;margin:0 auto 40px} +h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;margin:0 0 12px;text-wrap:balance} +.sectionhead p{color:var(--muted);font-size:15.5px;margin:0} +h3{font-size:16.5px;margin:0 0 8px;font-weight:700} .muted{color:var(--muted)} .small{font-size:13.5px} .mono{font-family:var(--mono)} -/* ticker: live money marquee */ +/* icon-plate feature cards */ +.plates{display:grid;gap:16px;grid-template-columns:1fr} +@media(min-width:760px){.plates{grid-template-columns:1fr 1fr 1fr}} +.platecard{background:linear-gradient(170deg,rgba(22,38,32,.6),rgba(10,18,15,.7));border:1px solid var(--line); + border-radius:var(--radius);padding:26px 22px;text-align:center;transition:border-color .2s ease,transform .2s ease} +.platecard:hover{border-color:var(--line-strong);transform:translateY(-4px)} +.plate{width:88px;height:88px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center; + background:linear-gradient(160deg,#12241e,#0a1411);border:1px solid var(--line-strong); + box-shadow:0 0 34px rgba(67,232,195,.15),inset 0 1px 0 rgba(143,251,227,.15)} +.plate svg{width:38px;height:38px;stroke:var(--mint);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} +.platecard p{color:var(--muted);font-size:14px;margin:0} +/* two-col flank layout (icons around a central mockup) */ +.flank{display:grid;gap:26px;align-items:center;grid-template-columns:1fr} +@media(min-width:920px){.flank{grid-template-columns:1fr 1.15fr 1fr}} +.flankitem{margin:0 0 26px} +.flankitem .plate{width:52px;height:52px;border-radius:14px;margin:0 0 12px} +.flankitem .plate svg{width:24px;height:24px} +.flankitem p{color:var(--muted);font-size:13.5px;margin:0} +/* ledger mockup frame */ +.mockup{background:linear-gradient(170deg,#0e1c17,#080f0c);border:1px solid var(--line-strong);border-radius:20px; + box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(67,232,195,.08);overflow:hidden} +.mockup .bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)} +.mockup .bar i{width:9px;height:9px;border-radius:50%;background:#1e3a31;display:inline-block} +.mockup .bar .addr{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;background:rgba(4,8,7,.6); + border-radius:999px;padding:3px 12px} +.mockup .body{padding:6px 0} +.mockup .mrow{display:flex;justify-content:space-between;gap:10px;padding:9px 16px;font-family:var(--mono); + font-size:12px;border-bottom:1px solid rgba(84,150,128,.08)} +.mockup .mrow span:last-child{color:var(--mint)} +.mockup .mrow.dim span:last-child{color:var(--muted)} +/* 2-col story block: iso illustration + checklist */ +.story{display:grid;gap:36px;align-items:center;grid-template-columns:1fr} +@media(min-width:880px){.story{grid-template-columns:1fr 1fr}} +.checks{list-style:none;padding:0;margin:14px 0 0} +.checks li{padding:7px 0 7px 30px;position:relative;color:var(--muted);font-size:14.5px} +.checks li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%; + background:var(--mint-soft);color:var(--mint);font-size:12px;font-weight:700;display:grid;place-items:center; + border:1px solid rgba(67,232,195,.35)} +.chips{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap} +.chip-t{border:1px solid var(--line-strong);border-radius:999px;padding:5px 16px;font-size:12.5px;color:var(--muted);font-family:var(--disp);font-weight:600} +.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)} +.iso{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))} +/* pricing tiles: mint discipline */ +.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));align-items:stretch} +.tile{position:relative;background:linear-gradient(170deg,rgba(22,38,32,.55),rgba(10,18,15,.65));border:1px solid var(--line); + border-radius:var(--radius);padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:6px; + transition:transform .2s ease,border-color .2s ease} +.tile:hover{transform:translateY(-5px);border-color:var(--line-strong)} +.tile .name{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em} +.tile .price{font-family:var(--disp);font-size:36px;font-weight:700} +.tile .cr{color:var(--mint);font-weight:700;font-size:14.5px} +.tile .bonus{font-size:12px;color:var(--mint-hi)} +.tile .pol{font-family:var(--mono);font-size:12px;color:var(--muted);flex:1} +.tile.hot{border:1px solid rgba(67,232,195,.65);box-shadow:0 0 44px rgba(67,232,195,.14)} +.tile.hot::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%); + background:var(--mint);color:var(--mint-ink);font-family:var(--disp);font-size:10px;font-weight:800; + letter-spacing:.12em;border-radius:999px;padding:4px 14px} +/* split strip: mint opacities */ +.split{display:flex;gap:8px;margin:18px 0} +.split div{border-radius:12px;padding:16px 6px;text-align:center;font-size:13px;font-weight:700;font-family:var(--disp); + border:1px solid var(--line-strong);color:var(--mint)} +.split .s50{flex:5;background:rgba(67,232,195,.16);box-shadow:0 0 30px rgba(67,232,195,.12)} +.split .s20{flex:2;background:rgba(67,232,195,.09)} +.split .s10{flex:1;background:rgba(67,232,195,.05)} +.split .sa{flex:2;background:rgba(139,166,156,.08);color:var(--muted)} +/* ticker */ .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); - background:rgba(61,232,168,.05);white-space:nowrap;padding:9px 0;margin:26px 0 0} -.ticker .inner{display:inline-block;font-family:var(--mono);font-size:13px;color:var(--mint);padding-left:100%; - animation:tick 40s linear infinite} -.ticker .inner span{margin-right:44px;color:var(--muted)} + background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0; + -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); + mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} +.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 42s linear infinite} +.ticker .inner span{margin-right:48px;color:var(--muted)} .ticker .inner span b{color:var(--mint);font-weight:600} @keyframes tick{to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){.ticker .inner{animation:none;padding-left:0}} -/* ladder table */ +/* cards / tables / feed (inner pages) */ +.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 16px} +.card:hover{border-color:var(--line-strong)} +.grid{display:grid;gap:16px} +@media(min-width:760px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}} table{width:100%;border-collapse:collapse;font-size:15px} th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle} th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--disp)} td.num,th.num{font-variant-numeric:tabular-nums} tr:last-child td{border-bottom:0} .tablewrap{overflow-x:auto} -/* ledger feed */ .feed{font-family:var(--mono);font-size:13.5px;line-height:1.7} -.feed .row{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} +.feed .row{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .feed .row:first-child{background:var(--mint-soft)} -.feed .t-Purchase{color:var(--amber)} +.feed .t-Purchase,.feed .t-AwardPaid{color:var(--mint-hi)} .feed .t-TierPaid{color:var(--mint)} .feed .t-AdminPaid{color:var(--muted)} -.feed .t-AwardPaid{color:var(--amber)} .feed .tx a{color:var(--muted);font-size:12px} -.badge{display:inline-block;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(61,232,168,.3); - border-radius:999px;padding:2px 12px;font-size:12.5px;font-weight:700} -.badge.amber{background:rgba(255,178,56,.1);border-color:rgba(255,178,56,.35);color:var(--amber)} -/* split strip */ -.split{display:flex;gap:8px;margin:16px 0} -.split div{border-radius:10px;padding:13px 6px;text-align:center;font-size:12.5px;font-weight:700;font-family:var(--disp)} -.split .s50{flex:5;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(61,232,168,.3); - box-shadow:0 0 24px rgba(61,232,168,.12)} -.split .s20{flex:2;background:rgba(92,200,238,.09);color:var(--cyan);border:1px solid rgba(92,200,238,.3)} -.split .s10{flex:1;background:rgba(139,108,246,.1);color:var(--violet);border:1px solid rgba(139,108,246,.3)} -.split .sa{flex:2;background:rgba(255,178,56,.08);color:var(--amber);border:1px solid rgba(255,178,56,.28)} -/* FAQ accordions */ -details{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;background:var(--panel)} -summary{cursor:pointer;padding:14px 18px;font-weight:700;font-family:var(--disp);font-size:15px} -details p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:14.5px} -/* status toast */ +.badge{display:inline-block;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(67,232,195,.35); + border-radius:999px;padding:3px 13px;font-size:12px;font-weight:700} +.badge.amber{background:rgba(139,166,156,.1);border-color:rgba(139,166,156,.4);color:var(--muted)} +/* faq */ +details{border:1px solid var(--line);border-radius:14px;margin:0 0 10px;background:var(--panel)} +details[open]{border-color:rgba(67,232,195,.45)} +summary{cursor:pointer;padding:16px 20px;font-weight:700;font-family:var(--disp);font-size:15px;list-style:none} +summary::before{content:"+";color:var(--mint);font-weight:800;margin-right:12px} +details[open] summary::before{content:"−"} +details p{margin:0;padding:0 20px 18px 42px;color:var(--muted);font-size:14.5px} +/* closing cta card */ +.closer{position:relative;display:grid;gap:26px;align-items:center;grid-template-columns:1fr; + padding:44px 36px;border-radius:24px;overflow:hidden;margin:80px 0 0; + background:linear-gradient(160deg,#0d1d17,#060c0a);border:1px solid var(--line-strong)} +@media(min-width:880px){.closer{grid-template-columns:1.2fr .8fr}} +.closer::before{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-260px;border-radius:50%; + background:radial-gradient(circle,rgba(67,232,195,.2),transparent 65%);pointer-events:none} +.closer h2{margin:0 0 12px} +/* footer + ghost wordmark */ +footer{border-top:1px solid var(--line);margin-top:90px;padding:34px 0 0;color:var(--muted);font-size:13.5px;overflow:hidden} +.ghost{font-family:var(--disp);font-weight:800;font-size:clamp(64px,13vw,170px);line-height:.9;text-align:center; + margin:34px 0 -20px;letter-spacing:-.02em;user-select:none; + background:linear-gradient(180deg,rgba(67,232,195,.14),transparent 78%); + -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap} +/* misc */ #status{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--panel-solid); border:1px solid var(--line-strong);border-radius:14px;padding:13px 22px;font-size:14px;max-width:90vw;z-index:30; box-shadow:0 12px 40px rgba(0,0,0,.55)} #status.ok{border-color:var(--mint)} #status.bad{border-color:var(--bad)} -footer{border-top:1px solid var(--line);margin-top:70px;padding:30px 0;color:var(--muted);font-size:13.5px} -input,select{background:rgba(7,11,22,.6);border:1px solid var(--line-strong);color:var(--ink);border-radius:10px; +input,select{background:rgba(4,8,7,.65);border:1px solid var(--line-strong);color:var(--ink);border-radius:11px; padding:11px 14px;font-size:14.5px;font-family:inherit} input:focus,select:focus{border-color:var(--mint)} :focus-visible{outline:2px solid var(--mint);outline-offset:2px} +.hero-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:26px} @media(prefers-reduced-motion:no-preference){ .feed .row:first-child{animation:landed .9s ease} - @keyframes landed{from{background:rgba(61,232,168,.28)}to{background:var(--mint-soft)}} + @keyframes landed{from{background:rgba(67,232,195,.3)}to{background:var(--mint-soft)}} } diff --git a/public/index.html b/public/index.html index 158a30e..89c7e8d 100644 --- a/public/index.html +++ b/public/index.html @@ -8,101 +8,207 @@ -
-
-

Advertising · settled on-chain · instantly

-

Advertise and earn. Locked in code, not promises.

+ +
+
+ +
+ + + + + + +
+

Advertise and earn.
Locked in code, not promises.

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 your own wallet before the page even refreshes.

-

+

Join free Watch payments land live -

- - +
+
–
On-chain members
–
Packages bought
-
–
POL settled through
-
–
Instant payouts delivered
+
–
POL settled
+
–
Instant payouts
-

Every number above comes from the blockchain, not a marketing database. - Click any line on the live ledger to verify it yourself.

-
-
+

every number above is read from the blockchain, not a marketing database

+ + -
-

Where every dollar goes

-
-
+
+
+
+

Instant payments without compromise

+

Most referral programs run on a database someone can change after you promote. + This one runs on Polygon, split by a contract nobody can touch. Not even us.

+
+
+
+
+

Paid in the same transaction

+

The purchase and every payout are one blockchain event. No balances held, no withdrawal + button, no company touching the money.

+
+
+
+

Rules that cannot move

+

50-20-10 across three levels plus a 20 percent platform fee, written as constants in an + immutable contract. There is no function to change them.

+
+
+
+

Verifiable by anyone

+

Every payment streams to a public ledger with a verify link straight to the block explorer. + If it is not there, it did not happen.

+
+
+
+
+ +
+
+
+

Watch the money move

+

This is a live view, not a brochure. Real purchases split into real payouts, + each one a click away from the raw transaction.

+
+
+
+
+
+

Buy a package

+

Priced in dollars, settled in POL at the live oracle rate. Overpayment refunds itself in the same transaction.

+
+
+
+

The contract splits it

+

Half to the direct sponsor, then levels 2 and 3, then the platform. Automatically, immediately, every time.

+
+
+
+
instantadpay.com/ledger
+
+
🧾 member #7 bought package #2 ($20.00)−213 POL
+
💸 level 1 payout → member #3+106.5 POL
+
💸 level 2 payout → member #2+42.6 POL
+
💸 level 3 payout → member #1+21.3 POL
+
🏛 platform fee settled42.6 POL
+
⭐ member #3 now has 2 qualifying buyerslevel 2 ✓
+
+
+
+
+
+

Straight to their wallets

+

Recipients get POL in their own wallets within seconds. Nothing to claim, nothing to request.

+
+
+
+

Credits mint on-chain

+

One credit is one cent of ad delivery across the network. Only your campaigns can ever spend them.

+
+
+
+

Amounts shown are the $20 worked example at the current oracle rate. Open the real ledger →

+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Earn deeper as your people buy

+

Levels unlock by performance, never by payment. Refer buyers, and their + shares of every future purchase route to you automatically.

+
Level 1: openLevel 2: 2 buyersLevel 3: 5 buyers
+
    +
  • 50 percent of every package your direct referrals ever buy
    • +
  • 2 buyers of $20 or more unlock your 20 percent second level
    • +
  • 5 buyers unlock your 10 percent third level
    • +
  • Unqualified shares visibly pass up to the next qualified person
    • +
  • Qualification never expires and can never be bought
    • +
+
+
+
+
+ +
+
+
+

The ad packages

+

Priced in dollars, settled in POL at the moment you buy. Packages of $20 or more + count toward your sponsor's qualification.

+
+
Loading live prices from the contract…
+
50%
direct sponsor
20%
level 2
10%
level 3
20%
platform
-

Most referral programs run on a database someone can change after you promote. - This one runs on Polygon. The percentages are written into a contract nobody can touch, not even us. - Payouts split 50-20-10 across three levels plus a 20 percent platform fee, every single time, on a - public ledger where every payment has a verify link you can click.

+
-
-

🆓 Join free. Earn from every package your referrals ever buy.

-

Sign up costs nothing. Zero. Every ad package your direct referrals buy for life - pays you 50 percent straight to your wallet. Level 2 pays 20 percent. Level 3 pays 10 percent. - No balances held, no withdrawal button, no company touching the money.

-

📣 Real ads. Real audience. Credits on-chain.

-

Your ad credits are minted on-chain when you buy. One credit equals one cent of - ad delivery across our network of sites. Banner, text, and login ads that only your campaigns - can spend.

-

🔎 Qualify by performance. Pass-ups fill the gaps.

-

Level 2 unlocks when you bring 2 buyers who have purchased 20 dollars or more. - Level 3 unlocks at 5 qualified buyers. If someone in your line is not qualified, their share passes - up to the next qualified person automatically. The contract handles it.

-
- -

The ad packages

-
-
- - - -
PackagePriceAd creditsCost right now
Loading live prices from the contract…
+
+
+
+

Questions people actually ask

-

Prices are set in dollars and settled in POL at the live exchange rate the - moment you buy (Chainlink oracle). Overpayment from rate movement is refunded in the same transaction. - Packages of $20 or more count toward your sponsor's qualification.

-
- -

What your credits buy

-
-

Display banners

All standard sizes, served across the network. Per impression.

live
-

Text ads

Headline plus one line, placed where members actually look. Per impression.

live
-

Login ads

Full attention at sign-in, priced per day.

live
-

Inbox ads

Delivered on-site, and viewers earn credits for reading.

shipping soon
-

Featured rotation

Your link in the featured rotation for 1, 2, or 7 days. We show you exactly how many links share it before you buy.

shipping soon
-

Verified visits

Buy a guaranteed count of verified unique visits. No bots, no recycled clicks.

shipping soon
-
- -

Why this is different

-
-

No trust required. Your earnings are a transaction to your wallet.

-

Every other platform asks you to trust their ledger. Believe their numbers. - Wait for their withdrawal window. InstantAdPay does none of that. The smart contract pays each level - at the moment of purchase. Your earnings are a blockchain transaction landing in your own wallet. - You can verify every single one on the live ledger with your own eyes.

-

It is an ad service. That is the only thing it is.

-

This is an advertising platform with a referral program. Plain and simple. - You buy ad credits. You get ads delivered. You refer other advertisers and earn from what they spend. - There is no investment pool, no ROI claim, no income promise. What the code guarantees is what the - code does: split the money and pay it out. That is it.

-
- -

Questions people actually ask

-
Is this a pyramid or ponzi scheme?

No, and here is the plain version of why. A pyramid scheme pays you just for recruiting, with no real product behind it. Here every payment is for ad delivery, and the payouts only come from real @@ -126,21 +232,33 @@ The 5 dollar package mints 500 credits, and the bigger packages mint bonus credits on top, up to 32,500 on the 250 dollar package. That is the product, plain and simple. Your earnings come from referring people who also buy real ad delivery, and the contract splits every purchase automatically.

-
-
-

See a payment land before you decide.

-

The ledger is open to everyone. - Watch real purchases split and settle, then join free when you have seen enough.

- Join free - Open the live ledger -
+
+
+

See a payment land before you decide.

+

The ledger is open to everyone. Watch real purchases + split and settle, then join free when you have seen enough.

+ Join free + Open the live ledger +
+
+
live · polygon
+
+
💸 payout → member #3instant
+
💸 payout → member #2instant
+
🔍 verify on explorer↗
+
+
+
+ +
+
InstantAdPay · every payment verifiable on-chain · live ledger · view the contract ↗
+
Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.
+ +
+
+ -
-
InstantAdPay · every payment verifiable on-chain · live ledger · view the contract ↗
-
Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.
-
-