Hugging Face's logo

Spaces:
TriluxCreative
/
clientonboardingrocketboost
Running

App Files Community
clientonboardingrocketboost / index.html
TriluxCreative's picture
TriluxCreative
remove the generate leads secrtion and everthing below it.
1190273 verified
Raw
History Blame Contribute Delete
11.3 kB
<!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>
 <!-- Modules Section -->
 <div class="space-y-6">
 <!-- Getting Started Module -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="p-6">
 <div class="flex justify-between items-center cursor-pointer" onclick="toggleModule('getting-started')">
 <h2 class="text-2xl font-bold text-gray-900">Getting Started</h2>
 <i data-feather="chevron-down" class="text-gray-500 transition-transform duration-300" id="getting-started-chevron"></i>
 </div>
 <div class="mt-4 hidden" id="getting-started-content">
 <div class="space-y-4">
 <!-- Video 1 -->
 <div class="flex items-start p-4 border border-gray-200 rounded-lg">
 <div class="flex-shrink-0 mr-4">
 <div class="w-32 h-20 bg-primary-500 rounded-md flex items-center justify-center">
 <i data-feather="play" class="text-white"></i>
 </div>
 </div>
 <div>
 <h3 class="font-semibold text-gray-900">Import and engage with all your contacts instantly</h3>
 <p class="mt-1 text-sm text-gray-600">Import your existing contacts from various platforms and start engaging with them immediately.</p>
 <button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
 Watch Video
 </button>
 </div>
 </div>
 <!-- Video 2 -->
 <div class="flex items-start p-4 border border-gray-200 rounded-lg">
 <div class="flex-shrink-0 mr-4">
 <div class="w-32 h-20 bg-primary-500 rounded-md flex items-center justify-center">
 <i data-feather="play" class="text-white"></i>
 </div>
 </div>
 <div>
 <h3 class="font-semibold text-gray-900">Generate New Leads with a High-Converting Funnel</h3>
 <p class="mt-1 text-sm text-gray-600">Set up a high-converting funnel and form to capture leads efficiently.</p>
 <button class="mt-2 px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700 transition-colors">
 Watch Video
 </button>
 </div>
 </div>
 <!-- More videos would follow the same pattern -->
 </div>
 </div>
 </div>
 </div>
 </div>
</div>
 <!-- Module Toggle Script -->
 <script>
 function toggleModule(moduleId) {
 const content = document.getElementById(`${moduleId}-content`);
 const chevron = document.getElementById(`${moduleId}-chevron`);
if (content.classList.contains('hidden')) {
 content.classList.remove('hidden');
 chevron.classList.add('rotate-180');
 } else {
 content.classList.add('hidden');
 chevron.classList.remove('rotate-180');
 }
 }
 // Initialize first module as open by default
 document.addEventListener('DOMContentLoaded', () => {
 toggleModule('getting-started');
 });
 </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>
</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>