Add slide-to-next section onclick

canopas · Oct 9, 2023 · f2dca1e · f2dca1e
1 parent 29389dc
commit f2dca1e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-my-16 xs:tw-my-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col xll:tw-container"
+    class="tw-my-16 xs:tw-my-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col xll:tw-container tw-sticky tw-top-0"
   >
     <div class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center">
       <h2
@@ -73,18 +73,18 @@
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
-        :spaceBetween="0"
+        :spaceBetween="40"
         :effect="'fade'"
         :mousewheel="true"
         :speed="2000"
         :loop="true"
         :modules="modules"
-        class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
+        class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] xll:tw-h-[780px] tw-mt-20"
         @swiper="setSwiperRef"
       >
         <swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
           <div
-            class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px]"
+            class="tw-hidden md:tw-flex tw-flex-row tw-justify-center lg:tw-h-[780px] xl:tw-h-[1060px] xll:tw-h-[780px]"
           >
             <div
               :class="portfolio.row1Background"
@@ -116,6 +116,7 @@
                 >
               </div>
               <div
+                @click="$emit('scroll-to-next')"
                 class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%] tw-cursor-pointer"
               >
                 <span

diff --git a/vue-frontend/src/pages/ios-app-development.vue b/vue-frontend/src/pages/ios-app-development.vue
@@ -8,8 +8,8 @@
     <Header />
     <LandingSection ref="iosLanding" />
     <DevelopmentSection ref="iosDevelopment" />
-    <CaseStudySection ref="iosCaseStudy" />
-    <CtaSection ref="iosCta1" />
+    <CaseStudySection ref="iosCaseStudy" v-on:scroll-to-next="scrollToCta" />
+    <CtaSection id="ctasection" ref="iosCta1" />
     <SuccessStorySection ref="iosSuccessstory" />
     <BlogSection ref="iosblog" />
     <CtaSection2 ref="iosCta2" />
@@ -104,6 +104,11 @@ export default {
         this.mixpanel.track(event);
       }
     },
+    scrollToCta() {
+      var ctaDiv = document.getElementById("ctasection");
+      var top = ctaDiv.offsetTop;
+      window.scrollTo({ top: top, behavior: "smooth" });
+    },
   },
   beforeRouteEnter(to, from, next) {
     if (!config.SHOW_IOS_APP_DEVELOPMENT_PAGE) {