section 1: B2C Form and B2B Form use other design patterns

index.html

@@ -539,42 +539,57 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </p>
       
       <div class="grid md:grid-cols-2 gap-8">
-        <!-- B2C Form -->
-        <div class="card-accent bg-[var(--vlc-card)] rounded-lg shadow-lg p-6" data-aos="fade-right">
-          <h3 class="text-xl font-bold mb-4">B2C E-commerce</h3>
-          <form id="send_email_to_customer" action="./sendEmailToCustomer.php" method="post">
-            <div id="myModal" class="modal">
-              <div class="modal-content">
-                <span class="close_modal">&times;</span>
-                <h4 class="modal-title">Enter your email to download</h4>
-                <span id="error" style="display:none;color:red;">Please enter valid business email.</span>
-                <input class="w-full p-3 border rounded mb-4" name="customer_email" id="customer_email" type="text" placeholder="Email*" autocomplete="off" required/>
-                <input type="submit" value="Submit" id="B_to_C" class="btn-primary px-6 py-2 rounded cursor-pointer"/>
-                <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
-                <input type="hidden" name="action" value="validate_captcha">
+        <!-- B2C Form - Modern Floating Label Design -->
+        <div class="relative bg-white rounded-xl shadow-xl p-8 overflow-hidden" data-aos="fade-right">
+          <div class="absolute inset-0 bg-gradient-to-br from-[var(--vlc-sky)] to-[var(--vlc-leaf)] opacity-10"></div>
+          <div class="relative">
+            <h3 class="text-2xl font-bold mb-6 text-[var(--vlc-navy)]">B2C E-commerce</h3>
+            <form id="send_email_to_customer" action="./sendEmailToCustomer.php" method="post" class="space-y-6">
+              <div class="relative z-0">
+                <input type="email" id="customer_email" name="customer_email" 
+                  class="block w-full px-4 py-3 text-gray-700 bg-transparent border-b-2 border-[var(--vlc-navy)] focus:border-[var(--vlc-leaf)] focus:outline-none peer" 
+                  placeholder=" " required autocomplete="off" />
+                <label for="customer_email" class="absolute text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:left-0 peer-focus:text-[var(--vlc-leaf)] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email Address</label>
               </div>
-            </div>
-          </form>
+              <span id="error" class="text-red-500 text-sm hidden">Please enter a valid business email</span>
+              <button type="submit" id="B_to_C" class="w-full btn-accent px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2">
+                Get Started <i data-feather="arrow-right" class="w-4 h-4"></i>
+              </button>
+              <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
+              <input type="hidden" name="action" value="validate_captcha">
+            </form>
+          </div>
         </div>
 
-        <!-- B2B Form -->
-        <div class="card-accent bg-[var(--vlc-card)] rounded-lg shadow-lg p-6" data-aos="fade-left">
-          <h3 class="text-xl font-bold mb-4">B2B E-commerce</h3>
-          <form action="./sendEmailToCustomerB2B.php" method="post">
-            <div id="myModal2" class="modal">
-              <div class="modal-content">
-                <span class="close_modal_2">&times;</span>
-                <h4 class="modal-title">Enter your email to download</h4>
-                <span id="error_2" style="display:none;color:red;">Please enter valid business email.</span>
-                <input class="w-full p-3 border rounded mb-4" name="customer_email_2" id="customer_email_2" type="text" placeholder="Email*" autocomplete="off" required/>
-                <input type="submit" value="Submit" id="B_to_B" class="btn-primary px-6 py-2 rounded cursor-pointer"/>
-                <input type="hidden" id="g-recaptcha-response-two" name="g-recaptcha-response-two">
-                <input type="hidden" name="action" value="validate_captcha_two">
+        <!-- B2B Form - Card with Icon Design -->
+        <div class="bg-white rounded-xl shadow-xl p-8" data-aos="fade-left">
+          <div class="text-center mb-6">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-[var(--vlc-leaf-tint)] rounded-full mb-4">
+              <i data-feather="briefcase" class="w-8 h-8 text-[var(--vlc-navy)]"></i>
+            </div>
+            <h3 class="text-2xl font-bold text-[var(--vlc-navy)]">B2B E-commerce</h3>
+          </div>
+          <form action="./sendEmailToCustomerB2B.php" method="post" class="space-y-6">
+            <div>
+              <label for="customer_email_2" class="block text-sm font-medium text-gray-700 mb-1">Business Email</label>
+              <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <i data-feather="mail" class="w-5 h-5 text-gray-400"></i>
+                </div>
+                <input type="email" id="customer_email_2" name="customer_email_2" 
+                  class="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--vlc-leaf)] focus:border-[var(--vlc-leaf)]" 
+                  placeholder="your@company.com" required autocomplete="off" />
               </div>
+              <span id="error_2" class="text-red-500 text-sm hidden">Please enter a valid business email</span>
             </div>
+            <button type="submit" id="B_to_B" class="w-full btn-primary px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2">
+              Request Demo <i data-feather="calendar" class="w-4 h-4"></i>
+            </button>
+            <input type="hidden" id="g-recaptcha-response-two" name="g-recaptcha-response-two">
+            <input type="hidden" name="action" value="validate_captcha_two">
           </form>
         </div>
-      </div>
+</div>
     </div>
   </section>
 

style.css

@@ -34,6 +34,32 @@ p {
 .btn-primary:hover i {
   transform: rotate(15deg);
 }
+/* Floating Label Form Styles */
+.relative.z-0 input:focus ~ label,
+.relative.z-0 input:not(:placeholder-shown) ~ label {
+  transform: translateY(-1.5rem) scale(0.75);
+  color: var(--vlc-leaf);
+}
+
+/* Form Input Transitions */
+input, textarea, select {
+  transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus, select:focus {
+  box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
+}
+
+/* Form Button Hover Effects */
+button[type="submit"] {
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+
+button[type="submit"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 32, 96, 0.15);
+}
 
 /* Flip Card Styles */
 .flip-card {