Here are all the modules and sub modules.

Foundational Setup



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.

README.md

@@ -1,10 +1,14 @@
 ---
-title: Clientonboardingrocketboost
-emoji: 🐠
-colorFrom: purple
-colorTo: purple
+title: ClientOnboardingRocketBoost 🚀
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

index.html

@@ -1,19 +1,307 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Client Onboarding Course</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4F46E5',
+                        secondary: '#10B981',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.35s;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+        .course-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Header -->
+        <header class="py-10">
+            <div class="flex justify-between items-center">
+                <div>
+                    <h1 class="text-3xl font-bold text-gray-900">Welcome to Your Onboarding Journey</h1>
+                    <p class="mt-2 text-gray-600">Let's get you started with our platform</p>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <div class="w-16 h-16">
+                            <svg class="progress-ring w-full h-full" width="120" height="120">
+                                <circle class="progress-ring__circle stroke-secondary-100" stroke-width="8" fill="transparent" r="52" cx="60" cy="60"/>
+                                <circle class="progress-ring__circle stroke-secondary-500" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="326.56" fill="transparent" r="52" cx="60" cy="60"/>
+                            </svg>
+                            <div class="absolute inset-0 flex items-center justify-center">
+                                <span class="text-lg font-bold text-gray-800">0%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="pb-20">
+            <div class="flex mb-8 space-x-4 overflow-x-auto pb-4">
+                <button class="px-4 py-2 bg-primary-600 text-white rounded-full whitespace-nowrap">All Modules</button>
+                <button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Foundational Setup</button>
+                <button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Marketing & Lead Gen</button>
+                <button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Sales & Conversation</button>
+                <button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Website & Content</button>
+                <button class="px-4 py-2 bg-gray-200 rounded-full whitespace-nowrap">Commerce</button>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Foundational Setup Cards -->
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-primary-500 flex items-center justify-center">
+                        <i data-feather="users" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Import & Engage Contacts</h2>
+                        <p class="mt-2 text-gray-600">Import contacts from various platforms and start engaging immediately.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-primary-100 text-primary-800 rounded">Foundational</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-green-500 flex items-center justify-center">
+                        <i data-feather="filter" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Generate New Leads</h2>
+                        <p class="mt-2 text-gray-600">Set up high-converting funnels to capture leads efficiently.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-primary-100 text-primary-800 rounded">Foundational</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-blue-500 flex items-center justify-center">
+                        <i data-feather="message-square" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Multi-Channel Setup</h2>
+                        <p class="mt-2 text-gray-600">Connect email, SMS, and phone services to start engaging.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-primary-100 text-primary-800 rounded">Foundational</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Marketing & Lead Gen Cards -->
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-purple-500 flex items-center justify-center">
+                        <i data-feather="share-2" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Social Media Management</h2>
+                        <p class="mt-2 text-gray-600">Schedule and manage all your social posts in one place.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">Marketing</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-pink-500 flex items-center justify-center">
+                        <i data-feather="instagram" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Facebook/IG Lead Ads</h2>
+                        <p class="mt-2 text-gray-600">Capture high-quality leads directly from social media.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">Marketing</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Sales & Conversation Cards -->
+                <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-indigo-500 flex items-center justify-center">
+                        <i data-feather="mail" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-900">Sales Conversations</h2>
+                        <p class="mt-2 text-gray-600">Sync your inbox to track all customer conversations.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-xs px-2 py-1 bg-indigo-100 text-indigo-800 rounded">Sales</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Watch Video
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+<div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="h-48 bg-primary-500 flex items-center justify-center">
+                        <i data-feather="play-circle" class="text-white w-16 h-16"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h2 class="text-xl font-semibold text-gray-900">Getting Started</h2>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
+                                New
+                            </span>
+                        </div>
+                        <p class="mt-2 text-gray-600">Learn the basics of our platform and how to navigate.</p>
+                        <div class="mt-4 flex items-center justify-between">
+                            <span class="text-sm text-gray-500">5 lessons • 15 min</span>
+                            <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                                Start
+                            </button>
+                        </div>
+                    </div>
+                </div>
+</div>
+            <!-- Module Filtering Script -->
+            <script>
+                document.querySelectorAll('.flex.mb-8 button').forEach(button => {
+                    button.addEventListener('click', function() {
+                        // Remove active class from all buttons
+                        document.querySelectorAll('.flex.mb-8 button').forEach(btn => {
+                            btn.classList.remove('bg-primary-600', 'text-white');
+                            btn.classList.add('bg-gray-200');
+                        });
+                        
+                        // Add active class to clicked button
+                        this.classList.add('bg-primary-600', 'text-white');
+                        this.classList.remove('bg-gray-200');
+                        
+                        const filter = this.textContent;
+                        // Filter logic would go here
+                    });
+                });
+            </script>
+
+            <!-- Completion Section -->
+<div class="mt-16 bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-8">
+                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Your Progress</h2>
+                    <div class="space-y-6">
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-base font-medium text-gray-700">Foundational Setup</span>
+                                <span class="text-sm font-medium text-gray-500">0/7</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-primary-600 h-2.5 rounded-full" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-base font-medium text-gray-700">Marketing & Lead Gen</span>
+                                <span class="text-sm font-medium text-gray-500">0/3</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-base font-medium text-gray-700">Sales & Conversation</span>
+                                <span class="text-sm font-medium text-gray-500">0/3</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                            </div>
+                        </div>
+</div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="py-8 border-t border-gray-200">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-4 mb-4 md:mb-0">
+                    <i data-feather="help-circle" class="text-gray-500"></i>
+                    <span class="text-gray-600">Need help? Contact support@example.com</span>
+                </div>
+                <div class="flex items-center space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="globe"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="facebook"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                </div>
+            </div>
+        </footer>
+    </div>
+        <script>
+        feather.replace();
+        
+        // Update progress ring
+        function updateProgress(percent) {
+            const circle = document.querySelector('.progress-ring__circle:last-child');
+            const radius = circle.r.baseVal.value;
+            const circumference = 2 * Math.PI * radius;
+            const offset = circumference - (percent / 100) * circumference;
+            circle.style.strokeDashoffset = offset;
+            document.querySelector('.progress-ring + div span').textContent = `${percent}%`;
+        }
+
+        // Initial progress
+        updateProgress(0);
+        
+        // Handle video buttons
+        document.querySelectorAll('.course-card button').forEach(button => {
+            button.addEventListener('click', function() {
+                // In a real implementation, this would open a video modal
+                alert('Opening video tutorial...');
+                
+                // Mark as viewed if not already
+                if (!this.classList.contains('bg-green-600')) {
+                    this.textContent = 'Completed';
+                    this.classList.remove('bg-primary-600', 'hover:bg-primary-700');
+                    this.classList.add('bg-green-600', 'hover:bg-green-700');
+                    
+                    // Update progress (sample logic)
+                    const current = parseInt(document.querySelector('.progress-ring + div span').textContent);
+                    updateProgress(Math.min(current + 5, 100));
+                }
+            });
+        });
+</script>
+</body>
 </html>