From 1a48de215010868d59c676244c7cc06c317143ed Mon Sep 17 00:00:00 2001
From: Ashish <ashish.k@canopas.com>
Date: Fri, 27 Oct 2023 14:01:05 +0530
Subject: [PATCH] changes in the spacebetween slides

---
 .../DevelopmentSection.vue                    | 147 ++++++++++--------
 1 file changed, 78 insertions(+), 69 deletions(-)

diff --git a/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue b/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
index 418b134f5..28243758e 100644
--- a/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
+++ b/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
@@ -62,83 +62,84 @@
     </div>
 
     <!-- Flutter Desktop Swiper UI -->
-    <div class="tw-hidden lg:tw-flex tw-container tw-mt-[4.5rem]">
-      <div class="swiper-content tw-flex tw-flex-col tw-flex-1">
-        <swiper
-          :slidesPerView="1.5"
-          :spaceBetween="80"
-          :direction="'vertical'"
-          :speed="1500"
-          :mousewheel="{
-            forceToAxis: true,
-            sensitivity: 1,
-            releaseOnEdges: true,
-          }"
-          :keyboard="true"
-          :modules="modules"
-          class="swiper-container tw-h-[600px]"
-          @slideChange="activeIndex = $event.activeIndex"
+    <div
+      class="tw-hidden lg:tw-flex tw-container tw-mt-[4.5rem] tw-relative tw-overflow-hidden"
+    >
+      <hr
+        class="tw-absolute tw-h-screen tw-left-[50%] tw-border-[0.1px] tw-opacity-[0.5]"
+      />
+      <swiper
+        :slidesPerView="1.5"
+        :spaceBetween="20"
+        :direction="'vertical'"
+        :speed="1500"
+        :mousewheel="{
+          forceToAxis: true,
+          sensitivity: 1,
+          releaseOnEdges: true,
+        }"
+        :modules="modules"
+        class="swiper-container tw-h-[600px]"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(item, index) in items"
+          :key="index"
+          :class="[item.classname,
+            {
+              'tw-opacity-50': activeIndex !== index,
+              'tw-opacity-100':
+                activeIndex === index ||
+                (activeIndex === item.length && index === 0),
+            },
+          ]"
         >
-          <swiper-slide
-            v-for="(item, index) in items"
-            :key="index"
-            :class="[
-              {
-                'tw-opacity-50': activeIndex !== index,
-                'tw-opacity-100':
-                  activeIndex === index ||
-                  (activeIndex === item.length && index === 0),
-              },
-            ]"
-          >
-            <div class="slide-container tw-h-full">
-              <div
-                :class="[
-                  'tw-flex tw-gap-[2.5rem]',
-                  {
-                    'tw-flex-row tw-text-right ': index % 2 === 0,
-                    'tw-flex-row-reverse tw-text-left': index % 2 !== 0,
-                  },
-                ]"
-              >
-                <div class="tw-flex tw-flex-col tw-flex-1 tw-gap-[1.5rem]">
-                  <div class="header-3">
-                    <span v-html="item.desktoptitle"></span>
-                  </div>
-                  <div class="sub-h3-regular">
-                    <p
-                      v-for="(list, listIndex) in item.description"
-                      :key="listIndex"
-                    >
-                      {{ list }}
-                    </p>
-                  </div>
+          <div class="slide-container tw-h-full">
+            <div
+              :class="[               
+                'tw-flex tw-gap-[2.5rem]',
+                {
+                  'tw-flex-row tw-text-right ': index % 2 === 0,
+                  'tw-flex-row-reverse tw-text-left': index % 2 !== 0,
+                },
+              ]"
+            >
+              <div class="tw-flex tw-flex-col tw-flex-1 tw-gap-[1.5rem]">
+                <div class="header-3">
+                  <span v-html="item.desktoptitle"></span>
                 </div>
