Add Desktop view in success story

vue-frontend/src/components/ios-app-development/SuccessStory.vue

@@ -1,30 +1,31 @@
 <template>
   <section class="tw-mb-20">
-    <div class="tw-container tw-mb-7 tw-mx-auto tw-text-center">
+    <div class="tw-container tw-mt-36 tw-mb-7 tw-mx-auto tw-text-center">
       <span
         class="tw-tracking-[-4%] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.796875rem] lg:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
       >
         Success Stories</span
       >
     </div>
+    <!-- Mobile UI start -->
     <div
-      class="tw-ml-auto tw-mx-auto tw-h-[30rem] tw-relative xll:tw-container tw-overflow-hidden"
+      class="tw-ml-auto md:tw-hidden tw-mx-auto tw-h-[30rem] tw-relative xll:tw-container tw-overflow-hidden"
     >
       <img
         :src="reviewBackgroundImage"
         :srcset="`${reviewBackgroundImage} 400w`"
-        class="tw-h-full tw-w-full tw-object-cover md:tw-hidden tw-ease-in-out tw-duration-1000"
+        class="tw-h-full tw-w-full tw-object-cover tw-ease-in-out tw-duration-1000"
         alt="ios-review-image"
         id="scaling-image"
       />
       <div
-        class="tw-container swiper-content md:tw-hidden tw-absolute tw-p-4 tw-w-full tw-text-center tw-text-[#FFF] tw-transform tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 xl:tw-w-[80%] md:tw-top-[49%] lg:tw-top-[48%] 2xl:tw-w-[49%] xl2:tw-w-[60%] 2xll:tw-w-[50%] xll:tw-w-[65%]"
+        class="tw-container swiper-content tw-absolute tw-p-4 tw-w-full tw-text-center tw-text-[#FFF] tw-transform tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 xl:tw-w-[80%] md:tw-top-[49%] lg:tw-top-[48%]"
       >
         <swiper
           :slidesPerView="1"
           :centeredSlides="true"
           :autoplay="{
-            delay: 3000,
+            delay: 2000,
             disableOnInteraction: false,
           }"
           :speed="3000"
@@ -44,14 +45,15 @@
             >
               <div
                 class="tw-font-inter-semibold tw-text-lg tw-leading-[1.6875rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-2%]"
-                v-html="client.review"
-              ></div>
+              >
+                {{ client.review }}
+              </div>
               <div class="tw-flex tw-flex-col tw-mt-8 tw-mb-2.5">
                 <span class="tw-flex tw-flex-row">
                   <font-awesome-icon
                     v-for="i in 5"
                     :key="i"
-                    class="fa-star tw-w-5 tw-h-5 md:tw-h-4 footer-icon"
+                    class="fa-star tw-w-5 tw-h-5 footer-icon"
                     icon="star"
                 /></span>
               </div>
@@ -70,6 +72,62 @@
         </swiper>
       </div>
     </div>
+    <!-- Mobile UI END -->
+    <!-- Desktop UI -->
+    <div
+      class="tw-w-full tw-h-[630px] lg:tw-h-[750px] tw-relative tw-overflow-hidden before:tw-content-[''] before:tw-absolute before:tw-bottom-[-10%] before:tw-w-full before:tw-bg-[#fff] before:tw-h-[10%] before:tw-rounded-[50%] before:tw-shadow-[15px_1px_0_100px_rgba(255,255,255)] top-curve xll:tw-container tw-hidden tw-bg-[#FFF8F5] tw-h-[646px] md:tw-flex tw-justify-center tw-items-center"
+    >
+      <swiper
+        :slidesPerView="1.1"
+        :centeredSlides="true"
+        :speed="3000"
+        :loop="true"
+        :spaceBetween="20"
+        :pagination="pagination"
+        :modules="modules"
+        class="swiper-container"
+      >
+        <swiper-slide
+          v-for="(client, index) in clients"
+          :key="index"
+          class="tw-cursor-pointer tw-flex tw-justify-center tw-items-center"
+        >
+          <div
+            class="tw-mx-auto tw-text-white tw-flex tw-flex-row tw-items-center tw-object-center"
+          >
+            <div
+              class="tw-flex tw-flex-col tw-bg-white tw-h-[337px] tw-w-[80rem] lg:tw-w-[50rem] tw-text-left"
+            >
+              <div class="tw-my-auto tw-p-12">
+                <span class="tw-flex tw-flex-row tw-justify-left tw-mb-2.5">
+                  <font-awesome-icon
+                    v-for="i in 5"
+                    :key="i"
+                    class="fa-star tw-w-6 tw-h-6 footer-icon"
+                    icon="star"
+                /></span>
+                <div class="tw-flex tw-flex-col">
+                  <span
+                    class="tw-font-inter-semibold tw-text-black-core/[0.87] tw-text-xl tw-leading-[1.875rem]"
+                    >{{ client.name }}</span
+                  >
+                  <span
+                    class="tw-font-inter-regular tw-text-black-core/[0.60] tw-text-[1.125rem] tw-leading-[1.6875rem] tw-mt-[0.3rem]"
+                    >{{ client.designation }}</span
+                  >
+                </div>
+              </div>
+            </div>
+            <div
+              class="tw-p-12 tw-font-inter-medium tw-text-black-core/[0.87] tw-text-[1.75rem] tw-leading-[2.625rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-2%]"
+            >
+              {{ client.review }}
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- Desktop UI END-->
   </section>
 </template>
 
@@ -134,7 +192,7 @@ export default {
         scaleCount = 0;
       }
     }
-    setInterval(scaleImage, 3000);
+    setInterval(scaleImage, 5000);
   },
   components: {
     Swiper,
@@ -146,4 +204,16 @@ export default {
 </script>
 <style lang="postcss">
 @import "swiper/css";
+
+.top-curve::after {
+  /* before:tw-content-none before:tw-absolute before:tw-bottom-[-10%] before:tw-w-full before:tw-bg-[#fff] before:tw-h-[10%] before:tw-rounded-[50%] before:tw-shadow-[15px_1px_0_100px_rgba(255,255,255,0.3)] */
+  content: "";
+  position: absolute;
+  top: -8%;
+  width: 100%;
+  background-color: #fff;
+  height: 10%;
+  border-radius: 50%;
+  box-shadow: 15px 1px 0px 100px #fff;
+}
 </style>