Spaces:

furabut
/

digitalmoves-vibe-coding-wizards

Running

App Files Files Community

furabut commited on Oct 15, 2025

Commit

bfcd034

verified ·

1 Parent(s): 765f74e

Great work

Browse files

now on top add two button AI and Vibe Coding
Ai will be default and show that landing page ,when user click on vibe coding,it should show landing pahge with different cointent related to vibe coding funnel like with vibe coding we will code you software,and decrease deleuvery time from 25 days to 5 days,and same popup will be on each button

Files changed (1) hide show

index.html +192 -15

index.html CHANGED Viewed

@@ -6,9 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DigitalMoves | AI Automation Services</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
     <style>
-        .gradient-text {
             background: linear-gradient(90deg, #6366F1, #EC4899);
             -webkit-background-clip: text;
             background-clip: text;
@@ -20,9 +24,23 @@
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Hero Section -->
-    <section class="py-24 md:py-32">
-        <div class="container mx-auto px-6 text-center">
             <div class="max-w-4xl mx-auto">
                 <h1 class="text-4xl md:text-6xl font-bold mb-6">
                     <span class="gradient-text">AI Automation</span> That <br>
@@ -234,7 +252,138 @@
     </section>
     <!-- Final CTA -->
     <section class="py-20">
         <div class="container mx-auto px-6 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">
                 Ready to <span class="gradient-text">10X</span> Your Productivity?
             </h2>
@@ -274,11 +423,11 @@
     </footer>
     <div id="contactModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-gray-800 p-8 rounded-xl max-w-md w-full">
-            <h3 class="text-2xl font-bold mb-6 text-center">Get Your Free AI Audit</h3>
-            <div class="flex flex-col space-y-4 mb-6">
-                <button onclick="window.open('https://wa.me/447435962456', '_blank')" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center justify-center">
                     <i data-feather="message-circle" class="mr-2"></i> Contact via WhatsApp
-                </button>
                 <div class="text-center text-gray-400">OR</div>
             </div>
             <form id="contactForm" class="space-y-4">
@@ -293,24 +442,52 @@
             </button>
         </div>
     </div>
     <script>
         // Initialize feather icons
         feather.replace();
         function openContactModal() {
-            document.getElementById('contactModal').classList.remove('hidden');
         }
-        function closeContactModal() {
             document.getElementById('contactModal').classList.add('hidden');
         }
         document.getElementById('contactForm').addEventListener('submit', function(e) {
             e.preventDefault();
             // Here you would normally send the form data
-            window.location.href = 'mailto:info@thedigitalmoves.com?subject=Free AI Audit Request';
-            closeContactModal();
         });
     </script>
     <style>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DigitalMoves | AI Automation Services</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons">
+    </script>
     <style>
+        #contactModal .modal-title {
+            display: none;
+        }
+.gradient-text {
             background: linear-gradient(90deg, #6366F1, #EC4899);
             -webkit-background-clip: text;
             background-clip: text;
     </style>
 </head>
 <body class="bg-gray-900 text-white">
+    <!-- Toggle Section -->
+    <div class="container mx-auto px-6 pt-12 text-center">
+        <div class="inline-flex rounded-full bg-gray-800 p-1 max-w-md mx-auto">
+            <button id="aiToggle" class="px-6 py-2 rounded-full font-bold text-white bg-purple-600">
+                AI Automation
+            </button>
+            <button id="vibeToggle" class="px-6 py-2 rounded-full font-bold text-gray-300 hover:text-white transition">
+                Vibe Coding
+            </button>
+        </div>
+    </div>
+    <!-- AI Content (default visible) -->
+    <div id="aiContent">
     <!-- Hero Section -->
+    <section class="py-12 md:py-20">
+<div class="container mx-auto px-6 text-center">
             <div class="max-w-4xl mx-auto">
                 <h1 class="text-4xl md:text-6xl font-bold mb-6">
                     <span class="gradient-text">AI Automation</span> That <br>
     </section>
     <!-- Final CTA -->
     <section class="py-20">
+    </div>
+    <!-- Vibe Coding Content (hidden by default) -->
+    <div id="vibeContent" class="hidden">
+    <!-- Hero Section -->
+    <section class="py-12 md:py-20">
         <div class="container mx-auto px-6 text-center">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                    <span class="gradient-text">Vibe Coding</span> That <br>
+                    <span class="gradient-text">5X</span> Your Development Speed
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-300 mb-10">
+                    Stop waiting weeks for development. We deliver high-quality software in 5 days instead of 25.
+                </p>
+                <div class="flex flex-col md:flex-row justify-center gap-4">
+                    <button onclick="openContactModal()" class="bg-gradient-to-r from-purple-600 to-pink-500 px-8 py-4 rounded-full font-bold text-lg cta-button hover:opacity-90 transition">
+                        Get Your Free Consultation
+                    </button>
+                </div>
+                <div class="mt-12">
+                    <div class="relative inline-block">
+                        <img src="http://static.photos/technology/1024x576/10" alt="Vibe Coding" class="rounded-xl w-full max-w-4xl border-2 border-purple-500/30">
+                        <div class="absolute -bottom-4 -right-4 bg-purple-600 px-4 py-1 rounded-full font-bold text-sm">
+                            🚀 5-Day Delivery
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Problem Section -->
+    <section class="py-16 bg-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    The Problem We <span class="gradient-text">Solve</span>
+                </h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Businesses waste weeks waiting for software development that could be done in days
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <div class="text-center p-6">
+                    <div class="bg-purple-600/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="clock" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Slow Delivery</h3>
+                    <p class="text-gray-400">
+                        Traditional development takes 25+ days for simple projects
+                    </p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="bg-pink-600/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="dollar-sign" class="text-pink-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">High Costs</h3>
+                    <p class="text-gray-400">
+                        Paying for extended development timelines and revisions
+                    </p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="bg-blue-600/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="alert-triangle" class="text-blue-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Quality Issues</h3>
+                    <p class="text-gray-400">
+                        Rushed projects with bugs and missing features
+                    </p>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button onclick="openContactModal()" class="bg-gradient-to-r from-purple-600 to-pink-500 px-8 py-4 rounded-full font-bold text-lg cta-button hover:opacity-90 transition">
+                    Get Your Free Consultation
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Solution Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    Our <span class="gradient-text">Vibe Coding</span> Solution
+                </h2>
+            </div>
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/2">
+                    <img src="http://static.photos/technology/640x360/20" alt="Vibe Coding" class="rounded-xl w-full">
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-bold mb-6">
+                        We deliver high-quality software in 5 days instead of 25
+                    </h3>
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <div class="bg-purple-600/10 p-2 rounded-full mr-4">
+                                <i data-feather="check" class="text-purple-400"></i>
+                            </div>
+                            <span class="text-gray-300">80% faster delivery than traditional dev</span>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-pink-600/10 p-2 rounded-full mr-4">
+                                <i data-feather="check" class="text-pink-400"></i>
+                            </div>
+                            <span class="text-gray-300">Bug-free code with lifetime support</span>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-blue-600/10 p-2 rounded-full mr-4">
+                                <i data-feather="check" class="text-blue-400"></i>
+                            </div>
+                            <span class="text-gray-300">Fixed pricing with no hidden costs</span>
+                        </li>
+                    </ul>
+                    <button onclick="openContactModal()" class="bg-gradient-to-r from-purple-600 to-pink-500 px-8 py-4 rounded-full font-bold text-lg cta-button hover:opacity-90 transition">
+                        Get Started Now
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Final CTA -->
+    <section class="py-20">
+<div class="container mx-auto px-6 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">
                 Ready to <span class="gradient-text">10X</span> Your Productivity?
             </h2>
     </footer>
     <div id="contactModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-gray-800 p-8 rounded-xl max-w-md w-full">
+            <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-center">Get Your Free AI Audit</h3>
+<div class="flex flex-col space-y-4 mb-6">
+        <button onclick="window.open('https://wa.me/447435962456', '_blank')" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center justify-center">
                     <i data-feather="message-circle" class="mr-2"></i> Contact via WhatsApp
+</button>
                 <div class="text-center text-gray-400">OR</div>
             </div>
             <form id="contactForm" class="space-y-4">
             </button>
         </div>
     </div>
     <script>
         // Initialize feather icons
         feather.replace();
+        // Toggle between AI and Vibe Coding sections
+        document.getElementById('aiToggle').addEventListener('click', function() {
+            document.getElementById('aiContent').classList.remove('hidden');
+            document.getElementById('vibeContent').classList.add('hidden');
+            document.getElementById('aiToggle').classList.add('bg-purple-600', 'text-white');
+            document.getElementById('aiToggle').classList.remove('text-gray-300');
+            document.getElementById('vibeToggle').classList.remove('bg-purple-600', 'text-white');
+            document.getElementById('vibeToggle').classList.add('text-gray-300');
+        });
+        document.getElementById('vibeToggle').addEventListener('click', function() {
+            document.getElementById('vibeContent').classList.remove('hidden');
+            document.getElementById('aiContent').classList.add('hidden');
+            document.getElementById('vibeToggle').classList.add('bg-purple-600', 'text-white');
+            document.getElementById('vibeToggle').classList.remove('text-gray-300');
+            document.getElementById('aiToggle').classList.remove('bg-purple-600', 'text-white');
+            document.getElementById('aiToggle').classList.add('text-gray-300');
+        });
         function openContactModal() {
+            const modal = document.getElementById('contactModal');
+            const title = document.getElementById('modalTitle');
+            if (document.getElementById('vibeContent').classList.contains('hidden')) {
+                title.textContent = 'Get Your Free AI Audit';
+            } else {
+                title.textContent = 'Get Your Free Consultation';
+            }
+            modal.classList.remove('hidden');
         }
+function closeContactModal() {
             document.getElementById('contactModal').classList.add('hidden');
         }
         document.getElementById('contactForm').addEventListener('submit', function(e) {
             e.preventDefault();
             // Here you would normally send the form data
+            const subject = document.getElementById('vibeContent').classList.contains('hidden')
+                ? 'Free AI Audit Request'
+                : 'Vibe Coding Consultation';
+            window.location.href = `mailto:info@thedigitalmoves.com?subject=${subject}`;
+closeContactModal();
         });
     </script>
     <style>