feat: update landing page - Studio tier, affiliates page, Mautic contact

- Added Studio tier at $79/mo or $790/yr - Added affiliates.html with 30% commission program - Replaced footer email with Mautic contact form link - Added Affiliates nav link - Added deploy-web.sh for server deployment
2026-03-09 23:44:14 +00:00
parent c9041bde01
commit 7ddebce93b
3 changed files with 931 additions and 0 deletions
--- a/web/affiliates.html
+++ b/web/affiliates.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>BatchTube Affiliate Program — Earn 30% Commission</title>
+<meta name="description" content="Join the BatchTube affiliate program and earn 30% commission on every sale — monthly, annual, and lifetime plans. Managed via ThriveCart." />
+<style>
+:root {
+  --orange: #ff8822;
+  --orange2: #cc5500;
+  --dark: #0f0f0f;
+  --dark2: #1a1a1a;
+  --dark3: #242424;
+  --border: #2e2e2e;
+  --text: #f0f0f0;
+  --text-dim: #aaa;
+  --radius: 10px;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; }
+a { color: var(--orange); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* NAV */
+nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(15,15,15,0.95); backdrop-filter: blur(8px); z-index: 100; }
+.nav-logo { font-size: 22px; font-weight: 800; color: var(--text); }
+.nav-logo span { color: var(--orange); }
+.nav-links { display: flex; gap: 28px; font-size: 14px; }
+.nav-links a { color: var(--text-dim); transition: color 0.2s; }
+.nav-links a:hover, .nav-links a.active { color: var(--text); text-decoration: none; }
+.nav-cta { background: var(--orange); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; transition: background 0.2s; }
+.nav-cta:hover { background: var(--orange2); text-decoration: none; }
+
+/* HERO */
+.aff-hero { text-align: center; padding: 80px 20px 60px; background: linear-gradient(180deg, rgba(255,136,34,0.06) 0%, transparent 100%); }
+.aff-badge { display: inline-block; background: rgba(255,136,34,0.15); border: 1px solid rgba(255,136,34,0.3); color: var(--orange); font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 20px; margin-bottom: 24px; letter-spacing: 1px; text-transform: uppercase; }
+.aff-hero h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; margin-bottom: 20px; line-height: 1.1; }
+.aff-hero h1 span { color: var(--orange); }
+.aff-hero p { font-size: 18px; color: var(--text-dim); max-width: 600px; margin: 0 auto 40px; }
+.btn-primary { display: inline-block; background: var(--orange); color: #fff; padding: 16px 36px; border-radius: 10px; font-size: 16px; font-weight: 700; transition: background 0.2s; }
+.btn-primary:hover { background: var(--orange2); text-decoration: none; }
+.btn-outline { display: inline-block; border: 2px solid var(--border); color: var(--text); padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; margin-left: 12px; }
+.btn-outline:hover { border-color: var(--orange); color: var(--orange); text-decoration: none; }
+
+/* STATS BAR */
+.stats-bar { display: flex; justify-content: center; gap: 60px; padding: 40px 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--dark2); flex-wrap: wrap; }
+.stat-item { text-align: center; }
+.stat-num { font-size: 36px; font-weight: 800; color: var(--orange); }
+.stat-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
+
+/* SECTION */
+.section { max-width: 1100px; margin: 0 auto; padding: 80px 20px; }
+.section-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
+.section-title { font-size: clamp(26px, 3.5vw, 40px); font-weight: 800; margin-bottom: 16px; }
+.section-sub { font-size: 17px; color: var(--text-dim); max-width: 600px; margin-bottom: 48px; }
+
+/* HOW IT WORKS */
+.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
+.step-card { background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
+.step-num { width: 40px; height: 40px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; margin-bottom: 16px; }
+.step-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
+.step-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
+
+/* COMMISSION TABLE */
+.commission-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
+.commission-table th { background: var(--dark3); padding: 14px 20px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); }
+.commission-table td { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 15px; }
+.commission-table tr:hover td { background: rgba(255,136,34,0.03); }
+.commission-table .earn { color: var(--orange); font-weight: 700; font-size: 16px; }
+.commission-table .featured-row td { background: rgba(255,136,34,0.05); }
+
+/* CALCULATOR */
+.calculator { background: var(--dark2); border: 1px solid var(--orange); border-radius: var(--radius); padding: 40px; max-width: 700px; margin: 0 auto; }
+.calculator h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
+.calculator p { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; }
+.calc-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
+.calc-label { font-size: 14px; font-weight: 600; min-width: 160px; }
+.calc-input { background: var(--dark3); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 8px; font-size: 16px; width: 120px; }
+.calc-input:focus { outline: none; border-color: var(--orange); }
+select.calc-input { width: 180px; cursor: pointer; }
+.calc-result { background: linear-gradient(135deg, rgba(255,136,34,0.15), rgba(255,136,34,0.05)); border: 1px solid rgba(255,136,34,0.3); border-radius: var(--radius); padding: 24px 32px; text-align: center; margin-top: 24px; }
+.calc-result .monthly-earn { font-size: 42px; font-weight: 800; color: var(--orange); }
+.calc-result .annual-earn { font-size: 20px; color: var(--text-dim); margin-top: 4px; }
+.calc-result .label { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
+
+/* PAYOUTS */
+.payout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
+.payout-card { background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
+.payout-icon { font-size: 32px; margin-bottom: 12px; }
+.payout-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
+.payout-desc { font-size: 13px; color: var(--text-dim); }
+
+/* CTA */
+.aff-cta { text-align: center; padding: 80px 20px; background: linear-gradient(180deg, transparent, rgba(255,136,34,0.06)); }
+.aff-cta h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin-bottom: 16px; }
+.aff-cta p { font-size: 17px; color: var(--text-dim); max-width: 520px; margin: 0 auto 36px; }
+
+/* FOOTER */
+footer { text-align: center; padding: 40px 20px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 14px; }
+.footer-logo { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
+.footer-logo span { color: var(--orange); }
+
+@media (max-width: 600px) {
+  nav { padding: 14px 20px; }
+  .nav-links { display: none; }
+  .stats-bar { gap: 30px; }
+  .calc-row { flex-direction: column; align-items: flex-start; }
+}
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav>
+  <div class="nav-logo">Batch<span>Tube</span></div>
+  <div class="nav-links">
+    <a href="/#features">Features</a>
+    <a href="/#pricing">Pricing</a>
+    <a href="/affiliates.html" class="active">Affiliates</a>
+    <a href="/#faq">FAQ</a>
+  </div>
+  <a href="https://qmg.thrivecart.com/affiliate/request-access/batchtube/" class="nav-cta" target="_blank">Join Now &rarr;</a>
+</nav>
+
+<!-- HERO -->
+<div class="aff-hero">
+  <div class="aff-badge">&#128176; Affiliate Program</div>
+  <h1>Earn <span>30% Commission</span><br>On Every BatchTube Sale</h1>
+  <p>Monthly subscriptions. Annual plans. Lifetime deals. You refer once — we pay you every renewal. No cap. No expiry.</p>
+  <a href="https://qmg.thrivecart.com/affiliate/request-access/batchtube/" class="btn-primary" target="_blank">Apply to Become an Affiliate &rarr;</a>
+  <a href="#calculator" class="btn-outline">Calculate Your Earnings</a>
+</div>
+
+<!-- STATS BAR -->
+<div class="stats-bar">
+  <div class="stat-item">
+    <div class="stat-num">30%</div>
+    <div class="stat-label">Commission Rate</div>
+  </div>
+  <div class="stat-item">
+    <div class="stat-num">$59</div>
+    <div class="stat-label">Max Per Lifetime Sale</div>
+  </div>
+  <div class="stat-item">
+    <div class="stat-num">30 days</div>
+    <div class="stat-label">Cookie Duration</div>
+  </div>
+  <div class="stat-item">
+    <div class="stat-num">Instant</div>
+    <div class="stat-label">ThriveCart Tracking</div>
+  </div>
+  <div class="stat-item">
+    <div class="stat-num">Monthly</div>
+    <div class="stat-label">Payout Schedule</div>
+  </div>
+</div>
+
+<!-- HOW IT WORKS -->
+<section class="section">
+  <div class="section-label">How It Works</div>
+  <h2 class="section-title">Simple. Transparent. Profitable.</h2>
+  <p class="section-sub">Four steps from signup to your first commission check.</p>
+  <div class="steps-grid">
+    <div class="step-card">
+      <div class="step-num">1</div>
+      <div class="step-title">Apply</div>
+      <div class="step-desc">Submit your affiliate application via ThriveCart. Approval is fast — usually within 24 hours.</div>
+    </div>
+    <div class="step-card">
+      <div class="step-num">2</div>
+      <div class="step-title">Get Your Link</div>
+      <div class="step-desc">Receive your unique tracking link. Share it on YouTube, blogs, newsletters, social media — anywhere your audience lives.</div>
+    </div>
+    <div class="step-card">
+      <div class="step-num">3</div>
+      <div class="step-title">Refer &amp; Earn</div>
+      <div class="step-desc">Every time someone buys through your link, you earn 30% commission. Monthly plans pay every renewal cycle.</div>
+    </div>
+    <div class="step-card">
+      <div class="step-num">4</div>
+      <div class="step-title">Get Paid</div>
+      <div class="step-desc">Commissions paid monthly via PayPal or bank transfer through ThriveCart's affiliate payout system.</div>
+    </div>
+  </div>
+</section>
+
+<!-- COMMISSION TABLE -->
+<section class="section" style="padding-top:0;">
+  <div class="section-label">Commission Breakdown</div>
+  <h2 class="section-title">What You Earn Per Sale</h2>
+  <p class="section-sub">30% on every plan — monthly, annual, and lifetime.</p>
+  <table class="commission-table">
+    <thead>
+      <tr>
+        <th>Plan</th>
+        <th>Price</th>
+        <th>Your Commission</th>
+        <th>Annual Earnings (10 sales/mo)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>Creator Monthly</strong></td>
+        <td>$19/mo</td>
+        <td class="earn">$5.70/mo per customer</td>
+        <td>$684/yr</td>
+      </tr>
+      <tr>
+        <td><strong>Creator Annual</strong></td>
+        <td>$190/yr</td>
+        <td class="earn">$57 per sale</td>
+        <td>$570/yr</td>
+      </tr>
+      <tr class="featured-row">
+        <td><strong>Pro Monthly</strong></td>
+        <td>$39/mo</td>
+        <td class="earn">$11.70/mo per customer</td>
+        <td>$1,404/yr</td>
+      </tr>
+      <tr class="featured-row">
+        <td><strong>Pro Annual</strong></td>
+        <td>$790/yr</td>
+        <td class="earn">$237 per sale</td>
+        <td>$2,370/yr</td>
+      </tr>
+      <tr>
+        <td><strong>Studio Monthly</strong></td>
+        <td>$79/mo</td>
+        <td class="earn">$23.70/mo per customer</td>
+        <td>$2,844/yr</td>
+      </tr>
+      <tr>
+        <td><strong>Studio Annual</strong></td>
+        <td>$790/yr</td>
+        <td class="earn">$237 per sale</td>
+        <td>$2,370/yr</td>
+      </tr>
+      <tr style="border-top: 2px solid var(--orange);">
+        <td><strong>&#128293; Lifetime</strong></td>
+        <td>$197 &ndash; $247</td>
+        <td class="earn">$59.10 &ndash; $74.10 once</td>
+        <td>$591 &ndash; $741 (10 sales)</td>
+      </tr>
+    </tbody>
+  </table>
+  <p style="font-size:13px; color:var(--text-dim);">* Monthly plan commissions recur every billing cycle as long as the customer remains subscribed.</p>
+</section>
+
+<!-- CALCULATOR -->
+<section class="section" id="calculator" style="padding-top:0;">
+  <div class="section-label">Earnings Calculator</div>
+  <h2 class="section-title">How Much Can You Make?</h2>
+  <p class="section-sub">Plug in your numbers. See your potential.</p>
+  <div class="calculator">
+    <h3>&#129518; Commission Calculator</h3>
+    <p>Estimate your monthly and annual affiliate earnings</p>
+    <div class="calc-row">
+      <span class="calc-label">Plan type:</span>
+      <select class="calc-input" id="calc-plan" onchange="calcEarnings()">
+        <option value="19">Creator Monthly ($19/mo)</option>
+        <option value="190" data-type="annual">Creator Annual ($190)</option>
+        <option value="39" selected>Pro Monthly ($39/mo)</option>
+        <option value="790" data-type="annual">Pro Annual ($790)</option>
+        <option value="79">Studio Monthly ($79/mo)</option>
+        <option value="790" data-type="annual">Studio Annual ($790)</option>
+        <option value="197" data-type="lifetime">Lifetime ($197)</option>
+      </select>
+    </div>
+    <div class="calc-row">
+      <span class="calc-label">Referrals per month:</span>
+      <input type="number" class="calc-input" id="calc-refs" value="10" min="1" max="10000" oninput="calcEarnings()" />
+    </div>
+    <div class="calc-result" id="calc-result">
+      <div class="monthly-earn" id="monthly-earn">$117.00</div>
+      <div class="annual-earn" id="annual-earn">$1,404.00 / year</div>
+      <div class="label">Estimated affiliate earnings at 30% commission</div>
+    </div>
+  </div>
+</section>
+
+<!-- PAYOUT INFO -->
+<section class="section" style="padding-top:0;">
+  <div class="section-label">Payouts</div>
+  <h2 class="section-title">Getting Paid Is Easy</h2>
+  <p class="section-sub">ThriveCart handles all tracking, attribution, and payouts automatically.</p>
+  <div class="payout-grid">
+    <div class="payout-card">
+      <div class="payout-icon">&#128197;</div>
+      <div class="payout-title">Monthly Payouts</div>
+      <div class="payout-desc">Commissions paid out monthly. No waiting 90 days.</div>
+    </div>
+    <div class="payout-card">
+      <div class="payout-icon">&#128279;</div>
+      <div class="payout-title">30-Day Cookie</div>
+      <div class="payout-desc">Visitors tracked for 30 days after clicking your link.</div>
+    </div>
+    <div class="payout-card">
+      <div class="payout-icon">&#128202;</div>
+      <div class="payout-title">Real-Time Dashboard</div>
+      <div class="payout-desc">Track clicks, conversions, and earnings live in ThriveCart.</div>
+    </div>
+    <div class="payout-card">
+      <div class="payout-icon">&#128176;</div>
+      <div class="payout-title">Recurring Revenue</div>
+      <div class="payout-desc">Monthly subscribers pay you every single month they stay.</div>
+    </div>
+  </div>
+</section>
+
+<!-- CTA -->
+<div class="aff-cta">
+  <h2>Ready to Start Earning?</h2>
+  <p>Join the BatchTube affiliate program today. Free to join. No approval wait. Start earning 30% on day one.</p>
+  <a href="https://qmg.thrivecart.com/affiliate/request-access/batchtube/" class="btn-primary" target="_blank">Apply Now — It's Free &rarr;</a>
+</div>
+
+<!-- FOOTER -->
+<footer>
+  <div class="footer-logo">Batch<span>Tube</span></div>
+  <p style="margin-bottom:12px;">Built by <a href="https://intentures.org">Intentures LLC</a> &bull; <a href="https://mautic.intentures.org/form/1" target="_blank" rel="noopener">Contact Us</a></p>
+  <p>&copy; 2026 Intentures LLC. All rights reserved.</p>
+</footer>
+
+<script>
+function calcEarnings() {
+  const planSelect = document.getElementById('calc-plan');
+  const refs = parseInt(document.getElementById('calc-refs').value) || 0;
+  const price = parseFloat(planSelect.value);
+  const selectedOption = planSelect.options[planSelect.selectedIndex];
+  const type = selectedOption.getAttribute('data-type') || 'monthly';
+  const commission = price * 0.30;
+
+  let monthlyEarn, annualEarn;
+
+  if (type === 'lifetime') {
+    monthlyEarn = commission * refs;
+    annualEarn = monthlyEarn; // one-time
+    document.getElementById('annual-earn').textContent = 'One-time commissions';
+  } else if (type === 'annual') {
+    monthlyEarn = commission * refs;
+    annualEarn = monthlyEarn; // annual sales per month
+    document.getElementById('annual-earn').textContent = '$' + (annualEarn * 12).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' / year';
+  } else {
+    // monthly recurring
+    monthlyEarn = commission * refs;
+    annualEarn = monthlyEarn * 12;
+    document.getElementById('annual-earn').textContent = '$' + annualEarn.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' / year';
+  }
+
+  document.getElementById('monthly-earn').textContent = '$' + monthlyEarn.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2});
+}
+
+// Init
+calcEarnings();
+</script>
+
+</body>
+</html>