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>