undefined - Follow Up Deployment

index.html

@@ -221,11 +221,58 @@
       overflow-x: auto;
     }
 
+    .snip1197 {
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  transition: transform 0.3s, box-shadow 0.3s, opacity 0.5s;
+  opacity: 0;
+}
+.snip1197 img {
+  width: auto;
+  height: auto;
+}
+.snip1197:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
+}
+.snip1197.opacity-on {
+  opacity: 1;
+}
+.snip1197 figcaption {
+  position: relative;
+}
+.snip1197 blockquote {
+  position: relative;
+  font-style: italic;
+  line-height: 1.6;
+}
+.snip1197 blockquote:before {
+  content: "\201C";
+  position: absolute; font-size: 3rem; opacity: 0.2; top: -10px; left: 10px;
+}
+.snip1197 .arrow {
+  position: absolute; top: 30px; left: 100%;
+  border-left: 0 solid transparent;
+  border-right: 25px solid transparent;
+  border-top: 25px solid #fff;
+}
+.snip1197 .author {
+  position: absolute;
+  bottom: -40px;
+}
+.carousel-item {
+  position: absolute; top:0; left:0;
+}
+
+
     </style>
   
 
 
 <script>
+
         window.addEventListener('scroll', function () {
             const bar = document.querySelector('.sticky-trust-bar');
             if (window.scrollY > 100) {
@@ -258,6 +305,21 @@
 
 
 document.addEventListener('DOMContentLoaded', () => {
+    const items = document.querySelectorAll('.carousel-item');
+    let idx = 0;
+    function showSlide(i) {
+      items.forEach((el, j) => {
+        el.style.zIndex = j === i ? 1 : 0;
+        el.classList.toggle('opacity-on', j === i);
+      });
+    }
+    showSlide(idx);
+    document.getElementById('next').onclick = () => {
+      idx = (idx + 1) % items.length; showSlide(idx);
+    };
+    document.getElementById('prev').onclick = () => {
+      idx = (idx - 1 + items.length) % items.length; showSlide(idx);
+    };
 
     AOS.init({
       once: true,
@@ -816,53 +878,61 @@ document.addEventListener('DOMContentLoaded', () => {
         </div>
     </section>
 
-    <!-- Testimonial Section -->
-    <section class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Real People. Real Relief.</h2>
-            </div>
+<section class="py-16 bg-white">
+  <div class="container mx-auto px-4 text-center mb-12">
+    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
+      Real People. Real Relief.
+    </h2>
+  </div>
+  <div class="relative max-w-3xl mx-auto">
+    <button id="prev" class="absolute left-0 top-1/2 transform -translate-y-1/2 text-2xl">‹</button>
+    <button id="next" class="absolute right-0 top-1/2 transform -translate-y-1/2 text-2xl">›</button>
+    <div id="carousel" class="overflow-hidden relative">
+      <!-- Slide 1: Marcus & Family -->
+      <figure class="snip1197 carousel-item flex flex-row bg-gray-50 p-6 mb-4 rounded-lg shadow-lg hover:shadow-xl">
+        <figcaption class="w-3/5 relative">
+          <blockquote class="italic text-gray-700 text-left p-6">
+            "They didn't just fund my case—they respected my dignity. No hidden fees, no surprises."
+          </blockquote>
+          <div class="arrow"></div>
+        </figcaption>
+        <img src="https://milestone.vovov.cc/images/marcus.png" alt="Marcus and his family" class="w-2/5 object-cover rounded-r-lg" />
+        <div class="author bg-teal-600 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
+          <h5 class="font-bold">Marcus <span>- Civil Rights Plaintiff</span></h5>
+        </div>
+      </figure>
+      <!-- Slide 2: Sarah -->
+      <figure class="snip1197 carousel-item flex flex-row bg-teal-50 p-6 mb-4 rounded-lg border border-teal-200">
+        <figcaption class="w-3/5 relative">
+          <blockquote class="italic text-gray-700 text-left p-6">
+            "I recommend Milestone to all my clients. Finally, an ethical option that puts plaintiffs first."
+          </blockquote>
+          <div class="arrow"></div>
+        </figcaption>
+        <img src="https://milestone.vovov.cc/images/sarah.png" alt="Sarah Chen" class="w-2/5 object-cover rounded-r-lg" />
+        <div class="author bg-teal-700 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
+          <h5 class="font-bold">Sarah Chen, Esq. <span>- Personal Injury Attorney</span></h5>
+        </div>
+      </figure>
+      <!-- Slide 3: Robert -->
+      <figure class="snip1197 carousel-item flex flex-row bg-teal-50 p-6 mb-4 rounded-lg border border-teal-200">
+        <figcaption class="w-3/5 relative">
+          <blockquote class="italic text-gray-700 text-left p-6">
+            "The difference in rates is staggering. Milestone saves my clients thousands in interest."
+          </blockquote>
+          <div class="arrow"></div>
+        </figcaption>
+        <img src="https://milestone.vovov.cc/images/robert.png" alt="Robert Martinez" class="w-2/5 object-cover rounded-r-lg" />
+        <div class="author bg-teal-700 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
+          <h5 class="font-bold">Robert Martinez, Esq. <span>- Employment Law</span></h5>
+        </div>
+      </figure>
+    </div>
+  </div>
+</section>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <!-- Video Testimonial -->
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md">
-                    <div class="aspect-w-16 aspect-h-9 mb-4 bg-black rounded-lg overflow-hidden">
-                        <div class="w-full h-full flex items-center justify-center text-white">
-                            <i class="fas fa-play text-4xl"></i>
-                        </div>
-                    </div>
-                    <blockquote class="mb-4 italic text-gray-700">
-                        "With Milestone's help, I could finally take a breath. I wasn't forced into settling just to make rent. Their 10% rate saved me thousands compared to other lenders."
-                    </blockquote>
-                    <p class="font-bold text-teal-600">— Tanya, Personal Injury Plaintiff ⭐⭐⭐⭐⭐</p>
-                </div>
 
-                <!-- Text Testimonial -->
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md">
-                    <blockquote class="mb-4 italic text-gray-700">
-                        "They didn't just fund my case—they respected my dignity. No hidden fees, no surprises."
-                    </blockquote>
-                    <p class="font-bold text-teal-600">— Marcus, Civil Rights Plaintiff ⭐⭐⭐⭐⭐</p>
-                </div>
-            </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-                <div class="bg-teal-50 p-6 rounded-xl border border-teal-200">
-                    <blockquote class="mb-2 italic text-gray-700">
-                        "I recommend Milestone to all my clients. Finally, an ethical option that puts plaintiffs first."
-                    </blockquote>
-                    <p class="font-bold text-teal-700">— Sarah Chen, Esq., Personal Injury Attorney</p>
-                </div>
-                <div class="bg-teal-50 p-6 rounded-xl border border-teal-200">
-                    <blockquote class="mb-2 italic text-gray-700">
-                        "The difference in rates is staggering. Milestone saves my clients thousands in interest."
-                    </blockquote>
-                    <p class="font-bold text-teal-700">— Robert Martinez, Esq., Employment Law</p>
-                </div>
-            </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">