-                <hr class="tw-h-screen tw-border-[0.1px] tw-opacity-[0.5]" />
-                <div
-                  class="tw-flex-1"
-                  :class="{ 'tw-relative': index % 2 !== 0 }"
-                >
-                  <img
-                    :src="item.image"
-                    alt="development-service-image"
-                    class="w-full h-full object-cover"
-                    :class="{
-                      'tw-absolute tw-right-0': index % 2 !== 0,
-                    }"
-                    loading="lazy"
-                  />
+                <div class="sub-h3-regular">
+                  <p
+                    v-for="(list, listIndex) in item.description"
+                    :key="listIndex"
+                  >
+                    {{ list }}
+                  </p>
                 </div>
               </div>
+              <div
+                class="tw-flex-1"
+                :class="{ 'tw-relative': index % 2 !== 0 }"
+              >
+                <img
+                  :src="item.image"
+                  alt="development-service-image"
+                  class="w-full h-full object-cover"
+                  :class="{
+                    'tw-absolute tw-right-0': index % 2 !== 0,
+                  }"
+                  loading="lazy"
+                />
+              </div>
             </div>
-          </swiper-slide>
-        </swiper>
-      </div>
+          </div>
+        </swiper-slide>
+      </swiper>
     </div>
   </div>
 </template>
 <script type="module">
-import { Autoplay, Mousewheel, Keyboard, Pagination } from "swiper/modules";
+import { Autoplay, Mousewheel, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import consultation from "@/assets/images/flutter-app-development/development/consultation.webp";
 import design from "@/assets/images/flutter-app-development/development/design.webp";
@@ -148,7 +149,7 @@ import maintainance from "@/assets/images/flutter-app-development/development/ma
 export default {
   data() {
     return {
-      modules: [Autoplay, Mousewheel, Keyboard, Pagination],
+      modules: [Autoplay, Mousewheel, Pagination],
       activeIndex: 0,
       items: [
         {
@@ -174,6 +175,7 @@ export default {
           description: [
             "We transform your unique business needs into robust, efficient, and beautifully designed mobile apps. We leverage Flutter's single codebase feature, allowing us to expedite the development process without compromising on the app's performance, feel, or look. Our team employs Flutter's hot-reload functionality to build dynamic, high-quality applications that offer a native experience on both iOS and Android platforms. From feature-rich eCommerce apps to interactive social networking apps, we deliver custom Flutter solutions that align with your business goals and deliver a seamless user experience across all devices. ",
           ],
+          classname:" !tw-mb-4 xl:!tw-mb-16"
         },
         {
           title: "Flutter App Deployment",
@@ -182,6 +184,7 @@ export default {
           description: [
             "We understand that app development doesn't end with coding. Ensuring that your application gets successfully deployed on the App Store and Google Play Store is equally important. Our team navigates the complexities of app submission guidelines, takes care of the application's configuration, manages the app store metadata, and executes a successful launch. We also monitor the app's performance post-launch, ensuring smooth functioning and immediate troubleshooting. Experience a worry-free deployment and watch your Flutter application take flight with our diligent deployment services.",
           ],
+          classname:" !tw--mb-6 xl:!tw-mb-4"
         },
         {
           title: "Maintenance and Support",
@@ -190,10 +193,16 @@ export default {
           description: [
             "We believe that maintaining an application is as crucial as developing it. After your app's successful deployment, we provide ongoing support to ensure its optimal performance, stability, and user satisfaction. Our services include regular updates, bug fixes, performance monitoring, code optimization, and adding new features as per market trends or user feedback. With our round-the-clock support, you can rest assured that your application stays up-to-date,secure, and relevant in the ever-evolving app market, ensuring its long-term success and user engagement.",
           ],
+          classname:"!tw-mb-4"
         },
       ],
     };
   },
+  methods: {
+    onSlideChange(event) {
+      this.activeIndex = event.activeIndex;
+    },
+  },
   computed: {
     item() {
       return Array(1).fill(this.items).flat();