From b0bd9637c32847d1136ab6661032a13be827e9aa Mon Sep 17 00:00:00 2001
From: Priyanka Gour <priyanka.g@canopas.com>
Date: Thu, 5 Oct 2023 16:32:46 +0530
Subject: [PATCH] Add swiper and animation on text

---
 .../ios-app-development/CaseStudySection.vue  | 147 +++++++++++-------
 1 file changed, 89 insertions(+), 58 deletions(-)

diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
index 5c3407657..7f491bc78 100644
--- a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
+++ b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -69,73 +69,100 @@
     </div>
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
-    <div
-      class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
-      v-for="(portfolio, index) in portfolios"
-      :key="index"
+    <swiper
+      :slidesPerView="1"
+      :centeredSlides="true"
+      :spaceBetween="0"
+      :effect="'fade'"
+      :autoplay="{
+        delay: 2000,
+        disableOnInteraction: false,
+      }"
+      :speed="2000"
+      :loop="true"
+      :modules="modules"
+      class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
     >
-      <div
-        :class="portfolio.row1Background"
-        class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
+      <swiper-slide
+        v-for="(portfolio, index) in portfolios"
+        :key="index"
+        class="tw-cursor-pointer"
       >
-        <div class="tw-flex tw-justify-end tw-relative">
-          <h2
-            :class="portfolio.row1Background"
-            class="tw-absolute tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
-          >
-            {{ portfolio.title }}
-          </h2>
-        </div>
         <div
-          class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72"
+          class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px]"
         >
-          <h2
-            class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
-          >
-            {{ portfolio.desktopDescription }}
-          </h2>
-          <span
-            class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
-            >{{ portfolio.subDescription }}</span
-          >
-        </div>
-        <div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
-          <span
-            class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
-            >SKIP</span
+          <div
+            :class="portfolio.row1Background"
+            class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
           >
-        </div>
-      </div>
+            <div class="tw-flex tw-justify-end tw-relative">
+              <div
+                :class="portfolio.row1Background"
+                class="tw-absolute tw-top-[2rem] lg:tw-top-[1rem] xl:tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-20%] 2xll:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
+              >
+                <h2
+                  class="animate__animated animate__fadeInUp tw-duration-1000"
+                >
+                  {{ portfolio.title }}
+                </h2>
+              </div>
+            </div>
+            <div
+              class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 animate__animated animate__fadeInUp tw-duration-1000"
+            >
+              <h2
+                class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
+              >
+                {{ portfolio.desktopDescription }}
+              </h2>
+              <span
+                class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
+                >{{ portfolio.subDescription }}</span
+              >
+            </div>
+            <div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
+              <span
+                class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
+                >SKIP</span
+              >
+            </div>
+          </div>
 
-      <div
-        class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12"
-        :class="portfolio.row2Background"
-      >
-        <div class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end">
-          <img
-            :src="portfolio.image[2]"
-            :srcset="`${portfolio.image[2]} 800w`"
-            :alt="portfolio.title"
-            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
-            loading="lazy"
-          />
-        </div>
-        <div class="tw-flex tw-flex-col tw-basis-[50%]">
-          <img
-            :src="portfolio.image[3]"
-            :srcset="`${portfolio.image[3]} 800w`"
-            :alt="portfolio.title"
-            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
-            loading="lazy"
-          />
+          <div
+            class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
+            :class="portfolio.row2Background"
+          >
+            <div
+              class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp tw-duration-1000"
+            >
+              <img
+                :src="portfolio.image[2]"
+                :srcset="`${portfolio.image[2]} 800w`"
+                :alt="portfolio.title"
+                class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
+                loading="lazy"
+              />
+            </div>
+            <div
+              class="tw-flex tw-flex-col tw-basis-[50%] animate__animated animate__fadeInUp tw-duration-1000"
+            >
+              <img
+                :src="portfolio.image[3]"
+                :srcset="`${portfolio.image[3]} 800w`"
+                :alt="portfolio.title"
+                class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
+                loading="lazy"
+              />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </swiper-slide>
+    </swiper>
   </div>
 </template>
 
 <script type="module">
-import { Autoplay } from "swiper/modules";
+import { Autoplay, EffectFade } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import mobile_justly1 from "@/assets/images/ios-app-development/casestudy/mobile/justly1.webp";
 import mobile_justly2 from "@/assets/images/ios-app-development/casestudy/mobile/justly2.webp";
@@ -154,7 +181,7 @@ import desktop_togness2 from "@/assets/images/ios-app-development/casestudy/togn
 export default {
   data() {
     return {
-      modules: [Autoplay],
+      modules: [Autoplay, EffectFade],
       activeIndex: 0,
       swiperRef: 0,
       portfolios: [
@@ -234,6 +261,10 @@ export default {
   },
 };
 </script>
-<style lang="postcss">
+<style lang="postcss" scoped>
 @import "swiper/css";
+@import "swiper/css/effect-fade";
+.swiper-container {
+  @apply tw-mx-0;
+}
 </style>