undefined - Follow Up Deployment

index.html

@@ -128,6 +128,98 @@
             .comparison-grid {
                 display: none;
         }
+    }
+        .timeline::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 4px;
+      background-color: #e2e8f0;
+      transform: translateX(-50%);
+    }
+
+    @media (max-width: 768px) {
+      .timeline::before {
+        left: 8px;
+        transform: none;
+      }
+    }
+
+    .timeline-item {
+      position: relative;
+      width: 50%;
+      padding: 2rem 1rem;
+    }
+
+    .timeline-item.left {
+      left: 0;
+    }
+
+    .timeline-item.right {
+      left: 50%;
+    }
+
+    @media (max-width: 768px) {
+      .timeline-item {
+        width: 100%;
+        left: 0 !important;
+        padding-left: 2.5rem;
+        padding-right: 1rem;
+      }
+    }
+
+    .timeline-number {
+      font-size: 3rem;
+      font-weight: 700;
+      color: #0d9488;
+    }
+
+    .timeline-icon {
+      position: absolute;
+      top: 1.5rem;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #0d9488;
+      color: white;
+      border-radius: 9999px;
+      padding: 0.5rem;
+      z-index: 10;
+    }
+
+    @media (max-width: 768px) {
+      .timeline-icon {
+        left: 0;
+        transform: none;
+      }
+    }
+
+    .horizontal-scroll::-webkit-scrollbar {
+      height: 8px;
+    }
+    .horizontal-scroll::-webkit-scrollbar-thumb {
+      background: #319795;
+      border-radius: 9999px;
+    }
+    .timeline-line {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: #319795;
+      z-index: -1;
+      animation: growLine 1s ease-out;
+    }
+    @keyframes growLine {
+      from { width: 0; }
+      to { width: 100%; }
+    }
+    .horizontal-scroll {
+      -webkit-overflow-scrolling: touch;
+      overflow-x: auto;
+    }
 
     </style>
   
