These should be the main sections block in the middle of the page.
Browse filesEach section shoud be a like the exmaple in the photo.
Here are each module section name. Each Module will have a drop down to show and play the training video in each sub section.
Here is the list of the main modules with each sub section. Then each subsection
Getting Started
Import and engage with all your contacts instantly Video
Import your existing contacts from various platforms and start engaging with them immediately. Bring all your audience into one place and kickstart your outreach.
Watch Video
Generate New Leads with a High-Converting Funnel Video
Set up a high-converting funnel and form to capture leads efficiently. Optimize your lead generation and grow your customer base.
Watch Video
Set Up Multi-Channel Communication & Start Engaging in Minutes Video
Connect your email, SMS, and phone services in minutes and start multi-channel communication. Improve your response rates and customer engagement quickly.
Watch Video
Launch Your First Campaign to Drive Engagement Video
Design and send your first email campaign to engage over 1,000 contacts. Promote your services, stay top of mind, and drive conversions with targeted emails.
Watch Video
Nurture Leads with Automated Drip Campaigns Video
Set up automated email and SMS drip campaigns to nurture 100+ leads over time. Increase conversion rates by following up consistently without manual intervention.
Watch Video
Book More Appointments with Automated Scheduling Video
Set up your calendar for automatic appointment bookings. Secure 20 appointments in the first week, with 25% fewer no-shows through automated reminders.
Watch Video
Accelerate Deal Closures with a Streamlined Sales PipelineVideo
Organize your sales pipeline to track every lead's progress. Automate follow-ups and close deals faster, ensuring no opportunity is missed.
Watch Video
Marketing & Lead Generation
Manage All Your Social Media Posts in One PlaceVideo
Set up the social planner to schedule and manage all your social media posts. Maintain a consistent presence across platforms like Facebook, Instagram, and more.
Watch Video
Capture New Leads with Facebook & Instagram Lead AdsVideo
Connect your Facebook and Instagram channels to manage lead generation ads. Capture high-quality leads directly from social media.
Watch Video
Reach Customers with Your First SMS CampaignVideo
Design and launch an SMS campaign to instantly reach your audience. Engage customers directly with personalised messages.
Sales & Conversation
Seamlessly Manage Your Sales ConversationsVideo
Sync your Gmail or Outlook inbox to track all customer conversations in one place. Never miss a follow-up with integrated email management.
Watch Video
Engage Website Visitors in Real Time with Live ChatVideo
Add live chat to your website to provide instant support and engage visitors in real time. Convert visitors into leads by offering immediate assistance.
Watch Video
Streamline Facebook & Instagram Conversations for Faster ResponseVideo
Connect Facebook and Instagram Messenger to your CRM to manage all conversations in one place. Streamline responses and engage customers faster for improved communication efficiency.
Website & Content
Launch a Professional Website in Less Than a DayVideo
Create and publish a custom website using ready-made templates. Build your online presence quickly and easily.
Watch Video
Migrate Your WordPress Site SeamlesslyVideo
Learn how to move your existing WordPress website to the platform easily without losing any content or functionality.
Watch Video
Documents & ContractsVideo
Learn how to create document templates, upload PDFs, collect signatures, and more.
Commerce
Launch Your First Product and Start SellingVideo
Set up and publish your product to start generating sales. Whether it's a physical product, digital service, or subscription, your online store is ready.
Watch Video
Launch Your First Online Course and Start EarningVideo
Set up and launch an online course in minutes. Start monetizing your expertise and grow your audience with educational content.
Watch Video
Start Collecting Payments with StripeVideo
Connect your Stripe account for fast and secure payments. Enable credit card transactions, subscriptions, and more.
Watch Video
Accept Payments Easily with a Custom Payment LinkVideo
Create a payment link and send it to your customers for easy, secure transactions.
Watch Video
Generate and Send Professional InvoicesVideo
Manage your sales and billing by sending customized invoices to your customers.
description.
- index.html +154 -5
|
@@ -66,10 +66,140 @@
|
|
| 66 |
<button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Website & Content</button>
|
| 67 |
<button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Commerce</button>
|
| 68 |
</div>
|
| 69 |
-
<
|
| 70 |
-
|
| 71 |
-
<
|
| 72 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
<i data-feather="users" class="text-white w-16 h-16"></i>
|
| 74 |
</div>
|
| 75 |
<div class="p-6">
|
|
@@ -187,8 +317,27 @@
|
|
| 187 |
</div>
|
| 188 |
</div>
|
| 189 |
</div>
|
| 190 |
-
<!-- Module
|
| 191 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 192 |
document.querySelectorAll('.flex.mb-8 button').forEach(button => {
|
| 193 |
button.addEventListener('click', function() {
|
| 194 |
// Remove active class from all buttons
|
|
|
|
| 66 |
<button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Website & Content</button>
|
| 67 |
<button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Commerce</button>
|
| 68 |
</div>
|
| 69 |
+
<!-- Modules Section -->
|
| 70 |
+
<div class="space-y-6">
|
| 71 |
+
<!-- Getting Started Module -->
|
| 72 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 73 |
+
<div class="p-6">
|
| 74 |
+
<div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('getting-started')">
|
| 75 |
+
<h2 class="text-2xl font-bold text-gray-900">Getting Started</h2>
|
| 76 |
+
<i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="getting-started-chevron"></i>
|
| 77 |
+
</div>
|
| 78 |
+
<div class="mt-4 hidden" id="getting-started-content">
|
| 79 |
+
<div class="space-y-4">
|
| 80 |
+
<!-- Video 1 -->
|
| 81 |
+
<div class="flex items-start p-4 border border-gray-200 rounded-lg">
|
| 82 |
+
<div class="flex-shrink-0 mr-4">
|
| 83 |
+
<div class="w-32 h-20 bg-primary-500 rounded-md flex items-center justify-center">
|
| 84 |
+
<i data-feather="play" class="text-white"></i>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
<div>
|
| 88 |
+
<h3 class="font-semibold text-gray-900">Import and engage with all your contacts instantly</h3>
|
| 89 |
+
<p class="mt-1 text-sm text-gray-600">Import your existing contacts from various platforms and start engaging with them immediately.</p>
|
| 90 |
+
<button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
|
| 91 |
+
Watch Video
|
| 92 |
+
</button>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<!-- Video 2 -->
|
| 96 |
+
<div class="flex items-start p-4 border border-gray-200 rounded-lg">
|
| 97 |
+
<div class="flex-shrink-0 mr-4">
|
| 98 |
+
<div class="w-32 h-20 bg-primary-500 rounded-md flex items-center justify-center">
|
| 99 |
+
<i data-feather="play" class="text-white"></i>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
<div>
|
| 103 |
+
<h3 class="font-semibold text-gray-900">Generate New Leads with a High-Converting Funnel</h3>
|
| 104 |
+
<p class="mt-1 text-sm text-gray-600">Set up a high-converting funnel and form to capture leads efficiently.</p>
|
| 105 |
+
<button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
|
| 106 |
+
Watch Video
|
| 107 |
+
</button>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
<!-- More videos would follow the same pattern -->
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<!-- Marketing & Lead Generation Module -->
|
| 117 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 118 |
+
<div class="p-6">
|
| 119 |
+
<div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('marketing')">
|
| 120 |
+
<h2 class="text-2xl font-bold text-gray-900">Marketing & Lead Generation</h2>
|
| 121 |
+
<i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="marketing-chevron"></i>
|
| 122 |
+
</div>
|
| 123 |
+
<div class="mt-4 hidden" id="marketing-content">
|
| 124 |
+
<div class="space-y-4">
|
| 125 |
+
<!-- Video 1 -->
|
| 126 |
+
<div class="flex items-start p-4 border border-gray-200 rounded-lg">
|
| 127 |
+
<div class="flex-shrink-0 mr-4">
|
| 128 |
+
<div class="w-32 h-20 bg-purple-500 rounded-md flex items-center justify-center">
|
| 129 |
+
<i data-feather="play" class="text-white"></i>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
<div>
|
| 133 |
+
<h3 class="font-semibold text-gray-900">Manage All Your Social Media Posts in One Place</h3>
|
| 134 |
+
<p class="mt-1 text-sm text-gray-600">Set up the social planner to schedule and manage all your social media posts.</p>
|
| 135 |
+
<button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
|
| 136 |
+
Watch Video
|
| 137 |
+
</button>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
<!-- More videos would follow the same pattern -->
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
|
| 146 |
+
<!-- Sales & Conversation Module -->
|
| 147 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 148 |
+
<div class="p-6">
|
| 149 |
+
<div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('sales')">
|
| 150 |
+
<h2 class="text-2xl font-bold text-gray-900">Sales & Conversation</h2>
|
| 151 |
+
<i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="sales-chevron"></i>
|
| 152 |
+
</div>
|
| 153 |
+
<div class="mt-4 hidden" id="sales-content">
|
| 154 |
+
<div class="space-y-4">
|
| 155 |
+
<!-- Video 1 -->
|
| 156 |
+
<div class="flex items-start p-4 border border-gray-200 rounded-lg">
|
| 157 |
+
<div class="flex-shrink-0 mr-4">
|
| 158 |
+
<div class="w-32 h-20 bg-indigo-500 rounded-md flex items-center justify-center">
|
| 159 |
+
<i data-feather="play" class="text-white"></i>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
<div>
|
| 163 |
+
<h3 class="font-semibold text-gray-900">Seamlessly Manage Your Sales Conversations</h3>
|
| 164 |
+
<p class="mt-1 text-sm text-gray-600">Sync your Gmail or Outlook inbox to track all customer conversations in one place.</p>
|
| 165 |
+
<button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
|
| 166 |
+
Watch Video
|
| 167 |
+
</button>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
<!-- More videos would follow the same pattern -->
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<!-- Website & Content Module -->
|
| 177 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 178 |
+
<div class="p-6">
|
| 179 |
+
<div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('website')">
|
| 180 |
+
<h2 class="text-2xl font-bold text-gray-900">Website & Content</h2>
|
| 181 |
+
<i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="website-chevron"></i>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="mt-4 hidden" id="website-content">
|
| 184 |
+
<!-- Content would follow same pattern -->
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<!-- Commerce Module -->
|
| 190 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 191 |
+
<div class="p-6">
|
| 192 |
+
<div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('commerce')">
|
| 193 |
+
<h2 class="text-2xl font-bold text-gray-900">Commerce</h2>
|
| 194 |
+
<i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="commerce-chevron"></i>
|
| 195 |
+
</div>
|
| 196 |
+
<div class="mt-4 hidden" id="commerce-content">
|
| 197 |
+
<!-- Content would follow same pattern -->
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
<div class="h-48 bg-primary-500 flex items-center justify-center">
|
| 203 |
<i data-feather="users" class="text-white w-16 h-16"></i>
|
| 204 |
</div>
|
| 205 |
<div class="p-6">
|
|
|
|
| 317 |
</div>
|
| 318 |
</div>
|
| 319 |
</div>
|
| 320 |
+
<!-- Module Toggle Script -->
|
| 321 |
<script>
|
| 322 |
+
function toggleModule(moduleId) {
|
| 323 |
+
const content = document.getElementById(`${moduleId}-content`);
|
| 324 |
+
const chevron = document.getElementById(`${moduleId}-chevron`);
|
| 325 |
+
|
| 326 |
+
if (content.classList.contains('hidden')) {
|
| 327 |
+
content.classList.remove('hidden');
|
| 328 |
+
chevron.classList.add('rotate-180');
|
| 329 |
+
} else {
|
| 330 |
+
content.classList.add('hidden');
|
| 331 |
+
chevron.classList.remove('rotate-180');
|
| 332 |
+
}
|
| 333 |
+
}
|
| 334 |
+
|
| 335 |
+
// Initialize first module as open by default
|
| 336 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 337 |
+
toggleModule('getting-started');
|
| 338 |
+
});
|
| 339 |
+
</script>
|
| 340 |
+
<script>
|
| 341 |
document.querySelectorAll('.flex.mb-8 button').forEach(button => {
|
| 342 |
button.addEventListener('click', function() {
|
| 343 |
// Remove active class from all buttons
|