feat: HypeRocket affiliate bridge page
This commit is contained in:
+906
@@ -0,0 +1,906 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>HypeRocket — Earn Up to 0.5% Daily with AI-Powered DeFi</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #060B14;
|
||||||
|
--bg2: #0A1220;
|
||||||
|
--bg3: #0E1928;
|
||||||
|
--cyan: #00E5FF;
|
||||||
|
--cyan-dim: rgba(0,229,255,0.15);
|
||||||
|
--cyan-glow: rgba(0,229,255,0.35);
|
||||||
|
--gold: #FFB800;
|
||||||
|
--gold-dim: rgba(255,184,0,0.15);
|
||||||
|
--text: #E8EDF5;
|
||||||
|
--muted: #7A8CA0;
|
||||||
|
--border: rgba(0,229,255,0.12);
|
||||||
|
--card-bg: rgba(10,18,32,0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Stars background ─── */
|
||||||
|
.stars {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.star {
|
||||||
|
position: absolute;
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: twinkle var(--dur, 4s) infinite ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 0; transform: scale(0.8); }
|
||||||
|
50% { opacity: var(--max-op, 0.6); transform: scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── NAV ─── */
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 40px;
|
||||||
|
background: rgba(6,11,20,0.85);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.nav-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--cyan);
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.nav-logo span { font-size: 1.4rem; }
|
||||||
|
.nav-cta {
|
||||||
|
background: var(--cyan);
|
||||||
|
color: #060B14;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 10px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.2s, transform 0.2s;
|
||||||
|
}
|
||||||
|
.nav-cta:hover {
|
||||||
|
box-shadow: 0 0 24px var(--cyan-glow);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── HERO ─── */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 24px 60px;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -200px; left: 50%; transform: translateX(-50%);
|
||||||
|
width: 800px; height: 800px;
|
||||||
|
background: radial-gradient(ellipse at center, rgba(0,229,255,0.08) 0%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: var(--cyan-dim);
|
||||||
|
border: 1px solid rgba(0,229,255,0.3);
|
||||||
|
border-radius: 100px;
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--cyan);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.hero-badge::before { content: '⚡'; }
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2.4rem, 6vw, 4.2rem);
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
max-width: 820px;
|
||||||
|
}
|
||||||
|
.hero h1 em {
|
||||||
|
font-style: normal;
|
||||||
|
background: linear-gradient(90deg, var(--cyan), var(--gold));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-sub {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
||||||
|
color: var(--muted);
|
||||||
|
max-width: 600px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── CTA Button ─── */
|
||||||
|
.btn-primary {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background: linear-gradient(135deg, var(--cyan) 0%, #00B8CC 100%);
|
||||||
|
color: #060B14;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 18px 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
animation: pulse-btn 2.5s ease-in-out infinite;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-3px) scale(1.02);
|
||||||
|
animation: none;
|
||||||
|
box-shadow: 0 0 40px rgba(0,229,255,0.5), 0 16px 40px rgba(0,229,255,0.25);
|
||||||
|
}
|
||||||
|
.btn-primary .arrow { transition: transform 0.2s; }
|
||||||
|
.btn-primary:hover .arrow { transform: translateX(4px); }
|
||||||
|
|
||||||
|
@keyframes pulse-btn {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.4), 0 8px 24px rgba(0,229,255,0.2); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(0,229,255,0.65), 0 12px 32px rgba(0,229,255,0.35); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Stat badges ─── */
|
||||||
|
.stat-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.stat-badge {
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.stat-badge .val {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--cyan);
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.stat-badge .lbl {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Scroll indicator ─── */
|
||||||
|
.scroll-hint {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
animation: bounce 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.scroll-hint svg { width: 16px; opacity: 0.5; }
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||||||
|
50% { transform: translateX(-50%) translateY(6px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── SECTIONS ─── */
|
||||||
|
section { position: relative; z-index: 1; }
|
||||||
|
.section-inner {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 80px 24px;
|
||||||
|
}
|
||||||
|
.section-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--cyan);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.section-sub {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: var(--muted);
|
||||||
|
max-width: 580px;
|
||||||
|
margin-bottom: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── HOW IT WORKS ─── */
|
||||||
|
.how-bg { background: var(--bg2); }
|
||||||
|
.steps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
.step-card {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px 28px;
|
||||||
|
position: relative;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
.step-card:hover {
|
||||||
|
border-color: var(--cyan);
|
||||||
|
box-shadow: 0 0 24px rgba(0,229,255,0.1);
|
||||||
|
}
|
||||||
|
.step-num {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--cyan-dim);
|
||||||
|
border: 2px solid rgba(0,229,255,0.15);
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 64px; height: 64px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: monospace;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.step-card h3 {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.step-card p {
|
||||||
|
font-size: 0.92rem;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── WHY HYPERLIQUID ─── */
|
||||||
|
.why-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.why-card {
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 28px 24px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.why-card:hover { border-color: rgba(255,184,0,0.3); }
|
||||||
|
.why-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.why-card h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
.why-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── AFFILIATE ─── */
|
||||||
|
.aff-bg { background: var(--bg2); }
|
||||||
|
.aff-hero {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.aff-tier-table {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.aff-tier-table table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.aff-tier-table thead th {
|
||||||
|
background: rgba(0,229,255,0.08);
|
||||||
|
color: var(--cyan);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 14px 20px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.aff-tier-table tbody td {
|
||||||
|
padding: 14px 20px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
border-bottom: 1px solid rgba(0,229,255,0.06);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.aff-tier-table tbody tr:last-child td { border-bottom: none; }
|
||||||
|
.aff-tier-table tbody tr:hover { background: rgba(0,229,255,0.04); }
|
||||||
|
.badge-gold {
|
||||||
|
background: var(--gold-dim);
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 1px solid rgba(255,184,0,0.3);
|
||||||
|
}
|
||||||
|
.aff-text h3 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.aff-text p {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.aff-points { list-style: none; padding: 0; }
|
||||||
|
.aff-points li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.aff-points li::before {
|
||||||
|
content: '✓';
|
||||||
|
color: var(--cyan);
|
||||||
|
font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── CALCULATOR ─── */
|
||||||
|
.calc-wrap {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.calc-box {
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
.calc-input-group {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.calc-input-group label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.calc-input-group label span.val-display {
|
||||||
|
color: var(--cyan);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
background: rgba(0,229,255,0.15);
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 20px; height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--cyan);
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 0 8px rgba(0,229,255,0.5);
|
||||||
|
}
|
||||||
|
.calc-mode {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.calc-mode button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.calc-mode button.active {
|
||||||
|
background: var(--cyan-dim);
|
||||||
|
border-color: var(--cyan);
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
.calc-results {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.result-box {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.result-box .r-lbl {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.result-box .r-val {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--cyan);
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.result-box .r-pct {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--gold);
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── FINAL CTA ─── */
|
||||||
|
.final-cta {
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 24px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.final-cta::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -100px; left: 50%; transform: translateX(-50%);
|
||||||
|
width: 700px; height: 700px;
|
||||||
|
background: radial-gradient(ellipse at center, rgba(0,229,255,0.07) 0%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.final-cta h2 {
|
||||||
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.08;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.final-cta p {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
max-width: 520px;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
}
|
||||||
|
.rocket-big {
|
||||||
|
font-size: 4rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(-5deg); }
|
||||||
|
50% { transform: translateY(-12px) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── FOOTER ─── */
|
||||||
|
footer {
|
||||||
|
background: var(--bg2);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative; z-index: 1;
|
||||||
|
}
|
||||||
|
footer .footer-logo {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--cyan);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
footer .disclaimer {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--muted);
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Divider ─── */
|
||||||
|
.divider {
|
||||||
|
width: 60px; height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--cyan), transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Responsive ─── */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
nav { padding: 14px 20px; }
|
||||||
|
.section-inner { padding: 60px 20px; }
|
||||||
|
.aff-hero { grid-template-columns: 1fr; gap: 40px; }
|
||||||
|
.calc-results { grid-template-columns: 1fr; }
|
||||||
|
.stat-badges { gap: 10px; }
|
||||||
|
.stat-badge .val { font-size: 1.25rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Stars -->
|
||||||
|
<div class="stars" id="stars"></div>
|
||||||
|
|
||||||
|
<!-- NAV -->
|
||||||
|
<nav>
|
||||||
|
<a class="nav-logo" href="https://hyperocket.io/?ref=cryptoteambuild" target="_blank" rel="noopener">
|
||||||
|
<span>🚀</span> HypeRocket
|
||||||
|
</a>
|
||||||
|
<a class="nav-cta" href="https://hyperocket.io/?ref=cryptoteambuild" target="_blank" rel="noopener">Start Earning →</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-badge">AI-Powered DeFi Investment</div>
|
||||||
|
<h1>Earn Up to <em>0.5% Daily</em><br/>with AI-Driven Crypto</h1>
|
||||||
|
<p class="hero-sub">HypeRocket's algorithm trades $HYPE on Hyperliquid — the leading decentralized perpetual exchange — generating consistent daily returns for depositors.</p>
|
||||||
|
<a class="btn-primary" href="https://hyperocket.io/?ref=cryptoteambuild" target="_blank" rel="noopener">
|
||||||
|
Start Earning Today <span class="arrow">→</span>
|
||||||
|
</a>
|
||||||
|
<div class="stat-badges">
|
||||||
|
<div class="stat-badge">
|
||||||
|
<span class="val">$50</span>
|
||||||
|
<span class="lbl">Minimum Deposit</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-badge">
|
||||||
|
<span class="val">0.5%</span>
|
||||||
|
<span class="lbl">Daily Returns</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-badge">
|
||||||
|
<span class="val">AI</span>
|
||||||
|
<span class="lbl">Algo Trading</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-badge">
|
||||||
|
<span class="val">15</span>
|
||||||
|
<span class="lbl">Affiliate Levels</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-hint">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
Scroll to explore
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW IT WORKS -->
|
||||||
|
<section class="how-bg">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label">How It Works</div>
|
||||||
|
<h2 class="section-title">Three steps to passive returns</h2>
|
||||||
|
<p class="section-sub">No trading experience required. HypeRocket's AI does the heavy lifting.</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="step-num">01</div>
|
||||||
|
<h3>Deposit USDT or USDC</h3>
|
||||||
|
<p>Connect your wallet and deposit stablecoins starting from just $50. No lockup periods that require you to chase withdrawals — funds stay in the decentralized protocol.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="step-num">02</div>
|
||||||
|
<h3>AI Algorithm Trades $HYPE</h3>
|
||||||
|
<p>HypeRocket's proprietary algorithm analyzes Hyperliquid market data in real-time, executing precision trades on $HYPE — the native token of the leading decentralized perpetuals exchange.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="step-num">03</div>
|
||||||
|
<h3>Daily Returns Hit Your Account</h3>
|
||||||
|
<p>Watch up to 0.5% accumulate in your dashboard daily. Compound your earnings or withdraw — the choice is yours. No manual input required once you're set up.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- WHY HYPERLIQUID -->
|
||||||
|
<section>
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label">The Edge</div>
|
||||||
|
<h2 class="section-title">Why $HYPE is different</h2>
|
||||||
|
<p class="section-sub">Not all crypto tokens are created equal. Hyperliquid's tokenomics create a structural advantage that even bears can't break.</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="why-grid">
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">📊</div>
|
||||||
|
<h3>Earns in Any Market</h3>
|
||||||
|
<p>Unlike most crypto, exchange tokens like $HYPE earn trading fees even when prices fall. In volatile markets, activity increases — often generating <em>more revenue</em> than during bull runs.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">🔄</div>
|
||||||
|
<h3>97% Buyback Mechanism</h3>
|
||||||
|
<p>97% of exchange revenue is used to buy back and burn $HYPE, creating constant structural buy pressure. This unique mechanism supports the token value and feeds the algorithm's edge.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">🏆</div>
|
||||||
|
<h3>Dominant DEX by Volume</h3>
|
||||||
|
<p>Hyperliquid is the leading decentralized perpetual exchange. Dominant market position means higher fee volume, more data for the AI, and a more resilient strategy foundation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">🤖</div>
|
||||||
|
<h3>Real-Time AI Execution</h3>
|
||||||
|
<p>The algorithm processes live market data continuously, executing trades with machine precision. No emotion, no fatigue, no missed signals — pure systematic trading at scale.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">🔐</div>
|
||||||
|
<h3>Decentralized Protocol</h3>
|
||||||
|
<p>Built on-chain. HypeRocket operates as a decentralized investment platform — you maintain custody of your strategy position, not a centralized exchange.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card">
|
||||||
|
<div class="why-icon">💧</div>
|
||||||
|
<h3>Stablecoin Entry</h3>
|
||||||
|
<p>Deposit in USDT or USDC — no need to speculate on volatile assets just to get started. Your entry is measured in dollars, not tokens, keeping the math simple and predictable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- AFFILIATE -->
|
||||||
|
<section class="aff-bg">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label">Affiliate Program</div>
|
||||||
|
<h2 class="section-title">Earn while you share</h2>
|
||||||
|
<p class="section-sub">HypeRocket's 15-level unilevel compensation plan rewards you for building a network — with commissions on every deposit your entire downline makes.</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="aff-hero">
|
||||||
|
<div class="aff-tier-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Deposit Tier</th>
|
||||||
|
<th>Levels Unlocked</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>$50+</td>
|
||||||
|
<td>Level 1</td>
|
||||||
|
<td><span class="badge-gold">Starter</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>$200+</td>
|
||||||
|
<td>3 Levels</td>
|
||||||
|
<td><span class="badge-gold">Builder</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>$500+</td>
|
||||||
|
<td>5 Levels</td>
|
||||||
|
<td><span class="badge-gold">Pro</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>$1,000+</td>
|
||||||
|
<td>8 Levels</td>
|
||||||
|
<td><span class="badge-gold">Advanced</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>$2,500+</td>
|
||||||
|
<td>12 Levels</td>
|
||||||
|
<td><span class="badge-gold">Elite</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>$5,000+</td>
|
||||||
|
<td>All 15 Levels</td>
|
||||||
|
<td><span class="badge-gold" style="background:rgba(0,229,255,0.15);color:var(--cyan);border-color:rgba(0,229,255,0.4)">Max</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="aff-text">
|
||||||
|
<h3>A network that compounds like your returns</h3>
|
||||||
|
<p>The HypeRocket unilevel pays 11% total across all active levels. The more you deposit, the deeper your commissions reach.</p>
|
||||||
|
<ul class="aff-points">
|
||||||
|
<li>Earn on every deposit your direct referrals make</li>
|
||||||
|
<li>Extend commissions down through 15 levels of your network</li>
|
||||||
|
<li>No forced matrix structure — pure unilevel simplicity</li>
|
||||||
|
<li>Commissions paid on your entire downline's deposits</li>
|
||||||
|
<li>Upgrade your deposit anytime to unlock more levels</li>
|
||||||
|
</ul>
|
||||||
|
<br/>
|
||||||
|
<a class="btn-primary" style="font-size:0.95rem; padding:14px 32px;" href="https://hyperocket.io/?ref=cryptoteambuild" target="_blank" rel="noopener">
|
||||||
|
Join with My Link <span class="arrow">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CALCULATOR -->
|
||||||
|
<section>
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label">Returns Calculator</div>
|
||||||
|
<h2 class="section-title" style="text-align:center">What could you earn?</h2>
|
||||||
|
<p class="section-sub" style="margin:0 auto 40px; text-align:center">Explore potential returns at HypeRocket's up-to 0.5% daily rate. Results are projections based on maximum stated returns.</p>
|
||||||
|
<div class="calc-wrap">
|
||||||
|
<div class="calc-box">
|
||||||
|
<div class="calc-input-group">
|
||||||
|
<label>
|
||||||
|
Deposit Amount
|
||||||
|
<span class="val-display" id="depositDisplay">$1,000</span>
|
||||||
|
</label>
|
||||||
|
<input type="range" id="depositSlider" min="50" max="10000" step="50" value="1000" />
|
||||||
|
</div>
|
||||||
|
<div class="calc-mode">
|
||||||
|
<button class="active" id="btnSimple" onclick="setMode('simple')">Simple Returns</button>
|
||||||
|
<button id="btnCompound" onclick="setMode('compound')">Compound (Daily)</button>
|
||||||
|
</div>
|
||||||
|
<div class="calc-results">
|
||||||
|
<div class="result-box">
|
||||||
|
<div class="r-lbl">Daily</div>
|
||||||
|
<div class="r-val" id="rDaily">$5.00</div>
|
||||||
|
<div class="r-pct">0.5% / day</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-box">
|
||||||
|
<div class="r-lbl">30 Days</div>
|
||||||
|
<div class="r-val" id="rMonthly">$150.00</div>
|
||||||
|
<div class="r-pct" id="pMonthly">15% total</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-box">
|
||||||
|
<div class="r-lbl">365 Days</div>
|
||||||
|
<div class="r-val" id="rYearly">$1,825.00</div>
|
||||||
|
<div class="r-pct" id="pYearly">182.5% total</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style="font-size:0.75rem;color:var(--muted);margin-top:20px;text-align:center">
|
||||||
|
Projections based on 0.5% daily rate. Past performance does not guarantee future results. Crypto investments carry risk.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FINAL CTA -->
|
||||||
|
<section class="final-cta">
|
||||||
|
<span class="rocket-big">🚀</span>
|
||||||
|
<h2>Ready to launch<br/><em style="background:linear-gradient(90deg,var(--cyan),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal">your earnings?</em></h2>
|
||||||
|
<p>Join HypeRocket today. Deposit stablecoins, let the AI work, and earn up to 0.5% daily — starting with just $50.</p>
|
||||||
|
<a class="btn-primary" style="font-size:1.15rem; padding:20px 52px;" href="https://hyperocket.io/?ref=cryptoteambuild" target="_blank" rel="noopener">
|
||||||
|
🚀 Start Earning Today <span class="arrow">→</span>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer>
|
||||||
|
<span class="footer-logo">🚀 HypeRocket</span>
|
||||||
|
<p class="disclaimer">
|
||||||
|
HypeRocket is a decentralized investment platform utilizing AI-driven trading strategies on the Hyperliquid blockchain. This page contains affiliate links — if you register via this link, we may earn a commission at no extra cost to you. This is not financial advice. Cryptocurrency investments carry significant risk and you may lose some or all of your investment. Only invest what you can afford to lose. Returns of up to 0.5% daily are stated maximums and are not guaranteed.
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ── Stars
|
||||||
|
const starsEl = document.getElementById('stars');
|
||||||
|
for (let i = 0; i < 140; i++) {
|
||||||
|
const s = document.createElement('div');
|
||||||
|
s.className = 'star';
|
||||||
|
s.style.cssText = `
|
||||||
|
left:${Math.random()*100}%;
|
||||||
|
top:${Math.random()*100}%;
|
||||||
|
--dur:${3 + Math.random()*5}s;
|
||||||
|
--max-op:${0.3 + Math.random()*0.5};
|
||||||
|
animation-delay:${Math.random()*6}s;
|
||||||
|
width:${1 + Math.random()*2}px;
|
||||||
|
height:${1 + Math.random()*2}px;
|
||||||
|
`;
|
||||||
|
starsEl.appendChild(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Calculator
|
||||||
|
let calcMode = 'simple';
|
||||||
|
const slider = document.getElementById('depositSlider');
|
||||||
|
const fmt = v => v >= 1000 ? `$${(v/1000).toFixed(v%1000===0?0:1)}k` : `$${v.toLocaleString()}`;
|
||||||
|
const fmtFull = v => '$' + v.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2});
|
||||||
|
|
||||||
|
function setMode(m) {
|
||||||
|
calcMode = m;
|
||||||
|
document.getElementById('btnSimple').classList.toggle('active', m==='simple');
|
||||||
|
document.getElementById('btnCompound').classList.toggle('active', m==='compound');
|
||||||
|
calc();
|
||||||
|
}
|
||||||
|
|
||||||
|
function calc() {
|
||||||
|
const dep = parseFloat(slider.value);
|
||||||
|
document.getElementById('depositDisplay').textContent = fmtFull(dep);
|
||||||
|
const rate = 0.005;
|
||||||
|
const daily = dep * rate;
|
||||||
|
|
||||||
|
let monthly, yearly;
|
||||||
|
if (calcMode === 'simple') {
|
||||||
|
monthly = dep * rate * 30;
|
||||||
|
yearly = dep * rate * 365;
|
||||||
|
document.getElementById('pMonthly').textContent = '15% total';
|
||||||
|
document.getElementById('pYearly').textContent = '182.5% total';
|
||||||
|
} else {
|
||||||
|
monthly = dep * Math.pow(1 + rate, 30) - dep;
|
||||||
|
yearly = dep * Math.pow(1 + rate, 365) - dep;
|
||||||
|
document.getElementById('pMonthly').textContent = `${((monthly/dep)*100).toFixed(1)}% total`;
|
||||||
|
document.getElementById('pYearly').textContent = `${((yearly/dep)*100).toFixed(0)}% total`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('rDaily').textContent = fmtFull(daily);
|
||||||
|
document.getElementById('rMonthly').textContent = fmtFull(monthly);
|
||||||
|
document.getElementById('rYearly').textContent = fmtFull(yearly);
|
||||||
|
}
|
||||||
|
|
||||||
|
slider.addEventListener('input', calc);
|
||||||
|
calc();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user