@@ -167,6 +259,12 @@
 
 document.addEventListener('DOMContentLoaded', () => {
 
+    AOS.init({
+      once: true,
+      duration: 700,
+      easing: 'ease-out-quart'
+    });
+
     let currentTestimonial = 0;
 
     function updateTestimonial() {
@@ -258,7 +356,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
-  AOS.init({ duration: 800, once: true });
 
 </script>
 
@@ -765,115 +862,128 @@ document.addEventListener('DOMContentLoaded', () => {
             </div>
         </div>
     </section>
-
-    <!-- Process Section -->
-    <section class="py-16 bg-gray-800">
-        <div class="container mx-auto px-4">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Getting Help Shouldn't Be Hard.</h2>
-            </div>
-  <div class="overflow-x-auto horizontal-scroll pb-4">
-    <div class="flex space-x-8 min-w-[1000px] px-4 items-center">
-      <!-- Repeat for each step -->
-      <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
-        <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 1</div>
-        <i class="fas fa-file-alt text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
-        <h3 class="text-lg font-semibold text-center text-teal-800">Apply Online</h3>
-        <p class="text-sm text-center mt-2">Short application — no credit checks, ever.</p>
-      </div>
-      <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-12" data-aos="fade-up">
-        <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 2</div>
-        <i class="fas fa-search text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
-        <h3 class="text-lg font-semibold text-center text-teal-800">We Review Your Case</h3>
-        <p class="text-sm text-center mt-2">Fast, fair review of eligibility and case merit.</p>
-      </div>
-      <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
-        <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 3</div>
-        <i class="fas fa-clock text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
-        <h3 class="text-lg font-semibold text-center text-teal-800">Approval in 24–48 Hours</h3>
-        <p class="text-sm text-center mt-2">Most approvals in 1–2 business days.</p>
-      </div>
-      <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-12" data-aos="fade-up">
-        <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 4</div>
-        <i class="fas fa-money-check-alt text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
-        <h3 class="text-lg font-semibold text-center text-teal-800">Funds Sent to You</h3>
-        <p class="text-sm text-center mt-2">Wired directly to your account, same day.</p>
-      </div>
-      <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
-        <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 5</div>
-        <i class="fas fa-smile-beam text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
-        <h3 class="text-lg font-semibold text-center text-teal-800">Repay Only If You Win</h3>
-        <p class="text-sm text-center mt-2">No win, no repayment. We're aligned with you.</p>
-      </div>
+<!-- Process Section -->
+<section class="py-16 bg-gray-800">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Getting Help Shouldn't Be Hard.</h2>
     </div>
-  </div>
-</section>
 
-<!-- Vertical Timeline -->
-  <div class="max-w-4xl mx-auto space-y-10 relative">
-    <div class="relative flex items-center" data-aos="fade-up">
-      <div class="w-1/3 flex justify-end pr-4">
-        <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">1</div>
-      </div>
-      <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
-        <div class="flex items-center justify-end gap-3">
-          <h3 class="text-xl font-semibold text-teal-800">Apply Online</h3>
-          <i class="fas fa-file-alt text-teal-600 text-xl"></i>
+    <!-- Horizontal Scroll Steps (Desktop Only) -->
+    <div class="overflow-x-auto pb-4 hidden md:hidden">
+      <div class="flex space-x-8 min-w-[1000px] px-4 items-center">
+        <!-- Step 1 -->
+        <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
+          <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 1</div>
+          <i class="fas fa-file-alt text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
+          <h3 class="text-lg font-semibold text-center text-teal-800">Apply Online</h3>
+          <p class="text-sm text-center mt-2">Short application — no credit checks, ever.</p>
         </div>
-        <p class="mt-2 text-gray-700">Fill out a short application — no credit checks, ever.</p>
-      </div>
-    </div>
-    <div class="relative flex items-center" data-aos="fade-up">
-      <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-left">
-        <div class="flex items-center gap-3">
-          <i class="fas fa-search text-teal-600 text-xl"></i>
-          <h3 class="text-xl font-semibold text-teal-800">We Review Your Case</h3>
+        <!-- Step 2 -->
+        <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-12" data-aos="fade-up">
+          <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 2</div>
+          <i class="fas fa-search text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
+          <h3 class="text-lg font-semibold text-center text-teal-800">We Review Your Case</h3>
+          <p class="text-sm text-center mt-2">Fast, fair review of eligibility and case merit.</p>
         </div>
-        <p class="mt-2 text-gray-700">Our team reviews your eligibility and case merit — fast and fair.</p>
-      </div>
-      <div class="w-1/3 flex justify-start pl-4">
-        <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">2</div>
-      </div>
-    </div>
-    <div class="relative flex items-center" data-aos="fade-up">
-      <div class="w-1/3 flex justify-end pr-4">
-        <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">3</div>
-      </div>
-      <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
-        <div class="flex items-center justify-end gap-3">
-          <h3 class="text-xl font-semibold text-teal-800">Approval in 24–48 Hours</h3>
-          <i class="fas fa-clock text-teal-600 text-xl"></i>
+        <!-- Step 3 -->
+        <div class="min-w-[300px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
+          <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 3</div>
+          <i class="fas fa-clock text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
+          <h3 class="text-lg font-semibold text-center text-teal-800">Approved in 24–48 Hours</h3>
+          <p class="text-sm text-center mt-2">Most approvals in 1–2 business days.</p>
         </div>
-        <p class="mt-2 text-gray-700">Most approvals happen within 1–2 business days.</p>
-      </div>
-    </div>
-    <div class="relative flex items-center" data-aos="fade-up">
-      <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-left">
-        <div class="flex items-center gap-3">
-          <i class="fas fa-money-check-alt text-teal-600 text-xl"></i>
-          <h3 class="text-xl font-semibold text-teal-800">Funds Sent to You</h3>
+        <!-- Step 4 -->
+        <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-12" data-aos="fade-up">
+          <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 4</div>
+          <i class="fas fa-money-check-alt text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
+          <h3 class="text-lg font-semibold text-center text-teal-800">Funds Sent to You</h3>
+          <p class="text-sm text-center mt-2">Wired directly to your account, same day.</p>
+        </div>
+        <!-- Step 5 -->
+        <div class="min-w-[280px] bg-white rounded-xl shadow-lg p-6 flex flex-col items-center mt-0" data-aos="fade-up">
+          <div class="text-sm font-bold text-white bg-green-600 px-3 py-1 rounded-full mb-2">STEP 5</div>
+          <i class="fas fa-smile-beam text-2xl text-white bg-teal-600 p-3 rounded-full mb-3"></i>
+          <h3 class="text-lg font-semibold text-center text-teal-800">Repay Only If You Win</h3>
+          <p class="text-sm text-center mt-2">No win, no repayment. We're aligned with you.</p>
         </div>
-        <p class="mt-2 text-gray-700">Once approved, funds are wired directly to your account, same day.</p>
-      </div>
-      <div class="w-1/3 flex justify-start pl-4">
-        <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">4</div>
       </div>
     </div>
-    <div class="relative flex items-center" data-aos="fade-up">
-      <div class="w-1/3 flex justify-end pr-4">
-        <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">5</div>
-      </div>
-      <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
-        <div class="flex items-center justify-end gap-3">
-          <h3 class="text-xl font-semibold text-teal-800">Repay Only If You Win</h3>
-          <i class="fas fa-smile-beam text-teal-600 text-xl"></i>
+
+    <!-- Vertical Timeline (Mobile Only) -->
+    <div class="block  mt-12">
+      <div class="max-w-4xl mx-auto space-y-10 relative">
+        <!-- Step 1 -->
+        <div class="relative flex items-center" data-aos="fade-up">
+          <div class="w-1/3 flex justify-end pr-4">
+            <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">1</div>
+          </div>
+          <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
+            <div class="flex items-center  gap-3 justify-left">
+              <i class="fas fa-file-alt text-teal-600 text-xl"></i>
+
+              <h3 class="text-xl font-semibold text-teal-800">Apply Online</h3>
+            </div>
+            <p class="mt-2 text-gray-700 text-left">Fill out a short application — no credit checks, ever.</p>
+          </div>
         </div>
-        <p class="mt-2 text-gray-700">No win, no repayment. We're aligned with your outcome — always.</p>
+        <!-- Step 2 -->
+        <div class="relative flex items-center" data-aos="fade-up">
+          <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-left">
+            <div class="flex items-center gap-3">
+              <i class="fas fa-search text-teal-600 text-xl"></i>
+              <h3 class="text-xl font-semibold text-teal-800">We Review Your Case</h3>
+            </div>
+            <p class="mt-2 text-gray-700">Our team reviews your eligibility and case merit — fast and fair.</p>
+          </div>
+          <div class="w-1/3 flex justify-start pl-4">
+            <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">2</div>
+          </div>
+        </div>
+        <!-- Step 3 -->
+        <div class="relative flex items-center" data-aos="fade-up">
+          <div class="w-1/3 flex justify-end pr-4">
+            <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">3</div>
+          </div>
+          <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
+            <div class="flex items-center justify-right gap-3">
+              <i class="fas fa-clock  text-teal-600 text-xl"></i>
+              <h3 class="text-xl font-semibold text-teal-800">24–48 Hours Approvals</h3>
+            </div>
+            <p class="mt-2 text-gray-700 justify-left">Most approvals happen within 1–2 business days.</p>
+          </div>
+        </div>
+        <!-- Step 4 -->
+                <div class="relative flex items-center" data-aos="fade-up">
+          <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-left">
+            <div class="flex items-center gap-3">
+              <i class="fas fa-money-check-alt text-teal-600 text-xl"></i>
+              <h3 class="text-xl font-semibold text-teal-800">Funds Sent to You</h3>
+            </div>
+            <p class="mt-2 text-gray-700">Once approved, funds are wired directly to your account, same day.</p>
+          </div>
+          <div class="w-1/3 flex justify-start pl-4">
+            <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">4</div>
+          </div>
+        </div>
+        <!-- Step 5 -->
+        <div class="relative flex items-center" data-aos="fade-up">
+          <div class="w-1/3 flex justify-end pr-4">
+            <div class="bg-teal-600 text-white font-bold text-3xl px-6 py-4 rounded-lg">5</div>
+          </div>
+          <div class="w-1/2 bg-gray-100 p-6 rounded-lg shadow-md relative text-right">
+            <div class="flex items-center justify-right gap-3">
+              <i class="fas fa-smile-beam  text-teal-600 text-xl"></i>
+              <h3 class="text-xl font-semibold text-teal-800">Repay Only If You Win</h3>
+            </div>
+            <p class="mt-2 text-gray-700 justify-left">No win, no repayment. We're aligned with your outcome — always.</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+</section>
 
-        </div>
-    </section>
 
     <!-- Interactive Tools Section -->
     <section class="py-16 bg-white">