File size: 6,789 Bytes
484d45a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoStream Sales Machine</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-12">
<section class="bg-white rounded-xl shadow-lg p-8 mb-12">
<h1 class="text-4xl font-bold text-center mb-6">24/7 Automated Livestream Sales System</h1>
<p class="text-xl text-center text-gray-600 mb-8">Set up your faceless automated sales machine in under 2 hours</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-lg">
<i data-feather="clock" class="w-12 h-12 text-blue-500 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">Step 1: Softr Setup</h3>
<p class="text-gray-600">Create your product catalog using our Softr template</p>
<a href="#" class="text-blue-500 hover:text-blue-700 mt-4 inline-block">Get Template</a>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<i data-feather="zap" class="w-12 h-12 text-blue-500 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">Step 2: Make.com</h3>
<p class="text-gray-600">Import our pre-built automation scenarios</p>
<a href="#" class="text-blue-500 hover:text-blue-700 mt-4 inline-block">Download Blueprints</a>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<i data-feather="film" class="w-12 h-12 text-blue-500 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">Step 3: HeyGen</h3>
<p class="text-gray-600">Create your AI presenter videos</p>
<a href="#" class="text-blue-500 hover:text-blue-700 mt-4 inline-block">Tutorial</a>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-lg p-8 mb-12">
<h2 class="text-3xl font-bold mb-6">Complete System Blueprint</h2>
<div class="space-y-6">
<div class="border-l-4 border-blue-500 pl-4">
<h3 class="text-xl font-semibold">Make.com Automation Scenarios</h3>
<p class="text-gray-600 mt-2">Pre-built JSON blueprints for your automations:</p>
<div class="mt-4 p-4 bg-gray-50 rounded-lg">
<pre class="text-sm overflow-x-auto">{
"scenario": "livestream_automation",
"steps": [
{
"module": "restream",
"action": "schedule_stream",
"params": {
"title": "{{product.name}} - Limited Offer!",
"description": "Watch our AI presenter explain {{product.name}}",
"start_time": "auto_rotate"
}
},
{
"module": "lemon_squeezy",
"action": "create_webhook",
"params": {
"url": "https://yourdomain.com/webhook",
"events": ["order_created"]
}
}
]
}</pre>
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">Download All Scenarios</button>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<h3 class="text-xl font-semibold">Scarcity Counter Formula</h3>
<p class="text-gray-600 mt-2">JavaScript code for dynamic countdowns:</p>
<div class="mt-4 p-4 bg-gray-50 rounded-lg">
<pre class="text-sm overflow-x-auto">function startCountdown(endTime) {
const timer = setInterval(() => {
const now = new Date().getTime();
const distance = endTime - now;
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML =
`${hours}h ${minutes}m ${seconds}s`;
if (distance < 0) {
clearInterval(timer);
document.getElementById("countdown").innerHTML = "OFFER EXPIRED";
}
}, 1000);
}</pre>
</div>
</div>
</div>
</section>
<section class="bg-blue-50 rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold mb-6">Quick Start Resources</h2>
<ul class="space-y-4">
<li class="flex items-start">
<i data-feather="link" class="w-5 h-5 mt-1 mr-3 text-blue-500"></i>
<div>
<h3 class="font-semibold">Softr Template</h3>
<p class="text-gray-600">https://softr.io/templates/autostream-sales</p>
</div>
</li>
<li class="flex items-start">
<i data-feather="link" class="w-5 h-5 mt-1 mr-3 text-blue-500"></i>
<div>
<h3 class="font-semibold">Make.com Blueprints</h3>
<p class="text-gray-600">https://make.com/blueprints/autostream</p>
</div>
</li>
<li class="flex items-start">
<i data-feather="link" class="w-5 h-5 mt-1 mr-3 text-blue-500"></i>
<div>
<h3 class="font-semibold">Restream Scheduling Trick</h3>
<p class="text-gray-600">https://restream.io/blog/auto-rotation</p>
</div>
</li>
<li class="flex items-start">
<i data-feather="link" class="w-5 h-5 mt-1 mr-3 text-blue-500"></i>
<div>
<h3 class="font-semibold">Lemon Squeezy Webhook URL</h3>
<p class="text-gray-600">https://api.lemonsqueezy.com/webhooks</p>
</div>
</li>
</ul>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |