Fix Font-size and styles

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

@@ -1,85 +1,89 @@
 <template>
-  <div class="tw-ml-auto tw-mx-auto tw-relative xll:tw-container">
-    <img
-      :src="reviewbackgroundImage"
-      :srcset="`${reviewbackgroundImage} 400w`"
-      class="tw-h-full tw-w-full tw-object-cover md:tw-hidden"
-      alt="ios-review-image"
-    />
+  <section>
+    <div class="tw-container 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>
     <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-ml-auto tw-mx-auto tw-h-[28.125rem] tw-relative xll:tw-container"
     >
-      <swiper
-        :slidesPerView="1"
-        :centeredSlides="true"
-        :autoplay="{
-          delay: 3000,
-          disableOnInteraction: false,
-        }"
-        :loop="true"
-        :spaceBetween="20"
-        :pagination="pagination"
-        :modules="modules"
-        @swiper="onSwiper"
-        class="swiper-container"
+      <img
+        :src="reviewBackgroundImage"
+        :srcset="`${reviewBackgroundImage} 400w`"
+        class="tw-h-full tw-w-full tw-object-cover md:tw-hidden"
+        alt="ios-review-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%]"
       >
-        <swiper-slide
-          v-for="(client, index) in clients"
-          :key="index"
-          class="tw-cursor-pointer"
+        <swiper
+          :slidesPerView="1"
+          :centeredSlides="true"
+          :autoplay="{
+            delay: 3000,
+            disableOnInteraction: false,
+          }"
+          :loop="true"
+          :spaceBetween="20"
+          :pagination="pagination"
+          :modules="modules"
+          class="swiper-container"
         >
-          <div
-            class="tw-mx-auto sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 sm:tw-text-black-core/[0.87] tw-text-black-900"
+          <swiper-slide
+            v-for="(client, index) in clients"
+            :key="index"
+            class="tw-cursor-pointer tw-my-auto"
           >
             <div
-              class="tw-flex tw-flex-col tw-justify-between tw-items-center tw-object-center tw-mt-11 md:tw-mt-20"
+              class="tw-mx-auto sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-text-white tw-flex tw-flex-col tw-justify-between tw-items-center tw-object-center"
             >
               <div
-                class="tw-font-roboto-medium tw-text-[1.375rem] md:tw-text-[2.25rem] lg:tw-text-[3.125rem] tw-leading-[1.875rem] md:tw-leading-[2.75rem] lg:tw-leading-[3.75rem] tw-transition-all tw-ease tw-duration-500"
+                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>
-              <div
-                class="tw-flex tw-flex-col tw-mt-2.5 sm:tw-mt-5 sm:tw-justify-end"
-              >
+              <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-[11px] md:tw-w-4 tw-h-[11px] md:tw-h-4 tw-text-[#FF3D2E]"
+                    class="fa-star tw-w-5 tw-h-5 md:tw-h-4 footer-icon"
                     icon="star"
                 /></span>
               </div>
               <div class="tw-flex tw-flex-col">
                 <span
-                  class="v2-canopas-gradient-text tw-font-inter-semibold tw-text-[1rem] md:tw-text-[1.625rem]"
+                  class="tw-font-inter-semibold tw-text-base tw-leading-[1.2rem]"
                   >{{ client.name }}</span
                 >
                 <span
-                  class="tw-text-[0.75rem] md:tw-text-[1.25rem] tw-leading-[1.375rem] tw-text-black-core/[0.87]"
+                  class="tw-font-inter-regular tw-text-xs tw-leading-[0.9rem] tw-mt-[0.3rem]"
                   >{{ client.designation }}</span
                 >
               </div>
             </div>
-          </div>
-        </swiper-slide>
-      </swiper>
+          </swiper-slide>
+        </swiper>
+      </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import reviewbackgroundImage from "@/assets/images/ios-app-development/review-background-400w.webp";
+import reviewBackgroundImage from "@/assets/images/ios-app-development/review-background-400w.webp";
 export default {
   data() {
     return {
       swiper: null,
       reading: false,
       modules: [Pagination, Autoplay],
-      reviewbackgroundImage,
-
+      reviewBackgroundImage,
+      activeIndex: 0,
       clients: [
         {
           id: 1,
@@ -94,27 +98,31 @@ export default {
           designation: "Product Manager at Luxe, Morocco",
           review:
             "The Play Store is the hardest app store to get good reviews on, and we've just reached a five-star rating, which has been one of our biggest achievements, partly thanks to Canopas' work.",
+          classname: "tw-scale-100",
         },
         {
           id: 3,
           name: "Rob Eberhard",
           designation: "Founder at ActivScout, Canada",
           review:
             "I was especially impressed with the skills of their backend developer and how well the project manager and she worked with one another to create a  high performing iOS app.",
+          classname: "tw-scale-110",
         },
         {
           id: 4,
           name: "Lisa Weinstein",
           designation: "Founder at Brickandbatten, USA",
           review:
             "There is not enough space to say all the wonderful things I would want to share about Canopas. The team is incredibly helpful, stays calm even when we had to deal with tough issues on our app and always found a way to help us fix whatever was needed or roll out any new features for our app in both the iOS and Android stores.",
+          classname: "tw-scale-125",
         },
         {
           id: 5,
           name: "Cyril Trosset",
           designation: "CTO at Udini, France",
           review:
             "Multiple versions of this Android app have been successfully delivered over time. They are always very responsive on bug resolution. They are very efficient at producing complex interfaces and  high quality apps",
+          classname: "tw-scale-150",
         },
       ],
       pagination: {
@@ -123,6 +131,7 @@ export default {
       },
     };
   },
+
   components: {
     Swiper,
     SwiperSlide,
@@ -131,7 +140,6 @@ export default {
   inject: ["mixpanel"],
 };
 </script>
-
 <style lang="postcss">
 @import "swiper/css";
 </style>