let's create a wizard walk-through from Try it Free through to taking payment detalis with a zero value transaction against the customers card - Follow Up Deployment

index.html

@@ -115,7 +115,7 @@
                     Visualize, explore, and understand complex repositories in seconds
                 </p>
                 <div class="mt-4">
-                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition-all transform hover:scale-105">
+                    <button onclick="openWizard()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition-all transform hover:scale-105">
                         Try It Free
                     </button>
                     <button class="ml-3 bg-github-700 hover:bg-github-600 text-white font-medium py-2 px-6 rounded-lg transition-all">
@@ -431,6 +431,85 @@
         </footer>
     </div>
     
+    <!-- Payment Wizard Modal -->
+    <div id="paymentWizard" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-black bg-opacity-70">
+        <div class="bg-github-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden">
+            <!-- Wizard Steps -->
+            <div class="flex border-b border-github-700">
+                <div class="w-1/3 py-4 text-center border-b-2 border-indigo-500 font-medium text-white">
+                    <span class="hidden sm:inline">Step</span> 1
+                </div>
+                <div class="w-1/3 py-4 text-center text-github-400">
+                    <span class="hidden sm:inline">Step</span> 2
+                </div>
+                <div class="w-1/3 py-4 text-center text-github-400">
+                    <span class="hidden sm:inline">Step</span> 3
+                </div>
+            </div>
+            
+            <!-- Step 1: Account Details -->
+            <div id="step1" class="p-6">
+                <h3 class="text-xl font-semibold text-white mb-4">Create Your Account</h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-github-300 mb-1">Email</label>
+                        <input type="email" class="w-full bg-github-700 border border-github-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="block text-github-300 mb-1">Password</label>
+                        <input type="password" class="w-full bg-github-700 border border-github-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="pt-2">
+                        <button onclick="nextStep(1)" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                            Continue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Step 2: Payment Details -->
+            <div id="step2" class="p-6 hidden">
+                <h3 class="text-xl font-semibold text-white mb-4">Payment Verification</h3>
+                <p class="text-github-300 mb-4">We'll verify your card with a $0 authorization that will be immediately voided.</p>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-github-300 mb-1">Card Number</label>
+                        <input type="text" placeholder="4242 4242 4242 4242" class="w-full bg-github-700 border border-github-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-github-300 mb-1">Expiry</label>
+                            <input type="text" placeholder="MM/YY" class="w-full bg-github-700 border border-github-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        </div>
+                        <div>
+                            <label class="block text-github-300 mb-1">CVC</label>
+                            <input type="text" placeholder="123" class="w-full bg-github-700 border border-github-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        </div>
+                    </div>
+                    <div class="pt-2">
+                        <button onclick="nextStep(2)" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                            Verify Card
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Step 3: Confirmation -->
+            <div id="step3" class="p-6 hidden">
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-check text-green-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-white mb-2">Verification Complete!</h3>
+                    <p class="text-github-300 mb-6">Your card has been successfully verified. You now have full access to all features.</p>
+                    <button onclick="closeWizard()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                        Start Exploring
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         // Repository data for the grid
         const popularRepos = [
@@ -576,6 +655,62 @@
             });
         });
         
+        // Wizard functions
+        function openWizard() {
+            document.getElementById('paymentWizard').classList.remove('hidden');
+            resetWizard();
+        }
+        
+        function closeWizard() {
+            document.getElementById('paymentWizard').classList.add('hidden');
+        }
+        
+        function nextStep(currentStep) {
+            // Hide current step
+            document.getElementById(`step${currentStep}`).classList.add('hidden');
+            
+            // Show next step
+            document.getElementById(`step${currentStep + 1}`).classList.remove('hidden');
+            
+            // Update step indicators
+            const steps = document.querySelectorAll('#paymentWizard .flex > div');
+            steps.forEach((step, index) => {
+                if (index <= currentStep) {
+                    step.classList.add('border-indigo-500', 'text-white', 'font-medium');
+                    step.classList.remove('text-github-400');
+                } else {
+                    step.classList.remove('border-indigo-500', 'text-white', 'font-medium');
+                    step.classList.add('text-github-400');
+                }
+            });
+            
+            // On final step, simulate payment processing
+            if (currentStep === 2) {
+                setTimeout(() => {
+                    document.getElementById('step3').classList.remove('hidden');
+                }, 1500);
+            }
+        }
+        
+        function resetWizard() {
+            // Reset to step 1
+            document.getElementById('step1').classList.remove('hidden');
+            document.getElementById('step2').classList.add('hidden');
+            document.getElementById('step3').classList.add('hidden');
+            
+            // Reset step indicators
+            const steps = document.querySelectorAll('#paymentWizard .flex > div');
+            steps.forEach((step, index) => {
+                if (index === 0) {
+                    step.classList.add('border-indigo-500', 'text-white', 'font-medium');
+                    step.classList.remove('text-github-400');
+                } else {
+                    step.classList.remove('border-indigo-500', 'text-white', 'font-medium');
+                    step.classList.add('text-github-400');
+                }
+            });
+        }
+
         function getLanguageColor(language) {
             const colors = {
                 'JavaScript': '#f1e05a',