Download Our Information Security Practices,

Download Our Business Continuity Plans and Download Our AI Ethics Policy, give popup l

index.html

@@ -349,8 +349,27 @@
     </script>
 
     <script src="https://www.google.com/recaptcha/api.js?render=6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT"></script>
-    <script>
-        grecaptcha.ready(function() {
+  <script>
+    // Modal functions
+    function openModal(id) {
+      document.getElementById(id).classList.remove('hidden');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeModal(id) {
+      document.getElementById(id).classList.add('hidden');
+      document.body.style.overflow = '';
+    }
+
+    // Close modal when clicking outside
+    window.addEventListener('click', function(event) {
+      if (event.target.classList.contains('modal')) {
+        event.target.classList.add('hidden');
+        document.body.style.overflow = '';
+      }
+    });
+
+grecaptcha.ready(function() {
             // do request for recaptcha token
             // response is promise with passed token
 
@@ -525,8 +544,68 @@
       </a>
     </div>
   </div>
-</section>
+  </section>
+
+  <!-- Modal Dialogs -->
+  <div id="securityModal" class="modal hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="text-xl font-bold text-[var(--vlc-navy)]">Download Information Security Practices</h3>
+        <button onclick="closeModal('securityModal')" class="text-gray-500 hover:text-gray-700">
+          <i data-feather="x"></i>
+        </button>
+      </div>
+      <form action="./information_security_control.php" method="post" class="space-y-4">
+        <div>
+          <label for="security_email" class="block text-sm font-medium text-gray-700 mb-1">Business Email</label>
+          <input type="email" id="security_email" name="customer_email" required class="w-full px-3 py-2 border border-gray-300 rounded-md">
+          <p id="security_error" class="text-red-500 text-sm mt-1 hidden">Please enter a valid business email address</p>
+        </div>
+        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
+        <button type="submit" id="security_button_form" class="btn-primary w-full py-2">Download Now</button>
+      </form>
+    </div>
+  </div>
+
+  <div id="continuityModal" class="modal hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="text-xl font-bold text-[var(--vlc-navy)]">Download Business Continuity Plans</h3>
+        <button onclick="closeModal('continuityModal')" class="text-gray-500 hover:text-gray-700">
+          <i data-feather="x"></i>
+        </button>
+      </div>
+      <form action="./equipped_unforeseen.php" method="post" class="space-y-4">
+        <div>
+          <label for="continuity_email" class="block text-sm font-medium text-gray-700 mb-1">Business Email</label>
+          <input type="email" id="continuity_email" name="customer_email" required class="w-full px-3 py-2 border border-gray-300 rounded-md">
+          <p id="continuity_error" class="text-red-500 text-sm mt-1 hidden">Please enter a valid business email address</p>
+        </div>
+        <input type="hidden" id="g-recaptcha-response-two" name="g-recaptcha-response">
+        <button type="submit" id="continuity_button_form" class="btn-primary w-full py-2">Download Now</button>
+      </form>
+    </div>
+  </div>
 
+  <div id="aiModal" class="modal hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="text-xl font-bold text-[var(--vlc-navy)]">Download AI Ethics Policy</h3>
+        <button onclick="closeModal('aiModal')" class="text-gray-500 hover:text-gray-700">
+          <i data-feather="x"></i>
+        </button>
+      </div>
+      <form action="./ai_ethics.php" method="post" class="space-y-4">
+        <div>
+          <label for="ai_email" class="block text-sm font-medium text-gray-700 mb-1">Business Email</label>
+          <input type="email" id="ai_email" name="customer_email" required class="w-full px-3 py-2 border border-gray-300 rounded-md">
+          <p id="ai_error" class="text-red-500 text-sm mt-1 hidden">Please enter a valid business email address</p>
+        </div>
+        <input type="hidden" id="g-recaptcha-response-three" name="g-recaptcha-response">
+        <button type="submit" id="ai_button_form" class="btn-primary w-full py-2">Download Now</button>
+      </form>
+    </div>
+  </div>
 <!-- Section 1 -->
   <section class="py-16 px-4 bg-white">
     <div class="max-w-7xl mx-auto">
@@ -552,28 +631,22 @@
         <div class="bg-white p-8 rounded-xl shadow-md flex flex-col">
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Security Measures and Procedures</h3>
           <p class="text-gray-700 mb-6">At VLC Solutions, we utilize a robust system of security controls and measures that form the basis of our data protection framework. In this way, you can be assured that your information is safe across all touchpoints.</p>
-          <form action="./information_security_control.php" method="post" class="mt-auto">
-            <button type="submit" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our Information Security Practices</button>
-          </form>
-        </div>
+          <button onclick="openModal('securityModal')" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our Information Security Practices</button>
+</div>
 
         <!-- Business Continuity -->
         <div class="bg-white p-8 rounded-xl shadow-md flex flex-col">
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Prepared for the Unexpected</h3>
           <p class="text-gray-700 mb-6">While we cannot foresee every challenge that may affect business continuity, we are always prepared. We are proactive in risk management, and in case of an unexpected event, we guarantee that your data will not be compromised and your operations will not be affected.</p>
-          <form action="./equipped_unforeseen.php" method="post" class="mt-auto">
-            <button type="submit" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our Business Continuity Plans</button>
-          </form>
-        </div>
+          <button onclick="openModal('continuityModal')" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our Business Continuity Plans</button>
+</div>
 
         <!-- Ethical AI -->
         <div class="bg-white p-8 rounded-xl shadow-md flex flex-col">
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Ethical Artificial Intelligence</h3>
           <p class="text-gray-700 mb-6">At VLC, we champion ethical AI development. We are committed to developing intelligent systems that help improve leadership, communication, and productivity, all without compromising the ethical standards that are the top priority of our AI projects.</p>
-          <form action="./ai_ethics.php" method="post" class="mt-auto">
-            <button type="submit" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our AI Ethics Policy</button>
-          </form>
-        </div>
+          <button onclick="openModal('aiModal')" class="btn-accent px-4 py-2 rounded-md text-sm font-medium w-full">Download Our AI Ethics Policy</button>
+</div>
 </div>
     </div>
   </section>

style.css

@@ -23,10 +23,18 @@ p {
     border: 1px solid lightgray;
     border-radius: 16px;
 }
-
 .card p:last-child {
     margin-bottom: 0;
 }
+
+/* Modal styles */
+.modal {
+  transition: opacity 0.3s ease;
+}
+.modal.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
 /* Section 4 Steps and buttons */
 .chip {
   background: linear-gradient(135deg, var(--vlc-navy), #0b3b8f);